UX Sketching & Prototyping

12
UX SKETCHING & PROTOTYPING BY C.J. WALLS

Transcript of UX Sketching & Prototyping

Page 1: UX Sketching & Prototyping

UX SKETCHING & PROTOTYPING

BY C . J . WA L L S

Page 2: UX Sketching & Prototyping

UX PROCESS

You are here

Magain M. & Chambers L. (2014). Get Started in UX. Victoria, Australia: UX Mastery

Page 3: UX Sketching & Prototyping

DESIGN WORKFLOW

https://medium.com/lucid-software-design/traversing-the-ux-prototyping-landscape-33edc700c1bd#.i8dl9p6sv

Page 4: UX Sketching & Prototyping

DESIGN WORKFLOW (CONT.)

https://medium.com/lucid-software-design/traversing-the-ux-prototyping-landscape-33edc700c1bd#.i8dl9p6sv

Page 5: UX Sketching & Prototyping

WHY SKETCH?

• Think more openly and creatively about your ideas.• Create abundant ideas without worrying about their quality (avoid local hill

climbing).• Invent and explore concepts by being able to record ideas quickly.• Discuss, critique, and share ideas with others (sketch on a whiteboard)• Choose ideas worth pursuing• Reduce change aversion by the design/development teams (sketches are

easier to change than prototypes, prototypes are easier to change than code)

Greenberg, S., Carpendale, S., Marquardt, N. & Buxton, B. (2012). Sketching User Experiences. Waltham, MA: Elsevier, Inc.

Page 6: UX Sketching & Prototyping

WHY PROTOTYPE?

• Test application flow, navigation, interactions, micro-interactions, animations, transitions, etc.

• Make it easier for the users to “imagine” what the final product will look like.

• “Participants gave extremely detailed and invaluable feedback that allowed me to craft the experience to their benefit.” – Taylor Palmer, Lucid Software

• “I was also able to share this prototype with the engineering team to communicate exactly how the interaction should work.” – Taylor Palmer, Lucid Software

Page 7: UX Sketching & Prototyping

DESIGN WORKFLOW DEMO

Sketching Wireframing

Prototyping

Page 8: UX Sketching & Prototyping

DESIGN WORKFLOW DEMO (CONT.)Sketching Wireframing Prototyping

Page 9: UX Sketching & Prototyping

DESIGN WORKFLOW DEMO (CONT.)Sketching Wireframing Prototyping

Balsamiq Demo

Page 10: UX Sketching & Prototyping

DESIGN WORKFLOW DEMO (CONT.)Sketching Wireframing Prototyping

InVision Demo

Page 11: UX Sketching & Prototyping

RECOMMENDED READING

Page 12: UX Sketching & Prototyping