Bike Buying Experience
Project Overview: Bike Buying Experience
Trek has an extremely large selection of bikes. These bike fall into bike categories, families and models. To help reduce the amount of product detail pages and make browsing bikes less overwhelming, Trek has decided to combine all of the bike models in a family into one product detail page called FDPs (family detail pages). As part of this update, we want to implement our custom bike configurator into these family detail page instead of being a separate experiences, as well as updating redesigning our navigation.
Role: Digital Product Design Lead
I am lead designer for this project working on both the family detail pages and new navigation from beginning to where we are at now. I am in charge of the entire experience form an ux/ui standpoint, including the UX roadmap for the product, research, strategy, vision and delivery of this new app. I am the solo designer on this project taking on all design touchpoint and deliverables.
Customer Problems
Customers cannot shop all bikes in a family on one pages.
Customers must go to a separate experience and set of pages to customize a bike.
Our navigation will not match the new family pages.
Who Im working with:
Product Owners
Front End Developers
Back End Developers
Business Analysts
Engineers
Software Architects
Project Managers
Marketing Managers
Product Data Manager
SEO Specialist
Step 1
Working Sessions
This project is a huge collaboration with our marketing team. It is key to make sure all of the needs from a marketing standpoint can be designed into an successful user experience and interface. I lead white boarding sessions and follow up working sessions to begin this project.
Step 2
Research & Benchmarking
Once it was determined what the product structure and content would be needed for each bike family, I began doing some research and benchmarking to see how the experience could look. I also interviewed store managers to see how customers and themselves customized bikes in store on the current configurator. Mobile was the biggest concern, product detail pages can get very long so it was important to make sure the buy zone was still the priority.
Step 3
Wire framing
A very broad form of wire framing was next performed to see how the blueprint of these pages could look. With a lot of elements to include, getting the layout solidified was very important.
Step 4
Refined Wire Framing
The next step was creating more polished and refined wireframes. I began creating more accurate layouts, elements, and structure but still holding back from detailed design until they were fully flushed out.
Step 5
Tying in Navigation
Next was seeing how the new family detail pages will translate to the navigation, as well as making some much needed visual updates. Creating some user flows and diving into the information architecture of the different tiers was the first step before any visual updates.
Step 6
Navigation Wire framing
Once the tiers of navigation were determined, the next steps were to begin the blueprints for users as well as some rough visual layouts.
Step 7
Iterating
For both the navigation and family detail pages, there were many rounds of iterations made to make sure the most efficient and successful user experience was made. To the left is just a small selection of them.
Step 8
New Components/Design System Updates
To make my workflow more productive and efficient within Figma, I began exploring new components and once those were solidified, I was able to add them at an atom or molecule level into our design system.
Step 9
High Fidelity Screens
Finally putting the finishing touches on the wireframes and creating polished screens with full visual design elements and components. These are as close as possible to being ready for development.
Step 9
Clickable Protoypes
Creating clickable prototypes was a powerful way to bring my designs to life and simulate real user interactions. This allowed me to showcase how the interface behaves, making it easier for stakeholders and users to experience the design flow.
Launch coming soon
Steps not shown above
This page could go on for far too long, in order to keep it from being overwhelming there are steps and parts to the project not shown. Please ask me more about the following that were part of the project and process:
Translations
Data planning
Animations
User Interviews