Marin Bikes Application Design


User Research  |  User Experience Design  |  Mobile Interface Design  |  Visual Design


About Marin Bikes
Marin is a bicycle manufacturer founded in Marin County, California. It specializes in mountain bikes but also offers several other variants.

Marin wants to create a way to promote outdoor cycling and raise brand awareness through a cycling lifestyle oriented application.

Create an app, which allows people to join, create and invite other users on group rides. Allow users to find trails based on their specifications. Give users information about where they can purchase or demo a bike.

Our Group

Na An
Na An
Nicole Tebbutt
Nicole Tebbutt
Ryan Luther
Ryan Luther

My Role
UX Researcher and Designer

2 weeks

The design process

The design process


3 Days  |  User Interviews  |  User Personas  |  User Journey |  Competitive Analysis

User Interviews and Synthesis

We conducted 7 online surveys, 4 in-person interviews, and 1 phone interview to find out people’s biking habits, needs, and pain points. The insights gathered were arranged in an affinity map before consolidating it into our user personas.

Sample Questions
Affinity Map
Major takeaways
Persona Development

We developed three personas based on what we knew of the users’ goals and their pain points.

Primary Persona
Primary Persona
Secondary Persona
Special Persona
User Journey

Our primary persona, a user who wants to learn mountain biking and ride with groups, and wants to explore new trails and nearby areas, is the representative of potential users of the Marin mobile app. The experience of her in looking for biking information from Marin website is illustrated in a customer journey map, to show how she goes about performing tasks such as looking for trails and looking for group rides to join.

Competitive Analysis

We researched 1 website of Marin's competitors and 4 applications about trails. In doing so, we found what bike riders need and their pain points of using apps.


We also uncovered common patterns in the applications of trail information which helped to guide our next step design decisions.



1 Day  |  Feature Prioritization

Feature Prioritization

Prioritize features to include in the mobile app based on the business and the users' needs.


Through a design studio process, we came up with various new features we intended to include in the new app. These features were arranged based on takeaways from the user surveys, user interviews and what we believe fulfills business goals. Features at the bottom left corner (the box in red) are the ones that should be included in the new version of the app, which is MVP (minimum viable product).

Feature Prioritization


5 Days  |  Paper Sketches  | Mid-Fi Prototype

Paper Sketches to Mid-Fi Prototype

After feature prioritization, the next step was to sketch low-fidelity wireframes of the app. Each of us drew one version of paper sketches, and we tested them together, combined them into one version and brought it up to mid-fidelity prototype after evaluating feedback.


For example, the user felt that they didn’t know it's an application about biking, and it would be clearer if some biking pictures can be added to the homepage. Based on this feedback, we added more pictures for the group rides, making sure the users understand what the app is for. We also changed the homepage to a map, which allows users to see biking trails nearby at first glance because some users said they don't want to be forced to look at the guided tours.

Paper sketch
Mid-fi prototype
Paper sketch
Mid-fi prototype


2 Days  |  Usability Testing

Usability Testing

We used our mid-fi prototype for usability testing.


From feedback gathered, participants felt that the app did not look like the app for Marin bikes. So we incorporated the Marin icon at the top. Besides, they didn't know how to access their profile, which was from the hamburger menu. We added a profile button to the navigation bar accordingly.


Participants also commented that they did not want to see safety tips every time when they check information of a trail. Another major problem was most users didn’t recognize the filter icon. Besides, some users felt confused when we gave them a task to find trails, we changed the homepage back to group rides, added a function of toggling between list view and map view for trails page.


Below are the iterations we did base on the feedback we received.

How to find a trail before and after
Trail filter before and after
Safety tips before and after

Delivery + Reflection

2 Days  |  Hi-Fi Prototype  |  Reflection

High - Fidelity Prototype

This was the first design project I'd ever worked in a group — which was an absolute learning process from time to time due to the different range of ideas and personalities. Sometimes it took us too long to come to a decision, in the end, we set a two-beat-one rule to reduce distraction. It was also a quite pleasant experience because we were able to collaborate as designers throughout every step of the project as we held a common goal and vision. We learned from each other by exchanging our ideas. In the end, we were able to create a prototype that is not only useful but also user-friendly.