Matthew
Featherstone
My Role
In this UX case study, my primary responsibility was to optimize the website's conversion rate and simplify the checkout process for online shoppers while concurrently enhancing the brand's image and fostering trust among potential purchasers.
Moreover, I aimed to provide users with an intuitive and seamless experience by facilitating the swift identification of the most suitable bike for their needs, complete with the relevant features.
Additionally, I proposed a 'brick and mortar' page for users to visit a physical store and establish trust by examining the product in person. I also aimed to implement a bike comparison page, enabling users to compare bikes' characteristics side by side.
Main Softwares Used Throughout
With the Introduction to the VEHI bicycle manufacturer case study over, I am thrilled to present this project, which I am confident showcases my expertise, experience and passion for UX design.
Research
In this section of my case study, I researched the challenges consumers face trusting online retailers and the strategies retailers use to address these issues.
Findings
Trust
Consumers have concerns about the trustworthiness of the retailer, particularly if they are unfamiliar with the brand or have had negative experiences with online shopping in the past.
Product Quality
It can be difficult to assess the quality of a product when shopping online, as consumers are unable to physically inspect the item before purchasing.
Shipping and Delivery
Late deliveries, lost packages, and damaged goods during transit are common issues that can cause frustration and inconvenience for consumers.
Returns and refunds
Consumers may have difficulty returning items or obtaining refunds if they are dissatisfied with their purchase, particularly if the retailer has a complex or unclear returns policy
Cybersecurity
Online shopping requires consumers to share personal and financial information, which can be vulnerable to cyber threats such as hacking and identity theft.
WireFrame + Testing
In this section of my case study, I created a style guide, user flows and wireframes, followed by conducting the first round of user testing
Style Guide
Below is the style guide I have developed for VEHI, a bicycle company whose name is derived from the Latin word "to ride." The chosen font is Hiragino Sans, which has an elegant appearance that appeals to the company's target demographic of young professionals who enjoy mountain biking. The color scheme consists of burnt orange, off-white, and off-black, which creates a soft, easy-to-view appearance while also contrasting with the bold and dynamic burnt orange.
User Flows
These User Flows illustrate the step-by-step process for VEHI customers. The objective is to create a streamlined and intuitive path for users, while ensuring that each step flows seamlessly into the next, resulting in a frictionless customer journey.
Home/Landing Page
Bike Type
Individual Bike
Comparison
Drop Down Menu
Cart
Shipping
Review and Pay
Find a Local Shop
Wire Frames
The minimal wireframes below depict each page in the User Flow journey. The design is informed by fashion and bicycle websites, with the goal of seamlessly combining these two elements into a webpage that effectively engages the target demographic.
Initial Wire Frame Prototype
This is the first of three user-tested prototypes for the VEHI webpage. It has a simple wireframe design to prioritize the flow and customer journey without visual distractions. My objective was to test usability and functionality before adding imagery, ensuring a smooth and intuitive user journey.
Initial User Testing + Research Synthesisation
Finding a Bike
'Finding a Bike' was simple and intuitive for all five participants, with some taking a different route, but overall no issues or frustrations.
Comparing Bikes
'Comparing Bikes' was a significant issue, with each participant struggling to find it and some giving up. A solution is to have a comparison button on the homepage and drop-down menu, as well as allowing users to compare bikes from different categories.
Finding a Shop
All participants found the 'Finding a Shop' easy, participants claiming this enhanced their trust. However, some participants were uncertain whether entering a zip code or city would be more appropriate.
Shipping
The 'Shipping' section had a significant issue that could be resolved earlier in the webpage with a location popup. Users need to choose the country before selecting the pickup or delivery option, which caused confusion for participants.
Payment
Payment flow is generally strong, but some users preferred having the review section after payment for a "double confirmation". Incorporating the review and confirmation as a separate step or popup would enhance the overall UX design.
Bike Page
The 'Bike Page' design was commendable, but feedback suggests that displaying the price and shipping cost on this page would improve user experience.
Problem + Solution
Currently, VEHI is facing issues with online user conversion rates. Data suggests that 70% of users add bikes to their cart but don't complete the purchase, and 50% browse seven pages without adding any bikes to their cart. VEHI also believes users struggle to identify the most suitable bike for their needs.
High Fidelity + User Testing
In this section of my case study, I Designed a High Fidelity prototype for VEHI through Figma. Afterwards I tested it with 5 participants.
1st HighFidelity Design
This is the 2nd of three user-tested prototypes for the VEHI webpage. This design starts to build the webpages High Fidelity design. All the imagery were generated through AI, while the colour scheme comes from the style guide for this website. The main focal point of this High Fidelity Prototype was to determine if there are any issues with the usability, interaction design or user flows.
High Fidelity Design User Testing + Research Synthesisation
Gravel Bike 3
Good Process, Each participant took different ways to find gravel bike 3, but all had no issues, saying the flow was intuitive and it worked as expected.
Comparing Bikes
Overall the comparing bikes page was strong, the layout of the page was strong, but each participant advised to make the call to action buttons clearer. With a clearer contrast especially against the background images on the home page.
Finding a Shop
The finding a shop flow is really strong, the path to get there is strong, no participation showed frustrations. But the call to action button on the drop down needs to be clearer. The Map is great but having a title to exact location above the list of shops will help.
Overall Flow
The overall flow is really strong, aside for a few call to action button fixes and a simpler payment flow. But the imagery and text is great and feel feels very professional.
Payment
The Payment flow is the weakest link in this design. needs to be clearer call to action buttons throughout the flow which also included add to cart. Also an indicator through the payment process to indicate to the user where they are in the flow will improve usability.
Bike Page
The Bike page was strong, the imagery is great and having the price clearly showing is strong. But the page needs stronger call to action buttons, with shipping information visible.
Home Page
The Home Page is overall strong, although a few changes are needed. Firstly clearer buttons with more contrast again the background. Plus removing the social media icons and putting a my account and cart icon are far more important.
Drop Down
The Drop Down menu, needs much clearer call to action buttons, and also a re organisation of the buttons.
Find a Shop
The Find a Shop flow was overall strong, just a few small issues. firstly, removing the search icon is needed. Also having a title above the right hand side menu, telling the user exactly where they are searching will clear up any potential confusion.
Bike Pages
The Bike Page, again needs clearer Call to Action button. Also, a rough idea of shipping costs to the users location will be a positive. The Price, High Quality Image and paragraph on the bikes quality are very strong.
Case Study: VEHI
VEHI, a bicycle manufacturer, needs to enhance their browsing and checkout experience to greatly improve their product's usability and conversion.
High Fidelity Prototype
I welcome you to view the final videos below, of my updated and revised prototype. I have divided the prototype into different sections.
The following videos present a demonstration of the usability of the website highlighting its responsiveness and user experience.
Pop Up Home Page
This video of my prototype demonstrates how a user can seamlessly interact with the initial popup window in the home page flow of the VEHI webpage.
you'll see there are many different ways to login or create an account which improves the usability of the popup due to offering different options. The call to action buttons are very clear and easily legible.
Find a Local Shop
This video of my prototype demonstrates the Find a Local Shop flow and page of the VEHI Webpage.
You will see how the Find a Local Shop page works and the improvements I made since the last round of usability testing.
you'll see a title for the exact location plus the removal of the search element, all with aim to further increase the UX of the webpage and were shown during usability testing.
Compare VEHI Bikes
This video of my prototype demonstrates the Compare VEHI flow, it clearly demonstrates the feel and look of the page.
And all the interactions needed for the user to navigate into the Compare a bike page.
You will also see all the improved and clearer Call to Action Buttons, which were identified as an issue through the previous rounds of usability testing.
Gravel Bike 3
This video of my prototype demonstrates the way a user of the VEHI webpage can find and location the Gravel Bike 3 Page.
You'll see the multiple ways to get and locate the Gravel Bike 3 page which all have clear and precise Call to Action Buttons, you'll also see the improved bike descriptions which include shipping price and price of Bike. As showing these aspects were vital to the Page as shown through usability testing.
Payment Flow
The Final Video of the Prototype below is showcasing the payment flow of the VEHI Webpage. clearing outlining how a user of the webpage would add a bike to card, the checkout pages and finally the layout and UX of the payment flow.
You'll also receive an understanding on how the pages feel and look.
The Payment flow was the most important aspect to get right in this Case Study as VEHI stated that they are having issues with conversion and building a trustworthy and legitimate payment flow is vital to this.
You'll see all the Call to Action buttons are clear and all the prices are clearly visible which only improves and enhances both the UX and the purchasing trust of the webpage.
Prototype Built in Protopie
Conclusion
This Final section of my VEHI UX Case Study
outlines the conclusion which includes notes of my learnings and what I would have changed or included if I kept working on this project.
If I Had Continued Working
In reflecting on this case study,
I would have liked to create a more unique and clearer "Compare Bikes" Page, I think this page is a little weak when compared to the other pages, this was due to most of my effort being focused on the payment flow as this was the most important aspect of this case study. I would have liked to included clearer ways to compare and contrast different bikes. which also includes prices, shipping methods and possible user reviews.
The other aspect I would have liked to include on the VEHI webpage is the customer review page. during my secondary research I learnt that having a customer review page can build trust for a first time buyer of a product online, which would only improve conversion rates on the webpage and possibly in the long term create a strong community of VEHI bike riders.
Reflections and Learnings
The UX design process for this application was enjoyable and engaging. From research to prototyping, I was fully invested in the project. While challenging, the interviews were rewarding and helped me grow as a UX designer. Overall, this experience strengthened my confidence in my skills and contributed to a strong design for the application.
Thank you for reviewing this case study.