Virtual Run Tracking
Overview
Due to Covid-19, all events, concerts, and conferences in Thailand were canceled, and Eventpop almost went bankrupt. In order to help our business running, we came up with the idea to create a virtual run platform, which everyone can do exercise at home and compete with other participants online. We started to brainstorm the ideas, design, and launched in 2 months.
Our first launch allowed the participants to submit their running results only. Because of time constrain and limited resources, I also helped with the copy in Thai and English. The challenge of this project was we were working from home and collaborating via ZOOM to make this project launch in 2 months.
My role: UX/UI Designer
Platforms: Mobile App & Responsive web
Disciplines: UX/UI, Prototyping, User Research/Testing,
UX Writing
Tools: Figma
Design Period: 1 Month
Launch: May 2020
Design Process
1.
Collect and analyze competitor experiences to benchmark our work with the industry, specifically inn Thailand
4.
Create user flow based on our research.
2.
Interview runners to collect their pain points and understand their expectations.
5.
Design and test the first mvp product with the real users.
3.
Understand user journey from using our competitor platforms and document all the touchpoints.
6.
Iterate the design based on feedback to improve the submission flow experience.
Wireframe
Option A
I started designing option A after I had done some research on the fitness app. Most of them will have a large progress bar and activity record at the bottom, so I decided to borrow the same idea. I believed that the runners would feel familiar with the UI style when they use our app.
Option B
For option B, I decided to add text on the side to help them see how long they need to run in order to complete the goal. I also added more activity details after interviewed the runners. They said they would like to see the total distance and average pace because this data prove that they run faster than the others.
Here is the feedback from users
-
They like to see the progress bar.
-
They want to know when the bar will be 100% completed.
-
They want to see all the activity records in detail.
Solutions
After I interviewed with a couple of runners, I decided to combine options A and B. I also added the medal in the middle to show users what they will get when they complete the distance, and it will light up when users reach 100%. I also added the event logo at the top to remind users what event they are submitting the results because some users may register for more than 1 event at the same time. Lastly, I want to make this "Runner Profile" to be shareable on social media. So, I decided to put the important data for users to show their achievement.
Social Media Sharing From Users
I'm so proud that my design got shared on social media and the runner community.
Activity Details
Users are allowed to edit their results when the status is pending. If the submission is rejected for any reasons, users can come back to this page to resubmit.
Illustration Design
In order to keep the app consistency, I decided to draw illustrations for all empty states. So, I can control the stroke weight and style for the entire app.
What I have learned from this project?
It was a very fun project to do during the quarantine, but the problem was we couldn't test our idea with the real users. Plus, we had about a month to develop this project.
It was challenging to get the design done before implementing it. After we launched the product, I realized that creating a well-functioning app or platform needs good information architecture. If we had more time, I would have invested my time to do a better job on it.