Wilder League
Wilder League is an iOS app designed during the pandemic for runners. It allows runners to connect with their running devices to track running progress, while also to create and join races to compete with other runners anywhere around the world. The app was designed during the summer of 2020, and was launched in the end of October.
Project Summary
Problem:
- People feel lonely in general during the pandemic and loose their interests in exercises.
-People want to reconnect with other runners in a virtual way to motivate each other to keep running.
Final solution: Design an app that makes running more fun and runners feel more connected. Runners can join race to compete with other runners virtually in a timeframe. Runners can also create private races to connect with families and friends to run together.
Role: UX/UI Designer (50% UX, 50% UI)
Time: August, 2020 - September,2020
Team: Business owner and a small development team.
Tools: Sketch, Pen & paper, Invision
Timeline: 1 month
Background: The Pandemic in 2020 has brought a different lifestyle to everyone. More people start to run, there are also a lot runner loose their motivations to run. For those who got used to run with groups, they have to learn to deal with running on their own.
Design process overview
Wilder League’s business owner Adrian reached out to me with some basic sketches. As a runner himself, he wanted to create an app that connect runners; as a businessman himself, he also wants to find a way to make profit and keep runners’ motivation in the meantime.
Though there were a lot of ideal features can be involved, Adrian only had one month and wanted to launch this app as soon as possible.Wee had to work on a MVP to put the idea on the market first to get our foot into the door.
I quickly mapped out a timeline and kicked off the project with a meeting call to discuss further.
Step 1: Understand the Product & Goal
Target users
This was the first question I asked Adrian. He is a runner himself and he wants an app that target like people as him:
Regular individual runners
Runner groups (Runners run together in a group regularly)
New runners (who want to run during pandemic since a lot of indoor gyms are closed)
Goal & Idea
We discussed where his ideas came from, and what he wants this app to be.
His goal is to motivate people to run, participate a same race everywhere, anytime and see how they compare with others. So they won’t feel alone.
He showcased some sketches he did himself of some main features. We went through the sketches together.
Group 1:
Features I can see from these sketches:
Create race (4 categories)
Join an active race
Details per race
Questions:
What is an entry fee? How do people pay? Where is the money go to?
Entry fee is ideal for business to make money. (Still in MVP design but will release later till we have more users)
What is a private race? why?
For families or friends, invite only. Especially for runner in a group this can help their group routine - New feature: Invite link or code after the race is created
Group 2:
Question:
Is there a timeframe for people to join the race?
Yes, user can join the race during the timeline that race listed. - Things to consider: When users create the race they should be able to input a start & finish time
Number of participants: do we have number options?
No, either enter a number or make it unlimited. - Input filed + unlimited select for autofill
Group 3:
Question:
1. How do we know result? Enter time?
Using Strava to upload running data. - Feature: upload from strava
2. Is Name, gender & age info important?
Yes for motivation purpose. - Feature: Need user profile, Log in & sign up
What this app should include (main features)
Log in & sign up
Create, view and join race.
Private races available. - create & join.
Import running data to track personal progress (Technical constraints).
View rankings of the race
reclarify bUSINESS NEEDS
It’s always challenging to combine the needs from both users and business. At this stage, since the main goal is to launch the MVP in a couple of months, we are going to test out how users’ reaction first but with a possible feature of setting up entry fees.
Should I still design it?
Yes - Put it on the design and then business owner (Adrian) will make decision later as the product grows on the market.
Step 2: Further Research & Analysis
mvp Main feature of the app User flows
By listing user flows by main features, some interesting questions come up that need to clarify further with the business owner. I also found out new features that are necessary to be added to the app to make it more user friendly.
Highlights
Feature 1: Log in & Sign up
Since users need to connect with their Strava accounts to import their running date, and if they can sign up with Google account, can we give them an option to sign up with Strava account directly as well? So that they can read their running data automatically. Is this possible on the technical end?
Feature 2: Join a public race & race Results
When drawing out this flow, I realized another scenario that hasn’t been discussed before. Sine there is a specific time frame to users to join a certain race, what if there are races have already started but still fall in this time frame- aka “Last minute race“, can users still join? If so, extra screens will be created for this flow indicating “ongoing” and “future” races.
Race results is on the path of what happened after a joined race was completed.
Feature 4: Join a private race
Since private races are private, they should be in a certain place where users can unlock with their invitation code.
New feature: My races
On all these user flowers, most features can start from “home” except when users complete their races. At that point, users have to find a way to get to their “joined races“ and to find the race to mark the completion. This also made me realize that meanwhile, there should be a section that contains all related races for quick access. So I added a new feature called “My races” includes all possible groups based on a user’s need: joined races (races joined but haven’t started yet), created races (races that users have created themselves), and completed races (history of completed races).
Entire user flow per feature
Navigation of the app
The prominent feature of the app is to make people explore races, join a race from there, and crate races. So they are on the home screen.
Private races invitation only, so it doesn’t make sense if they show on the “explore races”list. I created a separate menu tab, so that users can join private races directly there with their invitation code.
Whoever joined/created a public race or private races, the race details can be found in my races tab. This makes it easier for users to track their activities and complete a certain race once they finish the run.
Step 3: Translate low-fi to mid -fi wireframes
Step 4: Color exploration & UI
Step 5: Hi-fi screens
Challenge 1:
Active race listing.
Its a little challenging to put all information in a small card. I still think i can do better on this.
Challenge 2:
Distinguish create a public race & private race.
Found an easy way for users to switch between two types, and re-indicated the difference of the race on the modal.
Other main screens:
Step 6: Handoff all assets on invision
Invision prototype link
What’s failed & what I’ve learned:
Though I mapped out the general userflow I still missed one important information: There is no race name input. I found it out when the later i was asked to design a web version till Adrian mentioned it. I assumed the dev team figured it out when they build the app. If i could do a more detailed task analysis I could’ve structured all information better.
Races I’ve created: didn’t realize there were two different categories for races I’ve created until i got to the midfi wireframes. I think i could make it better approach instead of only labeling them.
Rethink the “create race” prominent CTA on home page when I came through some other screens. can it be it’s own tab? is it too disturbing?
Should we have a notification if a race kicks off? or connect with my calendar?