This document provides an overview of key considerations for mobile user experience (UX) design. It discusses the mobile ecosystem and how it is constantly evolving. It outlines the typical mobile app lifecycle including discovery, design, quality assurance, launch, and ongoing improvements. It emphasizes designing for the unique constraints of mobile like screen sizes and developing effective app flows and navigation. It also stresses the importance of visual design elements like icons, animations, and branding to create positive first impressions for users.

2. www.trebbble.co

3. AGENDA
Mobile Ecosystem (rules, constraints & challenges)
Mobile App Lifecycle
Focus on Mobile App Flow
Analysis of Beauty & Creativity Aspects
App Submission & Future Improvements
Practice In Action

4. UX DOMINATES
WHEN TECHNOLOGY DELIVERS BASIC NEEDS
Donald Norman

5. MOBILE
KNOW WHAT YOU WORK ON

6. OS FRAGMENTATION
RESPECT SPECIFIC PLATFORM CHARACTERISTICS
AND, CONSEQUENTLY, THE USERS THEMSELVES

7. DEVICE FRAGMENTATION
WITHIN THE SAME PLATFORM
18,796
Distinct Android devices
in 2014
240x320 - 1600x2560
Screen Resolution range you
have to compensate
OpenSignal 2014, opensignal.com

8. DEVICE FRAGMENTATION
WITHIN THE SAME PLATFORM
www.paintcodeapp.com

9. DEVICE H/W CAPABILITIES
UNIQUE MOBILE CONTEXT
MOTION SENSORS
Accelerometers
Gravity Sensors
Gyroscope
Rotational
ENVIRONMENTAL SENSORS
Air Temperature & Pressure
Illumination
Humidity
Barometers
Photometers
POSITION SENSORS
Orientation Sensors
Magnetometers
macro & micro location
EVEN MORE
Camera (front & rear)
Microphone
Fingerprint
…

10. MOBILE ECOSYSTEM
IS EVOLVING DAY-BY-DAY

11. USER BEHAVIOUR
ON-THE-GO & MULTI-TASKING
80%
USE SMARTPHONES ON-THE-GO
64%
USE SMARTPHONES IN COFFEE SHOPS
54%
USE SMARTPHONES WHILE WATCHING TV

12. MOBILE ECOSYSTEM
OFFERS GREAT CHALLENGES FOR UX
DESIGNERS

13. MOBILE APP
LIFECYCLE
& THE ROLE OF A UX DESIGNER
Foursquare App - Early visual design explorations

14. MYTH #31
UX DESIGN IS A STEP IN A PROJECT
uxmyths.com

15. MOBILE APP LIFECYCLE
THE 3 STAGES
DISCOVERY
UX & VISUAL DESIGN
QUALITY
ASSURANCE
MARKET LAUNCH
SUPPORT &
IMPROVE
PROJECT PLAN
ROADMAP
ENGINEERING
ACQUIRE & ENGAGE

16. DISCOVERY
WHICH IS YOUR TARGET AUDIENCE

17. DISCOVERY
WHICH ARE THE BUSINESS GOALS
LOYALTY / SALES / BRAND AWARENESS / INDUSTRY LEADER
necessitate different UX approach

18. DISCOVERY
WHERE & WHEN EXPERIENCE TAKES PLACE
IN-STORE OR OUTDOOR / DAY OR NIGHT
impose different needs

19. UX RESEARCH
INDUSTRY ANALYSIS
INDUSTRY TRENDS / COMPETITORS / FIELD INNOVATORS /
SIMILAR APPS / CLIENT WEBSITE

20. UX RESEARCH
PERSONAS ANALYSIS
CREATE PERSONAS / BUILD SCENARIOS /
UNDERSTAND USERS’ CONTEXT & PSYCHOLOGY

21. FOCUS ON APP FLOW
START WITH SCREEN TRANSITIONS; VISUAL DESIGN COMES
LATER

22. APPLICATION FLOW
INITIAL SCREEN FLOW SKETCHING
START WITH A WHITEBOARD;
GOOD FOR TEAM BRAINSTORMING

23. APPLICATION FLOW
INITIAL SCREEN FLOW SKETCHING
CONTINUE WITH PAPER SKETCHING;
GREATER FOCUS TO HELP IMPROVE APP FLOW

24. APPLICATION FLOW
LOW-FIDELITY PROTOTYPE
QUICK TESTING TO VERIFY IDEAS, APP FLOW
AND ENSURE USABILITY

