Pedalway: Case Study
I served my role as a UX/UI designer for Pedalway, an e-commerce company selling bikes through their mobile-web platform. My goal was to enhance the browsing and checkout experience to improve the usability of the product.
Key Skills
Ideation, Competitive Analysis, Personas, User Interviews, Sketching, Wireframing, Visual Design, Prototyping, User Testing, High-Fidelity Mockup
Tools
Figma
Miro
Duration
3 weeks
Problem Statement & Goal
According to Pedalway’s Product Manager’s shared data:
50% of users open on average 7 items pages and then abandon the site without moving any items to cart
70% of users who place an item in cart do not complete their purchase
The goal of this project is to improve the conversion rate from browsing to checkout to increase revenue for Pedalway's e-commerce website.
Design Constraints
The solution is to be designed on a website format.
The Product Manager hypothesizes that users are unable to determine which bike is best based on relative features.
The current user flow forces the user to create an account to purchase. The Product Manager wants a guest checkout flow designed that must capture at least the customer’s email address.
Discovery
During the discovery phase, I set out to create a research plan, conduct competitive research, and then to synthesize the research into persona building to help me understand the target audience I am designing for.
Research Planning
To better understand the e-commerce website and figure out the best approach for this project, I spent time planning my research.
The PM believes that these high abandonment rates are due to the following:
Users have difficulty determining which bike is best based on the relative features.
Users abandon their carts because registration is required to complete their purchase.
To gain a better understanding of the e-commerce industry and identify potential issues, I planned to conduct secondary research and competitive analysis on other bike companies that sell online.
Secondary Research: E-Commerce
To gain a better understanding of e-commerce and potential factors that could be affecting Pedalway's transaction rates, I conducted secondary research by reviewing scholarly articles and other credible sources that explained common problems companies run into when designing their websites.
I found that the PM's hypotheses were likely accurate. Forcing account creation for checkout and other factors such as high costs and trust issues are common reasons for cart abandonment. I kept these in mind while designing Pedalway's new website.
Competitive Analysis
From my analysis, it is clear that there is a recurring theme of website design language, design choices, and UX features that allow for users to have an easier time when browsing for bikes online.
Some of these aspects include:
Brand identity: Pedalway's website should reflect the brand's identity and values. This can be done through the use of colors, fonts, and images that are consistent with the brand's overall look and feel.
User experience: The website should be easy to use and navigate. The user flow should be clear and concise, and the website should be optimized for mobile devices.
Content: The website should provide clear and concise information about the products that Pedalway offers. The content should be well-organized and easy to find.
Images and videos: High-quality images and videos can help to showcase the products that Pedalway offers. They can also help to create a more engaging and visually appealing experience for users.
Checkout process: The checkout process should be easy to use and secure. Users should be able to complete their purchase quickly and easily.
Persona Building
I decided to create a User Persona that reflected the target audience that Pedalway is expected to sell their products to. This also was aligned to the data that the Product Manager provided on Pedalway’s target user:
24 - 38 years old
User base is 72% men
High income earners
Takes biking seriously, willing to spend a great amount of money on this investment
Picky and do their research
“How Might We” Questions
How might we invite customers to add their choice of product to their cart?
How might we help customers feel confident with their potential purchase?
How might we get customers to provide their information without having to sign up for an account?
Project Planning
I was tasked with completing this project under 90 hours. To plan accordingly, I created a project plan to make sure I was not falling behind in schedule.
Designing Low Fidelity Mockups
During this early design phase, I decided to design user flows that would potentially become solutions for Pedalway’s problems. I would then translate those user flows into low fidelty mockups in Figma.
Style Guide
First, I decided to create a style guide that so that my designs would stay consistent throughout the project’s progress. I made sure to include elements like color, font, and button choices to make sure I could look back to this to be consistent with my design.
User Flow
Based on the research conducted, I created a user flow to address the two main issues at hand: guest checkout and collecting customer information.
I drew inspiration from competitor user flows and kept the user persona in mind while creating the flow. The resulting user flow addresses all of Pedalway's challenges and provides a smooth customer experience.
Creating a Low Fidelity Mockup
I created a low fidelity mockup based on the user flow and the identified problems.
The mockup included a comparison page that allowed users to easily compare the features of different products and a guest checkout flow that allowed users to complete their purchase without creating an account.
Comparison Page
Guest Checkout
Designing High Fidelity Prototypes
After creating the low fidelity prototype and running a few tests with willing participants, I decided to take the feedback and create a high fidelity version of the mockup.
Insights from Low Fidelity Mockup
I conducted a usability testing session with potential users to gather feedback on the prototype. The participants found the flow to be sensible and the functionality helpful. They suggested adding working filters, payment options, and streamlining the checkout process. I took these suggestions into account.
Creating the High Fidelity Prototype
I used the insights gained from the low fidelity mockup and testing to create the high fidelity prototype. This design incorporated realistic photos and elements, taking into consideration the feedback provided by the participants.
A Homepage that Invites the User to Explore
Header dropdown menu system for easy product navigation
Prominent graphics for featured and related products
Engaging design that encourages user exploration of the biking world
Revolutionary Product Showcase
Concise and user-friendly product description to help customers understand the product
High-quality product photos from various angles and in use to showcase the product
Recommendations for similar products to be viewed or compared to the current product
Find the Perfect Bike for You
Simple comparison page for adding and comparing products
Detailed information on the differences between the products being compared
Ideal for serious bikers who need to know bike specifications
Purchasing Products as a Guest
Customers can complete their purchase without creating an account
Email address is the only required information at checkout, as per Pedalway's design constraints
Customers have the option to create an account at the Confirmation Page after providing all necessary information during checkout
Final Design
Testing Insight
Testing was conducted after creating both the low fidelity and high fidelity mockups. Both testing sessions provided me with great insight and feedback from participants.
Who and Why?
I tested 5 participants, aged 18-40, who have purchased items online before and are familiar with internet browsing.
My three main goals were to determine if users can navigate the website, understand its flow and functions, and if Pedalway's product manager's goals were met.
User Testing
Each participant was presented with the same 4 tasks:
Looking for the Right Bike
Making Sure That This Bike is Better Than the Rest
Securing the Product
Confirmation Page
Results and Findings
Surprisingly, all of the participants were able to complete the tasks without any problems. However, when checking the results for whether or not users created an account, the decisions were evenly divided. Most of the users who opted to not make an account stated that they:
Most likely would not make another purchase on Pedalway after purchasing an expensive bike
Would prefer not to receive spam emails from Pedalway after making an account
Conclusion
Pedalway’s Goals?
After reviewing the PM's goals and considering Noah's needs, I was able to create a high fidelity prototype that accomplished the following:
Allow users to compare bikes side-by-side
Implement a guest checkout function, requiring only an email address to purchase a bike
These features are especially beneficial for experienced and serious bikers like Noah, who value thorough research when investing in an expensive bike. By streamlining the process and providing easy-to-use functions, users can find the right product for their needs with ease. Overall, I believe this project was a success in meeting its goals.
Future of Pedalway
If I were given more time to work on this project, I would focus on the following areas:
Enhance search and filter systems to make it easier for users to find and compare bikes
Offer various payment methods, including split payment options like Klarna
Improve the color markers of selection buttons to make them more visible to users
Develop a bike questionnaire to help customers find the most suitable bike for their needs
Learning Outcomes
It’s important to remember who the product is being designed for
When designing a product, it's crucial to keep the target audience in mind. While I wanted to include several features on the website, like a questionnaire system for users to find a bike that fits their skill level, I had to remember that I was designing for the Noah persona.
The PM provided insight into the target audience's needs and wants, and designing for everyone could result in a product that doesn't appeal to the intended audience.
Consider target audience when testing
Some participants suggested adding more features like Apple Pay/PayPal flow and a filter system. However, the majority of people who gave feedback were not interested in biking.
This reminded me to focus on designing for the specific target audience, who are passionate and serious about biking. It's important to keep this in mind during user testing, as it can help stay on track with the design elements.