C A N N O N D A L E P R O D U C T C A R D S
tl;dr
With the launch of Buy Online, Pick-up in Shop on the horizon (launched June 1, 2021), we doubled down on our mission of making shopping for a bike as easy as riding one. A site-wide audit using TryMyU taught us that the our product list pages and product cards needed an overhaul. In version 1.0, users were lost on product lists with similar looking bikes, confusing naming conventions, bare bones info, and limited filtering options. In version 2.0 we designed bigger, brighter, and more dynamic product cards, and added helpful info like model-specific product blurbs, rating data, and a re-vamped filter section. Check it out here.
T H E P R O B L E M
Imagine a novice user who’s in the market for a bike to get around their college campus. Cannondale’s website makes is easy for them to navigate to the “Active Bike” section of the site, and even identify one of our more budget-friendly bike lines (the Quick). After more browsing though, our novice user notices that there are 16 different Quick models ranging from $650 all the way up to $1,600. They’re wondering what the difference is between a Quick 3 and a Quick 5 — to them, every model looks exactly the same. Furthermore, what features could they have that warrant a $1000 difference in price? Prior to this re-design, our novice user’s only option was to open multiple tabs and comb product detail pages for more information. Needless to say, shopping this way is inefficient and frustrating.
O U R U S E R
U S E R J O U R N E Y : V E R S I O N 1 . 0
R E S E A R C H
Findings from a site-wide audit using TryMyUI as well as resources like the Baymard Institute helped us to prioritize the following goals:
Present the user with sufficient product information to adequately assess a product’s suitability
Include user ratings and number of ratings as they’re critical to users’ purchasing decisions
Use tags sparingly and in a way that helps user’s differentiate items
Display secondary thumbnail on hover
Generally avoid “Quick Views”
Include category-specific filters
Show the number of matches for each filter option, and update them as filters are applied
Truncate filter categories with more than 10 values
Include the ability to clear all filters after one or more filters are applied
Display applied filters in an overview section that allows users to easily remove or reset the filters they don’t need
Live-update the product list as filters are applied
D E S I G N D E V E L O P M E N T
Sites like Nike, Bang and Olufsen, Aesop, Volvo, Canyon and Trek (just to name a few) served as inspiration in the early stages of design development. Whenever conducting design research, I believe it’s important to make an effort to reference designs from different industries. In doing so, I almost always find transferable solutions for any challenge I may be facing,
F I N A L P R O D U C T C A R D D E S I G N
F I N A L P R O D U C T L I S T P A G E A N D F I L T E R S E C T I O N
U S E R J O U R N E Y : V E R S I O N 2 . 0
The below user journey illustrates how that same novice user may navigate their bike search after our new product card designs were implemented. Even without the re-vamped filter section, Katie continues her search with greater confidence that she understands the differences between bike models as well as what she’s getting for her money before she even navigates to the PDP level of the site.
N E X T S T E P S
These improved design features coincided with the launch of Buy Online, Pick-up in Shop. Since our launch date on June 3rd, 2021 we’ve received an average of 20-30 bike orders per day, with 250 in the first week alone. The digital product team is continuing to prioritize site enhancements that make shopping for a bike as easy as riding them.
Next steps for product cards and product list pages will be to conduct a user test, to be sure that the product blurbs communicate key differences and upgrades between bike models.