25. APPLICATION FLOW
DIGITIZE IT ;)
VISUAL HIERARCHY / CONTENT GROUPING /
SPACING / POSITIONING

26. SYNC WITH DEVELOPERS
MAKE SURE THAT YOUR FLOW IS FEASIBLE

27. APPLICATION FLOW
(FINAL) WIREFRAMES
CONTENT HIERARCHY AND APPLICATION FLOW
— SHARE WITH THE CLIENT; IT WILL SAVE TIME!!! —

28. APP FLOW TIPS
KEEP THEM ALWAYS IN MIND

29. PAPER SKETCHING TIPS
BALANCE BUSINESS & DESIGN
EVERY LEFT PAGE IS DEVOTED TO BUSINESS BRAINSTORMING;
EVERY RIGHT PAGE TO SKETCHING DESIGNS

30. CONTENT HIERARCHY
LESS IS MORE
MORE
IMPORTANT
LESS
IMPORTANT
EMPHASISE ON THE PRIMARY CONTENT
GET RID OF ALL THE EXTRA CLUTTER THAT DOESN’T ADD VALUE

31. CONTENT HIERARCHY
HOW USERS HOLD MOBILE DEVICES
49% 36% 15%

32. CONTENT HIERARCHY
HOW USERS HOLD MOBILE DEVICES
90% 10%

33. NAVIGATION
MAKE IMPORTANT THINGS FAST
ENSURE MINIMUM STEPS
FOR THE CORE FUNCTIONALITY
- IF POSSIBLE, MAKE IT EASILY EXTENDABLE -

34. NAVIGATION
DON’T IGNORE PLATFORM UX
EPIC FAIL!!!
NO RESPECT TO ANDROID USERS

35. BEAUTY & CREATIVITY
MAKE IT SEDUCTIVE, MEMORABLE
Workspace of Jeremy Goldberg - UX Designer @Google

36. FIRST IMPRESSION
MATTERS
THIS IS WHERE YOU WIN A MOBILE USER

37. YOU NEVER GET A SECOND CHANCE TO
MAKE YOUR FIRST IMPRESSION

38. THE FIRST IMPRESSION
SPLASH SCREEN
Timehop Directr Artsy KidCam

39. THE FIRST IMPRESSION
WALKTHROUGHS
USE OF INSPIRATIONAL PHOTOGRAPHY
ALONG WITH APP BENEFITS
Airbnb Application

40. THE FIRST IMPRESSION
WALKTHROUGHS
SIMPLY INTRODUCE HOW-TO-USE THE APP
Stacks Application

41. THE FIRST IMPRESSION
WALKTHROUGHS
FUNNY APPROACH
Clique Application

42. THE FIRST IMPRESSION
SIGN UP FORMS
TriplAgent ChitChat Timehop
SMALL-SIZED FORMS / SIMPLICITY / CREATIVITY

43. THE FIRST IMPRESSION
ONBOARDING
FULL OF CREATIVITY
Citymapper Application

44. INSPIRATIONAL PATTERNS
LEARN FROM THE BEST, REAL APPS

45. MOBILE PATTERNS
EMPHASIS ON PHOTOGRAPHY & SHORT DETAILS
LISTS
Yahoo News Digest Snapguide Sosh - City Guide Day One

46. MOBILE PATTERNS
LISTS
Gogobot Peek Calendar Hotel Tonight Clear
FLAT APPROACH

47. MOBILE PATTERNS
NICE ALTERNATIVE TO LISTS
COVER FLOWS
Foodspotting DIY Dcovery Beat

48. THE FIRST IMPRESSION
PROFILE VIEWS
EVOLUTION OVER TIME
Foursquare Application

49. MOBILE PATTERNS
CONTENT/VENUE DETAILS
Airbnb Foursquare TriplAgent

50. THE FIRST IMPRESSION
NAVIGATION - SIDEBARS
EVOLUTION OVER TIME
Rdio Application

51. MOBILE PATTERNS
NAVIGATION ALTERNATIVES
Storylane Reader Ultravisual Huffington Post LinkedIn Connected

52. MOBILE PATTERNS
POPOVERS
Two Dots Dots Lootsy Rdio

53. DETAILS MATTER
NEVER NEGLECT “SECONDARY” SCREENS

54. MOBILE PATTERNS
GUIDE THE USER
EMPTY DATA
RunKeeper Circa News Potluck iMovie

55. THE FIRST IMPRESSION
EMPTY DATA
Clique Frontback
BE CREATIVE

56. THE FIRST IMPRESSION
ERRORS
Timehop WIND My Q
KEEP THE USER (POSITIVELY) SURPRISED

