Taming the Frontier — A Peek into the Future of E-Commerce

As designers, we've only just scratched the surface of building effective mobile e-commerce sites. So why look even further into the future? New devices and device types are already cresting the horizon. Android watches, Google Glass, and SmartTVs are here or just around the corner. How will these different contexts affect interaction, layout, and user expectations? This talk will explore lessons learned from years of building enterprise mobile e-commerce sites. We'll walk through some theories behind designing interfaces for these devices. We'll explore current future-forward UIs and see who's doing it well and who's not. By the end of this talk, Kyle will have painted a detailed picture of the future of e-commerce so you'll feel prepared for the future. It's coming sooner than you think.

Transcript

2. Taming the Frontier / Frontier versus Future Just make a bunch of guesses. If one of them comes true, you’ll be a god. Otherwise, no one will remember. “ MY BEST FRIEND
3. The FUTURE The FUTURE Taming the Frontier / Frontier versus Future
4. The FUTURE The FUTURE Taming the Frontier / Frontier versus Future …is really kind of scary.
5. The Frontier Taming the Frontier / Frontier versus Future
6. Taming the Frontier / Frontier versus Future
7. Taming the Frontier / Frontier versus Future
8. Taming the Frontier / Frontier versus Future
9. Taming the Frontier / Frontier versus Future The Frontier is mapped. It’s just really poorly mapped. Most of it is inaccurate. Or full of lies. Here there be dragons
10. Taming the Frontier / Frontier versus Future The Frontier is mapped. It’s just really poorly mapped. Most of it is inaccurate. Or full of lies. Here there be dragons
11. Taming the Frontier / Frontier versus Future The Frontier is mapped. It’s just really poorly mapped. Most of it is inaccurate. Or full of lies. Here there be dragons
12. Frontier Design Taming the Frontier / Frontier Design as an Idea
13. Taming the Frontier / Frontier Design as an Idea Have some fun with it Take a break from doing the same things over and over again.
14. Taming the Frontier / Frontier Design as an Idea
15. Taming the Frontier / Frontier Design as an Idea
16. Taming the Frontier / Frontier Design as an Idea It’s not necessarily bad Optimizing for conversion is important, don’t get me wrong.
17. Taming the Frontier / Frontier Design as an Idea …but it’s also not exciting And that’s how you get bored designers.
18. Taming the Frontier / Frontier Design as an Idea Stay ahead of the game Refining the same details ad infinitum is a good way to stop
 seeing the forest for the trees.
19. Taming the Frontier / Frontier Design as an Idea just over the horizon Use what’s just beyond the horizon to see what you should be focusing on next.
20. Taming the Frontier / Frontier versus Future This doesn’t mean you should start building sites for refrigerators. …at least not yet
21. Taming the Frontier / Frontier Design as an Idea Frontier Design If any one of these things is successful in the future,
 there are things about it that will be successful in the present.
22. Taming the Frontier / Frontier Design as an Idea You can’t fail And even if none of them are successful, you’ll still have
 learned from them and made them your own.
23. Frontier Devices Taming the Frontier / Frontier Devices
24. Taming the Frontier / Frontier Devices Far Frontier Near Frontier Immediate Frontier 1 2 3
25. Taming the Frontier / Frontier Devices Far Frontier Near Frontier Immediate Frontier 1 2 3
26. Far Frontier Taming the Frontier / Far Frontier — Google Glass
27. Taming the Frontier / Far Frontier — Google Glass
28. Taming the Frontier / Far Frontier — Google Glass Some assumptions Your assumptions about these devices can be just as
 useful whether or not they’re true.
29. Taming the Frontier / Far Frontier — Google Glass Voice over touch Search is going to be the main method of navigation.
30. Taming the Frontier / Far Frontier — Google Glass The screen is tiny Information density is going to be a real problem.
31. Taming the Frontier / Far Frontier — Google Glass People will still swipe How else are you going to use Glass while on the toilet?
32. Taming the Frontier / Far Frontier — Google Glass Little to no privacy How do you enter payment information on the bus?
33. Taming the Frontier / Far Frontier — Google Glass Search Information Density Checkouts 1 2 3
34. Taming the Frontier / Far Frontier — Google Glass
35. Taming the Frontier / Far Frontier — Google Glass
36. Taming the Frontier / Far Frontier — Google Glass
37. Taming the Frontier / Far Frontier — Google Glass
38. Taming the Frontier / Far Frontier — Google Glass
39. Taming the Frontier / Far Frontier — Google Glass
40. Taming the Frontier / Far Frontier — Google Glass
41. Taming the Frontier / Far Frontier — Google Glass
42. Taming the Frontier / Far Frontier — Google Glass
43. Taming the Frontier / Far Frontier — Google Glass
44. Taming the Frontier / Far Frontier — Google Glass
45. Taming the Frontier / Far Frontier — Google Glass
46. Taming the Frontier / Far Frontier — Google Glass
47. Taming the Frontier / Far Frontier — Google Glass
48. Taming the Frontier / Far Frontier — Google Glass
49. Taming the Frontier / Far Frontier — Google Glass
50. Taming the Frontier / Far Frontier — Google Glass 2 3 1 Search Information Density Checkouts
51. Taming the Frontier / Far Frontier — Google Glass We’re pretty bad at search Search is a really difficult problem to solve. But we’ve been
 doing this for a long time. If we can figure out Android 2.3, we can figure out how to make search suck less.
