Fitness360
Overview
In a real world scenario, we can acknowledge that the scope of projects are often limited by many factors such as client demands and time restraints. This makes it imperative to work efficiently and in such a way that best accomplishes both the goals of the business and the user. Fitness360 is a hypothetical health and fitness tracking app that suffers from high drop-off rates after a few weeks of downloading. The company aims to decrease these rates and increase engagement on the app by implementing an integrated messaging feature.
For this project, I was afforded information on the target users, brand identity, and a few wireframes of the original app.
Duration: 1 month
Role: Conceptualization, wire-framing, hi-fi prototyping, usability testing
Tools used: Figma
Creating a Project Plan
In order to simulate the time restraints one would have when working with an actual client, I gave myself a total of 90 hours to complete this project which was divided using a project plan. I chose deliverables that I felt were most feasible within the allotted time while also conveying the necessary information for the purposes of the project.
Phase 1: Discovery
Although I already knew what features had to be implemented, I still needed to decide exactly how and where this feature would be integrated into the app. This begged for a more solid foundation on which to base the rationale behind my design decisions. In order to build this foundation I performed secondary research to learn:
SECONDARY RESEARCH
What obstacles prevent people from hitting their goals?
What negative emotions do people feel about the gym/while working out and why?
The idea was that the high drop-off rates of Fitness360 was a reflection of the real life human emotions and obstacles that people face when attempting to achieve their fitness goals. This meant understanding what causes difficulties in fitness from a more human perspective would bring me one step closer to understanding why users were abandoning the app.
I found that individuals struggle with a variety of challenges when working out, ranging from lack of motivation and time, to unrealistic expectations and fear of discomfort. These challenges tie into a multitude of negative emotions that are felt in the gym and/or while exercising, such as anxiety, frustration, and guilt.
FINDINGS
Phase 2: Design
Through my research findings, I crafted a persona embodying the complications a user of the app may face in the process of achieving their fitness goals.
PERSONA
The User
Mark
Frustrations
demotivated by lack of progress - cant achieve weight goal after 3 weeks and abandons app
busy life, must wake up early to fit time for the gym/working out - doesn’t feel like it’s worth it anymore
Interests
enjoys going out with friends, plays sports with friends
Needs
wants to get healthier and achieve a goal weight
I then formulated a few questions to guide the ideating process of my journey…
How might we motivate Mark to go to the gym consistently?
How might we provide social support to Mark so that he feels that the gym is worth it?
How might we create accountability buddies for Mark to go the gym?
How might we make Mark feel like a part of a community in fitness?
HOW MIGHT WE’S
…and encapsulated them in a statement:
SOLUTION
To address these issues, I want to integrate a messaging feature that gives social support to users like Mark that will motivate them to stay on their fitness journeys.
USER FLOWS
Before sketching, I constructed a couple flows of primary red routes that users would take within the integrated messaging system. Figure 1 is an example of a flow I brainstormed for sending a fitness activity to friends on the app. By taking advantage of the natural human desire to share things socially, this would ideally enhance motivation for the user.
WIREFRAMES
After tactfully sketching ideas for key screens, I fleshed out the pre-existing wireframes to generate a series of low-fidelity screens that were vital for all the red routes in the new messaging feature.
The messaging icon on the homepage and share icon on the run club screen are pivotal elements in the new system. The icons and general flow of the messaging system are intentionally reminiscent of those in other popular apps, making the system consistent with users’ previous experiences. This decreases cognitive load on the user to ensure facile onboarding.
Phase 3/4: Validate and Design
I performed a usability test on 5 participants to detect usability issues in the new feature. Ideally, in a non-hypothetical company I would perform this test on existing customers of the app; however, since this was not viable I searched for participants in accordance with the given parameters of the user base (tech-savvy, 18-34 yrs old, budget-conscious, and messages friends/family daily).
USABILITY TESTING
USABILITY ISSUES
Users took a few clicks before finally navigating to the messaging page when attempting to message a specific friend.
Users expressed frustration at having to click the back button twice when navigating from the filtered results back to the homepage.
From the test I found two usability issues:
To resolve the first issue, I planned to increase contrast on the messaging icon so as to draw more attention to it.
For the second issue, I elected to instead use an X icon to collapse the filter and modify the flow such that the back button on the results page navigates directly to the homepage.
ISSUE SOLUTIONS
With these issues in mind, I designed the high-fidelity screens based on the pre-existing wireframes. In order to conserve time, I used a UI Kit that I felt fit the brand identity of the hypothetical company: contemporary, trustworthy, humorous, and motivational.
I imbued the messaging button with a bright blue that would ideally draw more attention to it. This choice of primary color was intentional in order to instill reliability and security in the brand.
On the filter overlay, the substitution of the back button with an X icon is apparent.
In addition to these changes, I also removed the search functionality completely, since the use of both the search bar and the filters caused confusion in the flow of the app.
HIGH-FIDELITY DESIGNS
Phase 5/6: Validate and Iterate
I performed the same test on a new set of 5 users to validate if the previous usability issues were resolved as well as test for any other usability issues. I found that users struggled when tasked to find a beach run club to send to a friend on the app, and were not aware of or did not know how to use the filter functionality in the process of doing so. Although this was not a direct issue with the messaging system, I decided to alter the information architecture of the app since frustration in this necessary function could factor into the high drop-off rates, and there were no other outstanding issues within the messaging feature.
I concluded that users experienced confusion when trying to find the run club due to 1) high cognitive load from the amount of pictures/options presented on the homepage and 2) confusion about the functionality of the filter as a byproduct of confusion about the IA of the app.
I decided to make all the options on the homepage broader categories rather than individual run clubs, since the row of options at the top of the screen were also broad categories. The consistency, as well as fewer text, would hopefully result in less cognitive load on the user.
USABILITY TESTING: ROUND TWO
I also moved the filter to the next screen in the flow, thereby breaking down all the possible options on the original homepage into different screens and reducing paradox of choice. The final flow can be seen in the prototype to the left.
Conclusion
In a non-hypothetical situation, I may not have the same conveniences as I did in this project; however, finding shortcuts where possible and maximizing time on certain aspects over others is sometimes necessary in contexts where deadlines come into play. It’s vital to be able to discern which deliverables are necessary to accomplish the business and user goals, as well as which ones the project could potentially go without.