63
1 What do Product / UX Designers do? Derrick Ho Sahil Khoja Andrew Aquino Sofie Cornelis Aasta Gandhi Jerica Huang WiCC x CUAppDev ×

What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

1

What do Product / UX Designers do?

Derrick Ho Sahil Khoja Andrew Aquino

Sofie Cornelis Aasta Gandhi Jerica Huang

WiCC x CUAppDev

×

Page 2: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

2 WiCC x CUAppDev

Overview

WHAT DO DESIGNERS DO?

Page 3: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

What is Design?1. Introduction2. Design Challenge3. Review4. Design Challenge (pt. 2)5. Debunking Product Design6. Q&A

3 WiCC x CUAppDev

Overview

Page 4: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

4

Derrick HoSchool of Hotel Administration • Class of 2017

Experience: • Incoming Buzzfeed Product Design Intern• Candidate for MHCI+D program at University of

Washington• Previous Cisco Product Designer Intern• Instructor for Intro to Digital Product Design (INFO 1998)• Senior Designer on CUAppDev

WiCC x CUAppDev

Introduction

WiCC x CUAppDev

Page 5: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

5 WiCC x CUAppDev

Sahil KhojaInformation Science • Class of 2019

Experience: • Incoming Facebook Product Design Intern• Former Intuit Product Design Intern• Instructor for Intro to Digital Product Design (INFO 1998)• Senior Designer on CUAppDev

Page 6: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

6 WiCC x CUAppDev

Andrew AquinoComputer Science • Class of 2017

Experience: • Incoming Product Designer at Facebook• Previous Facebook Product Design Intern• Previous Buzzfeed Product Design Intern• Lead for Intro to Digital Product Design (INFO 1998)• Design Manager on CUAppDev

Page 7: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

7 WiCC x CUAppDev

Sofie CornelisInformation Science • Class of 2019

Experience: • Incoming Software Engineer Intern at Google• Previous Software Engineer Intern at Google• Vice President of WICC

Page 8: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

8 WiCC x CUAppDev

Aasta Gandhi Electrical & Computer Engineering• Class of 2019

Experience: • Incoming Engineer at Intel• Previous Software Engineer at Verition Fund

Management• Co-Career Development Director of WICC

Page 9: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

9 WiCC x CUAppDev

Jerica HuangComputer Science • Class of 2018

Experience: • Incoming Software Engineer Intern at Google• Previous Engineering Intern at Microsoft• Co-Career Development Director of WICC

Page 10: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Design Challenge

10 WiCC x CUAppDev

Design Challenge

Page 11: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Design Challenge

Design an alarm clock for college students.

WiCC x CUAppDev

Design Challenge

Page 12: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Presentation

12 WiCC x CUAppDev

Design Challenge

Page 13: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Design Challenge Review

13 WiCC x CUAppDev

Review

Page 14: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

1. Overview

What is design thinking and how is it any different than anything else?

2. Structure

How is design thinking structured and what goes into the process of executing on an idea.

3. Execution

How do we go about designing a solution and what should it look like?

14 WiCC x CUAppDev

How to Better Approach DesignReview

Page 15: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

2. Structure

How is design thinking structured and what goes into the process of executing on an idea.

3. Execution

How do we go about designing a solution and what should it look like?

15 WiCC x CUAppDev

How to Better Approach DesignReview

Page 16: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

3. Execution

How do we go about designing a solution and what should it look like?

16 WiCC x CUAppDev

How to Better Approach DesignReview

Page 17: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

17

Every company has their own definition of design thinking but the core of each method centers of the people problem.

WiCC x CUAppDev

OverviewReview

Page 18: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

18

As a college student, I want to be able wake up on time for my classes, but I am unable to do so because I don’t want to disturb my roommate and I sleep too late.

WiCC x CUAppDev

OverviewReview

Page 19: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

19 WiCC x CUAppDev

Difference in Design Thinking

The Loop - Observe, Reflect, Make: Understand the present and envision the future in a continuous cycle of observing, reflecting, and making.

IBM

IDEO

Review

Page 20: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

20 WiCC x CUAppDev

Difference in Design Thinking

5 Phases of Design Thinking: A creative approach to problem solving that starts with people and ends with innovative solutions that are tailor made to to suit their needs.

IDEO

Intro DPD

Review

Page 21: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

21 WiCC x CUAppDev

Difference in Design Thinking

Double Diamond: Approach the problem without getting too deep into the specifics and allow your core people problem to drive your decisions

Intro DPD

Review

Page 22: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

22 WiCC x CUAppDev

Review

KNOW YOUR USERS

Page 23: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Name of Project

Design thinking is a human-centered approach to innovation that draws from the designer's toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success”

Tim Brown President and CEO of IDEO

23 WiCC x CUAppDev

Review

Page 24: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

24

How do you break down a problem and what should you focus on?

WiCC x CUAppDev

StructureReview

Page 25: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

25 WiCC x CUAppDev

StructureReview

Surface

Skeleton

Structure

Scope

Strategy

Surface

Skeleton

Structure

Scope

Strategy

Page 26: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

26 WiCC x CUAppDev

StructureReview

Surface

Skeleton

Structure

Scope

Strategy

Surface

Skeleton

Structure

Scope

Strategy

Page 27: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Who is your User Exactly?

27

Who is your target audience and what makes them so special?

WiCC x CUAppDev

Review

Page 28: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

28 WiCC x CUAppDev

COLLEGE STUDENTS

Review

Page 29: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Who is your User Exactly?

29 WiCC x CUAppDev

Roommate Awareness

Inconsistent Class Times

Lazy

Late Night

