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.

1. DRAFT: Mobile Design
Prashant Agarwal, Managing Director

2. WHAT IS DESIGN?
Slide 2 © Fjord 2011 | Confidential

3. WHAT IS DESIGN?
“Design is how it works”
Slide 3 © Fjord 2011 | Confidential

4. AGENDA
DESIGN LOVE
IT‟S ALL ABOUT CONTEXT
TIPS AND TOOLS
Slide 4 © Fjord 2010 | Confidential

5. AGENDA
DESIGN LOVE
Slide 5 © Fjord 2010 | Confidential

6. WHY LOVE?
What‟s love got to do with it?
Slide 6 © Fjord 2010 | Confidential

7. #1 – WE ALL WANT TO EXPERIENCE LOVE
We also want our creations to be loved!
Slide 7 © Fjord 2011 | Confidential

8. #2 – VALUE INCREASES TOWARDS THE HEART
Slide 8 © Fjord 2011 | Confidential

9. TWO KINDS OF SOFTWARE BUSINESSES
Slide 9 © Fjord 2011 | Confidential

10. WHERE SIGNIFICANT PROGRESS WILL TAKE PLACE
Disruption
Value creation
Innovation
Slide 10 © Fjord 2011 | Confidential

11. #3 – IT‟S A POWERFUL LOVE AFFAIR ALREADY
Slide 11 © Fjord 2011 | Confidential

12. HOW IS LOVE DESIGNED?
Three universal stages to attain true love
Slide 12 © Fjord 2010 | Confidential

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. DESIGNING FOR AHA, WOW AND OF COURSE
OF COURSE
ENGAGEMENT
AHA
WOW
TIME
MATCHMAKING DATING TRUE LOVE
Slide 14 © Fjord 2010 | Confidential

15. THREE STEPS TO ATTAIN LOVE
1 MATCHMAKING
Discovery in an increasingly crowded market
Slide 15 © Fjord 2010 | Confidential

16. There is a massive fight for timeshare
Slide 16 © Fjord 2011 | Confidential

17. DESIGNING THE „HOOK‟
It‟s critical to hone in on one or two things that are truly appealing, and
focus on doing them really well.
Slide 17 © Fjord 2011 | Confidential

18. MAKING IT ALL EASY, YET TAILORED
Making complex solutions easy for the users is an
artform. Presenting the solutions in a clear compelling
manner is key to success.
Slide 18 © Fjord 2011 | Confidential

19. 2 DATING
Engaging users with your service
Slide 19 © Fjord 2010 | Confidential

20. THE ENGAGEMENT FUNNEL
It‟s critical to make it easy to get started.
Slide 20 © Fjord 2011 | Confidential

21. GAMING AND SOCIAL
Competing & collecting
Gaming dynamics Social drivers
Slide 21 © Fjord 2011 | Confidential

22. BEAUTY
Ericsson IPTV Remote
Visual richness and
appeal
Citibank Flipboard
Visual meaning and glanceability A tactile reader
Slide 22 © Fjord 2011 | Confidential

23. 3 TRUE LOVE
Loyalty - a fluid, meaningful, and ever-present relationship
Slide 23 © Fjord 2010 | Confidential

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. 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 experiences
Slide 25 © Fjord 2011 | Confidential

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. AGENDA
IT‟S ALL ABOUT CONTEXT
Slide 28 © Fjord 2010 | Confidential

28. WHAT IS CONTEXT IN DIGITAL DESIGN?
…and why is it relevant for mobile experiences?
Slide 29 © Fjord 2010 | Confidential

29. DIGITAL CONTEXT IS MADE UP OF TWO ELEMENTS
TECHNICAL
HUMAN
Slide 30 © Fjord 2011 | Confidential

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. 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. 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. 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 PEOPLE
Slide 34 © Fjord 2011 | Confidential

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. 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. DESIGNING SMART EXPERIENCES FOR PEOPLE
…using context, but avoiding a backlash
Slide 37 © Fjord 2010 | Confidential

37. THE MYTH
USER
EXPERIENCE
SENSING
TECHNOLOGY
Slide 38 © Fjord 2010 | Confidential

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. 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. 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. THE REALITY
USER
EXPERIENCE
THE MYTH
THE REALITY
CONTEXT
AWARENESS
Slide 43 © Fjord 2010 | Confidential

42. WE ARE TRYING TO GET THERE
USER EXPERIENCE
LOCAL SEARCH
SAT NAV
CONTEXT
AWARENESS
Slide 44 © Fjord 2010 | Confidential

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. 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. THERE ARE TWO SWEET SPOTS
SWEET
SPOT 2
SWEET
USER EXPERIENCE
SPOT 1
CONTEXT
AWARENESS
Slide 47 © Fjord 2010 | Confidential

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. SIMPLE DESIGN RULES FOR „SMART‟ SERVICES
…how to design for context and keep users delighted
Slide 49 © Fjord 2010 | Confidential

48. FOR A SUCCESSFUL CONTEXT-AWARE SERVICE,
THE BENEFIT MUST OUTWEIGH THE COST.
Slide 50 © Fjord 2011 | Confidential

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. PUT USERS AT THE CENTER OF
1
THE DESIGN PROCESS
Slide 52 © Fjord 2011 | Confidential

51. COLOR VS FOURSQUARE
VS
Slide 53 © Fjord 2011 | Confidential

52. B
_
=
C
REDUCE COST TO THE USER
2
TO IMPROVE THE EXPERIENCE
Slide 54 © Fjord 2011 | Confidential

53. FACEBOOK VS GOOGLE+
VS
Slide 55 © Fjord 2011 | Confidential

54. TO REDUCE COSTS
Increase
• Transparency
REDUCE
COSTS • User autonomy
• Security
Slide 56 © Fjord 2011 | Confidential

55. B
_
=
C
INCREASE BENEFIT TO THE USER
3
TO IMPROVE EXPERIENCE
Slide 57 © Fjord 2011 | Confidential

56. TO INCREASE BENEFIT
Appropriately increase
• Personalisation
INCREASE
BENEFITS • Adaptation
• Automation
Slide 58 © Fjord 2011 | Confidential

57. BRINGING IT TOGETHER
SWEET
SPOT 2
USER EXPERIENCE
SWEET
SPOT 1
REDUCE INCREASE
COST BENEFIT
CONTEXT
AWARENESS
Slide 59 © Fjord 2010 | Confidential

58. IN SUMMARY
…the key take-aways
Slide 60 © Fjord 2010 | Confidential

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 CHALLENGE
Slide 61 © Fjord 2011 | Confidential

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 1
Slide 62 © Fjord 2011 | Confidential

61. AGENDA
TIPS AND TOOLS
Slide 63 © Fjord 2010 | Confidential

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. 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. RAPID PROTOTYPING TOOL
KEYNOTOPIA.COM
Slide 66 © Fjord 2011 | Confidential

65. Thank You!
@fjord prashant@fjordnet.com www.fjordnet.com
Slide 67 © Fjord 2011 | Confidential