Nike

Racekeeper

Mobile app for people participating in running events

PROJECT BACKGROUND

Running is one of the most popular and practiced sports worldwide. Millions of people participate in endurance events in the US each year.
Usually, each running event has its own website, where participants can learn details about it, register for the event and claim their results after a race. It can be hard for runners to keep track of upcoming races and details about them, as well as track personal results from different running events.

THE CHALLENGE

Design a new app for runners who frequesntly participate in races to help them easily discover upcoming running events in the US, register for them and keep track of all their achievements in one place.

My Role

Research, Persona, Wireframes, Prototyping, Usability testing

Duration

2 weeks

Tools

Sketch

Whimsical

Marvel

Research

SECONDARY RESEARCH

Based on the “The 2017 National Runner Survey” report prepared by Running USA organization these are some statistics about runners and their participation in running events.

research

PRIMARY RESEARCH

I interviewed 7 people and then I broke down the interviews into important quotes from each participant. Next, I looked through all of the quotes from my interviewees and combined similar ideas into shared themes. Next, looking at the responses grouped into themes, I started to draw conclusions for each one.

research
arrow
research

COMPETITIVE ANALYSIS

I’ve looked at some of the applications and websites that people mentioned as useful during the interviews.

competitive analysis

The only direct competitor I’ve found is Athlinks, they have both web and mobile version of the application. I tried using the app to see what features it has, as well as to uncover its trengths and weaknesses.

Here are strengths and weaknesses of the Athlinks app I discovered.

strength and weaknesses

I also found it helpful and insightful to read online reviews about the service to understand what people like and dislike the most.

reviews

Define

PERSONA

Findings from my research naturally led to establishing key character to represent who will use the product. This helps foster empahty for the users and stay focused on people instead of features.

persona

Ideate

PRODUCT ROADMAP

Taking into consideration Project Requirements and conclusions from my Market Research, Competitive Analysis and User Interviews I spent time brainstorming ideas and as a result I created a product roadmap to understand and document which features need to be implemented in the app and what priority they have.

You can see the Product Roadmap I created here.

SITEMAP

I created an app map to determine the information architecture of the application and to understand how the contents can be organized.

sitemap

USER FLOW

I referred to a Product Roadmap and an App map to create a User Flow to show different ways a user can move through the application. I also included the contents of each individual page.

user flow

SKETCHES

After defining possible user flows, I started sketching screens for the new features.

sketches

WIREFRAMES

I created responsive wireframses for selected scenarios. Next, I created an interactive prototype using Marvel and used it to validate my design solutions.

wireframe 1wireframe 2

Test & Iterate

SYNTHESIZING USABILITY TEST RESULTS

I had 5 people user test low-fidelity prototype and then I organized all the feedback in the affinity map to understand the complete picture from my research and identify areas that need improvement. In the last column (Ideas) I presented possible solutions for the pain points discovered during the testing to incorporate them in the next design iteration.

affinity map

UI KIT

Because I was building the app from the ground up, I developed the brand name and visual style from scratch as part of my UI process.

UI kit

ITERATION

Taking into consideration feedback from user testing, I applied the styling to my wireframes and created high-fidelity prototypes.

iteration
SIGN IN & SIGN UP
design
SEE RESULT DETAILS AND SEARCH FOR NEW RESULTS
design
DISCOVER EVENTS AND REGISTER FOR THEM
design
SEE STATISTICS FOR SPECIFIC RACE CATEGORY
design

NEXT STEPS

Add some of the screens in the user flow (endpoints) and work on small details.

With the UI in place and iterations from the first prototype made, I would conduct another round of usability testing.