July 2021 (4 weeks)
Vancouver, Canada (remote)
UI/UX Design & Research (solo)
Mobile
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.
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.
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.
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.
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.
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.
.jpg)
FitChat’s User Flow
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.)
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.
Severity Rating Scale
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.
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.