Zachary
UX designer
Made with

RunBuddy Design Challenge

Redesigning how users rate and review runs around the city

Project Overview

RunBuddy Design Challenge

RunBuddy is an iOS app that helps urban runners find new running routes in their city. Runners can see routes that other users have ran near them, and choose one to run.

After users finish a run, they can rate their run. Other runners can see this rating and can use it to help them find a great route.

The current version of the screen uses a 5- star rating system. Many users have complained that this rating system is not really helpful for them to find a new route to run, because it isn’t specific enough.

Research & Synthesis

RunBuddy Design Challenge

RESEARCH AND SYNTHESIS:

In order to learn more about the criteria that runners use to rate, and choose a route to run, we asked a group of RunBuddy Users the following question:

“What factors do you consider when deciding where you’re going to run?"

To The Right:

 I received the following responses, distilling the biggest and most frequent takeaways from each. 

Down Bellow:

After synthesizing the responses, I found these in to be the biggest themes that we would need to design for:

Competitive Analysis

RunBuddy Design Challenge

Competitive Analysis 1 - Taxi App

Taxi service apps leverage maps for the users to identify the running route (screen 1). This is a useful visual indicator to help the user be able to easily recognize and differentiate which routes they are looking at and reviewing without too much verbal information. Since users can upload their own routes, something that points to the uploaders' profiles (in case you would like to be able to rate them as uploaders) might be a helpful idea (screen 3).

RunBuddy Design Challenge

Competitive Analysis 2 - Uber Eats

Since we've determined there are three metrics that users care about each metric should be rated individually in their own screen . This sliding design from Uber Eats that has a screen to rate each metric takes care of this and makes sure that users have their undivided attention when rating each aspect, while still making the flow feel engaging and fast. Then on the route screen those metrics can all be shown together with the appropriate star rating or user percentage rating.

RunBuddy Design Challenge

Competitive Analysis 3 -  Airbnb User Reviews

This is a standard review system for feedback such as apps, restaurants, music, etc. Reviews systems grant a personal touch. While 3 metrics were decided on what do we do when users want to say something other than the metrics we give them (our interview responses indicate far more variety that what was initially chosen). Maybe something can't be explained fully in a rating or other ideas want to be shared and that's where the user review template works

Design Studio

RunBuddy Design Challenge

Crazy Eights (Rough Sketches)

After synthesizing some research, there were a few concepts I wanted to make sure to take note of:

  1. The ability for either the route of the user of the route to have a rating/profile to make filtering for route ratings that much easier. Map screen with more detail.
  2. Making sure the three criteria were represented in the user reviews in addition to written content.
  3. Making selecting the three criteria as easy and streamlined as possible. 
  4. The ability to search using the criteria as filters. This was something that discovered could be done after rating data was compiled and what could be done with it.

Detailed Sketch Solutions

RunBuddy Design Challenge

These sketches are taken from my earlier rough design distilled into a final solution:

- Rating criteria appear below the completion notification gives the user time to connect that they have completed the run and the rating is a process of that. This is where the usual run finished information goes but instead of a button that goes to a rating page the submit option can say "No thanks" in case no ratings are made and the user wants to not rate.

-Each piece of criteria appears before the user with a question and gives them a sliding scale that can be tapped or held and dragged. 

- Traffic and Safety are additional questions that can be reached by scrolling or tapping down as to segment the process.

High Fidelity Wireframe

The Final Screen Designs (below):

In the final design, I maintain the original app's image: the color palette, font, language, and feel (the third screen is an extension of the second screen).

- Using digital programs I can clean up my sketches and transform the rough ideas back into a unified design that is consistent and more readable. 

- Visuals on each rating system added for more clear communication of what was being rating.

- A reinforcing of your rating appears on the thank you screen so the user can view a concise summary.

- Navigation to bring you back to the home screen or continue by looking for a new route (in case a route was canceled due to being unsatisfactory).

The Next Steps:

- I'd be interested in testing how quickly the time to completion would be on this review task noting any steps where the user pauses.

- I'd be interested in testing whether the chosen images improve or hinder understanding of the rating system (with A/B testing) and perhaps if the current visuals used could be improved.

- Lastly, I'd like to test where users might expect to go from there, how they expect to be able to see or access this information across the app, and what their expectations for how multiple users ratings are incorporated (Are they averaged? Can individual reviews be viewed per user?)