Becoming a Unicorn: Going From Graphic to UX Design

Presented by:

FRED BEECHER

BECOMING A UNICORN: GETTING INTO UX FROM VISUAL DESIGN

@fred_beecher :: #uxnicorns

@fred_beecher :: #uxnicorns

@fred_beecher :: #uxnicorns

@fred_beecher :: #uxnicorns

@fred_beecher :: #uxnicorns

FROM VISUAL TO UX DESIGNKnowledge

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

PeopleCommunication

Human Perception

Cognitive Psychology

Empathy

Listening

ProcessExperimental

Critique

Data-based decision making

Focus on problems

PracticeJUST DO IT

Internship

Choose your target

Network

Show your work

Quck Learner

Curiosity about Tech

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

Curiosity about people

Thick-skinned

Passionate

✔

✔

✔

✔

✔

✔

✔

@fred_beecher :: #uxnicorns deviantart: FaJaR2

LEARN QUICKLY

@fred_beecher :: #uxnicorns

READ

® 2013 Fred Beecher

HOMEWORK: READ BOOKS

Part 1: Intro to UX

Part 2: User Research

Part 3: Information Architecture

Part 4: Interaction Design

Part 5: Usability Evaluation

Part 6: Business & Leadership

Google for “fred beecher book list” to find 6 lists on Amazon.com

9

https://dl.dropboxusercontent.com/u/1554387/Unicorn_Homework.pdf

@fred_beecher :: #uxnicorns ® 1999 Warner Bros. Entertainment Inc.

LEARN TO CODE

® 2013 Fred Beecher

HOMEWORK: LEARN TO CODE

https://www.coursera.org

http://www.twincitiescodecamp.com/

http://www.amazon.com/

http://www.apple.com/education/itunes-u/ http://www.codecademy.com/

https://p2pu.org/en/schools/school-of-webcraft/

http://code.google.com/edu/courses.html

http://ocw.mit.edu/index.htm

http://www.khanacademy.org/cs

http://lynda.com/

http://livetyping.capcloud.com

11

@fred_beecher :: #uxnicorns

KNOWLEDGE: CASEY K.ex-product

designer

self-taught web coder

Read tons

of books

*STILL* reads tons of books!!!

@fred_beecher :: #uxnicorns

FROM VISUAL TO UX DESIGNKnowledge

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

PeopleCommunication

Human Perception

Cognitive Psychology

Empathy

Listening

ProcessExperimental

Critique

Data-based decision making

Focus on problems

PracticeJUST DO IT

Internship

Choose your target

Network

Show your work

Quck Learner

Curiosity about Tech

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

Curiosity about people

Thick-skinned

Passionate

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

@fred_beecher :: #uxnicorns

BE NOSY

@fred_beecher :: #uxnicorns

HAVE EMPATHY

@fred_beecher :: #uxnicorns

LEARN PSYCHOLOGY

@fred_beecher :: #uxnicorns

LISTEN!

@fred_beecher :: #uxnicorns flickr: splorp

COMMUNICATE

® 2013 Fred Beecher

HOMEWORK: LISTENING

Question: How did you get into your career?

Interview someone you work with who you don’t know well. Really listen to them. Get them to go deeper into the interesting things that come up. Ask them this one question and keep them talking for as long as possible.

19

@fred_beecher :: #uxnicorns

PEOPLE: MIKE S. computer-computer communication

Epiphany...

computer-

human

communication!raised by scientists...

“Why?”

@fred_beecher :: #uxnicorns

FROM VISUAL TO UX DESIGNKnowledge

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

PeopleCommunication

Human Perception

Cognitive Psychology

Empathy

Listening

ProcessExperimental

Critique

Data-based decision making

Focus on problems

PracticeJUST DO IT

Internship

Choose your target

Network

Show your work

Quck Learner

Curiosity about Tech

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

Curiosity about people

Thick-skinned

Passionate

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

@fred_beecher :: #uxnicorns

FOCUS ON THE PROBLEM

®1985 Paramount Pictures, Inc

@fred_beecher :: #uxnicorns source: Pehr Hovey

DATA-INFORMED DESIGN DECISIONS

@fred_beecher :: #uxnicorns flickr: carolinabio

SKETCHING

® 2013 Fred Beecher

HOMEWORK: GOING COMMANDOUX designers help clients achieve their business goals by helping users achieve their goals. They need to do research to figure these things out. They go into the design process without briefs. They rely on business & user goals to make decisions.

To get a job as a UX designer, you must show you can think that way. Identify and execute a “fake” project if you must. It will help if the project you identify is with a system you & your friends use frequently (but NOT a social network).

IDENTIFY THE OPPORTUNITY:For example: Needs not being served, needs being served poorly, new technology that can solve an old problem, etc.

