Josie Artale
Product Designer

TrackFit

UI Design

Overview

TrackFit is a fitness app that plans workouts for you to help you achieve your fitness goal. TrackFit is a solution to slim down your mobile fitness folder. We gathered a sample group of fitness enthusiasts who are currently using multiple apps and technology during their daily routines.

When conducting primary research, we were overwhelmed with the number of apps people used to reach their fitness goals and thought there could be a way to simplify this. We tested this idea by conducting conversational interviews with people who actively use apps/technology when working out.

Design Process
TrackFit

Initial Research

We brainstormed ideas about how to reduce the number of apps used when working out and tracking your activity. We sought users who were actively using fitness apps and or regularly exercising. We asked our participants what their current pain points are when it comes to their workout routines.

Based on discussions with our participants, and some research on the current market for fitness apps, we came up with a solution focused on a runner based program. Initial ideas also incorporated more nutrition features, but we focused on running and fitness for the MVP prototype.


Ideation & Sketches

We developed an "all-in-one" idea, that focused on running, with the added feature of providing you with pre-planned workouts, and cool-downs. Your progress is automatically tracked for you as you progress through the program.

I sketched wireframes and tested them with a small group of users. We determined a user flow for the product and began to digitize the wireframes in Sketch. After a few iterations, we finalized the design based on feedback from our InVision prototype.

Final product
TrackFit

Product Branding

Once I tested out all usability mistakes and confirmed a user flow for the product, I started designing the final screens in Sketch.

I created a mood board to capture the visual style for the product, with a strong, fresh, and inspiring brand image. The brand uses soft colours and the font Comfortaa.

Retrospective

This project allowed me to focus on creating UI that was modern and interactive. It created the opportunity to learn more about gamification, and feedback when designing products. It also provided me with the chance to focus on graphic design principles to improve my visual design skills.

This project helped kickstart my transition into my career as a UX designer. My experience at BrainStation taught me important skills as a designer. You can learn more about this project and how it impacted my career in this interview with course report.