Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design Along the Conversion Path (Magento Imagine 2015)

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

Brendan Falkowski

April 21, 2015
Tweet

More Decks by Brendan Falkowski

Other Decks in Design

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