top of page
Frame 5.png

TruePedal

A Bike Company
Aims to Increase the Revenue

TruePedal

Mobile-Web Project

TruePedal is committed to sharing its passion and knowledge for bicycles and the lifestyle through cycling products and straightforward service that works for its customers.

Role

As a UX/UI Designer, I carried out all aspects of user research, interface design and usability testing during iterations of the product’s development. I adopted the Design Thinking method, applying a user-centered approach throughout the design process.
 
Tools: Sketch, Miro, InVision, Marvel, Google Workspace

Overview

TruePedal is a bike company which sells bikes on its mobile-web experience. The company needs to enhance their browsing and checkout experience to greatly improve its product’s usability. From this point of view, I started to think about the questions that should be asked. Can we meet or exceed our customer expectations? Is it possible to encourage people even if they don’t know much about cycling and bikes? In the light of these questions, I started research and determined the roadmap I would follow.

Problem

Product Manager has shared data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. PM’s hypothesis was that users were unable to determine which bike was best based on relative features. Additionally, 70% of users who place an item in the cart did not purchase. Data showed that users abandoned the cart at the registration page. At that time, users must have made an account to purchase. The Product Manager wanted me to design a guest checkout to solve this. The guest checkout must have captured email.

After the PM demonstrated the main problems, it was time to understand who would use the website. The target users were 24-38 years old customers and the population consisted of 72 percent of men. The majority of users were high income earners and they took biking very seriously. They would spend a lot of money on this investment so they were very picky and did their research.

The Solution, My Role and Responsibility

I ran the whole project in the light of such information. I used some research techniques iteratively such as secondary research, user interviews and usability testing. In addition, I conducted competitive analysis in order to provide strategic insights into the features, functions, flows, and feelings evoked by the design solutions of the competitors. By understanding these facets of competitors’ products, I could strategically design my solution with the goal of making a superior experience.

Screenshot 2022-01-31 at 20.31.52.png

Competitive Analysis: Amazon

Screenshot 2022-01-31 at 20.32.10.png

Competitive Analysis: Target

Screenshot 2022-01-31 at 20.32.26.png

Competitive Analysis: Trekbikes.com

Human-centered design approach was the key factor throughout the entire process. Therefore I took my part by being a divergent designer wherever possible in order to maximise the project’s usefulness and comprehensiveness. 

Checkout Flow.png

I drew user flows which lay out the user's movement through the website, mapping out each and every step the user takes.

Research Insights

After the secondary research to collect data and insights that deepen the understanding of the problem space, I noted some major pain points during the checkout experience and synthesised findings. These findings were the milestones throughout the design process.

Wireframe

With these insights, I started to design the wireframes and my main goal was to produce well-thought-out screens. As I designed the wireframes, ideas regarding the high fidelity mockups started to become clearer.

Screenshot 2022-01-31 at 21.09.51.png

Style Guide

Screenshot 2022-01-31 at 20.56.10.png

Style Guide

Creating a company name and visual style were the next steps. While creating the company name and the visual style, brand attributes and target users were the biggest anchor points that I built the structure onto. To set an example, I chose the company name in order to highlight the brand's attributes and convince users that the website is the right place to buy a bike. Colour palette, iconography and font styles were created to comply with these anchor points.

Screenshot 2022-01-31 at 21.14.25.png

TruePedal Logo

Usability Test and Prototype

After I designed high fidelity mockups, I was ready to show my product to real people and get feedback about it. 

Screenshot 2022-01-31 at 21.19.54.png

High Fidelity Mockups before first usability tests

In the usability testing, a user commented that the progress bar during the checkout should be different than blue in order to create contrast with the primary colour. At first, I thought it was insignificant but after I changed the colour, related pages became more eye-catching. Users liked the compare feature and they found it very smooth. It was vital to increase conversion rate and to complete red routes successfully.

I got another important feedback during the second interview session. A user mentioned that there could be a message which reflects the company's mindset regarding environment issues on the Confirmation Page. She was right, it gave me the perfect inspiration to redesign the confirmation page. I added a message to show our gratitude and make the users feel good. This emotional design trick helped the user feel good after a hard decision process and the result was far better than the previous version.

Screenshot 2022-01-31 at 21.24.33.png

TruePedal is committed to sharing its passion and knowledge for bicycles and the lifestyle through cycling products and straightforward service that works for its customers.

Outcomes and Lessons Learned

It was a very informative experience for me to be involved in an e-commerce project. I believe that researching the whole checkout experience in the UX field will have a vital importance in my future projects.

bottom of page