CycleBuddy

A place for cyclists and local trail enthusiast​s

DURATION

8 weeks

TOOLS

Figma, Miro, M3 (Material Design 3)

ROLE

UX Designer, UX Researcher

SKILLS

Prototyping, UI Design

Project Proposal

Problem Statement

Bicyclists often face challenges in discovering suitable trails in their local areas. Coordinating group rides with like-minded individuals can be difficult due to a lack of centralized platforms. There is a need for a solution that can provide trail information and facilitate easy group ride organization, catering to both seasoned riders and newcomers to the biking community.

In my project proposal, I made sure to include ways that I could implement the laws of UX, UX principles, etc., into my solution to make sure I create a solution that is not only visually appealing but user-centric as well.

Wireframing/Sketches

I began the wireframing process by sketching out three core functionalities: finding group rides, favorite rides, and add friends. 

First Iteration of Sketches:
​Sketches of core functions (2 alternative designs for each functionality):

  • Top: Find Group Rides & Favorite Trails

  • Bottom: Add Friends

Second Iteration of Sketches:
After discussing and going over my sketches with my classmates, I was left with some feedback:

  • Group Rides: Everyone liked the first sketch and the fact that it showed the amount of people who had already signed up for the the group ride as well as a photo.

  • Add Friends: Everyone gravitated to the second sketch. They noted that recommended friends should be under recently searched friends.

  • Favorites Trail: There was not much said in terms of changes. The group liked the first sketch more because it showed more information upfront without overwhelming the user.


I chose to incorporate all the feedback given to be in the feedback sessions. Below are the second iteration of sketches after the applied feedback.

Wireframe Overview:
After sketching my three core functionalities, I started to create wireframes on Figma.

  • Find Group Rides: Users will access group rides by clicking on their home button in the bottom left corner. As well as an option to view all group rides in the top right corner. This feature includes the name of the group ride, the date the group ride will be on, where the group ride is taking place, and how many people are already interested.

  • Add Friends: Users will be able to search for other users on the add friends function by clicking on the search button on the bottom navigation bar. The feature includes a search bar, a recently searched list, and a recommended people portion.

  • Favorite Trails: The favorite trails feature will be accessed by the bottom navigation bar. A list of all the user’s favorite trails will pop up that includes the last time the user rode the trail, the name of the trail, the address, and how long the trail is.

Style Guide

After figuring our my functionalities, I started to think about the visual aspect of the app. Below is the style guide that I came up with:

Color Scheme:

  • Brand Color: Dark blue (#1C315E)

  • Text Color: Black (#000000)

  • Accent Color: Red (#731D1D)

Typography:

  • Heading Font: Lalezar

  • Body Font: Inter

Grids:

  • Standard 8-point grid

High-Fidelity Design + Prototyping

During feedback sessions, there were a few ideas and words of advice that people gave me:

  • Add more stuff on the homepage - not just finding group rides

  • Discover new trails

  • ​A map and more details on trail


I decided to implement their feedback into my interface and created additional screens.

Add More Information on the homepage + Discover new trails:

Initial Design - Only Find Group Rides

After Feedback - Added Top Trails for users to discover new trails

At first, my homepage only had a section where you can find group rides. This was because I wanted the basis/main function of my app to be a place where cyclists can find other cyclists and go on rides together. However, I knew it was empty to only find group rides on the homepage. The feedback I received about the homepage was that I should add more sections and information onto the homepage - which honestly, I agreed with. Feedback included perhaps adding a place where you can discover new trails - which is how the top trails section was created on the homepage.

Map + More Details on Trails

Homepage Interface - Current ride box have user's current ride information

Once user taps on current ride box, they will be directed to a map screen

On top of the map screen, there is a drop-down they can click that will expand to more information about their ride stats and trail details

The homepage also has a “current ride” feature where users can click on the card and it directs them to more information about your current ride. In my original design (far left), users could only see basic information about their current ride. On the new interface screens, I created a page where users can click on their current ride photo and a map of the trail will pop up as well as a tab on the top of the map. The tab will show the title of the trail but once users click on the tab, a drop-down will appear that includes their ride states and general information about the trail.

Implementing Other Feedback:

  • Search / Add Friends: The only feedback I had for this page was that the consensus was that they liked the recommended friends section under the recently searched section.

  • ​Create New Ride: Many people liked how straightforward my Create New Ride feature was. I added the view new rides button on the top just because I thought people would want to see their already-created rides.

  • ​Favorites Page: I originally had arrows instead of hearts on the cards on the favorites page. The feedback I received is to replace the arrows with hearts instead.

Conclusion

This is the first project that I have done completely by myself and it has been a great learning experience. I have gained profound insights and learned to willingly take feedback from others and implement it into my designs. This experience has not only enhanced my skill set but has also reinforced the significance of putting users at the core of any design process. Moving forward, I am equipped with a deeper understanding of the intricacies involved in creating meaningful and user-friendly experiences, and I am eager to continue applying these lessons to future projects.