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

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

Brendan Falkowski
October 19, 2015
Design
0
62

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

Brendan Falkowski

October 19, 2015
Tweet

More Decks by Brendan Falkowski

See All by Brendan Falkowski
Designing the B2B Experience (MageTitans Austin 2016)
brendanfalkowski
0
74
Designing the B2B Experience (Magento Imagine 2016)
brendanfalkowski
0
270
Responsive Design Along the Conversion Path (Meet Magento NY 2015)
brendanfalkowski
0
96
Responsive Design Along the Conversion Path (Magento Imagine 2015)
brendanfalkowski
0
110
Two Approaches to RWD: Pure and Hybrid (Meet Magento NY 2014)
brendanfalkowski
0
100
Steps to RWD Success (Internet Retailer Webcast)
brendanfalkowski
0
130
Two Approaches to RWD: Pure and Hybrid (IRCE 2014)
brendanfalkowski
2
100
Responsive Evolution (Magento Imagine 2014)
brendanfalkowski
0
120
Responsive eCommerce: Part Two
brendanfalkowski
27
7.3k

Other Decks in Design

See All in Design
後悔しないデザインシステムの始め方
takanorip
4
2.5k
Python / Rhinoscript - parametric design for architecture
dmitry_tolonen
0
1.9k
saya020
saya020
0
120
TIPSTARでのデザイナーの働き方について
mixil
0
670
DMMオンラインサロン UI･UXデザイナー採用資料/ for-UI･UX-designers
onlinesalon
0
170
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
1.7k
エンジニアと要件定義
ryotanakaya
0
150
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
710
Return
juliantruitt
0
190
Research Process of MusicTongue
mxair95000
0
180
opening.pdf
misty_marsden
PRO
0
270
外食を支えるプロダクトを生み出す、顧客理解の追求
yamamoto67
1
580

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
66
4.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
BBQ
matthewcrist
75
8.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.5k
Code Review Best Practice
trishagee
50
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Git: the NoSQL Database
bkeepers
PRO
419
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Embracing the Ebb and Flow
colly
76
3.6k
WebSockets: Embracing the real-time Web
robhawkes
58
6.1k
Why Our Code Smells
bkeepers
PRO
326
55k

