Responsive Design Along the Conversion PathBrendan Falkowski Gravity Department

Imagine Commerce Las Vegas, Nevada April 21, 2015

Brendan Falkowski

@Falkowski

Standard Face

@Falkowski

GravityDept.com

Frontend Strategy For

GEMAIRE

Responsive Design Consulting

Frontend AuditsTargeted performance consulting from Gravity Department

Acumen Theme

gravitydept.com/to/acumen

• Used by 1400+ stores • 5+ years of updates • Made for customization • Rapid launch

Hot 100 List — 2014 Mobile 10 List — 2014

Internet RetailerBrilliant Newcomer Nominee — 2013 Top 25 Responsive Designs — 2013

Net Magazine

Practical eCommerce eBay Blog Moz Web Performance Today

Featured Across the WebKISSmetrics Conversion XL Smashing Magazine eConsultancy

Yahoo! Small Business Mobify Creative Bloq Media Queries

Advisory Board MemberMagento Certification

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

Responsive Design Along the

Conversion Path

Reduced technology footprint. Increased reach.

Improved brand consistency.

Merchants Love Responsive Design

The Highest ROI vs Mobile Apps or Native Apps

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

Responsive Design that Enhances the User’s Journey

Framing1

Framing separates navigation from content.

Study the business and products first.

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

Framing

Content

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

Framing

Content

journal.digital-atelier.com

Framing is a convenience. It’s not content.

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

Better Framing

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

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

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

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

NavigatingAuthenticating

Converting

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

Navigating Finding Converting Personalizing

Framing

Content

Consistency Awareness

Context Utility

Successful Framing

Wayfinding2

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

Wayfinding Methods

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

Wayfinding Methods

Your taxonomy must represent the catalog and enhance discoverability.

Category-Driven Nav Persona-Driven Nav

Headphones Beginners

Mixers Enthusiasts

Software Professional

Turntables

Example: DJ supplier taxonomies

Good taxonomies lead users to products.

Great taxonomies inform the user what you sell

+ how to find it.

http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/

Nav Drawer or Nav Bar?

High-level nav structure is always visible

Rich Menus, One Tap Away

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

Taxonomy Guidelines

ThreeMaximum Nav Levels

Content is the landmark between navigation directions.

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

2. Filtering by attributes and sorting works better.

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

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

SevenMaximum Nav Children

1. Faster to scan. 2. 3.

Advantages of Narrow Branches

1. Faster to scan. 2. Increased visibility. 3.

Advantages of Narrow Branches

1. Faster to scan. 2. Increased visibility. 3. Parent + children stay onscreen.

Advantages of Narrow Branches

Broad root branches need a containing menu

Source

Source

Source

Source

Identify edge cases before designing the taxonomy UI.

Showing breadth gradually becomes less important as

users focus on products.

Filtering3

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

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

Filtering UIs differentiate the shopping experience.

Faceted navigation can be more effective for filtering.

Tailor the filtering UI to your catalog.

Hint the filter toggle button.

Selecting4

Is “add to cart” the most important action?

How would you prioritize the top five actions?

The product view is designed for selection.

5%Pretty good conversion rate

95%Selecting another action

Exercise 1/2: Non-Conversion Optimization

1. Assemble a team

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

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

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

4. Note differences

Exercise 2/2: Content Hierarchy

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 componentUpsells Description Specifications Reviews FAQs Cross sells Recently viewed products Breadcrumbs

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

3. Rank componentsWhat 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)

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

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

Assessing5

The cart is essentially a temporary wishlist.

Confirm what’s in the cart Make edits Apply any discounts See the final price Begin checkout

User Goals

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

Content Hierarchy

The Cart Manifest

Tables don’t work well on small screens.

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

Table Consequences

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

Table Consequences

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

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

Densely packed buttons are hard to tap accurately.

Product, options, quantity, price

Inspecting Info

Change quantity, save to wishlist, remove from cart

Editing Actions

Always Be Closing

Cart button before

manifest

Menu with cart and checkout actions

Converting6

Checkout on small screens forces focus on one thing.

Most sites fail to make checkout micro optimizations.

1. Pre-fill all data you have.

2. Eliminate unnecessary inputs.

3. Make inputs work for users.

4. Copy identical info forward.

5. Use HTML5 input types.

6. Use HTML5 input attributes.

7. Use WHATWG standard `name` and `autocomplete`

attributes.

8. Use HTML5 input placeholders.

9. Validate inline.

Users don’t need any of this to complete forms, but you

can/should provide it.

Delivering7

Transactional email is the first touchpoint after a sale.

53%of email was opened on mobile devices in 2014

https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33

Order confirmation Shipment notification + tracking link Support inquiries Reminder to review products Share with a friend Password resets

Common transactional email

A little care goes a long way.

Account dashboard: not where users spend time.

Tracking a shipment Update addresses View order history Check gift card balance Organize wishlists

Dashboard Tasks

1. Inlining Modules

2. Sidebar to Menu

3. Hub + Spokes

Wrapping Up

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

Stay curious, keep your eyes open.

Thank you

Q&A

Gravity DepartmentGravityDept

gravitydept.com magefrontend.com

Brendan FalkowskiFalkowski