Responsive Design Along the Conversion Path (Magento Imagine 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: http://gravitydept.com/blog/magento-imagine-2015

Conference: Magento Imagine 2015
Speaker: Brendan Falkowski @ http://gravitydept.com
Location: Las Vegas, USA
Date: April 21, 2015

Transcript

1. Responsive
   Design Along the
   Conversion Path
   Brendan Falkowski
   Gravity Department
   Imagine Commerce
   Las Vegas, USA
   April 21, 2015
   

   View Slide

2. Brendan
   Falkowski
   @Falkowski
   

   View Slide

3. Standard
   Face
   @Falkowski
   

   View Slide

4. GravityDept.com
   

   View Slide

5. Frontend Strategy For
   GEMAIRE
   

   View Slide

6. Responsive Design Consulting
   

   View Slide

7. Frontend Audits
   Targeted performance consulting
   from Gravity Department
   

   View Slide

8. Acumen Theme
   gravitydept.com/to/acumen
   • Used by 1400+ stores
   • 5+ years of updates
   • Made for customization
   • Rapid launch
   

   View Slide

9. View Slide

10. Hot 100 List — 2014
    Mobile 10 List — 2014
    Internet Retailer
    Brilliant Newcomer Nominee — 2013
    Top 25 Responsive Designs — 2013
    Net Magazine
    Practical eCommerce
    eBay Blog
    Moz
    Web Performance Today
    Featured Across the Web
    KISSmetrics
    Conversion XL
    Smashing Magazine
    eConsultancy
    Yahoo! Small Business
    Mobify
    Creative Bloq
    Media Queries
    

    View Slide

11. Advisory Board Member
    Magento Certification
    

    View Slide

12. 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
    

    View Slide

13. Responsive Design
    Along the
    Conversion Path
    

    View Slide

14. Reduced technology footprint.
    Increased reach.
    Improved brand consistency.
    Merchants Love
    Responsive Design
    

    View Slide

15. The Highest ROI vs
    Mobile Apps or Native Apps
    

    View Slide

16. 1. Framing
    2. Wayfinding
    3. Filtering
    4. Selecting
    5. Assessing
    6. Converting
    7. Delivering
    Responsive Design that
    Enhances the User’s Journey
    

    View Slide

17. Framing
    1
    

    View Slide

18. Framing separates
    navigation from content.
    

    View Slide

19. View Slide

20. Study the business
    and products first.
    

    View Slide

21. 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
    

    View Slide

22. Framing
    Content
    

    View Slide

23. 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
    

    View Slide

24. Framing
    Content
    journal.digital-atelier.com
    

    View Slide

25. Framing is a convenience.
    It’s not content.
    

    View Slide

26. 1. List all the elements you may include in the header.
    2.
    3.
    4.
    5.
    Better Framing
    

    View Slide

27. 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
    

    View Slide

28. 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
    

    View Slide

29. 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
    

    View Slide

30. 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
    

    View Slide

31. Navigating
    Authenticating
    Converting
    

    View Slide

32. 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
    

    View Slide

33. Navigating Finding Converting Personalizing
    

    View Slide

34. Framing
    Content
    

    View Slide

35. Consistency
    Awareness
    Context
    Utility
    Successful Framing
    

    View Slide

36. Wayfinding
    2
    

    View Slide

37. 1. Hierarchical navigation
    2. Search
    3. Advertisements and callouts
    4. Recommendation engines
    5. Shopping assistants
    6. Personalization
    7. Showrooming
    8. Social proofing
    Wayfinding Methods
    

    View Slide

38. 1. Hierarchical navigation
    2. Search
    3. Advertisements and callouts
    4. Recommendation engines
    5. Shopping assistants
    6. Personalization
    7. Showrooming
    8. Social proofing
    Wayfinding Methods
    

    View Slide

39. Your taxonomy must
    represent the catalog and
    enhance discoverability.
    

    View Slide

40. Category-Driven Nav Persona-Driven Nav
    Headphones Beginners
    Mixers Enthusiasts
    Software Professional
    Turntables
    Example:
    DJ supplier taxonomies
    

    View Slide

41. Good taxonomies lead
    users to products.
    

    View Slide

42. Great taxonomies inform
    the user what you sell
    + how to find it.
    

    View Slide

43. http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
    Nav Drawer or Nav Bar?
    

    View Slide

44. High-level nav
    structure is
    always visible
    

    View Slide

45. Rich Menus, One Tap Away
    

    View Slide

46. 1. Maximum of three levels for taxonomy depth.
    2. Maximum of seven child categories per parent.
    Taxonomy Guidelines
    

    View Slide

47. Three
    Maximum Nav Levels
    

    View Slide

48. Content is the landmark
    between navigation directions.
    

    View Slide

49. 1. Dense menus are hard to
    orient within on small screens.
    

    View Slide

50. 2. Filtering by attributes and
    sorting works better.
    

    View Slide

51. 3. UI patterns for multi-level
    menus don’t scale forever.
    

    View Slide

52. A shallower nav is more likely
    to be explored by users.
    

    View Slide

53. Seven
    Maximum Nav Children
    

    View Slide

54. 1. Faster to scan.
    2.
    3.
    Advantages of Narrow Branches
    

    View Slide

55. 1. Faster to scan.
    2. Increased visibility.
    3.
    Advantages of Narrow Branches
    

    View Slide

56. 1. Faster to scan.
    2. Increased visibility.
    3. Parent + children stay onscreen.
    Advantages of Narrow Branches
    

    View Slide

57. Broad root
    branches need a
    containing menu
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. Source
    

    View Slide

63. Identify edge cases before
    designing the taxonomy UI.
    

    View Slide

64. Showing breadth gradually
    becomes less important as
    users focus on products.
    

    View Slide

65. Filtering
    3
    

    View Slide

66. 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
    

    View Slide

67. 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
    

    View Slide

68. Filtering UIs differentiate the
    shopping experience.
    

    View Slide

69. View Slide

70. View Slide

71. Faceted navigation can be
    more effective for filtering.
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. Tailor the filtering UI
    to your catalog.
    

    View Slide

78. Hint the filter toggle button.
    

    View Slide

79. View Slide

80. Selecting
    4
    

    View Slide

81. Is “add to cart” the
    most important action?
    

    View Slide

82. How would you prioritize
    the top five actions?
    

    View Slide

83. The product view is
    designed for selection.
    

    View Slide

84. 5%
    Pretty good conversion rate
    

    View Slide

85. 95%
    Selecting another action
    

    View Slide

86. Exercise 1/2:
    Non-Conversion Optimization
    

    View Slide

87. 1. Assemble a team
    

    View Slide

88. 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
    

    View Slide

89. 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
    

    View Slide

90. Scores reflect the business’
    goals — not what users do.
    

    View Slide

91. 4. Note differences
    

    View Slide

92. Exercise 2/2:
    Content Hierarchy
    

    View Slide

93. 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
    

    View Slide

94. 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
    

    View Slide

95. 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)
    

    View Slide

