Improving conversion rates through browsing and checkout optimization in an online bicycle company
Improving conversion rates through browsing and checkout optimization in an online bicycle company
Improving conversion rates through browsing and checkout optimization in a bicycle company
Role
UX/UI Designer
Duration
8 weeks
Tools
Figma, Photoshop, Miro, Canva
PROJECT OVERVIEW
Prestige is an online bicycle manufacturer producing high-quality bicycles for high-performing cyclists
PROBLEM
Analytics indicate low website conversion rates
PROBLEM
Analytics indicate low website conversion rates
SOLUTION
Website browsing and checkout optimization
SOLUTION
Website browsing and checkout optimization
PRIMARY RESEARCH & CONTEXTUALIZATION
PRIMARY RESEARCH
PRIMARY RESEARCH
Secondary Research
Secondary Research
This makes sense, right?
The variable use cases of bicycles require activity-related specifications such as a sturdy frame designed for off-road trails or an aerodynamic bicycle built for fast-paced road races. Understanding the preferences of potential customers helps inform Prestige on what product to release that meets such needs.
This makes sense, right?
The variable use cases of bicycles require activity-related specifications such as a sturdy frame designed for off-road trails or an aerodynamic bicycle built for fast-paced road races. Understanding the preferences of potential customers helps inform Prestige on what product to release that meets such needs.
User Interviews
User Interviews
I conducted my own interviews with 5 qualified users to gain a deeper understanding of participants who plan on purchasing a new bicycle within 36 months and the desired expectations when accomplishing this task.
I interviewed five participants spanning a diverse range of ages, occupations, and fitness aspirations. After interviewing these participants, I uncovered two main themes that inform the foundational flows of the wireframes.
I conducted my own interviews with 5 qualified users to gain a deeper understanding of participants who plan on purchasing a new bicycle within 36 months and the desired expectations when accomplishing this task.
I interviewed five participants spanning a diverse range of ages, occupations, and fitness aspirations. After interviewing these participants, I uncovered two main themes that inform the foundational flows of the wireframes.
Cycling ambition varies greatly between leisure and competitive cyclists. Current and prospective bike owners need a product that provides personalized experiences that meet their diverse needs.
Cycling ambition varies greatly between leisure and competitive cyclists. Current and prospective bike owners need a product that provides personalized experiences that meet their diverse needs.
Cycling is an expensive hobby. People in the market for a new bicycle understand the relationship between price and quality. It becomes my job to facilitate buyer confidence by delivering value and removing friction at every stage of the user journey.
Cycling is an expensive hobby. People in the market for a new bicycle understand the relationship between price and quality. It becomes my job to facilitate buyer confidence by delivering value and removing friction at every stage of the user journey.
This begs the question:
How might we optimize the customer journey and drive increased conversion rates?
PLAN AND IDEATE
PLAN AND IDEATE
After sourcing inspiration and insights from e-commerce websites such as Amazon, Target, and Specialized (cycling manufacturer), I began to formulate my vision of the design and started sketching out various screens and flows.
After sourcing inspiration and insights from e-commerce websites such as Amazon, Target, and Specialized (cycling manufacturer), I began to formulate my vision of the design and started sketching out various screens and flows.
Sketches
Sketches
Bringing the design to life with Crazy Eights, a fast-paced ideation exercise used to generate eight concepts in eight minutes.
After eight minutes, I chose my preferred ideations to move forward in wireframing.
Bringing the design to life with Crazy Eights, a fast-paced ideation exercise used to generate eight concepts in eight minutes.
After eight minutes, I chose my preferred ideations to move forward in wireframing.
User Flow
User Flow
Considering conversion optimization is being prioritized, it becomes essential to create a streamlined user flow that illustrates the path taken by a customer to complete a bicycle purchase. Here, it is critical to minimize the number of steps required to complete a task.
Considering conversion optimization is being prioritized, it becomes essential to create a streamlined user flow that illustrates the path taken by a customer to complete a bicycle purchase. Here, it is critical to minimize the number of steps required to complete a task.
PROTOTYPE
PROTOTYPE
Low-fidelity Wireframes
Low-fidelity Wireframes
At this stage, I developed lo-fi wireframes to start mapping out the website’s hierarchy, navigation, and interface elements. These wireframes bring the user on a journey of finding the perfect bike using Prestige’s two personalization features, the bike finder and bike comparison features, that match the user with the bike best suited for their needs.
At this stage, I developed lo-fi wireframes to start mapping out the website’s hierarchy, navigation, and interface elements. These wireframes bring the user on a journey of finding the perfect bike using Prestige’s 2 personalization features, bike finder and bike comparison, that match the user with the bike best suited for their needs.
Biker Finder
Biker Finder
Bike Comparison
Bike Comparison
EVALUATION
EVALUATION
Usability Testing
Usability Testing
Two rounds of usability testing (n=10) were conducted where users were prompted to complete a series of tasks deemed most essential to Prestige’s usability. Presented below are five essential tasks that the prototype supports:
2 rounds of usability testing (n=10) were conducted where users were prompted to complete a series of tasks deemed most essential to Prestige’s usability. Presented below are 5 essential tasks that the prototype supports:
Iterations
Iterations
Based on user feedback, I continually iterated my design yielding three main improvements presented below:
Based on user feedback, I continually iterated my design yielding three main improvements presented below:
Elevating the landing page
Elevating the landing page
Action-oriented CTAs helps guide the user on their journey
Users can shop all bikes or use the bike finder tool, the two most important user flows, straight from the hero section
Bite-sized educational tidbits via interactive elements
In the second section detailing the three bike categories, users can hover over the ‘Mountain’ card to reveal a quick insight into the purpose of a mountain bike without the user being forced to select ‘Learn More’
Stronger imagery and video
Capture the user’s attention
Reinforce Prestige’s brand attributes of craftsmanship, performance, and sophistication
Action-oriented CTAs helps guide the user on their journey
Users can shop all bikes or use the bike finder tool, the two most important user flows, straight from the hero section
Bite-sized educational tidbits via interactive elements
In the second section detailing the three bike categories, users can hover over the ‘Mountain’ card to reveal a quick insight into the purpose of a mountain bike without the user being forced to select ‘Learn More’
Stronger imagery and video
Capture the user’s attention
Reinforce Prestige’s brand attributes of craftsmanship, performance, and sophistication
Improving the checkout process
Improving the checkout process
Reorganizing the two-column layout
Improves hierarchy, e.g., left column is consumer information, right column is order summary
Improves usability, e.g., removing white space improves the overall aesthetic
Use shipping address as billing address by default
The billing address field is redundant for most users. However, billing field takes undue attention, bringing users to a stop. Setting “Billing = Shipping” by default reduces friction and saves time during the checkout process
Build trustworthiness and credibility
Highlighting Prestige’s customer service offerings such as the test ride assurance, professional assembly and fitting, and complimentary service
Including customer service contact information and the digicert secure encryption stamp of approval
Reorganizing the two-column layout
Improves hierarchy, e.g., left column is consumer information, right column is order summary
Improves usability, e.g., removing white space improves the overall aesthetic
Use shipping address as billing address by default
The billing address field is redundant for most users. However, billing field takes undue attention, bringing users to a stop. Setting “Billing = Shipping” by default reduces friction and saves time during the checkout process
Build trustworthiness and credibility
Highlighting Prestige’s customer service offerings such as the test ride assurance, professional assembly and fitting, and complimentary service
Including customer service contact information and the digicert secure encryption stamp of approval
Update UX writing
Update UX writing
Button labels need context
The final screen in the bike finder flow warrants a specific label that tells the user what to expect on the following screen. In this case, the user knows by selecting the CTA they will be directed to a product listings page
'Select more than one' option
Users did not realize they could select multiple choices from the list. This uncertainty is resolved with a new subheader
Button labels need context
The final screen in the bike finder flow warrants a specific label that tells the user what to expect on the following screen. In this case, the user knows by selecting the CTA they will be directed to a product listings page
'Select more than one' option
Users did not realize they could select multiple choices from the list. This uncertainty is resolved with a new subheader
FINAL PROTOTYPE
FINAL PROTOTYPE
Prestige was destined to be more than a brand. It is a lifestyle, a challenge, a vision of what greatness looks like for those who dare. I translated the underlying ethos into a visual identity that emphasizes craftsmanship, quality, and a modern aesthetic by:
personalizing the browsing experience with bicycle recommendations
optimizing the checkout process with guest checkout and reducing unnecessary form fields
promoting pricing transparency early on with options for free shipping
Prestige was destined to be more than a brand. It is a lifestyle, a challenge, a vision of what greatness looks like for those who dare. I translated the underlying ethos into a visual identity that emphasizes craftsmanship, quality, and a modern aesthetic by:
Personalizing the browsing experience with bicycle recommendations
Optimizing the checkout process with guest checkout and reducing unnecessary form fields
Promoting pricing transparency early on with options for free shipping
Prestige was destined to be more than a brand. It is a lifestyle, a challenge, a vision of what greatness looks like for those who dare. I translated the underlying ethos into a visual identity that emphasizes craftsmanship, quality, and a modern aesthetic by:
Personalizing the browsing experience with bicycle recommendations
Optimizing the checkout process with guest checkout and reducing unnecessary form fields
Promoting pricing transparency early on with options for free shipping
CONCLUSION
CONCLUSION
Next steps
Next steps
01 | Add new flows: Develop user flows such as category browsing, purchase journeys, and error states to fulfill the end-to-end user experience.
02 | Monitor e-commerce KPIs: Enable growth and client satisfaction over the long-term by monitoring performance metrics including page visits, bounce rates, customer acquisition, and conversion rates.
03 | Iterate, iterate, & iterate: Continue researching, testing, and iterating based on user testing and website analytics.
01 | Add new flows: Develop user flows such as category browsing, purchase journeys, and error states to fulfill the end-to-end user experience.
02 | Monitor e-commerce KPIs: Enable growth and client satisfaction over the long-term by monitoring performance metrics including page visits, bounce rates, customer acquisition, and conversion rates.
03 | Iterate, iterate, & iterate: Continue researching, testing, and iterating based on user testing and website analytics.
GOOD DESIGN IS GOOD BUSINESS.
let me help you achieve BOTH.
GOOD DESIGN IS GOOD BUSINESS.
let me help you achieve BOTH.
GOOD DESIGN IS GOOD BUSINESS.
let me help you achieve BOTH.
Role
UX/UI designer
Duration
8 weeks
Tools
Figma, Photoshop
This begs the question:
This begs the question:
How might we optimize the customer journey and drive increased conversion rates?
How might we optimize the customer journey and drive increased conversion rates?
Role
UX/UI designer
Duration
8 weeks
Tools
Figma, Adobe Photoshop
PROJECT OVERVIEW