25

DETERMINE BUSINESS GOALSUsually these are goals that help the company: Make more money, spend less money, avoid litigation, or build more intangible value.

® 2013 Fred Beecher

HOMEWORK: USER ANALYSISAUDIENCE 1 AUDIENCE 2 AUDIENCE 3

26

Goals

Behaviors

Context

Goals

Behaviors

Context

Goals

Behaviors

Context

@fred_beecher :: #uxnicorns

PROCESS: IVAN M. graphic design internship

went all

interactive

2 agencies,

10 yearsfrustrated w/arbitrary design decisions

frustrated w/devs having to fill in the gaps

changed

things so

they built

blueprints

up front

@fred_beecher :: #uxnicorns

FROM VISUAL TO UX DESIGNKnowledge

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

PeopleCommunication

Human Perception

Cognitive Psychology

Empathy

Listening

ProcessExperimental

Critique

Data-based decision making

Focus on problems

PracticeJUST DO IT

Internship

Choose your target

Network

Show your work

Quck Learner

Curiosity about Tech

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

Curiosity about people

Thick-skinned

Passionate

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

@fred_beecher :: #uxnicorns

JUST DOOO EEET

@fred_beecher :: #uxnicorns source: natural japan

NO UX PRACTICE• Don’t just jump into

PhotoShop

• Ask clients what they’re trying to achieve

• Ask them who they think their users are

• Make design decisions based on that input

• Sketch first!

@fred_beecher :: #uxnicorns®1966 20th Century Fox

UX PRACTICE

• Look at sample documentation

• Collaborate with UX designers

• Ask UX designers why they’re doing what they’re doing

• Make a UX designer mentor you!

@fred_beecher :: #uxnicorns ®1978 Universal Pictures, Inc

IN SCHOOL

• Internship

• More internship

• Somewhere with a UX practice

• Get involved in UX projects

• Make a UX designer mentor you!

@fred_beecher :: #uxnicorns

PRACTICE: JAKE W. Studied graphic design

switched to

codinginterned with his professors

LOTSof different kinds of work highlyexperimental

Process

@fred_beecher :: #uxnicorns

AD AGENC

YINTERACTIVE

CORPORATE STARTUP

@fred_beecher :: #uxnicorns

AD AGENCYCollab w/

really creative

peopleSometimes, little to no UX practice

hugely

varied

work

booze!!!

LITTLE TO NO UX PRACTICE

breadth

over depth

market research isn’t user research

culture of

overwork

@fred_beecher :: #uxnicorns

INTERACTIVE SHOPDevelopers!!

Experienced UX designers as mentorscollaborative

environmenthugely varied workbooze

!!!

breadthover

Depth

sometimes theboozeruns out!

@fred_beecher :: #uxnicorns

CORPORATEexperienced

UX designers

as mentors

Evolve & improve a product’s UX over time...

breadth

over

DepthINCREMENTAL PROBLEMS

CUBICLES!

@fred_beecher :: #uxnicorns

STARTUPinstant UX

Director!you own the experience

collaborative

environment

Evolve & improve a product’s UX over time...

total chaos most of the time

culture of

overwork

no time for

mentoringJob security!?Pfft.

@fred_beecher :: #uxnicorns

NETWORK

@fred_beecher :: #uxnicorns source: the paper wall

SHOW YOUR WORK

® 2013 Fred Beecher

HOMEWORK: SHOW/DESCRIBE THE PROBLEM.

41

® 2013 Fred Beecher

HOMEWORK: DESCRIBE HOW YOU APPROACHED SOLVING THE PROBLEM.

42

® 2013 Fred Beecher

HOMEWORK: SHOW YOUR SOLUTION TO THE PROBLEM.

43

@fred_beecher :: #uxnicorns

FROM VISUAL TO UX DESIGNKnowledge

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

PeopleCommunication

Human Perception

Cognitive Psychology

Empathy

Listening

ProcessExperimental

Critique

Data-based decision making

Focus on problems

PracticeJUST DO IT

Internship

Choose your target

Network

Show your work

Quck Learner

Curiosity about Tech

Layout

Basic Typography

Basic Color

Research Methods

Information Architecture

Interaction Design

Basic coding

Curiosity about people

Thick-skinned

Passionate

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

✔

@fred_beecher :: #uxnicorns

READ A TON

LEARN ABOUT PEOPLE

MAKE DATA-BASED DECISIONS

CHOOSE YOUR STARTING POINT

SHOW YOUR WORK

@fred_beecher :: #uxnicorns

Fred Beecherfbeecher@nerdery.com@fred_beecherhttp://nerdery.com/people/#fbhttp://slideshare.net/fred_beecher