Velo Bicycles
Veló Bicycles is a conceptual project, as a premier retailer specializing in high-end bicycles and accessories for enthusiasts who take biking seriously. With a curated selection of road, mountain, electric, triathlon, and leisure bikes, Veló Bicycles caters to the diverse needs of passionate cyclists.
MY ROLE
Web Designer, Copywriter, Visual Designer
TIMELINE
June - August 2023
TOOLS
Figma
PROJECT TYPE
Concept
Concept
INDUSTRY
E-Commcerce
DESIGN PROCESS
DEFINE
Problems
Data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
The team hypothesizes that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase it.
Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Goals
Improve the conversion rate from browse to checkout.
Increase revenue on the product's mobile-web experience.
Simplify the checkout experience, especially for guests.
Success Metrics (Definition)
Success of this website redesign is defined by key metrics and outcomes:
Enhanced user experience, navigation, increased engagement.
Lower bounce rates, an improved checkout process leading to increase in conversion and sales.
Improved visual appeal, creating a visually appealing design that aligns with the brand's high end positioning to attract and retail customers.
DEFINE
Problems
Data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
The team hypothesizes that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase it.
Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Goals
Improve the conversion rate from browse to checkout.
Increase revenue on the product's mobile-web experience.
Simplify the checkout experience, especially for guests.
Success Metrics (Definition)
Success of this website redesign is defined by key metrics and outcomes:
Enhanced user experience, navigation, increased engagement.
Lower bounce rates, an improved checkout process leading to increase in conversion and sales.
Improved visual appeal, creating a visually appealing design that aligns with the brand's high end positioning to attract and retail customers.
DEFINE
Problems
Data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
The team hypothesizes that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase it.
Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Goals
Improve the conversion rate from browse to checkout.
Increase revenue on the product's mobile-web experience.
Simplify the checkout experience, especially for guests.
Success Metrics (Definition)
Success of this website redesign is defined by key metrics and outcomes:
Enhanced user experience, navigation, increased engagement.
Lower bounce rates, an improved checkout process leading to increase in conversion and sales.
Improved visual appeal, creating a visually appealing design that aligns with the brand's high end positioning to attract and retail customers.
DEFINE
Problems
Data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
The team hypothesizes that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase it.
Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Goals
Improve the conversion rate from browse to checkout.
Increase revenue on the product's mobile-web experience.
Simplify the checkout experience, especially for guests.
Success Metrics (Definition)
Success of this website redesign is defined by key metrics and outcomes:
Enhanced user experience, navigation, increased engagement.
Lower bounce rates, an improved checkout process leading to increase in conversion and sales.
Improved visual appeal, creating a visually appealing design that aligns with the brand's high end positioning to attract and retail customers.
DEFINE
Problems
Data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
The team hypothesizes that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase it.
Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Goals
Improve the conversion rate from browse to checkout.
Increase revenue on the product's mobile-web experience.
Simplify the checkout experience, especially for guests.
Success Metrics (Definition)
Success of this website redesign is defined by key metrics and outcomes:
Enhanced user experience, navigation, increased engagement.
Lower bounce rates, an improved checkout process leading to increase in conversion and sales.
Improved visual appeal, creating a visually appealing design that aligns with the brand's high end positioning to attract and retail customers.
DEFINE
Problems
Data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
The team hypothesizes that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase it.
Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Goals
Improve the conversion rate from browse to checkout.
Increase revenue on the product's mobile-web experience.
Simplify the checkout experience, especially for guests.
Success Metrics (Definition)
Success of this website redesign is defined by key metrics and outcomes:
Enhanced user experience, navigation, increased engagement.
Lower bounce rates, an improved checkout process leading to increase in conversion and sales.
Improved visual appeal, creating a visually appealing design that aligns with the brand's high end positioning to attract and retail customers.
RESEARCH
User Personas
Personas were created to understand the two channels of shoppers for Velo. Through user research, we found that a lot of personal research and browsing happens before the final purchase.
😎
The Expert
Knows what he's shopping for and has done the research for specific bike parts, frames, etc. Has a specific ride, race or trail he is shopping for.
🤓
The Scholar
In the research phase and browsing parts and models before committing to purchase. Needs reliable information, spec grid, and reviews in one place.
RESEARCH
User Personas
Personas were created to understand the two channels of shoppers for Velo. Through user research, we found that a lot of personal research and browsing happens before the final purchase.
😎
The Expert
Knows what he's shopping for and has done the research for specific bike parts, frames, etc. Has a specific ride, race or trail he is shopping for.
🤓
The Scholar
In the research phase and browsing parts and models before committing to purchase. Needs reliable information, spec grid, and reviews in one place.
RESEARCH
User Personas
Personas were created to understand the two channels of shoppers for Velo. Through user research, we found that a lot of personal research and browsing happens before the final purchase.
😎
The Expert
Knows what he's shopping for and has done the research for specific bike parts, frames, etc. Has a specific ride, race or trail he is shopping for.
🤓
The Scholar
In the research phase and browsing parts and models before committing to purchase. Needs reliable information, spec grid, and reviews in one place.
RESEARCH
User Personas
Personas were created to understand the two channels of shoppers for Velo. Through user research, we found that a lot of personal research and browsing happens before the final purchase.
😎
The Expert
Knows what he's shopping for and has done the research for specific bike parts, frames, etc. Has a specific ride, race or trail he is shopping for.
🤓
The Scholar
In the research phase and browsing parts and models before committing to purchase. Needs reliable information, spec grid, and reviews in one place.
RESEARCH
User Personas
Personas were created to understand the two channels of shoppers for Velo. Through user research, we found that a lot of personal research and browsing happens before the final purchase.
😎
The Expert
Knows what he's shopping for and has done the research for specific bike parts, frames, etc. Has a specific ride, race or trail he is shopping for.
🤓
The Scholar
In the research phase and browsing parts and models before committing to purchase. Needs reliable information, spec grid, and reviews in one place.
RESEARCH
User Personas
Personas were created to understand the two channels of shoppers for Velo. Through user research, we found that a lot of personal research and browsing happens before the final purchase.
😎
The Expert
Knows what he's shopping for and has done the research for specific bike parts, frames, etc. Has a specific ride, race or trail he is shopping for.
🤓
The Scholar
In the research phase and browsing parts and models before committing to purchase. Needs reliable information, spec grid, and reviews in one place.
PROTOTYPE
Wireframe
Creating wireframes allowed for a high level structure of the website and the necessary functions of each page.
PROTOTYPE
Wireframe
Creating wireframes allowed for a high level structure of the website and the necessary functions of each page.
PROTOTYPE
Wireframe
Creating wireframes allowed for a high level structure of the website and the necessary functions of each page.
PROTOTYPE
Wireframe
Creating wireframes allowed for a high level structure of the website and the necessary functions of each page.
PROTOTYPE
Wireframe
Creating wireframes allowed for a high level structure of the website and the necessary functions of each page.
PROTOTYPE
Wireframe
Creating wireframes allowed for a high level structure of the website and the necessary functions of each page.
TEST
Usability Testing
We conducted usability testing with both our wireframes and high fidelity designs. We ran moderated and unmoderated tests to determine the ease of use and clarity of the designs.
Test Finding
The compare feature as a separate page is hurting the conversion. By moving users away from the product detail page, they are less likely to move the item into the cart.
Solution
Create a compare feature as an overlay instead of a separate page. This keeps the shopper from clicking away from the product page and they are more likely to move the item to their cart.
Test Finding
The language and structure of the homepage wireframe indicates that Veló is an esteemed bicycle brand, not a curated bike retailer.
Solution
Change the langugage and product highlights in the homepage to reflect the brands identity and product offerings. Help reinforce why Velo is a trusted bike retailer.
TEST
Usability Testing
We conducted usability testing with both our wireframes and high fidelity designs. We ran moderated and unmoderated tests to determine the ease of use and clarity of the designs.
Test Finding
The compare feature as a separate page is hurting the conversion. By moving users away from the product detail page, they are less likely to move the item into the cart.
Solution
Create a compare feature as an overlay instead of a separate page. This keeps the shopper from clicking away from the product page and they are more likely to move the item to their cart.
Test Finding
The language and structure of the homepage wireframe indicates that Veló is an esteemed bicycle brand, not a curated bike retailer.
Solution
Change the langugage and product highlights in the homepage to reflect the brands identity and product offerings. Help reinforce why Velo is a trusted bike retailer.
TEST
Usability Testing
We conducted usability testing with both our wireframes and high fidelity designs. We ran moderated and unmoderated tests to determine the ease of use and clarity of the designs.
Test Finding
The compare feature as a separate page is hurting the conversion. By moving users away from the product detail page, they are less likely to move the item into the cart.
Solution
Create a compare feature as an overlay instead of a separate page. This keeps the shopper from clicking away from the product page and they are more likely to move the item to their cart.
Test Finding
The language and structure of the homepage wireframe indicates that Veló is an esteemed bicycle brand, not a curated bike retailer.
Solution
Change the langugage and product highlights in the homepage to reflect the brands identity and product offerings. Help reinforce why Velo is a trusted bike retailer.
TEST
Usability Testing
We conducted usability testing with both our wireframes and high fidelity designs. We ran moderated and unmoderated tests to determine the ease of use and clarity of the designs.
Test Finding
The compare feature as a separate page is hurting the conversion. By moving users away from the product detail page, they are less likely to move the item into the cart.
Solution
Create a compare feature as an overlay instead of a separate page. This keeps the shopper from clicking away from the product page and they are more likely to move the item to their cart.
Test Finding
The language and structure of the homepage wireframe indicates that Veló is an esteemed bicycle brand, not a curated bike retailer.
Solution
Change the langugage and product highlights in the homepage to reflect the brands identity and product offerings. Help reinforce why Velo is a trusted bike retailer.
TEST
Usability Testing
We conducted usability testing with both our wireframes and high fidelity designs. We ran moderated and unmoderated tests to determine the ease of use and clarity of the designs.
Test Finding
The compare feature as a separate page is hurting the conversion. By moving users away from the product detail page, they are less likely to move the item into the cart.
Solution
Create a compare feature as an overlay instead of a separate page. This keeps the shopper from clicking away from the product page and they are more likely to move the item to their cart.
Test Finding
The language and structure of the homepage wireframe indicates that Veló is an esteemed bicycle brand, not a curated bike retailer.
Solution
Change the langugage and product highlights in the homepage to reflect the brands identity and product offerings. Help reinforce why Velo is a trusted bike retailer.
TEST
Usability Testing
We conducted usability testing with both our wireframes and high fidelity designs. We ran moderated and unmoderated tests to determine the ease of use and clarity of the designs.
Test Finding
The compare feature as a separate page is hurting the conversion. By moving users away from the product detail page, they are less likely to move the item into the cart.
Solution
Create a compare feature as an overlay instead of a separate page. This keeps the shopper from clicking away from the product page and they are more likely to move the item to their cart.
Test Finding
The language and structure of the homepage wireframe indicates that Veló is an esteemed bicycle brand, not a curated bike retailer.
Solution
Change the langugage and product highlights in the homepage to reflect the brands identity and product offerings. Help reinforce why Velo is a trusted bike retailer.
DESIGN
Style Guide
The goal was to have the website reflect the brand's personaity, which is: Savy, Focused, Serious, and Dependable. The design style would need to reflect those charactistics. I chose black and white to maintain that focused look and feel, and allow the bike designs to be the visual focal point.
DELIVER
Final Design
DESIGN
Style Guide
The goal was to have the website reflect the brand's personaity, which is: Savy, Focused, Serious, and Dependable. The design style would need to reflect those charactistics. I chose black and white to maintain that focused look and feel, and allow the bike designs to be the visual focal point.
DELIVER
Final Design
DESIGN
Style Guide
The goal was to have the website reflect the brand's personaity, which is: Savy, Focused, Serious, and Dependable. The design style would need to reflect those charactistics. I chose black and white to maintain that focused look and feel, and allow the bike designs to be the visual focal point.
DELIVER
Final Design
DESIGN
Style Guide
The goal was to have the website reflect the brand's personaity, which is: Savy, Focused, Serious, and Dependable. The design style would need to reflect those charactistics. I chose black and white to maintain that focused look and feel, and allow the bike designs to be the visual focal point.
DELIVER
Final Design
DESIGN
Style Guide
The goal was to have the website reflect the brand's personaity, which is: Savy, Focused, Serious, and Dependable. The design style would need to reflect those charactistics. I chose black and white to maintain that focused look and feel, and allow the bike designs to be the visual focal point.
DELIVER
Final Design
DESIGN
Style Guide
The goal was to have the website reflect the brand's personaity, which is: Savy, Focused, Serious, and Dependable. The design style would need to reflect those charactistics. I chose black and white to maintain that focused look and feel, and allow the bike designs to be the visual focal point.
DELIVER
Final Design
Nice to see you here!
Let's work together.
Website made with love by me!
Nice to see you here!
Let's work together.
Website made with love by me!
Nice to see you here!
Let's work together.
Website made with love by me!
Nice to see you here!
Let's work together.
Website made with love by me!