CycleConnect
CycleConnect is a mobile and smartwatch app designed to promote social and leisure cycling among young adults aged 18–25. Through in-depth research, we identified the untapped potential of social cycling as a means to foster community and improve overall well-being.
Overview
For DECO2102 Introduction to Interface Design, I created CycleConnect, an app to enhance social and leisure cycling for young adults. I handled research, user testing, wireframing, and prototyping, focusing on features that promote community engagement, personalised route planning, and progress tracking. The project addressed a lack of socially-driven cycling apps and was refined based on design review feedback to ensure usability and novelty in the solution.
Role
UX/UI Designer, User Researcher
Duration
Sep-Nov 2024, 9 weeks
Tools
Solution 💡
CycleConnect aims to enhance the cycling experience through user-friendly navigation and the fostering of a supportive community. The research explores the connections between personal goals, community participation, and the use of technology to uncover insights into cycling preferences and habits. By utilising the app, researchers can delve into the various factors influencing cycling behaviours, choices, and social needs. Understanding these elements can enrich the experiences of riders and offer valuable insights for businesses, urban planners, and fitness professionals. Furthermore, the application supports sustainable development goals by advocating for a broader perspective on the health benefits, environmental sustainability, and social inclusivity associated with cycling.
The problem 📌
Many young adults struggle to stay motivated and consistent with cycling for fitness or leisure, often due to a lack of social connection, engaging features, and personalised support. Existing cycling apps focus heavily on performance metrics, overlooking the importance of community, discovery, and fun . This gap results in reduced engagement and missed opportunities to make cycling a more social and enjoyable experience . There is a need for a solution that supports personal goals, fosters community interaction , and integrates technology to enhance the overall cycling experience.
Discover
Define
Develop
Deliver
Desktop Research
Surveys & Interviews
Affinity Diagram
Insights
User personas & jouneys
Problem Statement
Ideation
Iterative design
User testing
Refine
Define style guide
Prototyping
Final design🎉
Reflections & Takeaways🔐
Working on CycleConnect was a valuable opportunity to deepen my understanding of interface design and apply a user-centred approach to a real-world problem. Through this individual project, I strengthened my skills in wireframing, prototyping, and usability testing, while learning how to translate user research into meaningful design decisions.
A key takeaway was recognising the importance of designing for motivation and social connection, not just functionality. I also learned how iterative testing can significantly improve user experience by revealing issues that aren’t always obvious during initial design.
Looking back, I would have benefitted from conducting more rounds of testing and exploring a wider range of interaction patterns to further enhance engagement. Overall, this project helped me grow as a designer by reinforcing the value of empathy, feedback, and continuous iteration.
Discover 🔭
Secondary research
🌍 Technology & Community Gaps
Most existing cycling apps focus on tracking stats rather than fostering community or exploration, leaving a gap in features that support group riding, route sharing, and social motivation.
🚲 Cycling as Social & Leisure Activity
Over
80%
of young adults are interested in social and recreational cycling, yet only a small percentage ride regularly due to lack of motivation and social engagement opportunities.
🧠 Personal Motivation & Habits
66.7%
of investigated users cycle rarely, but cite reasons like exploration and socialising as strong motivators, suggesting a need for tools that align with personal goals and shared experiences .
Opportunity 🔑
As interest in social and recreational cycling grows among young adults, there is a clear gap in digital tools that support community-driven experiences. Existing cycling apps focus mainly on performance metrics, overlooking the need for motivation, social connection, and personalised discovery.
CycleConnect presents an opportunity to create a platform that encourages young people to cycle more often by making the experience interactive, social, and goal-oriented, ultimately promoting healthier lifestyles, stronger communities, and greater engagement with physical activity.
Defining the MVP
As this was an individual project , I used sketching and rapid ideation to explore different feature ideas that would make cycling more engaging and socially driven for young adults. Based on user research and feedback, I prioritised features that combine motivation, friendly competition, and community interaction .
Challenges Page: Where users can choose cycling challenges (eg, ride a certain distance or explore a new route) to stay motivated and active.
Leaderboard: Allowing users to see their ranking among friends and encourages friendly competition through shared goals.
Home Page Feed: Where users can post updates, photos from their rides, and connect with others, similar to a social platform, to build a sense of cycling community.
Mid-fidelity
I developed mid-fidelity prototypes for CycleConnect using Figma , focusing on the core features identified in the MVP, challenges, leaderboard , and the home page feed . To guide the structure and navigation flow, I created a basic information architecture map , helping to visualise how users will interact with different parts of the app.
I also conducted user testing on the mid-fidelity wireframes, gathering feedback on layout, usability, and overall flow. Based on this feedback, I made several iterations to improve clarity, navigation, and the visibility of key features, ensuring a smoother and more intuitive user experience.
Usability testing📊
To evaluate the usability of the CycleConnect prototype, I conducted user testing with young adults who cycle for leisure or fitness, focusing on how well the app supports motivation, social engagement , and ease of navigation . The goal was to assess the clarity of the interface, feature discoverability, and overall user flow.
Participants were guided through key tasks using a think-aloud protocol, where they voiced their thoughts while interacting with features such as joining a cycling challenge, viewing the leaderboard , and more. Their feedback provided valuable into layout, icon clarity, and feature expectations, which helped guide insights further design refinements.
UI Design Style Guide
Before creating the high-fidelity prototype, we established a comprehensive style guide inspired by Material Design principles. Our goal was to craft a clean and intuitive visual design that ensured ease of use, focusing on readability and comfort for users navigating the app.
Typography | Poppins
Aa
Aa
Aa
Primary/Main
B5CDA3
Secondary/Main
7A9E7E
Accent/Main
001A23
Body/Default
323131
Background/Default
E8F1F2