precision ride co.
This project revolved around designing and enhancing an e-commerce website for a company that sells high-end bikes. The main focus was improving the web browsing and checkout experience to boost sales conversions.
Deliverables: UX R&A, Wireframes, Creative Direction, Visual Designs
Role: UX/UI Designer
problem space
The company, specializing in bikes, is focused on enhancing its website’s usability to improve the overall user experience during product browsing and checkout. The primary business goal is to increase conversion rates by optimizing the user journey from browsing to completing a purchase, ultimately boosting revenue. Currently, 50% of users browse an average of seven bike pages but leave the site without adding any items to their carts, which the Product Manager (PM) attributes to difficulties in comparing bike options. Additionally, 70% of users who place items in their carts abandon the process at the registration page. To address this, the PM suggests implementing a guest checkout feature that still captures the user’s email.
Solution
Through UX research & analysis, I identified and solved numerous UX issues that improved the functionality and navigation of the site. With my creative direction and production design, I also created a brand that presents itself as knowledgeable, reliable, and serious about biking trends and products while conveying a feel of luxury. This was to account for the target audience, primarily men aged 24-38 with high incomes who take biking seriously, investing time and money into finding the perfect bike.
constraints
I created a style and brand guide based on the brand personality the company was aiming for. As such the colors, typography, photography, graphics & illustration styles were all created and selected by me. I was tasked with creating only a web based design and limited to about 90 hours total for the whole project. I was only given the problem space and some low fidelity wireframes to start with and had to organize and plan my time accordingly.
step 1: ux r&a
With limited time available for UX Research & Analysis, I focused primarily on competitive analysis and secondary research.
For the competitive analysis, I was provided a list of competitors and leaders in the e-commerce industry. I conducted an audit of each of the sites, analyzing the user experience, visual design and content. I also tested their product comparison tools and checkout experiences since those were going to be the focal points of my own designs. I took screenshots and compiled a list of likes, dislikes, and potential action items for my own designs based on industry standards, UX/UI fundamentals, and the client’s business goals.
secondary research
I was unable to undergo my own extensive user research due to the timeline, so I settled upon using the provided research materials for the target audience and goals of the design.
I did, however, proceed with my own secondary research on how best to optimize a product comparison tool, the checkout process, and an e-commerce website with user experience as the main focus. I was able to pull the following insights out of the research to focus my efforts in the design process.
step 2: wireframes
After completing the research and analysis, I started work on the first round of low fidelity wireframes basing it loosely on the ones provided to me.
I focused my attention primarily on the product comparison tool and the checkout process to achieve the company’s goals. Also at the forefront was successfully encapsulating the brand’s products and offerings on the homepage through digestible content, snackable headlines, and visual hierarchy.
To adhere to the target audience’s preferences, I made sure that each user would feel comfortable finding all the different details about the bikes on the Product Detail Page and having each bike category separated out into its own Product Listing Page.
step 3: user testing
I invited five participants, two separate times, to conduct these tests using Moderated Remote User Testing (MRUT) due to cross country and time-zone differences. MRUT also allowed the users to perform the test in a comfortable environment for a better result. I sent out a link to the Figma prototypes and gave each user three tasks they needed to complete.
1. You are looking to buy a mountain bike, browse through this website and look at your options.
2. You are leaning towards buying the red mountain bike but first check and see how it stacks up to the green mountain bike.
3. Purchase the red mountain bike.
Before the test, I asked users to think out loud about everything that crossed their minds during the test. I took notes on each user’s every move on the screen, on everything they said and on every facial expression they made throughout the test. This allowed me to understand what the users were thinking and their frustrations during the entire process. I also asked for general feedback at the end based on the visual design and branding.
test results
This user testing uncovered several issues and brand changes that needed to be added to ensure a better user experience.
Needed to improve the product comparison tool and how you add products to it. Not just from the PDP but also the PLP.
Needed to improve the layout of the PDP. Create more white space and make the product comparison tool more visible. Make the products and details feel more high quality and luxurious.
Needed to visually change the checkout process page by removing shadows, icons, and make it look cleaner and newer. It had too much of a low quality, cheap, and untrustworthy feel.
Update the homepage, the visuals, and the typography to increase the feeling of luxury and high quality since the products being sold are quite expensive.
Improve the product comparison tool to make the differences of each bike more visible.
step 4: brand & style guide
Before starting my high fidelity wireframes and prototype, it was time to update the brand’s visual design and style to give an impression of luxury, adventure, and dependability.
First I started with colors sticking to a very basic color scheme with black and white being the primary colors and electric blue to give a pop of energy as the secondary color.
For typography I went with the sans serif font “Oswald” for all the headings to give a bold, modern, and simplistic style. For body text, I decided to use “Lato” which is another sans serif font that is more digestible and easier to read.
Imagery was chosen with the focus on nature and adventure while providing additional color and energy.
step 5: high fidelity prototype
After completing the first round of testing, along with the brand and style updates, I designed the high fidelity wireframes and turned them into a testable prototype.
The main focus was on addressing the concerns from the first round of testing. Using new imagery, fonts, and colors, I changed the feeling of the homepage to one that is more luxurious, adventurous, and bold.
I improved the product detail page by adding more imagery and spreading the elements apart to let each one breathe. I also made the product compare button more visible and intuitive on the PLP and PDP.
The product comparison tool was improved by making the highlighted differences more clear and increasing the size of the grid to improve readability.
Lastly the checkout process was improved by designing it to look and feel more modern by getting rid of the drop shadows and cartoon icons.
final round of testing
This final round of user testing was much more positive with users enjoying the design and not finding any issues or bugs. Below are some of the findings and positive feedback:
Website felt high tech, sleek, modern, and trustworthy. The brand gave a feeling of adventure while still being sophisticated.
Every single user chose to checkout as a guest rather than create an account.
The product compare tool was very easy to use and allowed users to easily see differences between the bikes they were considering purchasing.
Every user liked that the checkout process was streamlined and all on one page rather than going through multiple pages.
conclusion
The designs I created successfully solved the original problem space: they accurately represented Precision Ride Co. as a bold, luxurious, and adventurous brand. I was also able to create a product comparison tool to help the users distinguish and dissect the exact differences between bikes, 80% of users said they would purchase a bike from the updated website. The checkout process was upgraded and streamlined by designing a guest checkout option to help users purchase their products quicker and easier, 90% users used the guest checkout option during testing. Overall, this improved the web browsing and checkout experience to help boost sales conversions.
