FitChat: Redesigning a health and fitness habit tracking app


July 2021 (4 weeks)


Vancouver, Canada (remote)

My Role

UI/UX Design & Research (solo)



The Project

FitChat is a health and fitness habit tracking app that helps people build an active lifestyle by setting fitness goals while tracking their monthly and weekly progress. The app allows users to see their added family and friend’s stats regarding their health and fitness routines. This project is a redesign of a fitness app that wants to incorporate a communication channel for users to communicate with their friends and family. This design has taken into account friends the user has already added within the app to give context to the different flows and stats that would be given to users in the updated version.

Step 1: UX Research


FitChat was launched by a reputable company which created an influx of user engagement. However, the company noticed that the high rates of popularity seem to decline after about three weeks of engagement, resulting in users deleting the app.

Scope & Constraints

This project was executed in a 4 week timeline. Due to time constraints, the research plan that was carried out took into consideration the research methods that would be most informative and efficient within this timeframe.

Competitor Analysis

A competitor analysis was conducted on three leading health and fitness apps that already provide a communication platform for users trying to develop their health and wellness goals. What was discovered was the chats did not facilitate in-depth communication between members and lacked an overall sense of privacy. This needed to be incorporated into FitChat’s design.

Heuristic Evaluation

An evaluation was made on the same three competitor apps. I evaluated three heuristics from Nielsen Norman Group's 10 Usability Heuristics for User Interface Design on a scale from excellent to poor. The three heuristics I chose were Visibility System Status, User Control and Freedom, and Consistency and Standards because these three interaction design principles are the foundation of a usable and well-received communication platform.

Step 2: Information Architecture

A basic user flow was created to outline the various pathways a user would take while navigating this app. The following three points were the main guidelines while developing this user flow:

Users should be introduced step-by-step through the different features of the app to reduce the burden of learnability.
Navigation through the main features and subpages need to be very clear so the user can move through the app swiftly.
The data that people can access from other profiles needs to provide value for the users observing them.

FitChat’s User Flow

Step 3: Design

Sketches were used to test the first round of low-fidelity designs on users.

The original sketches


The second round of usability testing was conducted with black and white wireframes with the idea to uncover any hidden pain points that colour could potentially mask before plunging into the high-fidelity design.

(Four wireframes with minor adjustments that were made prior to finalizing the design.)

Step 3: Testing & Insights

Two rounds of remote usability testing were conducted. The first round of tests were five users (ages 25-30) that fit the demographic of the target user this project is designing for. The test was scripted in a way to generate their feedback to understand their needs and motivations. I incorporated some of their insight into the wireframes.

The second round of usability testing was very different. All five users were very tech-savvy and were also very critical about the design. There was a lot they didn’t like. Although they were able to complete all the tasks I asked of them, I later realized they were the wrong demographic. I was able to assess usability by watching their navigation and separating their actions from preferences.

Findings From My Interviews

Designing for Style and Interaction

Taking into account the needs and motivations of the target audience (18-34 years old, very tech-savvy, very budget conscious, messaging and communicating with friends and family is a very important part of their daily lives), the colour palette that was chosen revolves around a muted orange and shades of gray to create stimulation and an overall sense of fun. Not only do orange and grey contrast well together, orange is also widely used in sports and entertainment industries, as well as symbolizing independence.

Step 4: Final Prototype

The final prototype incorporated different design principles that added layers of navigation and interaction to the finished product. Different navigation systems were accounted for to create different pathways to complete a task. Adjustments were also made on the design interactions by creating similar design patterns based on similar functions.

In the “Original Design” a visible navigation for adding an activity is provided. In the iteration made under “Additional Screens Added” a hidden navigation is included to accommodate tech-savvy users.

In the “Original Design” all buttons, search bars, input fields were the same design pattern. In the later iteration in the “Updated Design” all buttons, search bars, and input fields have their own individual design pattern.

Step 5: Lessons and Next Steps

• Teasing out user’s actions from their voiced concerns requires reading between the lines.
• During user testing, the user's attitude is influenced by a number of factors such as their mood,  expectations, feelings, preferences, biases, etc.
• The next time I conduct user interviews I will set the context for users who do not fit the profile of the target audience to put them into the mindset of my target users.

• In this project, I could have sent out screener surveys to identify users who are experiencing the problem I am addressing, rather than users with a general interest in the product I am working for.
• In the future, I will set clear guidelines and goals to clarify what I am testing for to keep expectations in check.
• Hidden navigation is quite obscure, so creating different methods of navigation adds complexity to the design and can accommodate users with a range of technical skills.