Project Overview:
For this project, I worked as the sole UX/UI designer to improve a company’s ecommerce web experience. The company sells bikes on their website and needs to enhance their browsing and checkout experience to greatly improve their product’s usability. In order to meet business goals, conversion needed to be improved. Keeping in mind a user-centered approach, I implemented a product comparison feature along with the ability to check out as a guest in order to improve conversions while at the same time providing an enjoyable user experience.
Role: UX/ UI Desgner
Tools: Figma, Zoom
Duration: 2 Months
Objective/ Goals:
My goal for this project was to improve the conversion from browse to completion of check-out to increase revenue on the product’s web experience. Implementing a feature to compare products as well as a way to check out as a guest will ultimately lead to increased conversion rate for the company and a better user experience.
Problem:
The client provided primary research and found that users were abandoning their site at critical places in the purchase experience. The client also shared the following information:
50%
Of users open on average 7 item pages and then abandon the site without adding any items into the cart.
70%
Of users who place an item in the cart do not purchase. Data shows that users abandon cart at the registration page.
Hypothesis: Users are unable to determine which bike is best based on relative features.
Users are abandoning the website at various critical points of the check-out process. Right now, users must make an account to purchase.
Project Plan
The following plan was created to get the project started. I decided on research methods, usability testing, and approach to design to accomplish the project goals.
*The client provided their own primary research along with low fidelity wireframes (no sketches) and a user persona for this project.
Research:
Due to time constraints, I conducted secondary research to further investigate the problem space. I performed a competitive analysis of other companies and their ecommerce experience. Many users are familiar with these well known brands therefore incorporating a familar experience would be intuitive for the user.
Understanding common ways other sites enable users to purchase and check out gave me an understanding of common flows. This helped shape my design solutions.
Takeaways
After examining various ecommerce sites, I realized that the client’s website was missing:
The ability to allow users to compare similar products in order to make an informed decision
The ability to check out as a guest and not have to create an account
Areas that these companies were doing well include:
The ability to allow users to place items in the cart and view a grand total
The ability to intuitively compare similar products in order to make a better decision
The ability to make a purchase without creating an account
These aspects motivate the user to finish the purchase because of the goal-gradient effect. The closer users are to completing a task, the faster they work towards reaching it. Therefore removing any friction from completing the purchase will benefit both the company and the user.
User Persona
After reviewing the primary research provided and conducting my own secondary research, I created a user persona based on the information provided by the client.
John the experienced cyclist
24 - 38 years old
User base is 72% men
Takes biking very seriously
Will spend a lot of money on this investment so are very picky and do their research
In order to provide an effective solution, I kept John in mind as I worked on the UX and UI. I needed to ensure it would be intuitive for someone like John to easily navigate. The design had to be familiar to provide the best experience.
How Might we...?
In order to come up with a solution, I decided on the following HMW questions:
How might we enable users to compare similar products without opening a new tab?
How might we enable users to make a purchase without an account?
Guest Checkout User Flow
Before beginning my iterations on the existing wireframes, I needed to map out the user flow that John would experience on this website. Below you’ll find the steps involved in completing a purchase via guest checkout.
Add to cart
Enter email
Enter log in credentials
Enter payment information
Checkout
Payment method
Home Page
Item Page
Cart page
Review Order
Guest Checkout
Credit card
PayPal
Other
Sign In
Sign in/ Guest checkout page
Visit website
Guest Checkout User Flow
Wireframes:
I began with some light wireframes of what the website currently feels like. In order to meet the business goals, I needed to redesign the current website to solve for the current issues that the research reflected.
Home
Item Page
Cart page
bikes
Product
Product
© 2010 — 2020
Privacy — Terms
Product
Product
Feature
Feature
Feature
Resource
Resource
Resource
Company
Company
Company
Features
Resources
Company
Cart
Link 1
Link 2
Link 3
Link 4
Bikes
Bike Name
Price
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Check Out
Total
Taxes
Shipping
Shopping Cart
Register/Sign in
Brand Personality
“An expert in the field who is always knowledgeable about the very latest trends and best products related to biking.”
Savvy
Focused
Serious
Dependable
Style Guide
With the brand personality in mind, I approached the color pallet to be mainly black and white to maintain the serious and dependable characteristic. The blue accent color was used for clear and obvious CTA’s.
Color
AA Compliant
Primary
#1A1A1A
White/ Text
#FFF6EA
Blue/ Accent
#7BB9FA
Grey
#D0D0D0
Typography
H1 bold 34/40.8px
Headline 1
H2 bold 24/28.8px
Headline 2
H3 bold 20/30px
Headline 3
Regular 16/24px
Body 1
Bold 14/21px
Body 2
Medium 12/18px
Caption
Buttons
Primary
Secondary
Font Family and weight
Montserrat Regular
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Montserrat Medium
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Montserrat Bold
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
High Fidelity Screens
Using the style guide and an atomic design system approach, I redesigned the website to implement the features that would be validated later through usability testing. Below are some of the high fidelity screens.
Home
Bikes Page
Product Page
Solution- Adding Product Comparison Tool and Guest Checkout
In order to solve for these issues, I designed a product comparison feature along with a guest checkout experience in order to increase conversion and relieve friction users may face from having to create an account to complete a purchase.
Design Rationale
On the item page, I implemented
a way for users to compare similar
bikes. I kept this feature visible
above the page break in order to
ensure it was easily accessible so
that it can be utilized whenever
needed.
Once users click compare button,
a “rack” overlay appears to add or
remove more products (bikes) to
compare with each other. The
focus was to design a clear next
step while also allowing user
freedom to perform secondary
tasks if needed.
Here the products are displayed
side by side in order for users to
make an informed decision to
before choosing which bike to
purchase.
Usability Testing
After implementing the new comparison feature along with the ability to check out as a guest, I performed 2 rounds of usability testing in order to validate my design decisions. Participants were recruited via Discord and Slack channels.
First round takeaways:
After the first round of usability testing, I found that participants encountered friction during the testing session. Specifically, participants struggled to utilize the compare products feature. Due to an error in framing the scenario, multiple participants became frustrated when information was not available upfront on the product page. To resolve this friction, reframing the scenario with a more concrete context will ensure that the participant will find what information they are looking for and reduce the friction and cognitive load.
Task 1: Find bike within budget:
Overall, 100% of participants (5/5) were able to successfully locate two bikes that were within their budget.
Participants did not read homepage content where there were bikes to be chosen from. This is most likely because participants scan during testing.
Task 2: Find a bike with a pedal assistance range of at least 150 miles
Overall, 60% of participants (3/5) used the compare product feature to successfully locate the information they were looking for.
Participants needed to be partially verbally prompted to locate and use the feature.
Creating a better framed scenario will improve the success rate of future participants.
Interesting findings:
Participant behavior while navigating the website was varied. Some participants used the top navigation to browse all the bikes while others used the CTA “shop bikes” on the landing page.
One participant admitted that price had less to do with their decision than did reading reviews. In this case, social proof was more significant to the buyer than the price tag of the item.
Second round takeaways
After iterating on my test script as well as my designs, I was able to increase the task completion rate to 100% for all tasks. Additionally, Participants were able to complete the tasks significantly faster with these iterations and improvement to the test script.
Task 1: Find bike within budget:
Overall, 100% of participants (5/5) were able to successfully locate two bikes that were within their budget.
Participants were able to quickly navigate the website to find two bikes that fit their budget.
Task 2: Compare the two bikes that fit your budget to see which is a better fit.
Overall, 100% of participants (5/5) used the compare product feature to successfully compare the two products and choose the best option.
Participants found the feature and used it with significantly less time spent on the page.
This meant that the feature was easily accessible and intuitive to use with little to no friction in the task flow.
The participants expressed that the website was “easy to navigate” and described the checkout process as “simple and something that I’m used to.” 4/5 participants expressed that they only use credit/debit cards for online transactions. One participant said that on mobile they would sometimes use Apple Pay.
Lessons learned/ Reflection
There is a way to meet business goals while also designing for the user in an ethical way.
I believe in ethical design and feel my best when I know I am improving the experience for the end user by relieving friction in the user experience.
Constraints impact the design process.
Through this project, some aspects of the design process were not executed by myself personally and it did not feel right. I know that in a perfect world, every step of the design process would get equal time alotted to it. However, there are many things that can come up during a project that can impact the time allowed for each phase. Time and budget constraints may impact the project plan but I felt that I learned to be adaptable in this scenario.
Users will not always want or use a feature added
After conducting usability tests, I found that some participants preferred to take the long route when comparing products. They preferred to open several tabs as opposed to using the feature included in the interface. This was eye opening and only highlights the importance of validating assumptions in designs through user testing.