57. MOBILE PATTERNS
COACH MARKS
Secret MySpace Flink Facebook Paper
HELP USER UNCOVER ALL OPTIONS

58. MOBILE PATTERNS
ABOUT
Peek Calendar Harmony Yplan Coco’s Workout World
PROVIDE CONTACT INFO / PROMOTE YOUR BRAND

59. ANIMATIONS MATTER
SKYROCKET THE EXPERIENCE

60. ANIMATIONS
IN WALKTHROUGHS
Mark Geyer @dribbble

61. ANIMATIONS
IN MENU OPTIONS
Karol Ortyl @dribbble

62. ANIMATIONS
IN MENU OPTIONS
Sergey Valiukh @dribbble

63. ANIMATIONS
IN LOADING
Cuberto @dribbble

64. ANIMATIONS
IN LOADING
Jan Semler - Animation

65. ANIMATIONS
PULL-TO-REFRESH
Dmytro Prudnikov @dribbble

66. SYNC WITH DEVELOPERS
MAKE SURE THAT YOUR VISUAL APPROACH IS FEASIBLE

67. VISUAL DESIGN TIPS
KEEP THEM ALWAYS IN MIND

68. SIMPLIFY UI
ENHANCE BLOCK SPACING
CLEAN UI / COLOUR SPACING / NO LINES OR DIVIDERS
Peek Calendar Application

69. COLOR SCHEMES
HIGHLIGHT ACTIONS
Lumosity Sosh - City Guide Timehop
ENHANCE FOCUS ON ACTIONS

70. LAYERED UI
TRANSLUCENT ELEMENTS
ENHANCE CONTENT FOCUS & HIERARCHY
Yahoo Weather Application

71. BUTTONS
DON'T MIMIC UI ELEMENTS FROM OTHER PLATFORMS

72. BUTTONS
MULTIPLE STATES
ALWAYS PROVIDE FEEDBACK TO THE USER

73. BUTTONS
CONSIDER HIDDEN BUTTONS
GESTURES LEAD TO EVEN CLEANER & SIMPLER UI

74. BRANDING
KEEP IT UNOBTRUSIVE
RECOMMENDED NOT RECOMMENDED
USE SPACE ONLY FOR THE CONTENT USERS CARE ABOUT

75. TONE OF VOICE
KEEP IT SIMPLE & FRIENDLY

76. PREPARE UI SPECS
MAKE DEVELOPERS’ (& REST DESIGNERS’) LIFE EASY

77. CREATE UI ELEMENTS
YOUR FRIEND
QUICKLY EXPORT PSD ELEMENTS
- SUPPORTS RETINA -

78. SPECIFY UI ELEMENTS
YOUR DEVELOPERS’ FRIEND

79. MOBILE UI SPECIFICATIONS
DOCUMENTS
FINAL WIREFRAMES
HIGH-FIDELITY MOCKUPS
UI ELEMENTS
All the above should be part of the overall app specifications document

80. QUALITY ASSURANCE
ENSURE APP QUALITY

81. QUALITY ASSURANCE
HOW CAN YOU HELP
PARTICIPATE IN UAT SCENARIOS
EXTENSIVE MANUAL TESTING
Focus on both usability & visual aspects

82. APP SUBMISSION
THE VERY FIRST IMPRESSIONS START HERE
Foursquare App - App Store screenshots

83. APP SUBMISSION
APP ICON
App Icon inspiration, @dribbble

84. APP SUBMISSION
APP STORE SCREENSHOTS
Camu iPhone App

85. APP SUBMISSION
APP STORE SCREENSHOTS
Fuse iPhone App

86. SUPPORT & IMPROVE
ECOSYSTEM CHANGES EVERY DAY. ADAPT.
Apple Event, Sep 2014

87. LESSON #1
GET TO KNOW MOBILE CONSTRAINTS & CAPABILITIES

88. LESSON #2
WORK ALONG WITH DEVELOPERS

89. LESSON #3
STOP THINKING OF SCREENS AND START THINKING OF TRANSITIONS

90. LESSON #4
WORK HARD ON INFORMATION ARCHITECTURE

91. LESSON #5
GOD LIVES IN THE DETAILS

92. LESSON #6
ANIMATIONS SKYROCKET MOBILE EXPERIENCE

93. LESSON #7
STUDY & RESPECT OS PATTERNS AND BUILDING BLOCKS

94. ONE LAST TIP
DOWNLOAD NUMEROUS APPS. DAILY.