Slides from M-commerce Event 2014. 99% of consumers' time is spend on other websites than yours. And when luck happens and they visit to buy something you better make sure it performs and works. This talk will dive into the delicate balance between speed, usability and content and provides best practices to create a mobile user experience that's ready for fast conversion.

2. @jeroentjepkema
Founder & CEO

3. Are we ready for mobile commerce?

4. NO?

5. Twinkle100
Tested with webpagetest.org on both Android & iPhone (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps Down, 764Kbps Up))

6. 50%
Electronics
Mobile
Ready?
80%
top 10
retailers
Twinkle100
31%
65%
of all Twinkle100
have optimized
site
Clothing
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps Down, 764Kbps Up))

7. 50%
Electronics
Mobile
Ready?
1,2Mb
2.6s
median time
to first paint
80%
top 10
retailers
Twinkle100
4.27s
median speed
via wifi
31%
65%
Clothing
median
pagesize
of all Twinkle100
have optimized
site
Mobile
Performance
Tested with webpagetest.org on both Android & iPhone (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps Down, 764Kbps Up))
8.57s
median speed
via 3G

8. High Expectations...

9. Fact 1:
Mobile changes consumption of data

10. #1
Mobile changes consumption of data
Instant access
Always accesible
Responsive

11. Fact 2:
Welcom to the Mobile Only generation

12. Mobile Only generation
Mobile"Internet"Users"Who"Never"or"Infrequently"Use"the"Desktop"Internet"
%"Mobile"Browsers"
80%$
70%$
70%$
59%$
60%$
57%$
55%$
54%$
50%$
40%$
50%$
44%$
32%$
30%$
30%$
25%$
22%$
19%$
UK$
Russia$
20%$
10%$
0%$
Egypt$
India$
South$
Africa$
Ghana$
Kenya$
Nigeria$ Indonesia$Thailand$ China$
US$

13. Don’t drop that ball!

14. Smartphone or Tablet?

15. “
Smartphones are the backbone of our daily
media interactions. They have the highest
number of user interactions per day and
serve as the most common starting point for
activities across multiple screens
”
Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

16. 34% of all consumers use the device that’s
closest to them when looking for information
Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

17. Mobile Web vs. Mobile App

18. Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

19. How to start your mobile journey?
51%
36%
12%
Launch Mobile App
Ask Google
N = 1449
Research performed by Bol.com, presented at MIE2014: Bit.ly/MW-MIE13
Visit mobile website

20. #mobile(web)first

21. Designing mobile web into the
customer journey?

22. Desktop
vs.
Mobile

23. More
vs.
Less

24. More
Rich content
Fast connections
Large screen sizes
Couch Commerce
vs.
Less
Small real estate
Touch enabled
Slow/Fast connections
On the move

25. Less Content vs. More Experience?

26. How we perceive experience....

27. How we perceive experience....
15%-20% worse than in reality

28. How we perceive experience....
15%-20% worse than in reality
Task completion has positive impact

29. How we perceive experience....
15%-20% worse than in reality
Task completion has positive impact
Slow downs have more impact

30. How we perceive experience....
15%-20% worse than in reality
Task completion has positive impact
Slow downs have more impact
Always compared to past experiences

31. Consumers visit 18-23 travel websites
before they finally convert
Source: TNS/Nipo

32. Performance influence cycle
Search/Orientation phase
1
Perception of experience
http://twinkle100.measureworks.nl

33. Performance influence cycle
Stimulate content/
conversion
4
Search/Orientation phase
5
1
Perception of experience
http://twinkle100.measureworks.nl
Delivered
experience
3
2
Your website

34. Impact of
Mobile?

35. Impact of
Mobile?
Your
BRAND

36. every
day
facebook
Flipboard
Foursquare
Impact of
Mobile?
twitter
News
apps
Twitter
Human.co
NBA.com
e-mail
linkedin
Fitbit
Your
BRAND

37. every
week
Soundcloud
whatsapp
every
day
Facetime
facebook
Flipboard
Foursquare
Impact of
Mobile?
twitter
Youtube
News
apps
Twitter
Human.co
NBA.com
e-mail
Parkmobile
Netflix
linkedin
Fitbit
Dropbox
Evernote
Your
BRAND

38. every
week
Google
Hangouts
Google
Maps
Soundcloud
whatsapp
every
day
Shazam
Facetime
facebook
Flipboard
Foursquare
twitter
Youtube
Skype
Impact of
Mobile?
News
apps
Twitter
Pathe
Human.co
NBA.com
Appie
e-mail
Parkmobile
Netflix
linkedin
Fitbit
Dropbox
Meetup
every
month
Evernote
Google
Plus
Youtube
Your
BRAND

