DRAFT: Mobile DesignPrashant Agarwal, Managing Director
WHAT IS DESIGN?Slide 2 © Fjord 2011 | Confidential
WHAT IS DESIGN?“Design is how it works”Slide 3 © Fjord 2011 | Confidential
AGENDA                            DESIGN LOVE                            IT‟S ALL ABOUT CONTEXT                           ...
AGENDA                            DESIGN LOVESlide 5 © Fjord 2010 | Confidential
WHY LOVE?                            What‟s love got to do with it?Slide 6 © Fjord 2010 | Confidential
#1 – WE ALL WANT TO EXPERIENCE LOVE                                      We also want our creations to be loved!Slide 7 © ...
#2 – VALUE INCREASES TOWARDS THE HEARTSlide 8 © Fjord 2011 | Confidential
TWO KINDS OF SOFTWARE BUSINESSESSlide 9 © Fjord 2011 | Confidential
WHERE SIGNIFICANT PROGRESS WILL TAKE PLACE                                       Disruption                               ...
#3 – IT‟S A POWERFUL LOVE AFFAIR ALREADYSlide 11 © Fjord 2011 | Confidential
HOW IS LOVE DESIGNED?                            Three universal stages to attain true loveSlide 12 © Fjord 2010 | Confide...
THREE UNIVERSAL STAGES TO ATTAIN TRUE LOVE                                       Digital service   Desired user   Required...
DESIGNING FOR AHA, WOW AND OF COURSE                                                                         OF COURSEENGA...
THREE STEPS TO ATTAIN LOVE                             1 MATCHMAKING                             Discovery in an increasin...
There is a massive fight for timeshareSlide 16 © Fjord 2011 | Confidential
DESIGNING THE „HOOK‟It‟s critical to hone in on one or two things that are truly appealing, andfocus on doing them really ...
MAKING IT ALL EASY, YET TAILOREDMaking complex solutions easy for the users is anartform. Presenting the solutions in a cl...
2 DATING                             Engaging users with your serviceSlide 19 © Fjord 2010 | Confidential
THE ENGAGEMENT FUNNELIt‟s critical to make it easy to get started.Slide 20 © Fjord 2011 | Confidential
GAMING AND SOCIAL                                        Competing & collecting       Gaming dynamics                     ...
BEAUTY                                                               Ericsson IPTV Remote                                 ...
3 TRUE LOVE                             Loyalty - a fluid, meaningful, and ever-present relationshipSlide 23 © Fjord 2010 ...
PEOPLE KNOWLEDGE AS THE LOVE FOUNDATION    I am a better partner and servant to you if I know you well, and also know who ...
ATOMIZED SERVICES AS THE LOVE FOUNDATION    People end up thankful to those who consistently deliver value across various ...
FLUIDITY AS THE LOVE FOUNDATION    I want my partner to always be there with me regardless of where I am or what I do. It’...
AGENDA                           IT‟S ALL ABOUT CONTEXTSlide 28 © Fjord 2010 | Confidential
WHAT IS CONTEXT IN DIGITAL DESIGN?                            …and why is it relevant for mobile experiences?Slide 29 © Fj...
DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS                                        TECHNICAL                               ...
DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS                   Things you can detect with sensors,              derive from ...
DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS                   Things you can detect with sensors,              derive from ...
DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS                           MOVEMENT                     PREFERENCES             ...
WE EXPECT MORE FROM A DIGITAL EXPERIENCE              INDUSTRIAL MODEL                        DIGITAL MODEL               ...
WE NEED TO MOVE…                           MOVEMENT                     PREFERENCES               HEART                   ...
WE NEED TO MOVE…                           MOVEMENT                     PREFERENCES               HEART                   ...
DESIGNING SMART EXPERIENCES FOR PEOPLE                            …using context, but avoiding a backlashSlide 37 © Fjord ...
THE MYTH            USER      EXPERIENCE                                            SENSING                               ...
AN EXAMPLE                                        COLOR IS LOCATION-AWARE AND                                        SOCIA...
ANOTHER EXAMPLE                                        FACEBOOK FACE RECOGNITION                                        CO...
THE MOST FAMOUS EXAMPLE                                                                       MICROSOFT‟S PAPER CLIP.     ...
THE REALITY            USER      EXPERIENCE                                        THE MYTH                               ...
WE ARE TRYING TO GET THERE USER EXPERIENCE                                        LOCAL SEARCH                            ...
BUT WE KEEP FALLING DOWN HERE USER EXPERIENCE                                        LOCAL SEARCH                         ...
A FAILED CONTEXT AWARE SYSTEM                                        • Misunderstands your needs                          ...
THERE ARE TWO SWEET SPOTS                                                SWEET                                            ...
VERY FEW THINGS CURRENTLY MAKE IT TO SWEET SPOT 2                                        YOUR GOOD FRIEND USER EXPERIENCE ...
SIMPLE DESIGN RULES FOR „SMART‟ SERVICES                            …how to design for context and keep users delightedSli...
FOR A SUCCESSFUL CONTEXT-AWARE SERVICE,    THE BENEFIT MUST OUTWEIGH THE COST.Slide 50 © Fjord 2011 | Confidential
THE FORMULA                                          UTILITY,                                          AUTOMATION,        ...
PUT USERS AT THE CENTER OF         1                          THE DESIGN PROCESSSlide 52 © Fjord 2011 | Confidential
COLOR VS FOURSQUARE                                       VSSlide 53 © Fjord 2011 | Confidential
B                                                        _                                                      =         ...
FACEBOOK VS GOOGLE+                                       VSSlide 55 © Fjord 2011 | Confidential
TO REDUCE COSTS                                       Increase                                       • Transparency       ...
B                                                       _                                                     =           ...
TO INCREASE BENEFIT                                        Appropriately increase                                        •...
BRINGING IT TOGETHER                                                          SWEET                                       ...
IN SUMMARY                            …the key take-awaysSlide 60 © Fjord 2010 | Confidential
CONTEXT BASICS                           CONTEXT IS EVERYWHERE, AND THE MEANING OF         1                 CONTEXT IS CH...
HOW TO DESIGN FOR CONTEXT                           PUT USERS AT THE CENTER OF         1                 THE DESIGN PROCES...
AGENDA                            TIPS AND TOOLSSlide 63 © Fjord 2010 | Confidential
SCALING ACROSS PLATFORMS DEFINE ELEMENTS                       CREATE PLATFORM VERSIONS   DEVELOP & GO TO MARKET  Core IA ...
NATIVE or HTML5?          1                 DEFINE YOUR CORE USER EXPERIENCE          2                 FOCUS ON EXECUTING...
RAPID PROTOTYPING TOOL                                       KEYNOTOPIA.COMSlide 66 © Fjord 2011 | Confidential
Thank You!          @fjord                       prashant@fjordnet.com   www.fjordnet.comSlide 67 © Fjord 2011 | Confident...
Upcoming SlideShare
Loading in...5
×

