Responsive Design Along the Conversion Path (Meet Magento PL 2015)

For the last three years, I’ve made the case for responsive, many-device eCommerce websites. Year one was about possibilities. Year two was about my experience on the front lines. Year three was about evolving a responsive frontend strategy for maintainability and performance.

This year I want to get back to business: RWD along the conversion path. I’ve spent the last 18 months building responsive B2B commerce with multi-billion dollar companies, and the last four years thinking about RWD + eCommerce.

This presentation details my thought process and the critical steps when designing for the conversion path as a complete user experience rather than a series of milestones. Expressing the details in this format brings value to the customer and the business.

More info: SOON

Conference: Meet Magento PL 2015
Speaker: Brendan Falkowski @ http://gravitydept.com
Location: Poznan, Poland
Date: October 19, 2015

Transcript

1. Meet Magento PL 2015 Responsive Design Along the Conversion Path Meet Magento PL Poznań, Poland October 19, 2015
2. Meet Magento PL 2015 Brendan Falkowski @Falkowski
3. Meet Magento PL 2015 https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-design-once-sell-everywhere https://speakerdeck.com/brendanfalkowski/responsive-design-panel-where-why-and-how https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two https://speakerdeck.com/brendanfalkowski/responsive-evolution 2012 2013 2014
4. Meet Magento PL 2015 Responsive Design Along the Conversion Path
5. Meet Magento PL 2015 Reduced technology footprint. Increased reach. Improved brand consistency. Merchants Love Responsive Design
6. Meet Magento PL 2015 The Highest ROI vs Mobile Apps or Native Apps
7. Meet Magento PL 2015 1. Framing 2. Wayfinding 3. Filtering 4. Selecting 5. Assessing 6. Converting 7. Delivering Responsive Design that Enhances the User’s Journey
8. Meet Magento PL 2015 Framing 1
9. Meet Magento PL 2015 Framing separates navigation from content.
10. Meet Magento PL 2015
11. Meet Magento PL 2015 Study the business and products first.
12. Meet Magento PL 2015 Why do customers buy the product? How many products are purchased at once? What’s the frequency of orders? Is the focus on acquiring or retaining customers? Do you need to represent an offline business too? Are categories the most useful navigational taxonomy for your catalog? How critical is search relative to the catalog’s size? Is “buy now” more applicable than the “shopping cart” model? Should creating an account be emphasized or required? What priority do promotions, shipping terms and customer support have? Framing Questions
13. Meet Magento PL 2015 Framing Content
14. Meet Magento PL 2015 http://www.hugeinc.com/ideas/perspective/everybody-scrolls We learned that participants almost always scrolled, regardless of how they are cued to do so — and that’s liberating. “ Rebecca Gordon Research Lead @ Huge
15. Meet Magento PL 2015 Framing Content journal.digital-atelier.com
16. Meet Magento PL 2015 Framing is a convenience. It’s not content.
17. Meet Magento PL 2015 1. List all the elements you may include in the header. 2. 3. 4. 5. Better Framing
18. Meet Magento PL 2015 1. List all the elements you may include in the header. 2. Rank them by priority according to business goals. 3. 4. 5. Better Framing
19. Meet Magento PL 2015 1. List all the elements you may include in the header. 2. Rank them by priority according to business goals. 3. Group them into logical sets. 4. 5. Better Framing
20. Meet Magento PL 2015 1. List all the elements you may include in the header. 2. Rank them by priority according to business goals. 3. Group them into logical sets. 4. Design the small-screen interaction around these groups. 5. Better Framing
21. Meet Magento PL 2015 1. List all the elements you may include in the header. 2. Rank them by priority according to business goals. 3. Group them into logical sets. 4. Design the small-screen interaction around these groups. 5. Adapt the patterns for larger screens. Better Framing
22. Meet Magento PL 2015 Navigating Authenticating Converting
23. Meet Magento PL 2015 Promoting Navigating Finding Personalizing Converting Sales Home Search Scoping Sign In Link: Cart Offers Categories Search Form Sign Out Link: Checkout Free Shipping Lookbook Typeahead Dashboard # of Items in Cart Support Company Info Store Locator Wishlist Cart Subtotal
24. Meet Magento PL 2015 Navigating Finding Converting Personalizing
25. Meet Magento PL 2015 Framing Content
26. Meet Magento PL 2015 Consistency Awareness Context Utility Successful Framing
27. Meet Magento PL 2015 Wayfinding 2
28. Meet Magento PL 2015 1. Hierarchical navigation 2. Search 3. Advertisements and callouts 4. Recommendation engines 5. Shopping assistants 6. Personalization 7. Showrooming 8. Social proofing Wayfinding Methods
29. Meet Magento PL 2015 1. Hierarchical navigation 2. Search 3. Advertisements and callouts 4. Recommendation engines 5. Shopping assistants 6. Personalization 7. Showrooming 8. Social proofing Wayfinding Methods
30. Meet Magento PL 2015 Your taxonomy must represent the catalog and enhance discoverability.
31. Meet Magento PL 2015 Category-Driven Nav Persona-Driven Nav Headphones Beginners Mixers Enthusiasts Software Professional Turntables Example: DJ supplier taxonomies
32. Meet Magento PL 2015 Good taxonomies lead users to products.
33. Meet Magento PL 2015 Great taxonomies inform the user what you sell + how to find it.
34. Meet Magento PL 2015 http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/ Nav Drawer or Nav Bar?
35. Meet Magento PL 2015 High-level nav structure is always visible
36. Meet Magento PL 2015 Rich Menus, One Tap Away
37. Meet Magento PL 2015 1. Maximum of three levels for taxonomy depth. 2. Maximum of seven child categories per parent. Taxonomy Guidelines
38. Meet Magento PL 2015 Three Maximum Nav Levels
39. Meet Magento PL 2015 Content is the landmark between navigation directions.
40. Meet Magento PL 2015 1. Dense menus are hard to orient within on small screens.
41. Meet Magento PL 2015 2. Filtering by attributes and sorting works better.
42. Meet Magento PL 2015 3. UI patterns for multi-level menus don’t scale forever.
43. Meet Magento PL 2015 A shallower nav is more likely to be explored by users.
44. Meet Magento PL 2015 Seven Maximum Nav Children
45. Meet Magento PL 2015 1. Faster to scan. 2. 3. Advantages of Narrow Branches
46. Meet Magento PL 2015 1. Faster to scan. 2. Increased visibility. 3. Advantages of Narrow Branches
47. Meet Magento PL 2015 1. Faster to scan. 2. Increased visibility. 3. Parent + children stay onscreen. Advantages of Narrow Branches
48. Meet Magento PL 2015 Broad root branches need a containing menu
49. Meet Magento PL 2015
50. Meet Magento PL 2015
51. Meet Magento PL 2015
52. Meet Magento PL 2015
53. Meet Magento PL 2015
54. Meet Magento PL 2015 Identify edge cases before designing the taxonomy UI.
55. Meet Magento PL 2015 Showing breadth gradually becomes less important as users focus on products.
56. Meet Magento PL 2015 Filtering 3
57. Meet Magento PL 2015 Am I in the right place, should I go back, or go deeper? Can I exclude unsuitable products from this list? Is this product worth inspecting closer? User Concerns
58. Meet Magento PL 2015 Are the sub-categories diverse? Are users shopping by aesthetic or specification? Is the list sensitive to order? Can users differentiate products from the list? Business Concerns
59. Meet Magento PL 2015 Filtering UIs differentiate the shopping experience.
60. Meet Magento PL 2015
61. Meet Magento PL 2015
62. Meet Magento PL 2015 Faceted navigation can be more effective for filtering.
63. Meet Magento PL 2015
64. Meet Magento PL 2015
65. Meet Magento PL 2015
66. Meet Magento PL 2015
67. Meet Magento PL 2015
68. Meet Magento PL 2015 Tailor the filtering UI to your catalog.
69. Meet Magento PL 2015 Hint the filter toggle button.
70. Meet Magento PL 2015
71. Meet Magento PL 2015 Selecting 4
72. Meet Magento PL 2015 Is “add to cart” the most important action?
73. Meet Magento PL 2015 How would you prioritize the top five actions?
74. Meet Magento PL 2015 The product view is designed for selection.
75. Meet Magento PL 2015 5% Pretty good conversion rate
76. Meet Magento PL 2015 95% Selecting another action
77. Meet Magento PL 2015 Exercise 1/2: Non-Conversion Optimization
78. Meet Magento PL 2015 1. Assemble a team
79. Meet Magento PL 2015 Add to cart Buy within a bundle Buy with complementary products Buy an alternative product being upsold Check product specs Add to wishlist Add to compare Write a review Share with others Go back Leave 2. List actions
80. Meet Magento PL 2015 35: Add to cart 15: Buy within a bundle 10: Buy with complementary products 10: Buy an alternative product being upsold 8: Check product specs 3: Add to wishlist 3: Add to compare 3: Write a review 3: Share with others 3: Go back 0: Leave 3. Divide 100 points
81. Meet Magento PL 2015 Scores reflect the business’ goals — not what users do.
82. Meet Magento PL 2015 4. Note differences
83. Meet Magento PL 2015 Exercise 2/2: Content Hierarchy
84. Meet Magento PL 2015 Product name Product photo + media Availability + delivery estimate Price + promotion modifiers Configurable options + size charts Add to cart button Add to wishlist Social share 1. List every content component Upsells Description Specifications Reviews FAQs Cross sells Recently viewed products Breadcrumbs
85. Meet Magento PL 2015 Product name + Photo Availability + Pricing Configure + Quantity Add to cart + save to wishlist + share Sweeten the deal (bundle or upsell) Description + Specs + Reviews + FAQs Redirect attention (cross sells + recently viewed) 2. Group related components
86. Meet Magento PL 2015 3. Rank components What am I looking at? ➔ Product name + Photo Can I obtain it? ➔ Availability + Pricing Which options? ➔ Configure + Quantity My action? ➔ Add to cart + save to wishlist + share Unsure? ➔ Sweeten the deal (bundle or upsell) Need more info? ➔ Description + Specs + Reviews + FAQs Not interested? ➔ Redirect attention (cross sells + recently viewed)
87. Meet Magento PL 2015 https://twitter.com/lukew/status/541986443598393345 The issue isn’t whether the call to action is visible. The issue is whether your call to action is visible at the point where someone has become convinced to take action. “ Luke Wroblewski Product Director @ Google
88. Meet Magento PL 2015 http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/
89. Meet Magento PL 2015 Assessing 5
90. Meet Magento PL 2015 The cart is essentially a temporary wishlist.
91. Meet Magento PL 2015 1. Confirm what’s in the cart 2. Make edits 3. Apply any discounts 4. See the final price 5. Begin checkout User Goals
92. Meet Magento PL 2015 1. Product manifest 2. Coupon form 3. Shipping & tax estimate form 4. Totals table 5. Checkout button 6. Cross-sells Content Hierarchy
93. Meet Magento PL 2015 The Cart Manifest
94. Meet Magento PL 2015 Tables don’t work well on small screens.
95. Meet Magento PL 2015
96. Meet Magento PL 2015 1. Browsers still download images in hidden columns. 2. 3. 4. Table Consequences
97. Meet Magento PL 2015 1. Browsers still download images in hidden columns. 2. Lines wrap after a word or two. 3. 4. Table Consequences
98. Meet Magento PL 2015 1. Browsers still download images in hidden columns. 2. Lines wrap after a word or two. 3. Long words can easily overflow the table. 4. Table Consequences
99. Meet Magento PL 2015 1. Browsers still download images in hidden columns. 2. Lines wrap after a word or two. 3. Long words can easily overflow the table. 4. The lack of labels is unclear. Table Consequences
100. Meet Magento PL 2015
101. Meet Magento PL 2015 Densely packed buttons are hard to tap accurately.
102. Meet Magento PL 2015 Product, options, quantity, price Inspecting Info
103. Meet Magento PL 2015 Change quantity, save to wishlist, remove from cart Editing Actions
104. Meet Magento PL 2015
105. Meet Magento PL 2015
106. Meet Magento PL 2015 Always Be Closing
107. Meet Magento PL 2015 Cart button before manifest Menu with cart and checkout actions
108. Meet Magento PL 2015 Converting 6
109. Meet Magento PL 2015 Checkout on small screens forces focus on one thing.
110. Meet Magento PL 2015 Most sites fail to make checkout micro optimizations.
111. Meet Magento PL 2015 1. Pre-fill all data you have.
112. Meet Magento PL 2015 2. Eliminate unnecessary inputs.
113. Meet Magento PL 2015 3. Make inputs work for users.
114. Meet Magento PL 2015 4. Copy identical info forward.
115. Meet Magento PL 2015 5. Use HTML5 input types.
116. Meet Magento PL 2015 autocapitalize + autocorrect + spellcheck 6. Use HTML5 input attributes.
117. Meet Magento PL 2015 7. Use WHATWG standard `name` and `autocomplete` attributes. https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs
118. Meet Magento PL 2015 8. Use HTML5 input placeholders.
119. Meet Magento PL 2015 9. Validate inline.
120. Meet Magento PL 2015 Users don’t need any of this to complete forms, but you can/should provide it.
121. Meet Magento PL 2015 Delivering 7
122. Meet Magento PL 2015 Transactional email is the first touchpoint after a sale.
123. Meet Magento PL 2015 53% of email was opened on mobile devices in 2014 https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33
124. Meet Magento PL 2015 Order confirmation Shipment notification + tracking link Support inquiries Reminder to review products Share with a friend Password resets Common transactional email
125. Meet Magento PL 2015 A little care goes a long way.
126. Meet Magento PL 2015 Account dashboard: not where users spend time.
127. Meet Magento PL 2015 Tracking a shipment Update addresses View order history Check gift card balance Organize wishlists Dashboard Tasks
128. Meet Magento PL 2015
129. Meet Magento PL 2015
130. Meet Magento PL 2015 1. Inlining Modules
131. Meet Magento PL 2015 2. Sidebar to Menu
132. Meet Magento PL 2015 3. Hub + Spokes
133. Meet Magento PL 2015
134. Meet Magento PL 2015 Wrapping Up
135. Meet Magento PL 2015 1. Framing 2. Wayfinding 3. Filtering 4. Selecting 5. Assessing 6. Converting 7. Delivering
136. Meet Magento PL 2015 Stay curious, keep your eyes open.
137. Meet Magento PL 2015 Thank you
138. Meet Magento PL 2015 Q&A
139. Meet Magento PL 2015 GravityDept.com Brendan Falkowski Falkowski