UX/UI Case Study: Hive Fitness

Project Overview

Hive Fitness is a fitness and health tracking app that allows users to focus on their health and fitness goals by gamifying the experience and encouraging collaborative motivation within a familiar social media-like atmosphere. The app supports community and interaction through challenges, leader boards, and achievement awards.

Goal

The goal of this project is to design a new messaging feature that can increase and create sustained engagement and repeat usage of the app.

Product

Mobile App

Project

Sole UX/UI Designer
Tools: Sketch App, Miro, Invision
research | planning | strategy | wireframing | prototyping | testing

My Role

For this project, I was the sole ux/ui designer and was provided with some background information and goal. However, in order to get additional information I conducted secondary research, a competitive analysis, and usability testing. It was also my responsibility to create the user interface and the prototyping for this app.

The Challenge

Currently, there is no messaging feature for users to directly communicate with other users within the app. The hope is that if users can communicate with each other by messaging, sharing progress, or participating in challenges together throughout the experience, engagement and usage metrics will increase.

How the messaging feature will integrate within the app and its features is the main topic of discussion and how it will reflect the goal to increase repeat usage and sustain engagement is the solution. We cannot just simply add a messaging feature, that is not enough.

User Research- Understanding the User

Secondary Research

Fitness and health tracking apps aren’t a novel idea, but in order to understand what makes a user motivated to use a fitness tracking app and what about the app maintains their engagement, I conducted secondary user research.

The following was distilled from researching the existing apps and none contained all of these points in one app :

— Creating a Community —
By creating and cultivating a community with communication, I found that people who participate in challenges and workouts with friends are more likely to complete the challenge, maintain their fitness goals, and encourage others to join.

— Gamifying the Experience —
Maintaining engagement is encouraged by gamification. Earning achievement awards by completing workouts/ challenges and making the leader board fosters friendly competition.

— Visualize Progress —
Being able to see and track your progress has a huge effect on people’s motivation and engagement. It’s important for people to visualize their progress in order to take actionable steps to improve.

With all this in mind, I thought about how to create a messaging feature that would increase engagement and repeat usage.

Competitive Analysis

In addition to secondary research, I conducted a competitive analysis with existing fitness and health tracking apps since they have gained quite a bit of popularity since recent events. Fortunately, with the vast amount of data and access to other great solutions, I was able to understand important key takeaways and learn from instead of having to start from ground zero. To my surprise, I learned that direct messaging isn’t really implemented with other apps, but there is a large social aspect to them. Apps like Nike Run Club, Fitlist, and MapMyRun all have a social media feature. Users can share their progress with others within the app and everyone may comment or like these shared posts, not unlike Instagram or Facebook. Other features that promote social interactions with others are leaderboards and the ability to share challenges. Some apps even have a “group” or “club” feature that allows users to locate and join others with similar interests.

Mapping — Synthesizing Research

Affinity Map

In order to see what solutions would drive engagement and repeat usage, I organized my insights with an affinity map. I also wanted to see if I could find what type of incentives and encouragement would motivate users. After organizing my insights into different categories, I determined what ideas would be most beneficial to help me achieve my goal with this app. Some things that were found are:

• Engagement: Most people stated that tracking apps can be boring and wished there was engagement other than charts and data to look at. Challenges/Leaderboards increase motivation.
• Community: A like minded community is ideal for support, motivation, and encouragement.
• Incentivizing: Rewarded for goals and achievements can drive motivation.
• Accountability: Data tracking and social aspects to the app can increase accountability, participation, positive competition, and the above mentioned. Social support/community that would author encouragement and increase intention.

Having workout buddies significantly strengthens a bond because you’re both working towards the same life goals together. While competing with myself? What reward do I gain from the app? I love to compare cycling routes with others because it motivates me to push harder.

Sketches — Ideation

Low-Fidelity Sketches

I created several low-fidelity sketches to see what would be the best way to incorporate the insights that were found throughout my research. By doing this, it helped me visualize how the main screens and functions would look and interact. These sketches were then used as the foundation for my low-fidelity wireframe testing.