39. every
week
Google
Hangouts
Google
Maps
Soundcloud
whatsapp
every
day
shazam
Facetime
facebook
Flipboard
Foursquare
twitter
Youtube
Skype
Impact of
Mobile?
Your
BRAND
Twitter
Pathe
Human.co
NBA.com
appie
e-mail
Parkmobile
Netflix
linkedin
Fitbit
Dropbox
Meetup
every
month
Evernote
Google
Plus
Youtube
?

40. Optimize my workflow!

41. #FastDelivery

42. WiFi
4G
3G
What happens if I don’t optimize?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

43. Our Need for speed
@jeroentjepkema, MeasureWorks

44. 1
0,3
0
Interaction: Let’s conversate...
Instantaneous: I like it!
Source: Jakob Nielsen

45. 3
1
0,3
0
Mmm, shall I click away?
Interaction: Let’s conversate...
Instantaneous: I like it!
Source: Jakob Nielsen

46. 10
Only if the task/content is relevant
3
1
0,3
0
Mmm, shall I click away?
Interaction: Let’s conversate...
Instantaneous: I like it!
Source: Jakob Nielsen

48. Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

49. 0:00 sec.
Conversation
starts
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

50. 0:00 sec.
Conversation
starts
2.5 sec.
First reply
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

51. 4.5 sec.
Finish
conversation
0:00 sec.
Conversation
starts
2.5 sec.
First reply
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

52. Time to interact
4.5 sec.
Finish
conversation
0:00 sec.
Conversation
starts
Comfort zone
Tolerated
Frustrated
2.5 sec.
First reply
Time to first
paint
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

53. Speed vs. Engagement per month Bol.com
LD50: 4.85 sec.
90
78,75
56,25
Pageviews (#)
Non-Bounce rate (%)
67,5
45
33,75
22,5
11,25
0
0-0,5
0,5-1
1-1,5
Non-Bounce Mobile
1,5-2
2-2,5
2,5-3
3-3,5
3,5-4
4-5
5-6
6-7
7-8
8-9
9-10
>10
Categorienaam # Pageviews
Non-Bounce Desktop
Baseline: 2,7 sec.
Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

54. #EasyNavigation

55. Mobile = Always on?

56. One thumb device...
49%
36%
22%
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobiledevices.php?goback=.gmp_72842.gde_72842_member_215909354

57. The green zone
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobiledevices.php?goback=.gmp_72842.gde_72842_member_215909354

60. -
One touch?
+

61. Login or
not?

62. Mobile
Search!!

63. #Contentdriven

64. Mobile optimized?

65. Mobile
Optimized

66. The holy grail in experience is
“flow state”

67. “”
Flow is an
optimal experience
that is
“intrinsically enjoyable”

68. Provide relevant content to
support task completion...

69. ...deliver it fast, focus on perception!

70. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0

71. http://answers.yahoo.com/question/index?qid=1005081200005

72. That’s not my
website?

73. Over 60% of people that experienced a slow website ranked
design 2 points lower compared to a fast experience
Slow
Average
Fast
% of respondents that rated the actual website speed
100
75
50
25
0
1
2
3
Design score (1=bad - 5=beautiful)
4
5

74. Mobile Advertisement? Flow vs. Intrusive

75. Telegraaf: Intrusive
Nu.nl: Flow
N = 15
Q = Flow vs. Intrusive. Can you remember the advertiser/brand?
Dumpert: Intrusive
Flipboard: Flow

76. Telegraaf: Intrusive
Nu.nl: Flow
Dumpert: Intrusive
Flipboard: Flow
Flow
Intrusive
If you had to choose?
85%
15%
Do you remember brand?
40%
10%
N = 15
Q = Flow vs. Intrusive. Can you remember the advertiser/brand?

77. How to prioritize content?

79. Priority 1

80. Priority 1
Priority 2

81. Priority 1
Priority 2
Priority 3

82. Mobile First?
Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)

83. 90% of all mobile optimized Twinkle100
sites loads menu before content?

84. Questions so far?

85. #MobileContext

86. Mobile
context?

87. Under time
Content
pressure
Mobile
context?

88. Under time
Content
pressure
(often) one
Usability
handed
Mobile
context?

89. Under time
Content
pressure
(often) one
Usability
handed
Mobile
context?
While
Speed
on the move

90. Under time
Content
pressure
(often) one
Usability
handed
Mobile
context?
While
Speed
on the move

91. Build for
comfort
= Task Completion + ( Usability + Speed )

92. Just Remember:
Deliver before it
turns green!

93. Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl