Track it: Weight + BMI Tracker
A simple way to enter, track and analyze your weight and BMI.
Team: UX/UI Designer, Android Developer
Tools: Pen & paper, POP by Marvel, Sketch, InVision, Photoshop
Duration: 2 weeks
My Role: I lead the redesign project end to end, collaborating with the Android Developer to understand technical constraints and learn more about Material Design.
Background on the original design
The app was the result of managing two weight loss challenge competitions, and tracking the data in a notebook. Tracking the weight and calculating the BMI for ten people each time we met was a tedious process. People had to reach out and ask for their numbers, and I had to go back to the notebook multiple times per week to text people their numbers.
The process of crafting the original design was all about conversations and collaboration with the Developer. Even though this was all before I transitioned into UX Design, we accomplished the goal to release an MVP that allowed users to track basic metrics.
Track It - Before the redesign
Why the redesign?
The app was simple to use, but there was room for improvement. The app tracked the user's weight, change in weight, and BMI. It displayed the data, for the tracked values, on a graph for each category. The graphs were the main issue, for they did not accomplished the goal of providing a way for the user to understand their data.
Defining and understanding the problem
In order to find and understand the most problematic areas of the app, I conducted heuristic evaluation. Two UX Design students, and myself conducted the heuristic evaluation. We agreed on a rating system, and went through each of the ten heuristics while evaluating the app. Heuristics analysis reveled that the labels, type of graph, and the values that the app displayed needed improvement. Some of the terms used and the lack of personalization were also issues we encountered.
Heuristic evaluation results
Empathizing with users
To design with a user's pain points and goals in mind, I developed two personas. Each persona included some demographics, goals, needs, pain points, and characteristics about their personality. I made sure to develop personas that encompassed the profile of potential users. These were also informed by the pain points that I learned about while managing the weight loss challenge competitions.
Emily's persona
Omar's persona
To continue learning more about how a potential user might use the app, I created a user journey map. User journeys maps provided a clear way to understand what the user goes through before, while, and after using the app. It provided a more memorable way to highlight the user's needs and goals. It also helped me discover problems and potential opportunities. I made sure to review the user journey when making design decisions; it was also a great resource when ideating around potential solutions.
User journey map
Ideas into sketches
Because I needed a way to quickly sketch and test the ideas of the new design, I decided to go with paper. I put together the screens for three tasks, add a weight value, edit an entry, and delete an entry. In order to make testing more interactive for the user, I imported the screens into the POP by Marvel app and moved on to usability testing with five potential users.
Track It - paper sketches
Feedback and iterations
The participants completed the tasks, but there were a couple of issues.
1. The participants expected feedback when a weight value was deleted.
2. The app was not presenting information regarding the weight that a user had to lose in order to reach his or her goal weight.
I addressed the issues in order to improve the experience, and moved on to high fidelity mockups.
Visual elements and interactions
The style guide serves reference for me as the designer, and for the developer. It provides an easy way to access information for the visual elements and their styling characteristics. I used the color tool provided by Material Design to create the palette for the app, and to check on the accessibility guidelines for the color combinations.
Track It - style guide
To have a clear idea of the visuals, I created high fidelity mockups. They serve as a visual guide of how the different elements should be arranged. I can share assets with the developer, and go back if questions arise during development. The prototype represents how it would look and behave as a live app; It allows me to show the Developer what the interactions are instead of just trying to describe them.
Personal details and first entry
Edit entry flow
Delete flow
Outcomes and lessons
This project was great opportunity to apply what I was learning as a UX Design student, and it was also a great opportunity to familiarize myself Material Design guidelines.
The redesign was not implemented due to time constraints at the time; the original design is still available on Google Play with 500+ installs.