52. Taming the Frontier / Far Frontier — Google Glass Our users aren’t robots Even it makes it easier for us to treat them like they are.
53. Taming the Frontier / Far Frontier — Google Glass If I asked a sales representative for Blue Jeans, they’d know what I wanted. Search engines on the other hand…
54. Taming the Frontier / Far Frontier — Google Glass If I asked a sales representative for Blue Jeans, they’d know what I wanted. Search engines on the other hand…
55. Taming the Frontier / Far Frontier — Google Glass This isn’t going to cut it If they have a hard time scrolling, having to scroll a bunch to find the item they want isn’t going to work.
56. Taming the Frontier / Far Frontier — Google Glass Targeted search converts Right now, an average of 26% of purchases start with a search. Data gathered from Mobify client sites, 2014
57. Taming the Frontier / Far Frontier — Google Glass 2 3 1 Search Information Density Checkouts
58. Taming the Frontier / Far Frontier — Google Glass 3 1 Search Checkouts Information Density 2
59. Taming the Frontier / Far Frontier — Google Glass Glass is equivalent to viewing a 25 inch screen from 8 feet away. Google Glass iPhone 5 240px 427px 320px That’s pretty small. 568px
60. Taming the Frontier / Far Frontier — Google Glass what is this? a button for ants?
61. Taming the Frontier / Far Frontier — Google Glass Providing users a clear action visible on first load measurably increases conversion. Mobify R&D 2012
62. Taming the Frontier / Far Frontier — Google Glass Clarity is king The less screen real estate you have, the more you’re
 going to need to be clear what you want your users
 to do next. Otherwise, they’ll just leave.
63. Taming the Frontier / Far Frontier — Google Glass How can we be clearer? Instead of showing the users a random list of items, we need to find ways to present them the right items sooner. Less swiping, more acting.
64. Taming the Frontier / Far Frontier — Google Glass 3 1 Search Checkouts Information Density 2
65. Taming the Frontier / Far Frontier — Google Glass 3 1 Search Checkouts Information Density 2
66. Taming the Frontier / Far Frontier — Google Glass No one wants to see that
67. Taming the Frontier / Far Frontier — Google Glass No one wants to see that There are few things more boring than watching someone type in a bunch of information on a phone.
68. Taming the Frontier / Far Frontier — Google Glass No one wants to do that Okay, I thought of something. Typing in all of your information on your phone.
69. Taming the Frontier / Far Frontier — Google Glass You can’t count on browsers The average user does not have a password manager and they don’t use browser auto-fill. It’s all manual.
70. Taming the Frontier / Far Frontier — Google Glass Don’t block the flow Removing forced registration from the checkout process resulted in a 45% checkout completion bump. http://www.uie.com/articles/three_hund_million_button
71. Taming the Frontier / Far Frontier — Google Glass Accounts aren’t useful Users have no reason to sign up for accounts right now. Let’s give them a reason.
72. Taming the Frontier / Far Frontier — Google Glass Keep the Keyboard Down™ Don’t make your users fill out information you don’t really need. Every single step you add increases the chance that they’ll bounce.
73. Taming the Frontier / Far Frontier — Google Glass Most checkouts ask for too much unnecessary information from the user. Don’t introduce needless complexity just to eke out a bit more data from your user.
74. Taming the Frontier / Far Frontier — Google Glass Combine fields wherever you can. Use zip codes to look up street name, city, and state. Auto-detect credit card type.
75. Taming the Frontier / Far Frontier — Google Glass The end of the line Checkouts are the tightest point in the funnel but we don’t seem to be trying to make it much easier.
76. Taming the Frontier / Far Frontier — Google Glass
77. Taming the Frontier / Far Frontier — Google Glass
78. Taming the Frontier / Far Frontier — Google Glass One touch checkout No card number entry No need to type addresses No card information shared with merchant
79. Taming the Frontier / Far Frontier — Google Glass We can’t ignore this E-commerce on Google Glass definitely isn’t going to work without a seamless checkout experience. This has to be one of the first problems we tackle.
80. Taming the Frontier / Far Frontier — Google Glass Search Information Density Checkouts 1 2 3
81. Near Frontier Taming the Frontier / Near Frontier — Android Wear &  Watch
82. Taming the Frontier / Near Frontier — Android Wear &  Watch Smart Watches  Watch Android Wear Samsung Gear
83. It’s really really small The screen is even smaller than Glass. It’s like viewing a watch from arm distance. Taming the Frontier / Near Frontier — Android Wear &  Watch
84. It’s a notification machine These things aren’t for doing stuff. They’re for deciding
 if you want to do stuff. Taming the Frontier / Near Frontier — Android Wear &  Watch
