Mobile UX Prototyping & Storytelling

2,813 views

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

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

×