“Being able to compete with friends while being away from them is nice.”
Fitnetics is an app created by a well-established company that provides users with the convenience of tracking their fitness journey. The objective was to expand the application’s features with the goal of creating opportunities for users to message each other with health and fitness goals, with the larger scope focusing on increasing repeated user engagement and overall usage.
Challenges and Problems
Prior to this, it was reported that the average user engagement is heavy for the first 3 weeks only, where after it drops off, eventually leading to users deleting the app.
This is a significant problem as the visibility of the product will eventually diminish
“To me it is important to find a community to connect with when I workout… It helps me stay motivated.”
Solutions and Roles
To accomplish the goal of repeated user engagement and app usage, the full design process was adapted. With this in mind, the feature that I would be implementing and expanding on would be one that allows users to go beyond simple back and forth messages.
Roles
I took the responsibility of studying the industry leaders along with the responsibility of doing a competitive/ heuristic analysis
UX Designer
UI Designer
UX Reseracher
Tools
Figma
Miro
POP by Marvel
Project Duration
3/8/23 - 3/31/23
Total Duration: 90 Hours
The Process
Design Process:
The Process: Discovery Phase
Planning and Insight:
To gain further insight into the proposed problem, research of the industry leaders (Nike Run Club, Fitlist, MapMyRun, and Productive Habit Tracker) was required. This would allow me to gain insight into the reasons why these apps were considered to be the industry standards. It would also allow me to see what was similar between each app as well as what was different. To gain a better understanding, I sought to answer the following questions through research:
What are the main factors that lead to customers dropping off the app and deleting it?
How can we increase the usability of the app through the use of workouts and achievements?
How can we promote health and fitness through community forums?
Through the industry leader research, I was able to take away a few important notes:
Having a social feature implemented was common
Features that allows users to track their progress was common
Features that allows users to view leaderboards were an implementation on 2/4 apps
Amongst this, it was important to distinguish what elements I liked about each app as well as distinguish elements that did not catch my eye.
With the background of the current industry leaders, it was time to create a company name and plan a visual style to guide my project. It was essential to create a style that would bring a feeling that encourages and promotes health and fitness.
Ultimately, the name was decided on “Fitnetic” being a combination of Fitness and Kinetic. Essentially, saying that this app is all about staying active and moving about.
From here I needed to create a project plan, to allow myself a set amount of time to complete certain aspects of the design process. This is an important thing to do as it essentially creates a time constraint for the project, similar to how stakeholders would set constraints.
Research:
Research Analysis:
To effectively research the problem provided by the business, it was necessary to use the correct methodologies. Due to background information already given by the company, a heuristics analysis will take place first, after which 5 sets of guerilla usability tests will be conducted to understand the proposed problem, and finally ending with 5 sets of usability tests when the prototypes are ready.
With this in mind, it was time to analyze the current solutions through a heuristic analysis report. Consistent with the initial industry leader’s analysis, I conducted a heuristic analysis on the same products. This allows for a deeper exploration of the UI and UX of all four products to identify their unique strengths. Additionally, I examined three reviews per product (1-star, 3-star, and 5-star) to gather user feedback and insights for the product I am designing. Lastly, I assessed app usage and traffic to determine user retention patterns and understand why one specific app had the highest usage.
After the competitive analysis, it was time to condense that information and step into the shoes of Fitnetics potential users. To do this, I chose to create an empathy map, as it covers what the user may think/feel, see, hear, and say/do. It also allows me to think of the pain points as well as the gains from expanding on the app. They provide a good base in understanding the user's thought process. On a personal level, this also allows me to connect with the potential users, as I myself also feel that having a social aspect while exercising is important.
The Process: Design and Validate I
User Flows:
With the empathy map completed, it was now time to take a step further into the shoes of the potential users. To do this, I decided to create a user flow diagram, in which I would be able to map out potential routes that the users may take while exploring the application. However, due to the fact that no user stories or site maps were made, it was important to use the resources provided by the business in order to create a strong user flow diagram. To assist in this process, I used the wireframes and concepts provided by the business as a foundation to build.
With the empathy map and provided wireframes in mind, I created a 5-page user flow document that would cover the essential routes within each of the five pages I was planning to create.
Sketches:
With the wireframes and user flows in mind, it was now time to put those structures into sketches. For my low-fidelity prototype, I decided to go for paper sketches, as ultimately it allowed me to expand on the already existing wireframes. Sketching serves as a medium to bring life to the solution ideas and information architecture created, allowing for an initial design concept to come to life.
Guerilla Testing:
Both the user flow and low-fidelity sketches contain bias, as they represent my own ideas of what might work best. To overcome this bias and improve the design, I conducted 5 guerilla tests. Given the niche client base, I chose to host the tests at my local gym, approaching 5 individuals to test the design. I utilized a paper prototype using POP by Marvel and began by asking them the following background questions to better understand each participant:
How often do you work out?
Do you work out alone or with someone else?
Are you competitive, or do you enjoy playing sports?
Do you enjoy talking about exercise?
This allowed me to gauge the level of experience and competitiveness each user was at. From that point, I assigned each of the users to complete a set amount of tasks based on the screens created. The goal was to ensure at least all the screens were visited once.
Guerilla Testing: Results
The following is the findings and insights received from the guerilla usability tests:
Clarity was needed in the navigation bar
While some of the icons themselves were easy to distinguish, some of them were confusing to clarify.
The overall design of the navigation bar was noted to be too flashy compared to the rest of the design.
It was noted that in the design itself, there was no place to begin typing a message.
This was mainly pointed out on the messaging page.
It made the group chat feature feel limited in its messaging feature
It was also noted that between certain screens, the jump/transition felt too “jumpy” and direct
Lastly, it was also noted that some UI elements felt very small.
The guerilla tests were successful in gauging the audience's reactions to the initial design. Tasks and verbal narration helped reveal problems and potential ideas for the next iteration.
The guerilla tests were successful in gauging the audience's reactions to the initial design. Tasks and verbal narration helped reveal problems and potential ideas for the next iteration.
The Process: Design and Validate II
High-Fidelity Design:
Using the visual style guide, the given wireframes, sketches, and feedback, it was now possible to create a high-fidelity mock-up that would serve as the basis for the “final” version of the product’s design. The first iteration of the high-fidelity can be considered as a foundation, as this first design will not be used for an extended period. With previous projects in mind, I kept myself aware of color contrast and the accessibility behind certain UI elements.
As the style guide suggested, the usage of cornflower blue is meant to represent trust and motivation, whereas the orange is meant to represent a positive attitude. To help bring these colors together, I decided to place them on a white background as it adds a contemporary feeling. To continue with that contemporary style, I also decided to create a gradient for both the primary and secondary colors, allowing them to slightly pop more than their flat base color.
Prototype:
Prototypes are vital in the design process. Similar to paper testing, we need to evaluate our "final" design's user experience. I used Figma to create a function prototype with smart animations, making the testing as realistic as possible.
Usability Testing:
With a fully functioning prototype, we conducted a moderated usability test. Like a guerilla test, 5 participants were selected remotely via zoom. They controlled my screen and the prototype. Unlike a guerilla test, participants were chosen based on the target audience, ensuring a moderated process. A script was created to guide participants and maintain consistency across the 5 tests, allowing us to identify common UI/UX issues.
To guide participants, 3 tasks were created aligning with the app's purpose. They assumed the role of a competitive individual who loves working out. The tasks were as follows:
Complete the workout and share the results with your workgroup.
Stay active and engaged by participating in a live challenge.
Invite someone to join to avoid feeling alone.
Complete and share your results.
Check your current stats and streaks due to recent success.
Usability Testing: Results and Issues
Through testing, common issues emerged among all five tests. These critical design problems need immediate attention. After sorting the usability issues, they were ranked as follows:
With the issues sorted in order of priority, it was now time to implement the feedback and solutions of the issue on one final iteration of the high-fidelity prototype.
Change your workout plan by adding a dumbbell incline press to your current set.
The Process: Design III
With the finds and recommendations in mind, it was now time to reiterate on the previous high-fidelity design. This means building off the foundation, not starting for scratch.
These screens are an example how highlighting the selected page is important when designing for visibility
The ability to drag the workouts was available without pressing edit. This made the edit button feel redundant and useless. To fix this, the UI element to drag components was removed and locked behind the edit.
It was noted that in some areas, the white space felt distracting and overbearing. Thus, it was minimized in certain screens, for example the homepage.
Conclusion:
After completing the final design iteration, I took a moment to reflect on the entire process and assess whether the goals of the business, as well as my own personal objectives, were successfully accomplished. It's an important time for introspection and to consider the valuable lessons learned along the way.
Overall, I am pleased to state that the business objectives were met with the final design. The feedback primarily focused on the app design, and the received comments highlighted its effectiveness in keeping users engaged and connected with distant friends. Building upon user feedback provided a solid foundation, allowing me to focus on meeting the business requirements—a crucial lesson in itself.
One of the significant lessons I learned during this journey was the importance of not overreaching. As a creative individual, I often enjoy infusing my personal touch into every project. However, this venture taught me the value of adhering to specific business requirements and staying within a defined scope. Design constraints pushed me to think more deeply about solutions that align with the existing design while discouraging deviations. This forced me to approach the project with a focus on expanding on the already set ideas.
When looking to the future, some goals for this project include creating a dark mode version, or even making that the standard as it would help create a more user accessible design.