Introducing the CycleEase
Welcome to the journey of CycleEase, a revolutionary bicycle shopping app designed to redefine the way people shop for bicycles and accessories while focusing on their health concerns and needs. This user-centric platform unites shopping, maintenance and community engagement, offering a holistic solution for individuals with health needs and cycling enthusiasts alike. It is empowering peoples with physical limitations to live healthier, more active lives by making cycling more accessible and enjoyable. It is a transformative journey where health and exploration converge.
⏱️Project Duration: 5 months
Tool: Figma
The Problem
Many individuals grappling with health conditions like arthritis, obesity, diabetes, and others are prevented from enjoying outdoor activities due to associated pain and unease, limiting their liberty to roam and discover.
Presently, there is a significant shortage of a comprehensive mobile app in the market, combining features such as purchasing bicycles and associated equipment, offering maintenance support, and encouraging community interaction.
In today's diverse market, cyclists face an overwhelming assortment of options, transforming the decision into a time-consuming process.
The absence of a handy, comprehensive application exacerbates this issue, impeding the enhancement of the global cycling fraternity.
The Solution
Cycling is a low-impact exercise that will be useful for healing and traveling.
Implement a smart filtering system in the app., enabling users to easily discover bicycles designed to address specific health concerns promoting inclusivity and accessibility.
Develop a comprehensive app that seamlessly combines bicycles and accessories shopping, maintenance services and community engagement.
Introduce organized selections and personalized recommendations to simplify the overwhelming choices for cyclists.
Enhance the user interface with intuitive design, providing a user-friendly platform that fulfill user needs.
Design Process
Discover
Interviews
To understand the diverse needs of potential users, a series of interviews were conducted in qualitative research. During this research, I conducted interviews of 7 potential participants including kids, teens, adults and seniors. I navigated the unique perspectives of health patients, bicycle enthusiasts and seasoned cyclists. I prepared an interview script with 20 open-ended questions, focusing on our target audience's needs, pain points and challenges.
Key Insights
Users especially those with specific health concerns expressed a desire for bicycles tailored to their specific health needs
Maintenance is a pain point, users struggle to find reliable and efficient maintenance services, highlighting a gap in the current cycling ecosystem.
Community engagement is seen as a motivator, especially for those seeking support in their health journeys.
Frustration exists in navigating multiple apps for different cycling needs, they expressed a clear desire for an all-in-one solution.
Surveys
After conducted interviews, I did an online survey in qualitative research. During this research, a broader understanding was gained through surveys, revealing a global appetite for a comprehensive cycling app, I gathered insights from 25 different users. The survey aimed to uncover user needs and pain points related to health and cycling-related apps.
Key Insights
Over 70% peoples have different types of health issues that impact their physical or outdoor activities.
60% of respondents usually prefer apps and spendd more time on apps than websites, as they have higher engagement and conversion rates.
Over 40-60% of respondents expressed a need for an app integrating bike shopping , maintenance and community features.
A majority of respondents expressed interests in purchasing bicycles for their specific purposes.
Competitive Audit
After survey session was over, I deep dived into existing apps which was my direct and indirect competitors. I discovered pros and cons of each app. Some focused entirely on shopping, while others offered maintenance services and community in isolation. None provided a cohesive, end-to-end experience. This void in the market fueled my determination to offer something truly unique.
Define
Empathy Map
Through my interactions, I constructed an empathy map, divided user pain points and aspirations into four sections- Says, Thinks, Does and Feels. Shaurya's empathy map, for instance, vividly highlighted his struggle with limited mobility due to ankle pain. Insights like this became the emotional compass guiding app's design.
User Persona
After empathy mapping, I built user personas of two users- Shaurya and Arnav. Their health challenges, aspirations and frustrations became the heartbeat of my design, ensuring every feature addressed their unique needs.
User Journey Map
I carefully mapped both users journey- from initial desire to explore nature to the frustration of navigating disjointed apps. This visual narrative allowed us to identify key touchpoints and moments of opportunity, shaping our app's seamless flow.
Ideate
How Might We Ideas
I carefully mapped both users journey- from initial desire to explore nature to the frustration of navigating disjointed apps. This visual narrative allowed us to identify key touchpoints and moments of opportunity, shaping our app's seamless flow.
User Flow
Navigating the digital terrain, I charted two user flows, one for shopping and the other for maintenance service. Each flow was refined to ensure frictionless experience, with a clear path from discovery to delight. Both user flows emerged organically, each step-in user journey seamlessly connected.
Storyboarding
To bring our design to life and understand user deeply, I embraced big picture storyboarding. Shaurya's story unfolded on our sketches, illustrating his discovery of CycleEase and the transformative journey that followed. The narrative, sprinkled with moments of frustration and joy, provided a blueprint for seamless app interactions.
Design
Information Architecture
With a wealth of data at our fingertips, I crafted a clear and intuitive information architecture. Clear hierarchies ensured that users like Shaurya and Arnav could effortlessly navigate from selecting a bicycle to joining a community ride. The skeletal structure of the app is devised, with a focus on intuitive navigation.
Paper Wireframes
With sketches in hand, I transitioned to paper wireframes. The emphasis was on simplicity, ensuring even the less tech-savvy users could navigate effortlessly, I make five simple paper wireframes- A, B, C, D & E and one refined wireframe-Home v.1. These home screen blueprints served as the foundation of my digital journey.
Digital/Low Fidelity Wireframes
Digitization breathed life into our vision. Akshay could now virtually navigate through the app, exploring a curated selection of bicycles, envisioning maintenance services and connecting with fellow cyclists. Transitions, interactions and visual hierarchy were fine-tuned aligning with users' needs.
Low Fidelity Prototype
The app breathed its first digital breath in low-fidelity prototypes. Here, the skeletal structure took form, with the focus on functionality over aesthetics. Interactive prototypes allowed me to test our designs in the real world.
Usability Testing
Shaurya and others like him explored the low-fi prototype. Their interactions were observed, glitches noted, and insights gathered. It was a crucial phase of refining before moving forward.
High Fidelity Wireframes
From the raw prototypes, high-fidelity wireframes emerged, embodying the app's aesthetic and functionality. The interface resonated with user preferences, ensuring a visually appealing and emotionally engaging experience. A splash of color, imagery and brand personality infused life into the mockups, ensuring the visual appeal resonated with the target audience.
Long Screen Wireframes
Short Screen Wireframes
High Fidelity Prototype
Every pixel was meticulously placed in high-fidelity prototypes. Realistic interactions, vibrant visuals, and an intuitive UI set the stage for the final unveiling. The app now mirrored his needs- a seamless blend of shopping, maintenance and community engagement.
Design System
Finally, I presented you my design system containing typography, iconography, colors, grids, components, variants and so on. I included everything that was used in mockups or high-fidelity wireframes.
Style Guide
Components
Recollect
Impact
Users with health challenges now have a dedicated space for cycling, fostering a series of inclusivity and empowerment.
The app has become a hub for cyclists worldwide, breaking down barriers and encouraging the growth of a global cycling community.
For users like Shaurya, CycleEase isn't just an app- it's a companion on their journey to better health and wellness.
By integrating shopping, maintenance, and community, CycleEase has established a cohesive environment, fostering a sense of community among cyclists worldwide.
CycleEase has set a new standard in the market by providing a one-stop solution, influencing competitors to adapt and innovate.
Learnings
Understanding the user's journey and pain points is paramount. Every design decision should resonate with the user's needs and aspirations. A well-mapped user journey is foundational to a positive user experience.
Consistent visual design language enhances usability and brand recognition.
Putting the user at the center of the design process is paramount.
Storyboarding, user flows, and how might we ideas spark creativity.
The design process doesn't end; it evolves. User feedback, market trends, and technological advancements should be embraced for continuous improvement.
