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

Responsive Design Along the Conversion Path (Me...

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

Other Decks in Design

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 Reduced technology footprint. Increased reach. Improved

    brand consistency. Merchants Love Responsive Design
  3. 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
  4. 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
  5. 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
  6. Meet Magento PL 2015 1. List all the elements you

    may include in the header. 2. 3. 4. 5. Better Framing
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. Meet Magento PL 2015 Category-Driven Nav Persona-Driven Nav Headphones Beginners

    Mixers Enthusiasts Software Professional Turntables Example: DJ supplier taxonomies
  15. Meet Magento PL 2015 1. Maximum of three levels for

    taxonomy depth. 2. Maximum of seven child categories per parent. Taxonomy Guidelines
  16. Meet Magento PL 2015 1. Dense menus are hard to

    orient within on small screens.
  17. Meet Magento PL 2015 1. Faster to scan. 2. 3.

    Advantages of Narrow Branches
  18. Meet Magento PL 2015 1. Faster to scan. 2. Increased

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

    visibility. 3. Parent + children stay onscreen. Advantages of Narrow Branches
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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)
  27. 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
  28. 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
  29. 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
  30. Meet Magento PL 2015 1. Browsers still download images in

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

    hidden columns. 2. Lines wrap after a word or two. 3. 4. Table Consequences
  32. 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
  33. 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
  34. Meet Magento PL 2015 7. Use WHATWG standard `name` and

    `autocomplete` attributes. https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs
  35. Meet Magento PL 2015 Users don’t need any of this

    to complete forms, but you can/should provide it.
  36. 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
  37. 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
  38. Meet Magento PL 2015 Tracking a shipment Update addresses View

    order history Check gift card balance Organize wishlists Dashboard Tasks
  39. Meet Magento PL 2015 1. Framing 2. Wayfinding 3. Filtering

    4. Selecting 5. Assessing 6. Converting 7. Delivering