RUNNER'S WORLD SHOE FINDER
2016
Affiliate Programming
Category: Health & Fitness
Platform(s): Responsive Web, Solr Search, Drupal
Re-architecture of the Runner's World online shoe recommendations tool as part of Rodale's affiliate commerce program. The UX Strategy focused on opportunities to increase conversions by improving the user data entry experience and extending session engagement. UX recommendations produced 31% increase in user throughput.
DISCOVERY & REQUIREMENTS GATHERING
-
Business requirements gathered: editorial workflow, shoe lab data export format & schedules,
-
Problem Statement & Hypothesis: "Increased affiliate revenue opportunity will be achieved if our users (a) more easily generate shoe recommendations through an improved input process and (b) view more recommendations per visit."
-
Audit and testing of existing tool & user behavior yielded baseline kpi and informed the initial UX strategy. Numbers showed low user-throughput percentages from form to results pages, attributable to form-efficacy, high input-related error rates, and low extended engagement numbers (high exit rates, short session lengths and low pv/sessions).
- End user interviews.
- Analytics (Google) to understand current user behavior through goal completion funnels, and identify points of friction, form efficacy, decreased-throughput, exits/bounces, error-rates.
-
Competitive Analysis
-
Baseline KPIs
UX Design Strategy
Aligning with Mindset:
End user interviews (consumers and shoe "testers") revealed three primary mindsets by which runner's think about shoes when looking for a new pair online:
-
As a runner: Do I strike my heel when I run? Do I over or underpronate or underpronate? How many miles do I run per week? What's my average pace? Have I been injured before?
-
By shoe features: Does the shoe have stability features? What is the weight of the shoe? How much cushioning does the shoe have? etc...
-
Shoes like the one's I already have: Many runner's form preferences for a specific model and therefore benefit from learning about other models with similar performance/features.
Reducing Choices for Improved Flow:
Reducing the number of choices on a given step will increase the likelihood that users will complete the requested information. The time it takes for a user to make a decision increases logarithmically as a result of the possible choices he or she has (as demonstrated by Hick's Law). Inversely, reducing the number of choices can decrease the amount of time for a user to make a decision. By replacing a tabulated structure of long-forms featuring multiple data inputs, with a single stepped sequence limited to a single-input per page, users would be more likely to complete the required questions.
This recommendation increased user throughput from 65% to 96%, thereby increasing opportunity for conversions.
The below user flow diagram shows a single path approach with subvariants:
SKETCHING & CROSS-FUNCTIONAL DESIGN
Cross functional design workshops serve as collaborative process to generate initial solutions (until disproven). This serves the product(s) well by establishing empathy for the end user across the entire team; this approach also helps to cultivate a culture of design-thinking within the organization whereby the value of user centered design is better understood.
Designs progress through prototyping and cross-functional collaboration. In the below example, a screen for a single data point (miles per week) evolved with input from end users and developers such that bracketed controls were replaced with a single slider control that mapped to the existing algorithm.
PROTOTYPING & EARLY USER TESTING
-
Rapid pre-build prototyping for early user testing of specific functional areas including:
- Search Method Selection - Implicit vs Explicit User Choices
-
Filter interfaces: Search Results
-
User Test Script/Tasks
-
User Test Facilitation
-
2-way Video Recording (screen w touch/scroll, user cam, audio) and Tagged Recaps
-
Interview & Think-aloud Methodologies
-
Sessions Recorded (screens with touch and scroll events, audio and user cams)
-
Usability report with key qualitative findings that served informed decision for MVP feature cut.
Rapidly determining an initial UI that serves the differing mindsets of users is accomplished through simultaneous prototyping of differing solutions. In the below examples, three prototypes explored different Landing/Start Pages with various emphasis, as well as differing faceted search control paradigms.
Leading with 'Ask an Advisor' followed by below-the-fold Product Categories and 'Shoes Like Mine' control
MOBILE USERS EXPRESSED NEGATIVE EXPERIENCE WITH LIMITED HORIZONTAL VIEW OF FACETS BECAUSE OF SUBSEQUENT RELIANCE ON EXTENSIVE SWIPING
USERS DEMONSTRATED EASE USING LANDING PAGE THAT LEAD WITH PRODUCT CATEGORIES
(C)
MOBILE USERS DEMONSTRATED EASE AND EXPRESSED PREFERENCE FOR FACETED FILTERING CONTAINED WITHIN DEDICATED FILTER VIEW.
Keeping the features and presentation that perform best through testing, and getting rid of waste/ideas that do not perform well, the prototype reflects the most current thinking behind the solution.
SINGLE UNIFIED FLOW WITH SIMPLIFIED LANDING PAGE DECISION
DYNAMIC INCLUSIVE MESSAGING TO ADDRESS OUTLIERS
FACETED SEARCH CONTROLS WITH REALTIME COUNT REFLECTED IN DEDICATED VIEW
FUNCTIONAL SPECIFICATIONS
Specifications for each responsive view denote functionality, controls, data points, static and dynamic information on each screen. In the below example, faceted controls used to refine search results are presented differently on desktop versus mobile/touch-screens. Whereas on desktop facet controls are presented in a column adjacent to results, at mobile breakpoints facets are shown in a dedicated 'filter' view.
WIREFRAMES (jira ticketed)
Wireframes with inline annotations posted to respective Jira tickets for development on a sprint basis. Based on workflow constraints and developer preferences annotations are provided within PNGs (posted to tickets), however other formats prove useful on other products such as PDF specifications per use case (iOS mobile app development), and annotated margins.
VISUAL DESIGN TREATMENTS
2 rounds of directional treatments followed by a single round for refinement, and subsequent updates on a sprint-by-sprint basis.
OPTIMIZATION / ITERATIVE IMPROVEMENTS
Following the initial release, iterative improvements through A/B testing (Google Optimize) have initially focused on increasing conversions at the PDP node level (Product Detail Page).
DESKTOP PDP AFFILIATE LINK
AB Test Hypothesis: Conversions will increase at the PDP node-level if users easily notice the affiliate 'Buy It Now' button. Tests to increase visibility of the button confirmed assumptions.
USER=ANY. Affiliate link to merchandizer is located in right column on desktop.
INITIAL TREATMENT
IMPROVED VIA A/B TESTING