Contributors

Josel Canlas – UI/UX Designer

Goal

Create an app that enhances cardio and features, timed runs, step-tracking, progress, and past runs/records.

Narrative

I was tasked with creating an app that follows UI/UX principles. This project was divided into 3 phases:

Phase 1: UX Research

I created everything that was needed to know about Track Run’s target demographic. I found that an ideal Track Run user would be someone who works in a chair and wants to exercise more to counteract the oversitting. Since this was not a real app with a concept that was created by another person, the first thing I did was establish what Track Run is. As previously mentioned, it is an app that times, tracks steps, measures progress, and creates records. Then I created the user persona, scenario, empathy map, journey map, user flow, and the wireframes. These documents would influence how I create the app to suit the demographic.

Phase 2: High Fidelity Prototypes

This phase had me using Figma to turn my previously created wireframes into high fidelity, interactive prototypes. Each page was completed with every element being functional. This process was basically adding color and using the prototype functionality Figma brings to documents. I designed everything with the user in mind and how they would use this app.

Phase 3: Testing

Now it was time to test my app on Maze (a website that turns Figma files into testable apps). I had about 5 testers test my app according to the prompts I gave them. Overall, the results were very good with small fixes for UI/UX capabilities.

Issue #1

The first issue was how the button to start tracking was called “Track Run.” One user did not think this button started the run. My takeaway from this was that the wording was unclear. To fix this, I changed the button’s wording to “start,” which explains what it does clearer.

Issue #2

The second issue was that users did not think that the history button at the finish screen lead to the progress screen. Many users opted to use the hamburger menu to navigate to the progress screen, which was not the expected path. To fix this, I added a “/progress” to the button to ensure the user knows that the button shows both screens.

Issue #3

The last issue I found was the points on the progress graph were too small for mobile users to click. To fix this, I created a larger area to click the point.