Mountain Biking
Mountain Biking
Mountain Biking

Optimus Bikes

An innovative E-Commerce app that offers best quality bikes and repair services

Optimus Bikes Cover 2.png

General Information

Optimus Bikes Revolutionary Business Strategies through breakthrough UI and UX Design Project by Aiden Song Ko, UI & UX Designer, windfulsoul@gmail.com Stakeholders: Anabel Leva (Senior Product Designer) Ashlynne Cochran (Admission Counselor) 

Background
Information
&
The Problem

Optimus Bikes is one of the most prominent and well-known bike companies, targeting young male audiences looking to purchase high-quality professional bikes used for competition. Its retail stores are staged nationwide, and the business model that the company has practiced over the years is “quality over quantity.” Its mission to run a high-class business selling high-quality bikes has been well-maintained until recently. The company has noticed that it has not had any significant updates on its web and mobile app, and 50% of users are navigating through the website and mobile app but end up not buying anything. Also, 70% of them leave their desired products in carts but forget about them afterward. The sales suffer from a drastically low conversion rate, and the company calls for UI/UX renovation on both web and mobile.

Objectives

Identify ways to increase the conversion rate and guide the users through the web and mobile app to help them purchase the bikes that they like.

Optimize the “Continue as a Guest” option for users to explore and purchase and Implement “Compare between Products” and “Apply Keywords” Features to help them make better choices in selecting bicycles based on their preferences.

Target Audience

Optimus Bikes will focus on getting attractions from serious bicyclists, aged between 20s-50s who bike weekly and have experienced in riding on tournaments. Thus, the company has to providing high-level bicycles with optimized features and gears that are designed for professional bicyclists, which leads to implementing keyword-filter generation onto the app. The potential customers will spend lots of time comparing products and their features on the app, so they needed to be provided with as much and accurate information.

red-bull-zera-o-pico-2018-guaratinga-brazil.jpg
BTT-21705865-istock.jpg

Competitor's Analysis

Out of many great research methods, I chose the Competitors Analysis Method because there were so many bicycle companies with high brand quality, and I wanted to look at what they did best. I could improve on their UI/UX designs. I chose GT Bikes and Spectrum Bikes for the web analysis and UC Cyclery for the mobile app analysis. They provided me with some insightful information on the color of the brand, the tone that the company wanted to convey, the overall structure of the web/app, and how “Continue as a Guest” and “Apply Keywords” were implemented.

GT Bike 1.PNG
GT Bike 2.PNG
UCC 1.jpg
UCC 3.jpg
UCC 8.jpg
Capstone 2.jpg

Project Plan and UI Elements

Based on this project's scope, I created a study plan that fit my schedule and my interviewees’ schedules the best so I have enough time to design the prototype, and they have enough time to be tested and report any significant errors to me. I believed I would speed up my design and testing process if I dedicated myself to the project full-time, so I did. As far as the UI elements are concerned, I chose.
Dark Blue to be the primary color because it represents knowledge, power, integrity, and seriousness. Also, I chose the font Roboto to be the standard font on Android and selected standard icons for the web and mobile app.

Capstone 2 Project Plan.png
Frame 56.png
Frame 55.png

Site Map

Design Sprint (2).jpg

I created a site map that reflected the general flow of the app. There are five main channels that the user would be able to navigate through, Home, Bikes, Featured, Accessories, and Account. The homepage will introduce the users to what the company is about, and the bikes page will showcase all of the bikes provided by the company. The featured page will showcase products that are trending and discounted, and the accessories page will highlight necessary bike items. The account page will have every information about the user.

User Flow

I created two user flows representing the best case scenarios for “Continue as a Guest” and “Apply Keywords.” The first flow is about how the user can explore the web and compare bicycles to understand the differences better. The second user flow is about purchasing a bike as a guest on the mobile app, and it is designed to help the users shop and buy something without having to make any commitment, making them feel less pressured and eager to come back.

Capstone 2 (1).jpg
Capstone 2.jpg

WireFrames

I created my low fidelity mockups & wireframes focusing on the three essential features I need to implement. I figured pictures should be large enough to capture users' attention, especially on homepages, and in terms of texts, I try to minimize them as much as possible. I do not wish to bombard my users with a bunch of readers which would hurt their eyes. My red routes are:
 