96. 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
    

    View Slide

97. http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/
    

    View Slide

98. Assessing
    5
    

    View Slide

99. The cart is essentially a
    temporary wishlist.
    

    View Slide

100. 1. Confirm what’s in the cart
     2. Make edits
     3. Apply any discounts
     4. See the final price
     5. Begin checkout
     User Goals
     

     View Slide

101. 1. Product manifest
     2. Coupon form
     3. Shipping & tax estimate form
     4. Totals table
     5. Checkout button
     6. Cross-sells
     Content Hierarchy
     

     View Slide

102. The Cart Manifest
     

     View Slide

103. Tables don’t work well
     on small screens.
     

     View Slide

104. View Slide

105. 1. Browsers still download images in hidden columns.
     2.
     3.
     4.
     Table Consequences
     

     View Slide

106. 1. Browsers still download images in hidden columns.
     2. Lines wrap after a word or two.
     3.
     4.
     Table Consequences
     

     View Slide

107. 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
     

     View Slide

108. 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
     

     View Slide

109. View Slide

110. Densely packed buttons are
     hard to tap accurately.
     

     View Slide

111. Product, options, quantity, price
     Inspecting Info
     

     View Slide

112. Change quantity, save to wishlist, remove from cart
     Editing Actions
     

     View Slide

113. View Slide

114. View Slide

115. Always Be Closing
     

     View Slide

116. Cart button
     before
     manifest
     Menu with
     cart and
     checkout
     actions
     

     View Slide

117. Converting
     6
     

     View Slide

118. Checkout on small screens
     forces focus on one thing.
     

     View Slide

119. Most sites fail to make
     checkout micro optimizations.
     

     View Slide

120. 1. Pre-fill all data you have.
     

     View Slide

121. 2. Eliminate unnecessary inputs.
     

     View Slide

122. 3. Make inputs work for users.
     

     View Slide

123. 4. Copy identical info forward.
     

     View Slide

124. 5. Use HTML5 input types.
     

     View Slide

125. 6. Use HTML5 input attributes.
     

     View Slide

126. 7. Use WHATWG standard
     `name` and `autocomplete`
     attributes.
     https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs
     

     View Slide

127. 8. Use HTML5 input
     placeholders.
     

     View Slide

128. 9. Validate inline.
     

     View Slide

129. Users don’t need any of this
     to complete forms, but you
     can/should provide it.
     

     View Slide

130. Delivering
     7
     

     View Slide

131. Transactional email is the first
     touchpoint after a sale.
     

     View Slide

132. 53%
     of email was opened on
     mobile devices in 2014
     https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33
     

     View Slide

133. Order confirmation
     Shipment notification + tracking link
     Support inquiries
     Reminder to review products
     Share with a friend
     Password resets
     Common transactional email
     

     View Slide

134. A little care goes a long way.
     

     View Slide

135. Account dashboard:
     not where users spend time.
     

     View Slide

136. Tracking a shipment
     Update addresses
     View order history
     Check gift card balance
     Organize wishlists
     Dashboard Tasks
     

     View Slide

137. View Slide

138. View Slide

139. 1. Inlining Modules
     

     View Slide

140. 2. Sidebar to Menu
     

     View Slide

141. 3. Hub + Spokes
     

     View Slide

142. View Slide

143. Wrapping Up
     

     View Slide

144. 1. Framing
     2. Wayfinding
     3. Filtering
     4. Selecting
     5. Assessing
     6. Converting
     7. Delivering
     

     View Slide

145. Stay curious,
     keep your eyes open.
     

     View Slide

146. Thank you
     

     View Slide

147. Q&A
     

     View Slide

148. Gravity Department
     GravityDept
     gravitydept.com
     magefrontend.com
     Brendan Falkowski
     Falkowski
     

     View Slide