A Bicycle Ecommerce Web-Based Solution
Bici
User Experience Design and Brand
Bici sells bikes on their mobile-web experience. They need to enhance their browsing and checkout experience to greatly improve their product's usability. That's where I come in!
Discovery
Problem
Company Brief
Improve the conversion rate from browse to completion of checkout to increase revenue on the products mobile-web experience.
Needs
The project manager shared data that shows 50% of users open on average 7 item pages and then abandon the site without moving to the cart. The hypothesis is that users are unable to determine which bike is best based on relative features.
70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. The project manager wants to have a guest checkout designed.
Given
I was given rough wireframes (seen right) with some notes from the company about potential features to think about adding.
Their target user is 24-39 years old, 72% male, High Income, and takes biking very seriously.
Brand attributes are savvy, focused, serious, and dependable.
Research & Project Plan
Project Plan (Right)
The project plan is an outline to make sure the project is being completed on track and on time. It helps stakeholders to see how long things will take and acts as an accountability piece for the designer and team. I separated the project into six different phases.
Research Plan (Link Below)
The research plan is always need in order to understand and document the scope of the project. It also allows us to develop questions that will drive the design process forward and give us a place to start doing research. The documentation aids in giving vision and understanding to anyone that asks for the vision for the project.
Click Here for Research Plan
Secondary Research
My secondary research included some questions along with other resources found on the internet to help me be able to start getting an idea of my users' habits and troubles.
Questions
Are users able to determine which bike is best based on relative features when they compare bikes?
Are users exiting the cart because they do not want to register?
Is a guest checkout helpful for conversion?
Vlog
While I already knew who my users were, I wanted to empathize and understand their daily life since cycling is not my specialty. A simple search on YouTube was able to help me with this.
Articles
Since on of the main problems was with checkout conversion rates, I wanted to see what research has already been done. I found some good information and guidelines from usabilitygeek.com and NN/g
"23% of users abandon the shopping cart because they are required to create an account."
"14% of users leave because there is no checkout option."
Persona
I created a persona so that I can keep the user in mind. This also helps the team and stakeholders to understand their users on a more personal level. This information was built upon by the information I was given from the company and my secondary research.
I chose to only do one persona because of time constraints. My main user group was also mostly male so I didn't see it necessary to create a second persona.
Design I
User Flow
Moving into the design process it was important to nail down a user flow. I tried to combine both the user flow and site map to save some time. Time = Money! Am I right?
I decided to just work with one user flow because of time constraints and also multiple problems could be solved with just one flow. Future implementations or iterations may require future flows.
Wireframes showcasing what my client would like with ideas.
Bici Research plan
Example of Video Research
User Persona
User Flow
Sketching
I used procreate on my iPad for sketching. I enjoy the precision as well as how fluid you can be with digital sketches. Working with layers means that I can reuse some elements without redrawing it if it's necessary.
Wireframes
From preliminary sketches I moved into wireframes to start getting an idea of spacing as well as what kind of components I will have to build. Sometimes you can use wireframes in testing but since the comparative features are detailed I decided to do a medium level wireframe for accuracy's sake before testing.
Product Page
Product Page
Product Page
Cart Drawer
Catalog Medium
Compare Drawer
Desktop/Authentication
Desktop/Payment
Desktop/Shipping
Desktop/Thanks
Medium Fidelity Prototype
Medium Fidelity prototype was built as a rough draft to see if users could get from point A to point B. Most of the app is still a skeleton but this would provide a good enough base to be able to navigate and acquire data to drive design.
Home Page
Catalog Compare
Cart Drawer
Catalog
Cart Drawer
Product Page
Product Page
Branding
I took back to the iPad! I enjoyed creating a soft yet dynamic logo to represent Bici brand. Blue represents Energy, Technology, and stability which aligns with my users as well as the business attributes. More branding and details below in the design system.
Design II
Validate I
Test Script & User Test 1
The first round of usability testing was using three KPI's in order to find out the usability in its current state.
Quantitative - Task Success Rate (TSR)
Quantitative - Time On Task (TOT)
Qualitative - System Usability Score (SUS)
Questions
Explain what you see on the screen.
How would you go about searching for a bike on the website?
How would you make a comparison of the two different bikes and their features?
How would you see the description and features for a bike?
How would you go through the purchasing process?
Results
TSR - Task Success Rate was a moderate success with a rate of 88% between all questions. The lowest was the comparison drawer(Q3) with a 71% success rate.
TOT - Time On Task was also a success with the averages of most tasks being within 10 seconds. The task that took the most time was the purchase process (Q4) for obvious reasons.
SUS - The overall SUS for the prototype was 76%. According to general standards, anything above 68% is above average on the scale. For a first test, this is good news.
Insights
Most of the app yielded high usability rates for the first test. Many users had issues with not knowing to scroll because of spacing issues or minor details like users wanting comments and a rating system. These will be added in the high fidelity version. I need to keep an eye out on the compare function since that has had the most issues thus far.
Branding
I took back to the iPad! I enjoyed creating a soft yet dynamic logo to represent Bici brand. Blue represents Energy, Technology, and stability which aligns with my users as well as the business attributes. More branding and details below in the design system.
Design II
Design System
The design system is an outline like a style guide but it has standards for components and variants as well. This acts as a source of truth for designers, marketers, developers, and engineers. Feel free to zoom and pan through the space below.
High Fidelity Prototype
This version or the prototype was built off of the foundation of the medium fidelity. This version takes into account the Bici Bike brand and implements the design system.
Clickable Prototype
The clickable prototype was the final version used in testing to see how well the solution has evolved since its conception. Click the link below to test the app. (Best results are on desktop)
Validate II
Test Script & User Test 2
The second round of usability testing measured the same three KPI's from the first round. This test made use of the Hi Fidelity Prototype.
Quantitative - Task Success Rate (TSR)
Quantitative - Time On Task (TOT)
Qualitative - System Usability Score (SUS)
Questions
Explain what you see on the screen.
How would you go about searching for a bike on the website?
How would you make a comparison of the two different bikes and their features?
How would you see the description and features for a bike?
How would you go through the purchasing process?
Results
TSR - Task Success Rate was a moderate success with a rate of 90%(+2%) between all questions. The lowest was the comparison drawer(Q3) with a 62.5%(-8%) success rate.
TOT - Time On Task was also a success with the averages of most tasks being within 10 seconds. The comparison drawer took a little bit longer because people found out how to use it more quickly. The task that took the most time was the purchase process (Q4) once again.
SUS - The overall SUS for the prototype was 97%. This was 21% higher than the previous test. According to general standards, anything above 68% is above average on the scale.
Insights
The app once again yielded high usability rates. The task success rate saw a slight increase but failed with the comparison drawer(Q3). The Time On Task rating was recorded a little more accurately but generally stayed the same except the purchase journey saw a decrease of an average of 17 seconds! The SUS score increased by a whopping 21%.
Solutions
Decrease the spacing between sections of the website so people can see the sections upon entry so they know to scroll.
Create an onboarding one-time pop up to help users understand the comparison feature. I would have liked to use an animation to get the users attention but I was under a technology constraint.
Iterate
Iteration 1 - Spacing
In some user testing I recognized that some if the spacing was a bit much. Users didn't know you could scroll down. I limited the space so that it would peak above the bottom area of the entry screen.
Final Clickable Prototype
After the iterations I had a final version of the app showcasing the changes. Next steps would be to retest the solution to see if I could get higher KPI's on the tasks that were lower. Click the link below to test the app. (Best results are on desktop)
Click Here to Test Prototype
“I like the comparison feature it really highlights the differences ”
Iteration 2 - Onboarding
After the second test even with the design system and color users still wanted to explore the product page before using the comparison. I used a one-time pop up to notify users of the feature.