- Explore Featured Products
- Compare Them by Functionalities
- Explore Products by Categories

- Compare Them by Functionalities

- Checkout as a Guest

Wireframes.png

Initial Fidelity Mockups

I created two user flows representing the best case scenarios for “Continue as a Guest” and “Apply Keywords.” The first flow is about how the user can explore the web and compare bicycles to understand the differences better. The second user flow is about purchasing a bike as a guest on the mobile app, and it is designed to help the users shop and buy something without having to make any commitment, making them feel less pressured and eager to come back.

Red Route: Choose and Compare Between Products

Frame 5.png

Red Route: Check Out as a Guest on Mobile

Frame 5 (1).png

Usability Testing

Tasks
Attract the Users with Visuals on the Home Page
Navigate through the Featured Products and Compare Between Products
Apply Filters to Received Narrowed Down Results
Check out a product as a Guest and Provide an Email Address

Interview

You have been selected as a tester because of your familiarity with the E-Commerce Web and Mobile. During the session, I’ll be asking you to complete a series of tasks using the app prototype you see on the screen. Throughout the test please think out loud as much as you can. Remember, there are no wrong answers, I’m testing the app not you. Do you have any questions about the test?

Findings

Still, too much information crammed in One Page

Most of my users can navigate through the web and the mobile app without any issues; however, they pointed out that they see a lot of information on one page, making it hard for them to concentrate. They suggested that I need to trim the fat and cut out some texts for them to see and understand the entire page clearly


Apply Filters Pre-Selected to Avoid Confusion

Currently, the users do not have the option to click “Apply Filters” to see which keywords have been selected, and they go onto the next page where the result is shown. The users are confused about which keywords to choose, and they were not able to follow my instructions when I said, “click the button that will take you to the result page.” I should have the keywords pre-selected, so the users can click Apply Filters and are taken to the result page right away; the purpose of this testing is not for them to select keywords but to help them understand the flow of this red route


Separate the Credit Card Info Page and the Email Notification Page

Right now, on the Check Out page, I have the “Credit Card information” and “Email Notification” info together, which takes up a lot of space in one mobile screen. The users have notified me that I need to separate these two, making two screens for each.


UI Elements and Color Adjustment Needed

The graph looks a bit amateurish, so I need to figure out how to make it look more professional.

AdobeStock_209435512-scaled.jpeg
bfarsace_201106_4269_012.0.jpg

Onboarding Red Routes

I created two user flows representing the best case scenarios for “Continue as a Guest” and “Apply Keywords.” The first flow is about how the user can explore the web and compare bicycles to understand the differences better. The second user flow is about purchasing a bike as a guest on the mobile app, and it is designed to help the users shop and buy something without having to make any commitment, making them feel less pressured and eager to come back.

Red Route: Choose and Compare Between Products

Frame 3.png

Red Route: Check Out as a Guest on Mobile

Frame 3 (1).png

Validation & Conclusion

Validation & Iterations

UI elements and a better UX execution on the Check Out part made the red route user flow a lot smoother and easier to understand. The combination of applying filters for better niche-oriented results and comparing products upgraded the app's functionalities to another level. The users could navigate through the app without any critical issue in the 2nd round of testing, and the problem was addressed and solved by the solution that evolved over this journey.

Improvements

I think I can improve the app by working on the Check Out part, it is sufficient to provide the users with what they need to do to purchase the item, but it does not stand out in a way that makes the users feel "this is quick and easy, very nice." This is going to be one of my tasks for all of the E-Commerce apps that I will be designing in the future.

Thoughts

Through this project, I have solved the problem of keeping the users interested by helping them find products that they like using keyword search and promoting the "Continue as a Guest" option. Further, I purposefully included the last screen on the mobile app to encourage users to sign up by offering them discounts and other perks of being a member. Optimus Bicycle will succeed in keeping old users and finding new ones, and with the aesthetic that I have created, it will build a better communication of trust and transparency with customers and boost up its revenue.

This is my first time designing an e-commerce website/mobile app, and I must say I learned a lot about how to develop certain features and UI elements from a business's perspective and the importance of customer satisfaction, which is something I did not take into consideration in my Capstone One project. I believe this project will play a valuable role in my portfolio and help me prepared for my Industry Client Project.

Next: Adobe