91. Information density The screen is small. But we talked about that already. Taming the Frontier / Near Frontier — Android Wear &  Watch
92. 1 Push Notifications Cross-Device Sessions 2 Taming the Frontier / Near Frontier — Android Wear &  Watch
93. Keep your follow cost low Push notifications, like many things, adhere strictly to the Uncle Ben philosophy. With great power… Taming the Frontier / Near Frontier — Android Wear &  Watch
94. Taming the Frontier / Near Frontier — Android Wear &  Watch
95. Taming the Frontier / Near Frontier — Android Wear &  Watch
96. Taming the Frontier / Near Frontier — Android Wear &  Watch “Hey, that thing you explicitly expressed interest in is on sale.” versus “Hey, we really want you to buy this thing you’ve never heard of.”
97. No one likes spam Push notifications should be few and far between. When they’re sent, they should be immediately valuable — and personalized — to the user. Taming the Frontier / Near Frontier — Android Wear &  Watch
98. How does one push? Smart watches are all about getting push notifications. This might be a bit of a problem. Taming the Frontier / Near Frontier — Android Wear &  Watch
99. To each their own Desktop browsers have all started to dip their toes in the water a little. We’ve got nothing on mobile. Taming the Frontier / Near Frontier — Android Wear &  Watch
100. Taming the Frontier / Near Frontier — Android Wear &  Watch Push, along w/ Offline, are the key features proprietary native app platforms have over the open web. Not for long! http://t.co/uWONmgjKFj “ @brianleroux ”
101. Taming the Frontier / Near Frontier — Android Wear &  Watch
102. Taming the Frontier / Near Frontier — Android Wear &  Watch
103. It’s a system-level change Even if this becomes a standard pretty quickly, it’ll be a while before we see this start dropping on devices. Taming the Frontier / Near Frontier — Android Wear &  Watch
104. Are we ready for watches? Definitely not. But we should figure out how we’ll integrate push notifications when we’re able. Taming the Frontier / Near Frontier — Android Wear &  Watch
105. 1 Push Notifications Cross-Device Sessions 2 Taming the Frontier / Near Frontier — Android Wear &  Watch
106. You can’t buy on a watch There’s no way to input personal information on your watch. You’re going to start your session here but you need to end up somewhere else to finish it. Taming the Frontier / Near Frontier — Android Wear &  Watch
107. Why get locked in? People generally want to use whatever is handiest. Why not give them the option to switch to another device when they want to? Taming the Frontier / Near Frontier — Android Wear &  Watch
108. Handoff Apple recently launched a system called Handoff in OS X Yosemite that gives users the option to quickly move tasks between devices. Taming the Frontier / Near Frontier — Android Wear &  Watch
109. Taming the Frontier / Near Frontier — Android Wear &  Watch
110. Taming the Frontier / Near Frontier — Android Wear &  Watch
111. Close but no cigar Handoff gives us an opportunity to have users move between devices easily. But it’s not seamless. Taming the Frontier / Near Frontier — Android Wear &  Watch
112. Get out of their way Don’t hold your users back just because we don’t currently have a system in place to do this. Find a way. Taming the Frontier / Near Frontier — Android Wear &  Watch
113. 1 Push Notifications Cross-Device Sessions 2 Taming the Frontier / Near Frontier — Android Wear &  Watch
114. Immediate Frontier Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
115. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces 10-foot interfaces
116. It’s really really big But it’s also far away. 10-foot interfaces have about the same information density as your average tablet. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
117. It has control issues Best case, you’ve got a mouse and keyboard hooked up. Worst case? A directional pad and an okay button. up up down down left right left right b a select start Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
118. They’re a pain to use Information on screen is at a premium in these
 interfaces. Your first screen better have enough info for the user to act right away. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
