FitTrack
A fitness app designed to make keeping track of your progress effortless and efficient. FitTrack eliminates the need for expensive trainers and the awkwardness of not knowing what to do in the gym!
Project Overview
The Problem:
To create an app that demonstrates the application of proper UI/UX design techniques
My Role:
Research, user-testing, prototyping, and design
Tools:
Adobe XD(Prototype), Maze(User-testing), Lucid(Mind-mapping), Python(Charting results).
The Process
Step 1 -- Empathize:
My first step in creating my app was understanding my intended users and finding out exactly what they wanted in a fitness app. I began by asking four questions--who's in the gym, who's using fitness apps, how old are they, and are they mostly men or women? I was able to narrow down my demographic to those between the ages of 25-34 with 60% women and 40% men. I then created a survey and interviewed five participants that fit into my demographic. I used the information I gathered to create empathy maps that summarized my key findings.
Step 2 -- Define:
After creating my empathy maps, I was able to notice commonalities between my participants and their needs. I then melded these common needs into a single persona, Lauren. Lauren is a high school basketball coach who finds herself dealing with the same struggles as most--too little time and not enough guidance. Focusing on a single persona instead of five helped me narrow down what I wanted my app to represent. I then created a business model to sort out the financial logistics. The business model helped me answer core questions: how would the app make money, who would be our key partners, and what value do we bring to our customers lives?
Step 3 -- Ideation:
After I had completed sufficient research on my users, it was time to ideate! I started by sitting down with a pen and paper and I wrote down as many ideas as I could. My mind map started with a dumbell in the middle, and I let my thoughts sprout from there. I asked myself what core features I wanted my app to have along with what I wanted my app to make people feel. I then used a mind mapping software called Lucid to polish and formalize my mind map.
Step 4 -- Prototype:
Next, I used my research and ideas to develop my prototypes. I created low-fidelity prototypes by sketching design ideas on a piece of paper. The sketches gave me a rough idea of my app's overall design and flow. I then used Adobe XD to create a high-fidelity prototype that allowed users to navigate through the pages. When designing my prototypes, I made sure to implement UI Heuristic laws as well as psychological research to create the most user friendly and appealing app.
Sketches
Prototype
​
Step 5 -- User Testing:
Finally, it was time to test my product. I used a software called Maze to collect data on my users and how they interacted with my app. Maze allows you to upload your Adobe XD prototype where you then create tasks for the user to perform. The software keeps track of how long each task takes, their misclicks, and provides a heat map displaying the areas the user interacted with. I selected five participants that fell into my user demographic to take the test and then analyzed my results. This stage showed me flaws in my design and where I needed to improve my app to increase its functionality. I then used python to graph my results.
Heat Maps:
Charts:
