Miracle Cycle

UX/UI Project

Summary

I designed a mobile app with Miracle Cycle to improve their usability across mobile platforms, delivering a design that resulted in an increase in accessibility and sales.

Information

  • Timeline: 1 month

  • Platform: Mobile App

  • Tools: Figma

  • My role: UX/UI Designer

Process

​From research, ideation, wire-framing, designing, to prototyping, here's the end-to-end design process I followed.

The Problem

Miracle Cycle’s website was not developed to be optimized for mobile, resulting in the following problems for those browsing their website on mobile platforms:

  • Difficulty in searching for items

  • Item page hierarchy is confusing

  • User account login process takes too long

Problem Statement: Miracle Cycle needs improved usability on mobile platforms, otherwise they risk losing customers to competing brands.

Client’s Needs

Miracle Cycle’s goals with the improvement of their mobile design included:

  • Easier use results in more people staying through the process of buying an item

  • Increase the number of registered user accounts without discouraging overall user numbers

  • The design and aesthetic should be consistent with the current website format and brand

The Solution

I designed a mobile app that improves the flow of using Miracle Cycle by tailoring the interface to be simple so that customers can easily understand how to browse and purchase items. With this redesign, Miracle Cycle has an increase in potential repeat-buyers that will consistently buy from them.

Competitive Analysis

For my research, I compared two general ecommerce giants and one bike ecommerce brand similar to Miracle Cycle. My objective was to see what design decisions each company made for their features in their web-to-mobile transition. Seeing what decisions they made would help me understand successful designing for an ecommerce mobile app.

Ideation

Before putting my ideas I gathered from my research into a design, I needed to empathize with a customer using Miracle Cycle so that I could know where and how to implement them. I created a persona based on Miracle Cycle’s description of their desired clientele:

Persona

Name: Leon

Age: 27 years old

Location: Albany

Bio

Leon recently moved to Albany as to relocate for his job at a marketing firm. Leon is extroverted and active. To work off the physical stagnation of his office job, he enjoys biking.

Goal

Leon wants to venture out into different terrains for biking, like the mountains, and eventually try biking to work. To do that, he wants to get himself a new bike that will meet his increasing interest.

Frustrations

Leon is stuck on where and how to buy a new bike; he doesn’t know what he’s looking for exactly in terms of features, and general retail stores don’t sell anything advanced.

User Journey Map

User Flows

After analyzing the design and flow of other e-commerce mobiles apps and sites, identifying and creating the most important user flows was the next crucial step in our process. We based our first user flows on the app’s primary usage and Miracle Cycle’s goals with the app, labeled as “Browsing” and “Checkout.”

Low Fidelity Wireframes

Once the user flows were mapped out, it was a straightforward matter in creating the respective screens going into the sketching phase. However, because of the straightforwardness of the user flows and screens, I skipped the sketching process and went straight into designing the low-fidelity wireframes. I decided that the sketch phase was unnecessary for this project because I already had pre-made e-commerce assets ready in Figma, so it was just a process of assembling these assets into my design.

As the UI designer, the main qualities I decided for a user-friendly e-commerce app were simplicity and familiarity. The users should be able to browse and search for products with ease. For example, I put the filters in a conspicuous and easily accessible location by having it be a simple button. The results show minimal information about the product, so it doesn’t look cluttered.

User Testing

After my initial wireframes were complete, as part of the design process, I conducted one round of usability testing with five users in order to obtain feedback to improve the design. I gave them the prompt to add a bike to their cart and then checkout. I was checking for the following:

  • How would they shop for a bike based on their previous experiences using ecommerce apps?

  • Is the current flow intuitive?

  • How did they feel when they were prompted to login?

  • Were there any design choices that hindered the flow?

Edit: Added Filter Pages

The biggest concern I got from the feedback was that the filter pages were implied but not there. For them, the ease of use and process of specifying searches greatly determined if they would use the app or not; if the process was too difficult, they would choose to use another app or method to find a bike. I designed the filter pages and conducted another round of testing with a different group of people. To test the usability of the filters, I specified the prompt to “Find a bike for your male friend that’s under $3,000.”

Style Guide

Miracle Cycle described their brand in the following words: savvy, focused, serious, dependable. For an e-commerce app, I decided that the palette should be simple so that the products could be displayed clearly, and opted for a lot of neutrals. However, to convey a sense of activity and energy, I went with bright green and orange as the respective primary and secondary accent colors.

High Fidelity

Once the brand identity was decided, I applied it to the wireframes to create high fidelity mockups.

Prototype

Learnings and Retrospects

I have experience in working with and designing for clients in the past for graphic design projects, so I approached this project with an understanding on how to give clients what they are looking for. What differentiated this from my past work was not just being in-charge on the visual front in UI, but also in-charge as the UX designer, which required a three-dimensional sense of empathy. I had to think about not just what our client Miracle Cycle wanted, but I also had to put myself in a user’s shoes and thoughts throughout the process of designing the app. As the only UI and UX designer in this team, it was difficult to maintain that level of empathy throughout the project, as being one person meant it was easy to tunnel vision. The usability tests were crucial in helping me stay in-tune to others’ experiences so that I could create what they wanted.

What’s Next?

In regards to Miracle Cycle, what’s next for the app’s progress is continuing to develop itself around the users’ experiences, which we discovered above. So, what would be immediately next for this app would be to improve the product detail pages. We would also develop around more user flows, such as product recommendations and assistance.

For me, working with an e-commerce brand to develop an app for them to help them sell more products is an enriching and valuable experience. It required me to research and empathize with an audience I was unfamiliar with beforehand, and creating this app allowed me to connect with them. With this experience, I hope to continue to work with Miracle Cycle so they can reach more users and audiences, and I know how to approach developing an e-commerce app in the future.