Grupo

Solo project – discovery, UX/UI design, animation, prototyping, testing

The Problem

Grupo is a mobile application that I conceived and designed over a six week period as part of my UX Design Certificate at York University. The app concept was inspired by the increased need for alternative transportation during the COVID-19 pandemic and my observed apprehension of new cyclists riding in Toronto. I set out to investigate:

How might I help people get around by bike in a way that makes them feel safe, confident, and connected by community?

I personally gained confidence in the saddle by attending large group rides in Los Angeles, through the Midnight Ridazz forum. I was fortunate to discover that community through a friend, but finding out about group rides in any given city can be challenging, often limited to word of mouth. It can also be intimidating to show up for an unknown ride, especially for new riders.

Grupo was created with the goal of connecting all types of cyclists – new and experienced – to others in their community. I believe that creating a central platform for cyclists to find, join, and create rides (whether for commuting or pleasure) will help to increase the comfort level of new riders, as well as build and strengthen existing cycling communities across the world.

Product Design Strategy

To define the scope of the project, the core functions of the app were outlined:

• allow people to create and share group rides with start times, meetup locations, and ride details,

• allow people to browse rides in their area and sign up/save them,

• allow communication of ride participants through commenting,

• allow users to create profiles, add friends, and upload photos of rides,

• and allow users to filter and tag rides to suit their preferences.

I began by creating user flow diagrams to map out the core interactions of the app, followed by some low-fidelity sketches. Then I used Figma to create mid-fidelity wireframes, and prototyped the Grupo experience so that I could obtain feedback from users early on.

Early Usability Testing

Moderated usability tests conducted virtually through Google Hangouts with 2 beginner cyclists, 2 intermediate riders, and 1 expert group ride host yielded valuable insights for consideration in the succeeding high-fidelity design. Each participant was asked to complete a series of tasks using a Figma prototype of the mid-fidelity wireframes, while thinking out loud as much as possible. A rainbow spreadsheet was used to record findings from each interview, and several patterns emerged, such as the unanimous request to call contacts “friends” instead of “connections”.

One of the most notable requests from this early test was from the experienced ride leader, who noted the importance of hosts being able to create a ride series, to reduce the need for inputting redundant ride details for rides that occur regularly. Ride legacy was another theme that emerged from riders of all levels – the expert ride leader wanting cumulative ride series maps, and new riders wanting the ability to add photos to ride pages. Better privacy control for ride leaders was also noted as being an important feature, rather than having each ride’s GPS data default to being publicly displayed in real time.

New riders expressed the need of encouragement tags such as “all welcome” if they were to consider showing up to an unknown group ride. Several participants also noted the inconsistent language between “saved rides” and “RSVPing” and the use of a heart icon to save rides proved to be confusing. “How can I like I ride I haven’t been on yet?” was one comment I received. The test group also preferred something closer to Facebook’s “interested in this event” over RSVPing, as it felt too committal, especially for newer riders.

Style Guide

The style guide was developed in tandem with the next high-fidelity design and prototype. I wanted the user interface to remain fairly neutral with white and cool gray’s predominantly used in order to spotlight the content of the Ride Details pages and user photo uploads. The more vibrant colours in the palette are a nod to the night rides from which the Grupo concept was inspired, drawing inspiration from a darkening L.A. sky and glowing streetlights. The spirit of the brand is embodied by the loading animation which I animated in AfterEffects to enforce Grupo’s mission of community and strength in numbers – the G spinning into a wheel, and multiplying into 3.