Uptown Cycling

UX Design | Mobile App

Duration: 2 months, Fall 2020

Contributors: Myself

Responsibilities: Research, Prototyping, Interaction design

An app for bikers who are interested in bike rides, cycling events

What's the PROBLEM?

People can’t create trip memory with friends and enjoy the biking community.

The Solution

I have created a mobile application for bikers to create memories and make connection with different people. Allow the bikers to get close with the members in the group and finding new biking route around the areas.

The Goals

To understand how does people

track their ride

plan out their ride

choose who they ride with as a group

pursue a relationship through cycling

Target Research / Interviews / Survey

To better understand my target audience, I did a quick survey for people who like to bike. There was 40 bikers did my survey. The survey helped me understand what kind of data they like to see during the ride. I also interviewed 3 participants with different year of cycling experience. This help me understand more information about what they need in the service. These was very helpful for my case study.

Insights & Takeaways

Like to ride in a group & want to find each others during the ride
Knowing more people and expand their social network through cycling
Discover new routes, and people with same interests can easily be friends

Color Theme

Typography

Primary

Karla

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo PpQq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Secondary

Montserrat

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo PpQq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

The Features

Share user profile by interacting with other riders
Creating new event as a group. User will be able to upload their biking route and create their own event
Follow each others on the ride

Design Process

Sketch Exploration

After all the research and takeaways. I sketched out some pages to reach my design goals. These were my sketched wireframes. This help me understand how I should create my user flow and also allow to have an idea of designing my final screen.

Screen Exploration (High Fidelity)

Before I start designing all my screen, I made some exploration and different variation for some page. This allow me to understand if the screen design is easy to understand or if I need to add any button or feature for the users.
Here are the two screen I have explored on:

Home Page

From low fidelity to high fidelity, I have found out the the navigation bar icons were too small for the user. Adding quick access for user to their profile page and allow the user to see their notification on home page.