Overview

Role: UX/UI Designer

Timeline: 10 Weeks

Tools: Figma, InVision, Pen and Paper

Project Type: End-to-End Capstone Project

Cycling is a sport as much as it can be a person’s mode of transportation and connection to their city or surroundings. Whether you’re undertaking an expedition across a country or your neighbourhood, cyclists experience mechanical issues. Understanding what to do when that happens is often a stressful situation.

Problem Space

All bicycles experience issues, how can we help?

This project was designed to help cyclists make decisions about their equipment’s maintenance. The goal was to present fixing a mechanical issue yourself to be just as valid as enlisting the help of an experienced mechanic at your local bike shop.

When things go wrong, we have WheelBase

The two paths to solving an issue are presented equally and are easily compared

Doing the repair yourself

  • Clearly laid out steps with video instruction

  • Expectations for time and difficulty

  • Call to action - To access the comparison modal

Accessing a bike shop for that repair

  • Bike shop directory tailored to local businesses capable of performing that repair

  • Expectations for time and cost displayed clearly

  • Call to action - To access the comparison modal

Comparison Modal

  • Materials, tools and labour charges broken down for each method

  • CTA buttons allowing the user to move to a specific list of shops selling or providing the service, tools and materials they will need

  • Totals laid out for each path to not put emphasis on the cheaper or easier path, removing stigma around either method

Solution

Initial Research

My experience as a cyclist and mechanic left me with assumptions going into the research process

  • Most cyclists don’t know what is involved with fixing their equipment

  • Consumers don’t know how to accurately compare the cost of a quoted repair to purchasing tools and fixing their bike themselves

  • New cyclists have less mechanical experience than cyclists with more experience

What we can show from this research

Our biggest group (new cyclists) are a growing demographic.

People for bikes - 2021

So let’s talk about how we got here

How Might We:

Help new cyclists solve mechanical issues that arise in order to decrease frustration and promote understanding of bicycle maintenance?

We found data to support our problem space, we now know who this problem effects most is a significant population.

Let’s talk to the users:

From the interviews, some major themes started to emerge and were then plotted on an affinity map.

Interviewing 3 users that met the basic criteria of:

  • Cycling less than 5 years as an adult

  • Has not worked in the cycling industry

  • Had at least one mechanical issue

  • Has interacted with a bike shop

The insight I gained:

  • How cyclists feel when a mechanical issue occurs

  • What resources they want when issues arise

  • How they interact with and select the bike shops they frequent

From here, I took the major themes of the interviews and put together a persona to better remind myself and other who I was designing for.

User Interviews

Meet, John.

With a persona formed, I could now explore what the users will need to accomplish with the product. I built an experience map to better visualize these tasks and opportunities for intervention.

  • Opportunity 1 - John can review what tools he will need

  • Opportunity 2 - Our user can search for shops that meet his requirements

  • Opportunity 3 - The ability to compare quotes and make a more informed decision

I then completed a task flow diagram to put context on what our persona is going to accomplish within the task of fixing a flat tire.

Persona

Ideation

With an idea of what I was building, who it was for and with their needs in mind, it was finally time to start ideating and sketching solutions.

I found UI examples of cards and steps being displayed in various ways and played around with those ideas on pen and paper.

One of the main things I discovered in this process was that the copy I chose felt like it was incredibly important, this would be a theme through the rest of the project.

The progression into a more refined version of the sketches took form. This exercise was helpful in working out the bigger ideas, and will remain a big aspect of my process in the future.

Initial Prototype

When working alone on a project I can run with an idea and see it to its end before deciding to pivot. It is notable that I started altering wireframes into a low to mid fidelity version without thinking. Rapid prototyping is part of my process when working alone on a project.

It was now time to test these ideas, and better understand how users would react to the product and learn from their feedback.

User testing was conducted on 5 users, and their feedback was plotted on a prioritization matrix. Feedback or changes were weighed by how impactful they would be to the product and how much effort they were to implement.

The main insights from the first round were centred around copy and technical terms related to bicycle repair, some of this was unavoidable, but a happy medium was found in most cases.

Although tempting to only consider low effort/high impact changes, several changes were made that were considered higher effort to implement as there were several users having the same issues. Such as this example of the home screen and it feeling incomplete and copy confusing the users with where to start their task.

Version 1

Version 2

A second round of testing was completed on 5 users. In some cases the users were the same as they offered great insights and helpful feedback. The additional dimension of the repeat testers perspective on the changes made from version 1 to 2 were unique and an aspect of testing I would repeat in future user testing rounds.

Colour and branding

As we now sat at our third version of the product, it was time to breathe life into WheelBase

Brand inspiration was gathered, to reflect the calm and clear experience that I was going for.

I then pulled colour from some of the images and kept the lighter feel of this board after building one that was too dark and serious in tone.

This collection of copy, button style and shape allowed for some experimentation. There were many iterations of this example before arriving at this version.

The orange hue would be my main colour, and the red would serve as an error state colour that would almost never be used. Nunito font was explored here too, and was selected for all copy within the product.

WheelBase - Not many other titles were explored as the name has a bicycle specific meaning and during informal testing, people responded well to the name compared to others.

I did however sketch out many versions of the wordmark on paper, but ultimately hated all of them or felt it was the wrong feel and didn’t match the rest of the product’s presentation. I ultimately found a font named Adventuro and felt it translated perfectly for the title of the app.

Beyond the mobile

With our brand identity intact, it was time to build marketing materials

I used the main brand colours to keep the presentation cohesive. The calm delivery within the app needed to be contrasted with photography that matched the user experience. I removed the colour from the photos, and put splashes of colour on top of them to tie them into the experience and branding.

Next steps

Here in this example of the UI imagined for AppleWatch. The video steps would auto repeat with a 5 second delay before starting again so that the user wouldn’t have to to put the tools or component down to replay the step. Using voice activation for this same scenario is also a thought I’ve had and would like to explore.

My thoughts on further developing the product would be to consider accessibility beyond the basic needs of readability.

Learnings and reflection

Through this 10 week journey I refined my understanding of the end-to-end UX process and learned how to build effective solutions to human problems.

Some of my takeaways from this project:

  • The process is never linear - The way I reached solutions was almost never the path I expected to find myself on. I found that as exciting as it was interesting

  • Hold off on the solution - Keeping the perspective that I was not designing for myself at the forefront, and to trust the (well established) UX process

  • Done is better than perfect - I still feel like I have more to learn here, but my changes and iteration process did get more efficient towards version 3 of the prototype

  • Keep revisiting the problem - My mentors would reminding me through the 10 weeks, but it will forever be in the back of my mind because it rang true so often when I would get stuck and find my way back on course because of it

Thank you for your time and reading my case study for WheelBase.