MyCycle
MyCycle, an e-commerce mobile app dedicated to sustainable cycling products. I created a user-friendly interface that encourages users to shop with a purpose, making a positive impact on both their cycling journeys and the environment. Project Timeline: October 2022 to February 2023.
MyCycle
My Role: UX designer – designing the app from concept to delivery.
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem: Cycling enthusiasts or casual bike owners cannot easily find high-performance eco-friendly products at their local bicycle store.
The Goal: Design an app that allows users to browse from hundreds of quality cycling products and order what they need in just a few clicks.
Understanding the user
The first step in the design process is to understand who I am designing for - what drives them and how can the product drive their needs.
Research Summary
I created personas and user journey maps to understand the users I’m designing for and their needs. A primary user group identified through research was young professionals in urban areas who cycle as an affordable and eco-friendly mean of transportation. The user group confirmed initial assumptions about the target audience being rather young and urban, with high digital literacy and a desire to save time, money and be mindful of the environment. Such users will engage with beautifully designed easy to use apps that offer detailed product information (including the environmental cost of production), user reviews, a wide range of product, and customized recommendations.
User Personas
Journey Maps
Building user journey maps allowed me to gain insight into how users would interact with the app and what they might find helpful or frustrating. In this example, I mapped out the journey of Charlotte - a fictional user. I imagined how Charlotte would act and feel at every step of the process to buy a product on the MyCycle app.
User Pain Points
Time
Working adults are too busy to go to physical stores – especially when living far from such stores
Money
Some users choose to ride a bicycle because it is a cheaper way of transportation. High prices can be a block and limit accessibility
Lack of Information
E-commerce websites or apps that do not provide sufficient product information can be a block for users who need to be sure about what they are buying
No Customization
Users reported that many e-commerce apps were lacking customized recommendations based on their needs
”I love my bike and want to buy the best products for it (like a new pump) - but it’s often too expensive and I live far from the nearest bicycle store.”
- Charlotte (User research subject)
”Cycling is my passion but I don’t always have the time to go to the store and buy cool new cycling equipment”
- Carlos (User research subject)
Starting the design
After research it was time to get to the design. Paper wireframes / Digital wireframes / Low-fidelity prototype / Usability studies.
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen I prioritized a quick and easy process to help the user save time.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation and display of products was a key user need to address in the designs in addition to ensuring the app is easy to use and intuitive.
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of selecting a product, adding it to the cart, proceeding to check out, and confirming order. The prototype was created to be used in a usability study with users. View MyCycle’s Low-fidelity prototype.
Usability Studies: Findings
Product pages design should be streamlined
Some icons and and elements need some rework for improved accessibility
Simple and straightforward UX is preferred
Users need better cues on where to find relevant information
Data capture should be kept to a minimum
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Refining the design
Once I gathered insights from user research, I got back to my designs to iterate on earlier versions. Mockups / High-fidelity prototype /Accessibility.
Early designs included the “Discover” feature of the app, but after the usability studies, I polished the design to make it more intuitive and accessible. Icons and buttons were added to improve the experience.
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for browsing and ordering items. I also met user needs for more cues to easily move from one screen to another.
>
>
The second usability study revealed a need to streamline the design of the product browsing pages to better showcase products. To do so I opted for a display of only one product per row and increased white space and padding on product cards.
Mockups
Accessibility Considerations
Used Icons and buttons – with careful attention to the components colors and height – to make navigation easier.
Used detailed imagery for product displays to help all users better understand the design
Provided access to visually impaired users through adding Alt text to images for screen readers.
Accessibility best practice: choosing colors
The WebAIM Color Contrast Checker is a valuable tool for evaluating whether a color combination meets WCAG accessibility standards.
By experimenting with different color combinations and continuously testing them using WebAIM, I found an optimal balance in the design that ensured readability and usability for all users, including those with visual impairments.
Thank You!
Hope you enjoyed reviewing my work! If you would like to see more or get in touch, fill in the form below and I will get back to you as soon as possible.