top of page

CycloMetrix

Project Overview

With such great accessibility of the internet, there also comes an overwhelming amount of information and options, making it hard to pinpoint what the best direction is. This cycling app mitigates the stress of too many sources to choose from, and brings the highest rated options and recommendations into one place. On top of that, it also offers the same features that other fitness apps to – a sense of community, ride tracking, and the ability to view your past activities.

Version=Logo & Brand, Size=Desktop, Color=White.png
This Project

A Mobile-First Responsive Website

My Role
  • UX Research
  • Branding
  • UX/UI Design
  • Testing
Duration
​6 weeks

The Process

Steps.png

Define

Research Plan

As an avid adventurer and lover of all things outdoors, I decided to design a website that would cater to the needs of those who are new to and who already enjoy cycling. There are currently other products on the market that encapsulate the ability to track and connect with others for many outdoor sports at once. However, I felt that there was a gap in the market when it comes to introducing newbies to the sport and encouraging them to keep improving by means of progress tracking.

lineicons_thought.png

Problem Statement

Identify areas where new cyclists are struggling the most, and determine which features will best suit their needs.

octicon_goal-24.png

Research Goal

Determine the aspects of cycling that cyclists find frustrating so we can understand what feature offerings will be most helpful to them.

material-symbols-light_tactic.png

Research Methods

  • Competitor Analysis

  • User Interviews

Conducting Research

Competitor Analysis

Strava
Garmin Connect
Ride with GPS
Unique Value Propositions

  • Combines social media features with personal fitness metrics

  • Community-building features

  • Customizable home screen

  • Can see in-depth information about your activities

  • Offers detailed tools for creating, editing, and sharing routes

  • Cycling-specific features

Company Advantages

  • Multi-sport tracking

  • Can join groups and see postings of when events are happening

  • Heatmap and undo features for route planning

  • Multi-sport tracking

  • Offers advanced analytics and history tracking

  • Cross-platform integration

  • Has a strong web interface to complement the app and view the data in a detailed view

  • Offline maps - allows for reliable use in areas without cell service

Company Disadvantages

  • Have to pay for Premium if you want to create your own route

  • Social value of Strava is diminished if there aren’t many riders near you to view their routes

  • Need to own and use a Garmin product in order to use the app

  • Limited to no social features

  • Less community-driven features because it has a smaller user base

  • Have to pay for Basic or Premium to create your own routes

User Interviews

I used affinity mapping to organize and analyze my user research results.. It revealed pain points in the apps & metrics, community, and discipline & commitment spaces.

Frame 1.png

POV & HMW's

Creating a Point of View (POV) statement and How Might We questions from that statement helped me to focus on pinpointing a key problem to solve for and how to take that problem and turn it into a design.

Point of View Statement

I would like to explore ways to help people interested in learning methods to progress in their training because they can use the metrics from fitness tracking apps to set a baseline for their current fitness levels and what they would like to improve toward to improve their fitness.

How Might We?
How might we use metrics to help beginner cyclists improve their performance and keep motivated?
How might we help people get involved with a community so they are motivated and excited to go cycling?

User Personas

I created three personas to represent users of my website. These personas helped me to keep my focus on the end user throughout the design process.

​

The user Jane highlights athletes who are regimented in their schedule. She is very self-disciplined and motivated. She sets goals and makes a plan to set herself up for success to achieve those goals.

​

The second persona, John, isn't the most motivated person but is striving to change that. By combining learning a new skill with the fun of exploring new ideas, he plans to build this hobby by adding an exciting element to it to keep him continually engaged.

​

The final persona, Jan, is picking up cycling as a way to heal from prior injury. She loves to have community around her to keep her committed and make the experience one to look forward to.

Frame 9.png

Research Takeaways

  • People like to have access to an app or website that allows them to plan bike routes

  • Having the capability to share routes with friends is a plus

  • Metrics are key components for tracking progress

  • Discipline & commitment are key to improving ones cycling ability

  • Community helps to encourage everyone to be consistent and make the experience fun

  • Gamification is a great way to help people want to progress

