Like Riding a Bike
The Mongoose product page lacked a certain degree of cohesion with the radical, action-oriented bikes they’re known for. Undiscoverable product information, jargon-heavy features, and a lack of lifestyle content mired the experience, making users sift through dull and confusing information to find a suitable product.
I redesigned the experience to make shopping for a bike just as easy as riding one.
THE CHALLENGE
Easy Wins
My goal for the project was to generate some quick wins for Mongoose before the Schwinn website redesign took up all of our resources. The plan was simple: user test the site, take note of pain points, and design high-value, low-effort solutions that would ultimately improve conversion.
My Role
As the sole designer, I ran the user test, conducted research, designed and documented high-fidelity mockups and interactions, and presented to stakeholders.
I worked alongside a product manager, whose insight was instrumental to the project’s success.
DISCOVERY
What Wasn’t Working?
I started the project with a set of assumptions about the experience:
1.
2.
3.
The product features were hard to read.
The product description used a lot of marketing jargon.
Considered purchases are sold with big, high-quality images—why are ours at the bottom of the page?
I created a site audit using TryMyUI in order to test these assumptions.
Desktop and mobile views of the PDP
Insights
I tested the site with 5 users. Participants were prompted to find their ideal bike within the site, discuss their thoughts as they interact with the product page, and describe their feelings of the site overall. Here’s what I found:
Lifestyle Imagery Inspires
Participants noted that our homepage content made the product feel exciting. On the product page, however, our scrollmap reveals that less than 20% of users make it down to the bottom of the page, where the lifestyle content is buried.
Scrollmap indicates lifestyle content is too low on page
"I'd like to see the bike in action.”
Variant-Specific Rider Height
One user assumed that the rider height copy was tied to the selected variant on the size selector (at least he assumed it was a size selector, as there’s no label). He then proceeded to add the incorrectly-sized product to his cart.
Static rider height value
“I’m five-nine. Guess I’m a small.”
Information Should Be Inviting
Users skipped over the highlights section, where the variant-specific height information is actually located. Additionally, the text did not meet readability standards, as the line spacing was too short.
Text for ants
“It’s small, dense, and gray-on-gray. It looks like fine print.”
Benefit-Oriented Copy
The product highlights and description sections are jargon and spec heavy. They fail to entice the user and describe the product in terms of benefits offered.
Generic product description
“I'm seeing a lot of specs...I'd like to see more on what the product does and what it's good for.”
REFRAMING THE PROBLEM
Hampering Product Investigation
Users looking to make considered purchases conduct meaningful investigation and comparison. They need plainly discoverable information in order to make an informed decision.
This lead to the question: How can I prioritize the right information for the user?
Evaluation stage of user journey
THE PROCESS
Ideation
I used insights from the product page audit and best practices compiled from resources like the Baymard Institute in order to inform and justify design decisions.
Size Selector
Referencing competitors like Retrospec and sister brands like Cannondale, I tried several versions of the size selector. However, many of these sites hid height information behind an active or hover state.
Alternate Flavors of size selector
Product Benefits
The solve for this module fixed another problem as well. By combining our lifestyle images with our benefits, we could increase discoverability of both.
Mid-fidelity feature benefits module
Copy Recommendations
Users noted we had a lot of information on specs, but not benefits. So I recommended our content team follow the golden rule of UX writing: What is it called? What does it do? So what?
Trek bikes features
THE REDESIGN
Coaxing Information
Out Of Hiding
While other bicycle sites offer confusing sizing information or ask you to measure your inseam, Mongoose lays it all out for you. Gone is the fine print—details are readable and engaging.
New product page
Variants For Humans
The final size selector keeps variant-specific height information visible at all times. The length of the selector also allows us to note the product’s availability.
Size selector
Inspiring With Visual Information
In order to appeal to the emotional trigger of riding a Mongoose bike, I created a traditional photo + text features and benefits component.
Mobile features
User Friendly Product Information
Unfortunately, we didn’t have the content resources to revisit the benefits for each product, so I created a single highlight module as a stopgap.
Desktop features
BONUS
Improving Systems
Before I came aboard Mongoose, previous designers had used different text sizes and styles ad hoc. These styles were inconsistent and poorly documented. Body copy failed to meet the WCAG Success Criterion. In addition, page elements were spaced out by eye.
Confusing typography system
To solve these issues, I aligned the new product page to an 8pt baseline grid and created a new typography system. Using a modular scale, I devised a range of font sizes based on the major third ratio (1.25), rounding off line height to multiples of 8 in order to create harmony with my baseline grid.
This had the following benefits:
1.
2.
3.
4.
Eliminated redundant type styles
Created alignment between three designers (and for posterity)
Created alignment with dev team
Reduced ambiguity, saving resources for additional projects
NEXT STEPS
Ensuring Continued Success
Though the redesign marks a clear improvement, there is certainly more ground to be gained. Once the Schwinn redesign calms down, content and design will embark on the joint mission to break the highlights component into a more traditional series of features and benefits, each showcasing another lifestyle image.
During the site audit, users also noted a lack of product reviews, which undermines confidence. While that functionality is obviously something we need to add, the comments piqued my interest in testing other elements of social proof: industry accolades, athlete endorsements, and user generated content.
Finally, incorporating easily discoverable information on shipping, warranty, and assembly should give the user more confidence to purchase.
Before
After