Napping

Abnormal Energy Levels

Social

Forgetfulness

Review

Page 30: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Understanding the Solution

30

What is the solution you’re creating and what are the components of that solution?

WiCC x CUAppDev

Review

Page 31: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

31 WiCC x CUAppDev

HOW DO PEOPLE WAKE UP

Review

Page 32: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

32 WiCC x CUAppDev

HOW DO PEOPLE WAKE UP

Review

Page 33: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

33 WiCC x CUAppDev

HOW DO PEOPLE WAKE UP

Review

Page 34: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Components of the Solution

34 WiCC x CUAppDev

Robot Hand Slapping

Sunlight

Surprise

Noise

Vibrations

Activity

Smell

Social Activity

Review

Page 35: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

35

Always refer back to the people problem.

WiCC x CUAppDev

ExecutionReview

Page 36: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

36

1. Ask questions to specify the challenge2. Ask about the users and their context

3. Think about what the solution is comprised of4. Figure out the people problem

5. Summarize the story, talk about alternatives, improvements or other use cases

WiCC x CUAppDev

How to Approach a Design ChallengeReview

Page 37: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

37 WiCC x CUAppDev

Review

BAD IDEAS ARE GREAT

Page 38: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

38

Problem: How do we design an alarm clock for college students?

WiCC x CUAppDev

Bad Ideas are GreatReview

Page 39: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

39

I would have every day be slope day so I feel excited to wake up and hang out with my friends

WiCC x CUAppDev

Problem: How do we design an alarm clock for college students?

Page 40: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

40

I would have every day be slope day so I feel excited to wake up and hang out with my friends

Slope day → Build excitement, Physical activityFriends → Social, Face to Face Interaction

WiCC x CUAppDev

Problem: How do we design an alarm clock for college students?

Page 41: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

41

Group your ideas together and start finding themes/trends

WiCC x CUAppDev

Organizing Out your IdeasReview

Page 42: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Problem: Improve quality of comments

How might we: Facilitate discussion

How might we: Validate people’s opinions

How might we: Allow users to articulate their thoughts better How might we:

Mitigate confrontation

How might we: Make the conversation easier to follow

How might we: Censor comments

How might we:Remove spam (@ tags)

How might we: Better articulate emotion behind comments

How might we: Make comments more private

Review

Page 43: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

How might we: Facilitate discussion

How might we: Allow users to articulate their thoughts better

How might we: Make the conversation easier to follow

How might we: Censor comments

How might we:Remove spam (@ tags)

How might we: Make comments more private

How might we: Validate people’s opinions

How might we: Mitigate confrontation

How might we: Better articulate emotion behind comments

Better organize content FilteringCater to user emotions

Review

Page 44: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Design Challenge (pt. 2)

44 WiCC x CUAppDev

Design Challenge (pt. 2)

Page 45: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Design Challenge

Design a keyboard for the elderly.

Remember: Think about who your user is, what a ‘keyboard’ is, and figure out the people problem

WiCC x CUAppDev

Design Challenge (pt. 2)

Page 46: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Presentation

46 WiCC x CUAppDev

Design Challenge (pt. 2)

Page 47: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Debunking Product Design

47 WiCC x CUAppDev

What is Product Design

Page 48: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Debunking Product Design1. Day in the life of a product designer2. Industry tools you should know3. Collaboration in the industry

48 WiCC x CUAppDev

What is Product Design

Page 49: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Day in the Life of a Product Designer

49

Day to day activities for any product designer includes meetings, meetings, meetings, design, and meetings.

WiCC x CUAppDev

What is Product Design

Page 50: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

50 WiCC x CUAppDev

What is Product Design

Page 51: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Day in the Life of a Product Designer

51

A designers role is to balance the needs of the user and the opinions of those involved in the creation of the product.

WiCC x CUAppDev

What is Product Design

Page 52: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Day in the Life of a Product Designer

52

A designers role is to balance the needs of the user and the opinions of those involved in the creation of the product.

WiCC x CUAppDev

Owners Marketing Product Management Developers Front End Engineers

Page 53: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Day in the Life of a Product Designer

53

A designers role is to balance the needs of the user and the opinions of those involved in the creation of the product.

WiCC x CUAppDev

Other Designers Users Edge Case Users

Page 54: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Industry Toolkit

54

What tools are used throughout the industry?

WiCC x CUAppDev

What is Product Design

Page 55: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Design 101 Starter Pack

55 WiCC x CUAppDev

What is Product Design

Page 56: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

56 WiCC x CUAppDev

Tools

Mocking

Prototyping

Sketch AdobeHand-drawn

Framer.JS Principle Origami

What is Product Design

InVision

Branding

Medium Personal Site

Page 57: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

57 WiCC x CUAppDev

Tools

Sketch

What is Product Design

• Most widely used tool• Mac only• Easy to learn

Page 58: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

58 WiCC x CUAppDev

Tools

Invision

What is Product Design

• Widely used prototyping tools• Webapp• Easy to learn

Page 59: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

59 WiCC x CUAppDev

Tools

Origami

What is Product Design

• More in depth• Mac only• UI Based

Page 60: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

60 WiCC x CUAppDev

Tools

Framer.JS

What is Product Design

• Mac only• Code based

Page 61: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

61 WiCC x CUAppDev

Tools

Principle

What is Product Design

• Most widely used tool• Mac only• Easy to learn

Page 62: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Collaboration

62

Where do product designers fit in with the rest of the team and how does collaboration work in the industry?

WiCC x CUAppDev

What is Product Design

Page 63: What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Q&A

63 WiCC x CUAppDev

Q&A