Ideate

Determining the MVP

Due to time constraints, I would not be able to create a product with every features that the website would offer. I needed to prioritize features based on those of highest importance to my user and to my business. I created a prioritization matrix to a version of a product with just enough features to be usable by early customers who can then provide feedback for future product development.

Product Roadmapping

I listed out potential features to include and placed them where I thought best in the prioritization matrix. Based on the results from this matrix, I determined that focusing on the cycling activities, search functionality, and gamification would take precedent over a community aspect.

Frame 12jj.png

Site Structure

Sitemapping

To understand the mental models of the people who would be using our product, I conducted a card sort after determining my MVP. From the card sorts that I conducted, key categories emerged as:

  • Route Planning

  • Record Route

  • Community (Phase 2)

  • Activities

  • Challenges

  • Account

M4U4 - Sitemap v2.png

Interaction Design

User Flows

I created three user flows to highlight the key pathways users would follow when using the CycloMetrix app.

  1. Plan a new biking route

  2. View your weekly stats

  3. Edit/Add your personal goals

M5U2 - User Flows v2.png
Task Flows

These are the corresponding task flows to my user flows.

M5U2 - Task Flow v3.png

Design

UI Components

Brand Guide

Brand Values

I started the brand creation process by brainstorming the values that I want my brand to stand for. CycloMetrix focuses on:

  • Exploration

  • Confidence

  • Playfulness

  • Dedication to Yourself

Color Palette

I wanted my website to give off a natural, outdoorsy aesthetic. I incorporated green to signify nature and growth, teal for calmness, and orange for warmth and playfulness.

Frame 17.png

Typography

I wanted my typefaces to align with my brand values. I chose my main font as a way to elicit the feelings of confidence and stability, and my secondary font as a way to add simplicity and readability.

fewefvegr.png

Brand Logo

When it came to brainstorming ideas for my logo, I new that I wanted to include an aspect of a bike and a visual that related to metrics. After a lot of variations, I landed on the CycloMetrix brand logo.

Group 174.png

Prototyping

Sketches

image 5.png
image 6.png
image.png
image 7.png

High-Fidelity Mockups

85b04c2b-f0d4-4189-b8c7-78ee9b8effc1.png
2828bf32-47dc-4b10-8624-04717bbe53de.png
40291787-4b91-4aba-9c97-bc81576c07ae.png
e5f55670-d0fc-425e-b3c3-44d9934ea11c.png
4e62b79f-f27c-4d8b-ad32-a5394048666e.png
7567bb2a-eb59-4a81-8bbb-2ca87d8bdd11.png
3af23338-1e77-418b-aca7-fa4c6e7cc980.png
e24d948b-8e94-463a-a0bf-99a595711506.png

Testing

Usability Testing

After building out my high-fidelity prototypes, I conducted usability testing on 5 potential users of the app. There weren't too many edits that were needed to work though.

​

A few suggestions and takeaways that came from the usability testing were:

  • Add more clickable links

    • Green boxes on homepage

    • Change "Analyze Your Route"

    • Breadcrumbs 

  • Add a “view details” button for the weekly mileage and duration stat pages (on the right)

  • Make the “Discover Routes” area smaller to see the area below - same with the homepage

  • Add subpages to the hamburger dropdown​

Final Prototype

Thumbnailcm.png

Closing Insights

Final Remarks

This was my first UX design project ever and I have learned so much from it. As I worked through this process, I watched tutorials to troubleshoot, improve my designs, make edits, and more. Now, about 2 months after completing this project, I am so proud of myself for how great my first designs ever turned out. 

Next Steps

For CycloMetrix, I don't think there will be any further steps. This was my first UX Design project ever and since completing this project, I have done 3 more projects from start to finish in the UX design process. 

bottom of page