Your SlideShare is downloading. ×
0
mobile uxworkshop
MOBILE UXPROTOTYPING& STORYTELLINGPresentation & Workshop by:Vince Baskerville | VP of Product TripLingo
THANK YOU SPONSORS             VINCENT BASKERVILLE | VP of PRODUCT
VINCENT BASKERVILLE | VP of PRODUCT
10 SIMPLE MOBILE   PRINCIPLES            VINCENT BASKERVILLE | VP of PRODUCT
CREATE A VISUALHIERARCHY THAT MATCHES USERS         NEEDS       VINCENT BASKERVILLE | VP of PRODUCT
WEIGHTBALANCEVINCENT BASKERVILLE | VP of PRODUCT
THUMB ORFINGER RULE   VINCENT BASKERVILLE | VP of PRODUCT
EASILYNAVIGABLE  VINCENT BASKERVILLE | VP of PRODUCT
LIMITDISTRACTIONS     VINCENT BASKERVILLE | VP of PRODUCT
USEAPPROPRIATE   DEFAULTS   VINCENT BASKERVILLE | VP of PRODUCT
MAKE  ACTIONSREVERSIBLE  VINCENT BASKERVILLE | VP of PRODUCT
BECONSISTENT   VINCENT BASKERVILLE | VP of PRODUCT
DON’T BE  AFRAID TOSHOW SOME   EMOTION   VINCENT BASKERVILLE | VP of PRODUCT
AVOID   JARGONVINCENT BASKERVILLE | VP of PRODUCT
RECAP1. Create a visual hierarchy                                6. Use appropriate defaults that matches users needs     ...
•Truly understand your medium•Solve the right problem, don’t just make pretty interfaces•Try to keep things simple •but re...
SKETCH & WIREFRAME TIPS                VINCENT BASKERVILLE | VP of PRODUCT
VERSUS   VINCENT BASKERVILLE | VP of PRODUCT
NOTRECOMMENDED       VINCENT BASKERVILLE | VP of PRODUCT
• Sketches aren’t the *product* • the focus isn’t instagrammable wireframes• Consider actual content • don’t get too caugh...
• Keep   it fast and in short bursts• Sketches & prototypes should always be communicating those in between steps.. try no...
UNDERSTANDING MOBILE      CONTEXT              VINCENT BASKERVILLE | VP of PRODUCT
• Design for partial attention spans and interrupted states• We don’t just create interfaces.. remember to focus on intera...
• Will   they have gloves on?• Are    they driving?• Walking    and frustratingly looking for something?• Relaxed, sipping...
SKETCH TIME        VINCENT BASKERVILLE | VP of PRODUCT
BE RUTHLESS &      BRAVEEDIT.. EDIT.. EDIT.. EDIT                 VINCENT BASKERVILLE | VP of PRODUCT
PROTOTYPING        VINCENT BASKERVILLE | VP of PRODUCT
• Hi   or lo fidelity?• Prototyping    reduces misinterpretation • in   comparison to detailed requirement docs• Remember  ...
• Eventually   saves time, money & overall effort• Helpsto create a constant feedback loop, which helps produce a better p...
iterativefeedbackloop            VINCENT BASKERVILLE | VP of PRODUCT
VINCENT BASKERVILLE | VP of PRODUCT
WHY PROTOTYPE?           VINCENT BASKERVILLE | VP of PRODUCT
• It’ll   help you improve design making decision• Communicate   your ideas better & get buy-in  from your team / client e...
• Multiple   ways to prototype your product • paper • power   point / keynote • balsamiq • axure • adobe photoshop / firewo...
STORYTELLING        VINCENT BASKERVILLE | VP of PRODUCT
The goal of sketches & prototypes is to convince yourself & others                      VINCENT BASKERVILLE | VP of PRODUCT
• Telling        stories: • helps put a ‘face’ on data • helps paint in missing details from sketches &   prototypes • hel...
Stories turn profileinformation into apersona; with thisinformation we canbetter design a solutionfor this & other similaru...
• Stories        can illustrate problems & ‘pain points’ that wasn’t discovered through sketching prototypes              ...
INSTRUCTIONS /   PEE BREAK          VINCENT BASKERVILLE | VP of PRODUCT
WRAP UP      VINCENT BASKERVILLE | VP of PRODUCT
THANK YOU SPONSORS             VINCENT BASKERVILLE | VP of PRODUCT
AU REVOIR    VINCE BASKERVILLE                     @WHOISVINCE                               VINCE@TRIPLINGO.COM     VINCE...
Upcoming SlideShare
Loading in...5
×

Mobile UX Prototyping & Storytelling

2,349

Published on

A very hands on 3 hour workshop where participants had to sketch and prototype specific app ideas per team.

The presentation was projected onto a whiteboard where I wrote notes, sketches & examples needed.

Published in: Technology, Business

Transcript of "Mobile UX Prototyping & Storytelling"

  1. 1. mobile uxworkshop
  2. 2. MOBILE UXPROTOTYPING& STORYTELLINGPresentation & Workshop by:Vince Baskerville | VP of Product TripLingo
  3. 3. THANK YOU SPONSORS VINCENT BASKERVILLE | VP of PRODUCT
  4. 4. VINCENT BASKERVILLE | VP of PRODUCT
  5. 5. 10 SIMPLE MOBILE PRINCIPLES VINCENT BASKERVILLE | VP of PRODUCT
  6. 6. CREATE A VISUALHIERARCHY THAT MATCHES USERS NEEDS VINCENT BASKERVILLE | VP of PRODUCT
  7. 7. WEIGHTBALANCEVINCENT BASKERVILLE | VP of PRODUCT
  8. 8. THUMB ORFINGER RULE VINCENT BASKERVILLE | VP of PRODUCT
  9. 9. EASILYNAVIGABLE VINCENT BASKERVILLE | VP of PRODUCT
  10. 10. LIMITDISTRACTIONS VINCENT BASKERVILLE | VP of PRODUCT
  11. 11. USEAPPROPRIATE DEFAULTS VINCENT BASKERVILLE | VP of PRODUCT
  12. 12. MAKE ACTIONSREVERSIBLE VINCENT BASKERVILLE | VP of PRODUCT
  13. 13. BECONSISTENT VINCENT BASKERVILLE | VP of PRODUCT
  14. 14. DON’T BE AFRAID TOSHOW SOME EMOTION VINCENT BASKERVILLE | VP of PRODUCT
  15. 15. AVOID JARGONVINCENT BASKERVILLE | VP of PRODUCT
  16. 16. RECAP1. Create a visual hierarchy 6. Use appropriate defaults that matches users needs 7. Make actions reversible2. Weight balance 8. Be consistent3. Thumb or finger rule? 9. Don’t be afraid to show - don’t forget fat fingers some emotion4. Easily navigable 10. Avoid jargon5. Limit distractions VINCENT BASKERVILLE | VP of PRODUCT
  17. 17. •Truly understand your medium•Solve the right problem, don’t just make pretty interfaces•Try to keep things simple •but remember *Less is more* not always the answer VINCENT BASKERVILLE | VP of PRODUCT
  18. 18. SKETCH & WIREFRAME TIPS VINCENT BASKERVILLE | VP of PRODUCT
  19. 19. VERSUS VINCENT BASKERVILLE | VP of PRODUCT
  20. 20. NOTRECOMMENDED VINCENT BASKERVILLE | VP of PRODUCT
  21. 21. • Sketches aren’t the *product* • the focus isn’t instagrammable wireframes• Consider actual content • don’t get too caught up with lorem text• Focuson communication • remember the purpose of the interactions VINCENT BASKERVILLE | VP of PRODUCT
  22. 22. • Keep it fast and in short bursts• Sketches & prototypes should always be communicating those in between steps.. try not to leave anything for interpretation VINCENT BASKERVILLE | VP of PRODUCT
  23. 23. UNDERSTANDING MOBILE CONTEXT VINCENT BASKERVILLE | VP of PRODUCT
  24. 24. • Design for partial attention spans and interrupted states• We don’t just create interfaces.. remember to focus on interaction• Where will your users be? VINCENT BASKERVILLE | VP of PRODUCT
  25. 25. • Will they have gloves on?• Are they driving?• Walking and frustratingly looking for something?• Relaxed, sipping on a latte? VINCENT BASKERVILLE | VP of PRODUCT
  26. 26. SKETCH TIME VINCENT BASKERVILLE | VP of PRODUCT
  27. 27. BE RUTHLESS & BRAVEEDIT.. EDIT.. EDIT.. EDIT VINCENT BASKERVILLE | VP of PRODUCT
  28. 28. PROTOTYPING VINCENT BASKERVILLE | VP of PRODUCT
  29. 29. • Hi or lo fidelity?• Prototyping reduces misinterpretation • in comparison to detailed requirement docs• Remember to set expectations VINCENT BASKERVILLE | VP of PRODUCT
  30. 30. • Eventually saves time, money & overall effort• Helpsto create a constant feedback loop, which helps produce a better product• Thisisn’t a means to an end, but wrather it is to help better articulate ‘show & tell’ VINCENT BASKERVILLE | VP of PRODUCT
  31. 31. iterativefeedbackloop VINCENT BASKERVILLE | VP of PRODUCT
  32. 32. VINCENT BASKERVILLE | VP of PRODUCT
  33. 33. WHY PROTOTYPE? VINCENT BASKERVILLE | VP of PRODUCT
  34. 34. • It’ll help you improve design making decision• Communicate your ideas better & get buy-in from your team / client easily• Gather proper user feedback• Explore unknowns• Further refine concepts VINCENT BASKERVILLE | VP of PRODUCT
  35. 35. • Multiple ways to prototype your product • paper • power point / keynote • balsamiq • axure • adobe photoshop / fireworks / flash • html / js • etc... VINCENT BASKERVILLE | VP of PRODUCT
  36. 36. STORYTELLING VINCENT BASKERVILLE | VP of PRODUCT
  37. 37. The goal of sketches & prototypes is to convince yourself & others VINCENT BASKERVILLE | VP of PRODUCT
  38. 38. • Telling stories: • helps put a ‘face’ on data • helps paint in missing details from sketches & prototypes • helps encourage collaboration & innovation VINCENT BASKERVILLE | VP of PRODUCT
  39. 39. Stories turn profileinformation into apersona; with thisinformation we canbetter design a solutionfor this & other similaruser needs VINCENT BASKERVILLE | VP of PRODUCT
  40. 40. • Stories can illustrate problems & ‘pain points’ that wasn’t discovered through sketching prototypes VINCENT BASKERVILLE | VP of PRODUCT
  41. 41. INSTRUCTIONS / PEE BREAK VINCENT BASKERVILLE | VP of PRODUCT
  42. 42. WRAP UP VINCENT BASKERVILLE | VP of PRODUCT
  43. 43. THANK YOU SPONSORS VINCENT BASKERVILLE | VP of PRODUCT
  44. 44. AU REVOIR VINCE BASKERVILLE @WHOISVINCE VINCE@TRIPLINGO.COM VINCENT BASKERVILLE | VP of PRODUCT
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×