Forma Bike Application
Overview
A friend of mine recently reached out to me for some UX assistance on a bike app he’s currently building. While still an MVP, the main selling point of this app is to help bike shoppers find the right fit for their body type and riding style. Because bike frames are not sized consistently across brands, most riders will be fine grabbing a frame that generally fits their build, whereas others may want a more tailor-fit frame. This app will provide not only the geometry and specs of the frames, commonly seen on bike websites, but also a features a visual graph that displays the frames for the user to compare and contrast before purchasing.
My Roles
User Experience
UI Design
The Problem
After a day of testing the functionality and workflows, these were a few of the things I noticed seemed off:
Homepage - No ability to search and add bike frames on the homepage. If a user wants to perform that functionality, they have to navigate to a details page, which would be empty when visiting for the first time
Details Page - The selling point of this app is in the “Visualizer” tab which displays the selected frames for the user to compare and contrast. The “Charts” tab is additional build content about each frame. I felt that there had to be a way to simplify the page
Enhancing the Homepage
Before
I noticed there is no way to search and add bike frames from here. The user has to navigate to a different page in order to do so, see below:
After
In the wireframes below, I applied a search query on the homepage by applying three fields: “Select frame style”, “Select manufactured brand” and “Frame size”. As the user inputs information in the fields, the value is displayed in a pill style below that the user can modify/delete. After user clicks the “Go” button, they are then navigated to the details page based from their choices.
Enhancing the Details Page
Before
On the left is the list of selected frames and on the right are two tabs, “Visualizer” and “Charts”. The list also provides functionality that caters to the frames on the graph in the “Visualizer” tab which are: “Hide/Show,” “Opacity Adjustment” and ability to “Delete". This is so that the user can easily compare/contrast multiple frames on the graph. The “Charts” tab contains a list of the geometric build ratio of each frame and though the “Opacity Adjustment” functionality (from the list) is disable here, it’s still bad UX.
After
In order to simplify this page, these were the steps that I took:
• Condense the two tabs into a single view of the frames on the graph
• Moved the content from the “Charts” tab and put them in an expandable view of each frame in the list per bike frame
• Moved the opacity functionality to be displayed on the frame’s collapsible state
• Added a zoom in/zoom out functionality below the graph
• Moved the “Add New Frame” to the far right above the graph
Outcome
Using InVision, I created a prototype and tested the new screens with some cyclists. Overall, everyone preferred the new flow and displays to the old version and since then have begun implementing into the application.