How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp

1. { ] How to be A UX Design Army of One Dan Olsen Olsen Solutions Silicon Valley Product Camp March 23, 2013

2. My Background n  Educa/on n  BS, Electrical Engineering, Northwestern n  MS, Industrial Engineering, Virginia Tech n  MBA, Stanford n  Web development and UI design courses n  20 years of Product Management Experience n  Managed submarine design for 5 years n  5 years at Intuit, led Quicken Product Management n  Led Product Management at Friendster n  CEO & Cofounder of YourVersion (personalized news) n  Product consultant: Box, YouSendIt, Epocrates n  Speaker, Author “42 Rules of Product Management” Will post slides to hYp://slideshare.net/dan_o

3. UX Design Army of One n  What is “UX Design”? n  UX = User experience n  Designing the product in a way that : n  meets customer needs See my other talks n  meets needs beYer than alterna/ves n  delivers a great user experience Focus of my talk todayn  “UX” vs. “UI” (User Interface): UX is broader n  Why “Army of One”? n  Great UX takes diverse set of people/skills n  Skills are o`en missing from your product team n  Good product people ﬁll cri/cal gaps Copyright © 2013 Olsen Solu/ons

6. The UX Design Gap on Many Product Teams Level Define Design Code 1 Engineering 2 Product Mgmt Engineering 3 Product Mgmt Engineering Product Mgmt Engineering 4 PM Eng UI 5 PM Eng5 Copyright © 2013 Olsen Solu/ons

7. Dan’s UX Design Iceberg What mostpeople seeand react to Visual Design What good product people Interaction think about Design Information Architecture Conceptual Design Copyright © 2013 Olsen Solu/ons

11. Elements of User Experience Design Consists of Three Dis/nct Elements: n  Informa/on Architecture n  Structure and layout at both site and page level n  How site is structured (sitemap) n  How site informa/on is organized (site layout) n  How each page is organized (page layout) n  Interac/on Design n  How user and product interact with one another n  User ﬂows (e.g., naviga/on across mul/ple pages) n  User input (e.g., controls and form design) n  Visual Design n  “How it looks” vs. “What it is”, o`en called “chrome” n  Fonts, colors, graphical elements 10 Copyright © 2013 Olsen Solu/ons

12. Informa/on Architecture n  Documents used n  Sitemap n  Show how sec/ons of website are organized n  Show major naviga/on paYerns n  Wireframes n  Show the layout of components on a page n  Does NOT focus on visual design n  Black & White n  No graphics n  Templates for overall website and individual pages n  Tools: Visio, OmniGraﬄe, Axure, Powerpoint, Word, Excel, Photoshop, Balsamiq, whiteboard Copyright © 2013 Olsen Solu/ons

15. Wireframe

18. Visual Hierarchy is Cri/cal n  Posi/on n  Top more important than boYom n  Le` more important (le`-‐to-‐right languages) n  Size n  Larger more important than smaller n  Color & contrast n  Brighter/higher contrast more important than darker/lower contrast Copyright © 2013 Olsen Solu/ons

20. Eye Tracking Heatmap of Google Search Results Page What’s going on here? Why the dropoﬀ?

21. Put Key Info & Ac/ons Above The Fold Landing Page A Landing Page B The Fold Key action is above the fold Key action is below the fold20 Copyright © 2009 O2010 YourVersion Copyright © lsen Solu/ons LLC

26. Interac/on Design n  Documents used n  Flowchart n  Combina/on of Wireframes & Flowcharts n  Tools: Visio, OmniGraﬄe, Powerpoint, Photoshop, whiteboard n  May build prototype using HTML, jQuery, Ruby on Rails, Flash, or paper n  Usability tes/ng can help ﬁnd problems 25 Copyright © 2013 Olsen Solu/ons

30. Visual Design n  Documents used n  Mockups (aka comps) n  Tools used: n  Photoshop n  Illustrator n  Fireworks n  Deliverables n  Usually images n  Can be HTML & CSS Copyright © 2013 Olsen Solu/ons

35. Colors are Speciﬁed as RGB Values n  For each color, value can vary from 0 to 255 n  Values are wriYen in hexadecimal (base 16) n  Instead of 1 to 10, hex goes from 1 to 16 n  Since we run out of digits, A thru F are used n  A=10, B=11, C=12, D=13, E=14, F=15 n  #10 = 16 in base 10 (1 x 16 + 0 x 1) Prize n  #FF = 255 in base 10 (15 x 16 + 15 x 1) # 00 00 00 # FF 00 00 # FF FF FF # FF FF 00 Red Green Blue Red Green Blue Red Green Blue Red Green Blue 0 0 0 255 0 0 255 255 255 255 255 0 = Black = Red = White = Yellow Copyright © 2013 Olsen Solu/ons

38. Fonts 101 4 common fonts: n  Times New Roman n  Courier!n  Arial"n  Helvetica"n  How is Courier diﬀerent than the other 3 fonts? n  Most designs use 2 fonts n  one for body text n  one for headings Copyright © 2013 Olsen Solu/ons

39. Fonts in a Browser n  Web font choices use to be quite limited n  Not any more, thanks to CSS @font-‐face n  Other CSS proper/es for controlling text: n  font-‐family n  color n  font-‐size n  line-‐height n  font-‐weight (bold) n  font-‐style (italic) n  text-‐decora/on (underline) n  text-‐shadow (CSS3) Copyright © 2013 Olsen Solu/ons

41. Design Ar/facts: Interac/vity vs. Fidelity Alpha Prototype Interactivity Interactive InVision* Wireframe Hand Static Mockup sketch Wireframe Fidelity *hYp://www.invisionapp.com 40 Copyright © 2013 Olsen Solu/ons

43. Why Balsamiq Is Great n  Super easy to learn and use n  Widget library has most UI elements n  Can annotate with s/cky notes n  Can add click naviga/on between pages to illustrate a user story n  Can export as PDF (so others don’t need to have Balsamiq), mul/ple pages in 1 PDF n  Best $79 you’ll spend n  hYp://www.balsamiq.com Copyright © 2013 Olsen Solu/ons

44. But wait, there’s more! What I didn’t have /me to cover n  Understanding and priori/zing customer needs n  Iden/fying your product value proposi/on n  User tes/ng and design itera/on n  Measuring user experience with analy/cs n  See my other talks on all of the above hYp://slideshare.net/dan_o Copyright © 2013 Olsen Solu/ons

45. UX Army of One Cheat Sheet n  Iden/fy & ﬁll gaps in your Product A-‐Team n  Be sketchy n  Wireframe n  Visual hierarchy n  Gestalt principles n  Flow n  Mockups n  Grid, Color PaleYe, Fonts Copyright © 2013 Olsen Solu/ons

46. http://olsensolutions.com{ Questions? ] http://slideshare.net/dan_o @danolsen