Transcript

  1. Meet Magento PL 2015
    Responsive
    Design Along the
    Conversion Path
    Meet Magento PL
    Poznań, Poland
    October 19, 2015

    View Slide

  2. Meet Magento PL 2015
    Brendan
    Falkowski
    @Falkowski

    View Slide

  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

    View Slide

  4. Meet Magento PL 2015
    Responsive Design
    Along the
    Conversion Path

    View Slide

  5. Meet Magento PL 2015
    Reduced technology footprint.
    Increased reach.
    Improved brand consistency.
    Merchants Love
    Responsive Design

    View Slide

  6. Meet Magento PL 2015
    The Highest ROI vs
    Mobile Apps or Native Apps

    View Slide

  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

    View Slide

  8. Meet Magento PL 2015
    Framing
    1

    View Slide

  9. Meet Magento PL 2015
    Framing separates
    navigation from content.

    View Slide

  10. Meet Magento PL 2015

    View Slide

  11. Meet Magento PL 2015
    Study the business
    and products first.

    View Slide

  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

    View Slide

  13. Meet Magento PL 2015
    Framing
    Content

    View Slide

  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

    View Slide

  15. Meet Magento PL 2015
    Framing
    Content
    journal.digital-atelier.com

    View Slide

  16. Meet Magento PL 2015
    Framing is a convenience.
    It’s not content.

    View Slide

  17. Meet Magento PL 2015
    1. List all the elements you may include in the header.
    2.
    3.
    4.
    5.
    Better Framing

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  22. Meet Magento PL 2015
    Navigating
    Authenticating
    Converting

    View Slide

  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

    View Slide

  24. Meet Magento PL 2015
    Navigating Finding Converting Personalizing

    View Slide

  25. Meet Magento PL 2015
    Framing
    Content

    View Slide

  26. Meet Magento PL 2015
    Consistency
    Awareness
    Context
    Utility
    Successful Framing

    View Slide

  27. Meet Magento PL 2015
    Wayfinding
    2

    View Slide

  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

    View Slide

  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

    View Slide

  30. Meet Magento PL 2015
    Your taxonomy must
    represent the catalog and
    enhance discoverability.

    View Slide

  31. Meet Magento PL 2015
    Category-Driven Nav Persona-Driven Nav
    Headphones Beginners
    Mixers Enthusiasts
    Software Professional
    Turntables
    Example:
    DJ supplier taxonomies

    View Slide

  32. Meet Magento PL 2015
    Good taxonomies lead
    users to products.

    View Slide

  33. Meet Magento PL 2015
    Great taxonomies inform
    the user what you sell
    + how to find it.

    View Slide

  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?

    View Slide

  35. Meet Magento PL 2015
    High-level nav
    structure is
    always visible

    View Slide

  36. Meet Magento PL 2015
    Rich Menus, One Tap Away

    View Slide

  37. Meet Magento PL 2015
    1. Maximum of three levels for taxonomy depth.
    2. Maximum of seven child categories per parent.
    Taxonomy Guidelines

    View Slide

  38. Meet Magento PL 2015
    Three
    Maximum Nav Levels

    View Slide

  39. Meet Magento PL 2015
    Content is the landmark
    between navigation directions.

    View Slide

  40. Meet Magento PL 2015
    1. Dense menus are hard to
    orient within on small screens.

    View Slide

  41. Meet Magento PL 2015
    2. Filtering by attributes and
    sorting works better.

    View Slide

  42. Meet Magento PL 2015
    3. UI patterns for multi-level
    menus don’t scale forever.

    View Slide

  43. Meet Magento PL 2015
    A shallower nav is more likely
    to be explored by users.

    View Slide

  44. Meet Magento PL 2015
    Seven
    Maximum Nav Children

    View Slide

  45. Meet Magento PL 2015
    1. Faster to scan.
    2.
    3.
    Advantages of Narrow Branches

    View Slide

  46. Meet Magento PL 2015
    1. Faster to scan.
    2. Increased visibility.
    3.
    Advantages of Narrow Branches

    View Slide

  47. Meet Magento PL 2015
    1. Faster to scan.
    2. Increased visibility.
    3. Parent + children stay onscreen.
    Advantages of Narrow Branches

    View Slide

  48. Meet Magento PL 2015
    Broad root
    branches need a
    containing menu

    View Slide

  49. Meet Magento PL 2015

    View Slide

  50. Meet Magento PL 2015

    View Slide

  51. Meet Magento PL 2015

    View Slide

  52. Meet Magento PL 2015

    View Slide

  53. Meet Magento PL 2015

    View Slide

  54. Meet Magento PL 2015
    Identify edge cases before
    designing the taxonomy UI.

    View Slide

  55. Meet Magento PL 2015
    Showing breadth gradually
    becomes less important as
    users focus on products.

    View Slide

  56. Meet Magento PL 2015
    Filtering
    3

    View Slide

  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

    View Slide

  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

    View Slide

  59. Meet Magento PL 2015
    Filtering UIs differentiate the
    shopping experience.

    View Slide

  60. Meet Magento PL 2015

    View Slide

  61. Meet Magento PL 2015

    View Slide

  62. Meet Magento PL 2015
    Faceted navigation can be
    more effective for filtering.

    View Slide

  63. Meet Magento PL 2015

    View Slide

  64. Meet Magento PL 2015

    View Slide

  65. Meet Magento PL 2015

    View Slide

  66. Meet Magento PL 2015

    View Slide

  67. Meet Magento PL 2015

    View Slide

  68. Meet Magento PL 2015
    Tailor the filtering UI
    to your catalog.

    View Slide

  69. Meet Magento PL 2015
    Hint the filter toggle button.

    View Slide

  70. Meet Magento PL 2015

    View Slide

  71. Meet Magento PL 2015
    Selecting
    4

    View Slide

  72. Meet Magento PL 2015
    Is “add to cart” the
    most important action?

    View Slide

  73. Meet Magento PL 2015
    How would you prioritize
    the top five actions?

    View Slide

  74. Meet Magento PL 2015
    The product view is
    designed for selection.

    View Slide

  75. Meet Magento PL 2015
    5%
    Pretty good conversion rate

    View Slide

  76. Meet Magento PL 2015
    95%
    Selecting another action

    View Slide

  77. Meet Magento PL 2015
    Exercise 1/2:
    Non-Conversion Optimization

    View Slide

  78. Meet Magento PL 2015
    1. Assemble a team

    View Slide

  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

    View Slide

  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

    View Slide

  81. Meet Magento PL 2015
    Scores reflect the business’
    goals — not what users do.

    View Slide

  82. Meet Magento PL 2015
    4. Note differences

    View Slide

  83. Meet Magento PL 2015
    Exercise 2/2:
    Content Hierarchy

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  88. Meet Magento PL 2015
    http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

    View Slide

  89. Meet Magento PL 2015
    Assessing
    5

    View Slide

  90. Meet Magento PL 2015
    The cart is essentially a
    temporary wishlist.

    View Slide

  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

    View Slide

  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

    View Slide

  93. Meet Magento PL 2015
    The Cart Manifest

    View Slide

  94. Meet Magento PL 2015
    Tables don’t work well
    on small screens.

    View Slide

  95. Meet Magento PL 2015

    View Slide

  96. Meet Magento PL 2015
    1. Browsers still download images in hidden columns.
    2.
    3.
    4.
    Table Consequences

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  100. Meet Magento PL 2015

    View Slide

  101. Meet Magento PL 2015
    Densely packed buttons are
    hard to tap accurately.

    View Slide

  102. Meet Magento PL 2015
    Product, options, quantity, price
    Inspecting Info

    View Slide

  103. Meet Magento PL 2015
    Change quantity, save to wishlist, remove from cart
    Editing Actions

    View Slide

  104. Meet Magento PL 2015

    View Slide

  105. Meet Magento PL 2015

    View Slide

  106. Meet Magento PL 2015
    Always Be Closing

    View Slide

  107. Meet Magento PL 2015
    Cart button
    before
    manifest
    Menu with
    cart and
    checkout
    actions

    View Slide

  108. Meet Magento PL 2015
    Converting
    6

    View Slide

  109. Meet Magento PL 2015
    Checkout on small screens
    forces focus on one thing.

    View Slide

  110. Meet Magento PL 2015
    Most sites fail to make
    checkout micro optimizations.

    View Slide

  111. Meet Magento PL 2015
    1. Pre-fill all data you have.

    View Slide

  112. Meet Magento PL 2015
    2. Eliminate unnecessary inputs.

    View Slide

  113. Meet Magento PL 2015
    3. Make inputs work for users.

    View Slide

  114. Meet Magento PL 2015
    4. Copy identical info forward.

    View Slide

  115. Meet Magento PL 2015
    5. Use HTML5 input types.

    View Slide

  116. Meet Magento PL 2015
    autocapitalize + autocorrect + spellcheck
    6. Use HTML5 input attributes.

    View Slide

  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

    View Slide

  118. Meet Magento PL 2015
    8. Use HTML5 input
    placeholders.

    View Slide

  119. Meet Magento PL 2015
    9. Validate inline.

    View Slide

  120. Meet Magento PL 2015
    Users don’t need any of this
    to complete forms, but you
    can/should provide it.

    View Slide

  121. Meet Magento PL 2015
    Delivering
    7

    View Slide

  122. Meet Magento PL 2015
    Transactional email is the first
    touchpoint after a sale.

    View Slide

  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

    View Slide

  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

    View Slide

  125. Meet Magento PL 2015
    A little care goes a long way.

    View Slide

  126. Meet Magento PL 2015
    Account dashboard:
    not where users spend time.

    View Slide

  127. Meet Magento PL 2015
    Tracking a shipment
    Update addresses
    View order history
    Check gift card balance
    Organize wishlists
    Dashboard Tasks

    View Slide

  128. Meet Magento PL 2015

    View Slide

  129. Meet Magento PL 2015

    View Slide

  130. Meet Magento PL 2015
    1. Inlining Modules

    View Slide

  131. Meet Magento PL 2015
    2. Sidebar to Menu

    View Slide

  132. Meet Magento PL 2015
    3. Hub + Spokes

    View Slide

  133. Meet Magento PL 2015

    View Slide

  134. Meet Magento PL 2015
    Wrapping Up

    View Slide

  135. Meet Magento PL 2015
    1. Framing
    2. Wayfinding
    3. Filtering
    4. Selecting
    5. Assessing
    6. Converting
    7. Delivering

    View Slide

  136. Meet Magento PL 2015
    Stay curious,
    keep your eyes open.

    View Slide

  137. Meet Magento PL 2015
    Thank you

    View Slide

  138. Meet Magento PL 2015
    Q&A

    View Slide

  139. Meet Magento PL 2015
    GravityDept.com
    Brendan Falkowski
    Falkowski

    View Slide