Creating a fantastic mobile experience

796

Published on

Having a mobile presence is easy. What’s hard is deciding what to include, what it should look like, and how to build it in the first place. These are best practices, design tips, and resources for mobile sites and apps.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
796
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Creating a fantastic mobile experience

  1. 1. DRAFT: Mobile DesignPrashant Agarwal, Managing Director
  2. 2. WHAT IS DESIGN?Slide 2 © Fjord 2011 | Confidential
  3. 3. WHAT IS DESIGN?“Design is how it works”Slide 3 © Fjord 2011 | Confidential
  4. 4. AGENDA DESIGN LOVE IT‟S ALL ABOUT CONTEXT TIPS AND TOOLSSlide 4 © Fjord 2010 | Confidential
  5. 5. AGENDA DESIGN LOVESlide 5 © Fjord 2010 | Confidential
  6. 6. WHY LOVE? What‟s love got to do with it?Slide 6 © Fjord 2010 | Confidential
  7. 7. #1 – WE ALL WANT TO EXPERIENCE LOVE We also want our creations to be loved!Slide 7 © Fjord 2011 | Confidential
  8. 8. #2 – VALUE INCREASES TOWARDS THE HEARTSlide 8 © Fjord 2011 | Confidential
  9. 9. TWO KINDS OF SOFTWARE BUSINESSESSlide 9 © Fjord 2011 | Confidential
  10. 10. WHERE SIGNIFICANT PROGRESS WILL TAKE PLACE Disruption Value creation InnovationSlide 10 © Fjord 2011 | Confidential
  11. 11. #3 – IT‟S A POWERFUL LOVE AFFAIR ALREADYSlide 11 © Fjord 2011 | Confidential
  12. 12. HOW IS LOVE DESIGNED? Three universal stages to attain true loveSlide 12 © Fjord 2010 | Confidential
  13. 13. THREE UNIVERSAL STAGES TO ATTAIN TRUE LOVE Digital service Desired user Required equivalent reaction characteristics Meets real needs. Easy to grasp. MATCHMAKING DISCOVERY AHA ! Contextually relevant. Attentive, fun, attractive. Great DATING TRIAL WOW ! first experience. You want to tell others. Loyal, evolves with you, tailored to TRUE LOVE LOYALTY OF COURSE ! match you well. Problem solving.Slide 13 © Fjord 2011 | Confidential
  14. 14. DESIGNING FOR AHA, WOW AND OF COURSE OF COURSEENGAGEMENT AHA WOW TIME MATCHMAKING DATING TRUE LOVE Slide 14 © Fjord 2010 | Confidential
  15. 15. THREE STEPS TO ATTAIN LOVE 1 MATCHMAKING Discovery in an increasingly crowded marketSlide 15 © Fjord 2010 | Confidential
  16. 16. There is a massive fight for timeshareSlide 16 © Fjord 2011 | Confidential
  17. 17. DESIGNING THE „HOOK‟It‟s critical to hone in on one or two things that are truly appealing, andfocus on doing them really well.Slide 17 © Fjord 2011 | Confidential
  18. 18. MAKING IT ALL EASY, YET TAILOREDMaking complex solutions easy for the users is anartform. Presenting the solutions in a clear compellingmanner is key to success.Slide 18 © Fjord 2011 | Confidential
  19. 19. 2 DATING Engaging users with your serviceSlide 19 © Fjord 2010 | Confidential
  20. 20. THE ENGAGEMENT FUNNELIt‟s critical to make it easy to get started.Slide 20 © Fjord 2011 | Confidential
  21. 21. GAMING AND SOCIAL Competing & collecting Gaming dynamics Social driversSlide 21 © Fjord 2011 | Confidential
  22. 22. BEAUTY Ericsson IPTV Remote Visual richness and appealCitibank FlipboardVisual meaning and glanceability A tactile reader Slide 22 © Fjord 2011 | Confidential
  23. 23. 3 TRUE LOVE Loyalty - a fluid, meaningful, and ever-present relationshipSlide 23 © Fjord 2010 | Confidential
  24. 24. PEOPLE KNOWLEDGE AS THE LOVE FOUNDATION I am a better partner and servant to you if I know you well, and also know who you know. How can user knowledge be turned into a benefit for the user?Slide 24 © Fjord 2011 | Confidential
  25. 25. ATOMIZED SERVICES AS THE LOVE FOUNDATION People end up thankful to those who consistently deliver value across various services and touchpoints. VOIP communication will be integrated across mobile Maps are relevant across experiencesSlide 25 © Fjord 2011 | Confidential
  26. 26. FLUIDITY AS THE LOVE FOUNDATION I want my partner to always be there with me regardless of where I am or what I do. It’s an ever-present relationship.Slide 26 © Fjord 2011 | Confidential
  27. 27. AGENDA IT‟S ALL ABOUT CONTEXTSlide 28 © Fjord 2010 | Confidential
  28. 28. WHAT IS CONTEXT IN DIGITAL DESIGN? …and why is it relevant for mobile experiences?Slide 29 © Fjord 2010 | Confidential
  29. 29. DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS TECHNICAL HUMAN Slide 30 © Fjord 2011 | Confidential
  30. 30. DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS Things you can detect with sensors, derive from a user‟s data, technically feasible. HUMAN Slide 31 © Fjord 2011 | Confidential
  31. 31. DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS Things you can detect with sensors, derive from a user‟s data, technically feasible. The bigger picture of human behavior and intent. Can be studied but may not be detectable. Slide 32 © Fjord 2011 | Confidential
  32. 32. DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS MOVEMENT PREFERENCES HEART SOCIAL RATE NETWORK TIME OF DAY PEOPLE NEARBY USAGE LOCATION CALENDAR PATTERNS WEATHER DEVICE SCHEDULE NUANCES OF BEHAVIOUR MOOD GROUP DYNAMICS ETIQUETTE MEANINGS OF DESIRES EXPECTATIONS RELATIONSHIPS LIKES AND GOALS DISLIKES Slide 33 © Fjord 2011 | Confidential
  33. 33. WE EXPECT MORE FROM A DIGITAL EXPERIENCE INDUSTRIAL MODEL DIGITAL MODEL SOLUTION PETER SOLUTION SARAH MAHIN SOLUTION SOLUTION CENTRALLY CREATED SOLUTIONS ARE SOLUTIONS ARE CONFIGURED INDIVIDUALLY AROUND PUSHED TO A MASS AUDIENCE PEOPLESlide 34 © Fjord 2011 | Confidential
  34. 34. WE NEED TO MOVE… MOVEMENT PREFERENCES HEART SOCIAL RATE TIME OF DAY PEOPLE FROM NETWORK HERE NEARBY USAGE LOCATION CALENDAR PATTERNS WEATHER DEVICE SCHEDULE NUANCES OF BEHAVIOUR MOOD GROUP DYNAMICS ETIQUETTE MEANINGS OF DESIRES EXPECTATIONS RELATIONSHIPS LIKES AND GOALS DISLIKES Slide 35 © Fjord 2011 | Confidential
  35. 35. WE NEED TO MOVE… MOVEMENT PREFERENCES HEART SOCIAL RATE NETWORK TIME OF DAY PEOPLE NEARBY USAGE LOCATION CALENDAR PATTERNS WEATHER DEVICE SCHEDULE TO HERE NUANCES OF BEHAVIOUR MOOD GROUP DYNAMICS ETIQUETTE MEANINGS OF DESIRES EXPECTATIONS RELATIONSHIPS LIKES AND GOALS DISLIKES Slide 36 © Fjord 2011 | Confidential
  36. 36. DESIGNING SMART EXPERIENCES FOR PEOPLE …using context, but avoiding a backlashSlide 37 © Fjord 2010 | Confidential
  37. 37. THE MYTH USER EXPERIENCE SENSING TECHNOLOGY Slide 38 © Fjord 2010 | Confidential
  38. 38. AN EXAMPLE COLOR IS LOCATION-AWARE AND SOCIALLY CONNECTED… “This all makes for an interesting feeling, similar to firing up Chatroulette for the first time, except that we only saw a table covered in bacon, a door and several photos of walls.” -Thomas Houston, switched.com …BUT DOESN‟T MAKE SENSE Slide 39 © Fjord 2010 | Confidential
  39. 39. ANOTHER EXAMPLE FACEBOOK FACE RECOGNITION CONNECTS PEOPLE‟S IMAGES TO THEIR SOCIAL NETWORK… “its new face-recognition feature could become the latest example of a seemingly innocuous development morphing into a serious threat to the privacy of our (visual) data.” -Megan Geuss, PC World …BUT THEY FIND IT INTRUSIVE Slide 40 © Fjord 2011 | Confidential
  40. 40. THE MOST FAMOUS EXAMPLE MICROSOFT‟S PAPER CLIP. SUPPOSED TO BE HELPFUL… “one of the worst software design blunders in the annals of computing” - Smithsonian Magazine …BUT PEOPLE HATED IT Slide 41 © Fjord 2011 | Confidential Source: http://en.wikipedia.org/wiki/Office_Assistant
  41. 41. THE REALITY USER EXPERIENCE THE MYTH THE REALITY CONTEXT AWARENESS Slide 43 © Fjord 2010 | Confidential
  42. 42. WE ARE TRYING TO GET THERE USER EXPERIENCE LOCAL SEARCH SAT NAV CONTEXT AWARENESS Slide 44 © Fjord 2010 | Confidential
  43. 43. BUT WE KEEP FALLING DOWN HERE USER EXPERIENCE LOCAL SEARCH SAT NAV MICROSOFT PAPERCLIP COLOR APP CONTEXT IPHONE LOCATION TRACKING AWARENESS FACEBOOK FACIAL RECOGNITION Slide 45 © Fjord 2010 | Confidential
  44. 44. A FAILED CONTEXT AWARE SYSTEM • Misunderstands your needs • Removes options based on what it (wrongly) thinks you want • Acts on your behalf without your approval (explicit or implicit) THE ABYSS • Shares inappropriately • Does not understand your culture or social relationships • Offers unsolicited advice Slide 46 © Fjord 2011 | Confidential
  45. 45. THERE ARE TWO SWEET SPOTS SWEET SPOT 2 SWEET USER EXPERIENCE SPOT 1 CONTEXT AWARENESSSlide 47 © Fjord 2010 | Confidential
  46. 46. VERY FEW THINGS CURRENTLY MAKE IT TO SWEET SPOT 2 YOUR GOOD FRIEND USER EXPERIENCE SIRI CONTEXT AWARENESS Slide 48 © Fjord 2011 | Confidential
  47. 47. SIMPLE DESIGN RULES FOR „SMART‟ SERVICES …how to design for context and keep users delightedSlide 49 © Fjord 2010 | Confidential
  48. 48. FOR A SUCCESSFUL CONTEXT-AWARE SERVICE, THE BENEFIT MUST OUTWEIGH THE COST.Slide 50 © Fjord 2011 | Confidential
  49. 49. THE FORMULA UTILITY, AUTOMATION, PLEASURE, BEAUTY, NEW PERSPECTIVE _ Benefit SUCESSFUL = Cost CONTEXT-AWARE LOSS OF CONTROL, SERVICE LACK OF PRIVACY, DISTRACTION, ANXIETY Slide 51 © Fjord 2010 | Confidential
  50. 50. PUT USERS AT THE CENTER OF 1 THE DESIGN PROCESSSlide 52 © Fjord 2011 | Confidential
  51. 51. COLOR VS FOURSQUARE VSSlide 53 © Fjord 2011 | Confidential
  52. 52. B _ = C REDUCE COST TO THE USER 2 TO IMPROVE THE EXPERIENCESlide 54 © Fjord 2011 | Confidential
  53. 53. FACEBOOK VS GOOGLE+ VSSlide 55 © Fjord 2011 | Confidential
  54. 54. TO REDUCE COSTS Increase • Transparency REDUCE COSTS • User autonomy • SecuritySlide 56 © Fjord 2011 | Confidential
  55. 55. B _ = C INCREASE BENEFIT TO THE USER 3 TO IMPROVE EXPERIENCESlide 57 © Fjord 2011 | Confidential
  56. 56. TO INCREASE BENEFIT Appropriately increase • Personalisation INCREASE BENEFITS • Adaptation • Automation Slide 58 © Fjord 2011 | Confidential
  57. 57. BRINGING IT TOGETHER SWEET SPOT 2 USER EXPERIENCE SWEET SPOT 1 REDUCE INCREASE COST BENEFIT CONTEXT AWARENESS Slide 59 © Fjord 2010 | Confidential
  58. 58. IN SUMMARY …the key take-awaysSlide 60 © Fjord 2010 | Confidential
  59. 59. CONTEXT BASICS CONTEXT IS EVERYWHERE, AND THE MEANING OF 1 CONTEXT IS CHANGING DETECTING CONTEXT IS NOT THE SAME AS IMPROVING 2 THE USER EXPERIENCE (the myth) IF THE COSTS OUTWEIGH THE BENEFITS, 3 USER EXPERIENCE DROPS MASSIVELY LEVERAGING CONTEXT IS A DESIGN CHALLENGE 4 AS WELL AS A TECHNICAL CHALLENGESlide 61 © Fjord 2011 | Confidential
  60. 60. HOW TO DESIGN FOR CONTEXT PUT USERS AT THE CENTER OF 1 THE DESIGN PROCESS REDUCE COST TO IMPROVE 2 USER EXPERIENCE INCREASE BENEFIT TO IMPROVE 3 USER EXPERIENCE IF YOU CAN‟T REACH SWEET SWEET 4 SPOT 2 AIM FOR SPOT 1Slide 62 © Fjord 2011 | Confidential
  61. 61. AGENDA TIPS AND TOOLSSlide 63 © Fjord 2010 | Confidential
  62. 62. SCALING ACROSS PLATFORMS DEFINE ELEMENTS CREATE PLATFORM VERSIONS DEVELOP & GO TO MARKET Core IA 1. iPhone Feature set Content index 2. iPad Business rules Core screens 3. Android Terminology, brand Design Patterns 4. RIM Cross-platform deltas 5. WP7 …Slide 64 © Fjord 2011 | Confidential
  63. 63. NATIVE or HTML5? 1 DEFINE YOUR CORE USER EXPERIENCE 2 FOCUS ON EXECUTING ON A LEAD NATIVE PLATFORM 3 REFINE THE NATIVE EXPERIENCE PROTOTYPE ON HTML5 TO SEE IF IT CAN SUPPORT 4 YOUR INTERACTION MODEL EXAMPLES: OPENAPPMKT.COM Slide 65 © Fjord 2011 | Confidential
  64. 64. RAPID PROTOTYPING TOOL KEYNOTOPIA.COMSlide 66 © Fjord 2011 | Confidential
  65. 65. Thank You! @fjord prashant@fjordnet.com www.fjordnet.comSlide 67 © Fjord 2011 | Confidential

×