119. Personalization Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
120. Our users are individuals We give the exact same experience to every single user,
 even though we know that each of them is unique and has
 unique needs and wants. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
121. No half-measures ‘Recommended Item’ systems are a start towards personalization but they don’t go far enough. They’re a last-resort system instead of a first-line. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
122. 10-feet to freedom 10-foot interfaces have been forced to implement excellent personalization systems because having to use the interfaces is so painful. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
123. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
124. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
125. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
126. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
127. “Here is everything in our store that matches the words blue or shirt, sir.” …and also maybe a yellow shirt with some blue on it. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
128. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
129. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
130. Rinse and repeat It’ll be easiest to personalize for repeat visitors at first. Reward their loyalty by learning what they like. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
131. Remember your users Even if you’re doing something as simple as remembering a user’s size selection across visits. Even the little things count. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
132. You can ask questions Have users rate the relevancy of items in search or items on a Product List Page. Turns out people like telling you about themselves. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
133. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
134. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
135. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
136. Start judging people If you start getting a sense of the type of user someone is, you can start making assumptions about the content they want. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
137. Show off your content Some stores have hundreds of items and no good way to show them all to their users. Personalization is a great way to start showing that content off. Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces
138. Personalization solves… Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces 1 Information Density Search Issues 2
139. Personalization solves… Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces 1 Information Density Search Issues 2
140. Personalization solves… Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces 1 Information Density Search Issues 2
141. Personalization solves… Taming the Frontier / Immediate Frontier — Ten-Foot Interfaces 1 Information Density Search Issues 2
142. Modern Day Taming the Frontier / Modern Day
143. Taming the Frontier / Modern Day — Desktop & Mobile 1 Humanize Search Be Clear 2 Streamline Checkouts 3 Push 4 Personalize Content 5
144. Taming the Frontier / Modern Day — Desktop & Mobile 1 Humanize Search Be Clear 2 Streamline Checkouts 3 Push 4 Personalize Content 5
145. Taming the Frontier / Modern Day — Desktop & Mobile 1 2 Streamline Checkouts 3 4 5 Humanize Search Be Clear Push Personalize Content
146. Taming the Frontier / Modern Day — Desktop & Mobile 1 2 3 Push Useful Notifications 4 5 Personalize Content Be Clear Humanize Search Streamline Checkouts
147. Taming the Frontier / Modern Day — Desktop & Mobile 1 Be Clear 2 3 4 5 Humanize Search Streamline Checkouts Push Personalize Content
148. Taming the Frontier / Modern Day — Desktop & Mobile 1 Be Clear 2 3 4 5 Humanize Search Streamline Checkouts Push Useful Notifications Personalize Content
149. A Thought Experiment Taming the Frontier / Frontier Design as a Process
150. What are you great at? This step is all about confirming the truths that you hold to be self-evident. These are the things you do that you will always need to do. Taming the Frontier / Frontier Design as a Process
151. What do you suck at? Next, find everything that is still a problem with what you do. This includes everything you’ve given up on
 ever fixing. Taming the Frontier / Frontier Design as a Process
152. Find your Frontier Everyone is at a different stage in what they’re doing. Your Frontier might not be future devices. It’s anything you perceive as being further ahead than you are. Taming the Frontier / Frontier Design as a Process
153. Find the commonalities These are the things you need to work on. Taming the Frontier / Frontier Design as a Process
154. This is about Blue Sky The idea isn’t to come up with answers to all of our problems. It’s to define the problems themselves. Taming the Frontier / Frontier Design as a Process
155. Explore your boundaries We’ve gotten used to giving up when we hit big problems — writing them off as ‘part of the platform.’ Taming the Frontier / Frontier Design as a Process
156. Be ever vigilant You would never build a highway under the assumption that you only need to meet current needs. Taming the Frontier / Frontier Design as a Process
157. We’re never the future The Frontier is a great indicator of what’s coming down the line if you learn to look for it. Taming the Frontier / Frontier Design as a Process
158. Be Future Proof Taming the Frontier / Thanks …or at least future resilient
159. Go explore Taming the Frontier / Thanks
160. Thank you very much. Taming the Frontier / Thanks Kyle Peatt
 @kpeatt Now go enjoy your lunch.