User Flows — Navigating the App

User Workflows

I created a user flow of what I determined to be the red routes of the app. I decided to phrase the red routes as “How Might We” questions so that I may better understand what the problem is and to design for a better solution of these routes:

1. How might we share progress with a friend?
2. How might we respond to an unread message?
3. How might we like and comment on a friend’s post?
4. How might we check out a friend’s profile and send them a message?
5. How might we join a cycle challenge and share that as a post?
6. How might we check our achievements?

Wireframes — Low and High Fidelity

Low-Fidelity Wireframes

In order to do a preliminary round of user testing and see if this project was moving in the right direction, I created low-fidelity wireframes based on my sketches and user flow. Things that I paid particular attention to was whether users understood how to join/share/post progress and challenges and if they could operate the messaging feature. The point of this round of user testing was to answer some important questions:

1. Do the messaging features feel intuitive to use and familiar?
2. Does the ability to share/post progress, achievements, workouts, and challenges feel intuitive to use and familiar?
3. Does the proposed color scheme, button placement, screen flow, and icons feel intuitive to use and work in harmony?

I then utilized the testing results and feedback of how well users were able to complete each task given to them to create my hi-fidelity wireframes. I worked out the details of the screens, made UI components more readable, and reiterated on some of the user flow tasks that people had issues with completing. A second round of testing was then done to ensure that there weren’t any major usability issues.

Usability Testing — Iterating

Testing

I did three rounds of usability testing. For my final round of testing, users had no major issues completing the assigned tasks. However, that’s not to say everything was perfect. There were some issues that needed to be worked out:

Features — Visual Design

Branding

Hive Fitness’ brand personality is someone that is encouraging, optimistic, and energetic. Its brand attributes are inspirational, compassionate, positive, and harmonizing. I chose a color palette that is bright and contrasting. Shades of purple for the background to symbolize compassion and motivate the user as they engage with the app. Other elements are contrasted with pops of green and yellow that bring about happiness and relaxation and represent health. All corners are rounded to encourage approachability and trust.

My Solutions

Creating a Community

By making the app so that users can directly message with others, comment on posts, share achievements and progress with friends or everyone, and join challenges and clubs, it creates community. People of the same mindset, cultivating motivation in each other, encouraging others, while working to better their own health, pushes progress towards the main goal- being healthy and active.

Gamifying the Experience

Allowing the user to join and create challenges and then comparing how they stack against other users via the leaderboard reinforces motivation and encourages engagement with the app and others. By providing the leaderboard, it sparks competition, furthering the goal of increasing app usage. Gamifying the experience and providing achievement badges after all the work is the icing on the cake. Not only does the user have a better sense of accomplishment, but also better health.

Visualize Progress

Having the app visually show progress by graphs and charts is a huge motivator to do more and be better. Users are able to see their daily and past progress, goals achieved, challenges won, and even see how they compare against their friends or others’ progress. This adds to the competition, the motivation, engagement of the app, and allows the user to take actionable steps to improve.

Key Takeaway

One key lesson I learned was that researching and preparation are extremely important for starting any project. By familiarizing yourself and understanding the problem and the users, you will be able to better determine what the solutions to these problems could be. This is especially important since the user may not have much or any experience with social interaction apps and fitness/health tracking apps. It is important to note that user testing is paramount to learning whether your solutions really do solve the determined problems. You must throw all assumptions aside and when in doubt, test some more.

Next Steps

For the next steps, I want to implement perhaps a widget feature. Users don’t have to open the app to interact with it. Interestingly, during research I found that of the test group there were several folks that liked the idea of having an app widget because it was annoying to open the app to use it. Some even stated that they stopped using the app due to this annoyance. A widget feature will be especially beneficial for people because it will allow the user to focus more on their health and not the app, but still receive important notifications and take action. It will also be a good middle ground for the users that don’t subscribe to social media interactions as much.