Mobile UX Prototyping & Storytelling

mobile ux workshop

MOBILE UX PROTOTYPING& STORYTELLINGPresentation & Workshop by: Vince Baskerville | VP of Product TripLingo

VINCENT BASKERVILLE | VP of PRODUCT

THANK YOU SPONSORS

VINCENT BASKERVILLE | VP of PRODUCT

VINCENT BASKERVILLE | VP of PRODUCT

10 SIMPLE MOBILE PRINCIPLES

VINCENT BASKERVILLE | VP of PRODUCT

CREATE A VISUAL HIERARCHY THAT MATCHES USERS

NEEDS

VINCENT BASKERVILLE | VP of PRODUCT

WEIGHT BALANCE

VINCENT BASKERVILLE | VP of PRODUCT

THUMB OR FINGER RULE

VINCENT BASKERVILLE | VP of PRODUCT

EASILYNAVIGABLE

VINCENT BASKERVILLE | VP of PRODUCT

LIMITDISTRACTIONS

VINCENT BASKERVILLE | VP of PRODUCT

USE APPROPRIATE

DEFAULTS

VINCENT BASKERVILLE | VP of PRODUCT

MAKEACTIONS

REVERSIBLE

VINCENT BASKERVILLE | VP of PRODUCT

BECONSISTENT

VINCENT BASKERVILLE | VP of PRODUCT

DON’T BEAFRAID TO

SHOW SOME EMOTION

VINCENT BASKERVILLE | VP of PRODUCT

AVOIDJARGON

VINCENT BASKERVILLE | VP of PRODUCT

1. Create a visual hierarchy that matches users needs

2. Weight balance

3. Thumb or finger rule? - don’t forget fat fingers

4. Easily navigable

5. Limit distractions

6. Use appropriate defaults

7. Make actions reversible

8. Be consistent

9. Don’t be afraid to show some emotion

10. Avoid jargon

RECAP

VINCENT BASKERVILLE | VP of PRODUCT

•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

SKETCH & WIREFRAME TIPS

VINCENT BASKERVILLE | VP of PRODUCT

VERSUS

VINCENT BASKERVILLE | VP of PRODUCT

NOT RECOMMENDED

VINCENT BASKERVILLE | VP of PRODUCT

•Sketches aren’t the *product*•the focus isn’t instagrammable wireframes

•Consider actual content•don’t get too caught up with lorem text

•Focus on communication•remember the purpose of the interactions

VINCENT BASKERVILLE | VP of PRODUCT

•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

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 interaction

•Where will your users be?

VINCENT BASKERVILLE | VP of PRODUCT

•Will they have gloves on?

•Are they driving?

•Walking and frustratingly looking for something?

•Relaxed, sipping on a latte?

VINCENT BASKERVILLE | VP of PRODUCT

SKETCH TIME

VINCENT BASKERVILLE | VP of PRODUCT

BE RUTHLESS & BRAVE

EDIT.. 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 to set expectations

VINCENT BASKERVILLE | VP of PRODUCT

•Eventually saves time, money & overall effort

•Helps to create a constant feedback loop, which helps produce a better product

•This isn’t a means to an end, but wrather it is to help better articulate ‘show & tell’

VINCENT BASKERVILLE | VP of PRODUCT

!"#r$"!v# f##%b$&' ())p

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 easily

•Gather proper user feedback

•Explore unknowns

•Further refine concepts

VINCENT BASKERVILLE | VP of PRODUCT

•Multiple ways to prototype your product•paper•power point / keynote•balsamiq•axure•adobe photoshop / fireworks / flash•html / js•etc...

VINCENT BASKERVILLE | VP of PRODUCT

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

•helps encourage collaboration & innovation

VINCENT BASKERVILLE | VP of PRODUCT

Stories turn profile information into a persona; with this information we can better design a solution for this & other similar user needs

VINCENT BASKERVILLE | VP of PRODUCT

•Stories can illustrate problems & ‘pain points’ that wasn’t discovered through sketching prototypes

VINCENT BASKERVILLE | VP of PRODUCT

INSTRUCTIONS / PEE BREAK

VINCENT BASKERVILLE | VP of PRODUCT

WRAP UP

VINCENT BASKERVILLE | VP of PRODUCT

THANK YOU SPONSORS

VINCENT BASKERVILLE | VP of PRODUCT

AU REVOIRVINCE BASKERVILLE

@WHOISVINCEVINCE@TRIPLINGO.COM