Barefit
A Fitness Tracking App
Who?
Carol Farah, Sole UX/UI Designer
What?
A Springboard capstone project. I was provided with project details and information from a fictional product manager.
Tools Used:
Figma, Miro
Timeline:
4 weeks
UNDERSTANDING THE PROBLEM
User engagement tends to drop off after heavy engagement for three weeks
There is an existing fitness tracking app that allows users to see how friends and family are keeping up with their goals. Currently, there is no messaging feature on the app and no way for users to notify one another as progress or goals are met. The product manager believes that if friends or family can message each other at any point throughout the experience, engagement and repeat usage metrics will increase. However, simply adding features that allow users to message each other is not enough - the goal is to increase repeat usage and engagement.
THE SOLUTION
Design new social and integrated messaging features that create sustained engagement
Barefit solves the problem by incorporating features from social media platforms, such as Instagram, to create a space for users to view their followers’ activities on a feed, through which they can share and celebrate their achievements. Users are also enticed to continue using the app through gamification - rewarding them with medals for their accomplishments. In addition, users are able to create custom challenges that can be shared with friends on the app as well as on other platforms, such as WhatsApp and Airdrop. The cherry on top is allowing users to “nudge” one other for motivational purposes and to get things moving, literally.
MY ROLE: EMPATHIZE, DEFINE, IDEATE, PROTOTYPE, & TEST
What did I do?
Evaluated how industry leaders approach similar problems
Conducted primary research - user interviews
Synthesized research - created affinity maps, personas, user flows, and user stories
Designed low-fidelity & hi-fidelity wireframes along with prototypes
Conducted usability testing on low & high fidelity mockups and iterated my designs based on those results
PROBLEM STATEMENT
“On average user engagement is heavy for the first three weeks then it drops off and soon after users delete the app.”
STUDYING INDUSTRY LEADERS
How do industry leaders approach similar problems?
Before diving in to traditional user research, I took a closer look at how industry leaders solve similar business problems. The apps that I studied were Productive Habit Tracker, Map My Run, Nike Run Club, and Fitlist - Gym Workout Log. I noted down what I liked about their design solutions and identified pitfalls that I can avoid. I translated my insights into specific action items that I later applied in my own designs.
My takeaways, AKA action items:
Design a feed for users to view, comment, like, and share their friends’ accomplishments
Design a direct messaging feature for friends and groups
Allow users to create custom challenges that can be shared with friends to join
Ensure the app incorporates visuals that are engaging and interactive
Allow users to set reminders for themselves and for friends
USER RESEARCH
Uncovering target users’ behaviors, thoughts, and pain points
I decided to conduct primary research instead of secondary research because understanding users’ needs plays a critical role in thinking about what will increase engagement. I interviewed 5 participants who fall under the target user group. I recruited individuals by creating a survey to determine whether they fit the role.
Objective: uncover the triggers of repeat usage and sustained engagement of a social goal-tracking app.
The target user is:
18 - 34 years old
Very tech-savvy - they are on their phones for several hours a day
Very budget-conscious
Messaging and communicating with friends and family is a very important part of their daily lives
What did I discover?
Users are inspired when they see their friends’ achievements and are motivated to accomplish their goals.
Users feel accountable for achieving their goals after announcing them on a social platform.
Users like to boast about their achievements and do so by posting on Instagram or calling/texting friends to let them know.
Participants felt that there are many standard messaging platforms that they could use instead (such as whatsApp), and so having another one on a fitness app wouldn’t be that beneficial unless it offered additional features.
When asked what would improve current apps, participants mentioned receiving rewards for their achievements, reminders for accomplishing goals, creating custom plans with friends, and a way for them to push their friends to work out and vice versa.
SYNTHESIZING THE RESEARCH
Gathering insights and analyzing data using sticky notes
I noted down ideas from my interviews into digital sticky notes so that I can organize the data and synthesize the research.
Key insights:
Why they use the app: it tracks their progress and provides a social platform that motivates them to accomplish their goals.
Why they stopped: they didn’t know how to set goals or achieve the ones they’ve set for themselves.
What’s missing: the app lacks the flexibility they are looking for in terms of creating challenges and sharing them with friends.
How they share achievements: through posting on instagram or calling/texting friends.
What they want: a better social experience on the platform they are on - the ability to message friends, create challenges with friends, set reminders, and receive rewards for achievements.
PERSONAS
Who would use this app?
Hannah is training for a triathlon and is super active. She has no issues setting goals and accomplishing them; however, she is missing a social platform that would allow her to inspire others by sharing her achievements and directly messaging friends.
John is looking to improve his goal setting skills. He thinks that the app he is using doesn’t do a good job at motivating him enough. He would like the extra push and prefers to learn from fitness professionals and receive rewards for his achievements.
HOW MIGHT WE QUESTIONS
Now what?
It’s time to formulate questions that can be answered with design solutions. Drawing insight from the personas created, I put together “How Might We Questions” to plant the seeds for ideation.
How might we utilize social features to inspire users to accomplish their goals?
How might we allow users to interact with one another directly on the app?
How might we utilize methods of incentives to motivate users to achieve their goals?
How might we allow users to motivate each other and increase overall user engagement?
IDEATION
Brainstorming solutions
After studying industry leaders in the field, I had a couple of action items in mind that would help solve the problem of unsustained engagement. I asked, “are the industry leaders solving the problems in the HMW questions? If not, what can I do differently?”.
Map My Run inspires users to achieve their goals through the use of a social dashboard where users can post and view achievements.
Nike Run Club does a great job of allowing users to message each other by having a section for an inbox in the bottom navigation.
Gamification is a good strategy that entices users to go after their goals by methods of extrinsic rewards. Nike Run Club does just that by rewarding users with medals after completing challenges.
While Productive Habit Tracker allows users to set reminders for achieving their goals, the app doesn’t have the option for setting reminders for friends.
Apps like Nike Run Club and Map My Run do a great job at allowing users to create custom challenges and share them with one another.
Participants in the user interviews mentioned that the addition of a messaging platform would be quite redundant unless the platform offered something unique. I decided to add the feature of nudging friends as a means to push them to accomplish their goals.
USER STORIES
What features will I focus on?
Putting together everything i’ve learned so far, I created user stories to consolidate my vision of the features this app would have.
As a user, I want to be able to create custom challenges that I can share with friends so that I am more accountable for my goals.
As a user, I want to be able to communicate with and push my friends to accomplish their goals, and vice versa, so that we are driven to achieve.
As a user, I want to be able to view other people’s accomplishments so that I am inspired to perform my best.
As a user, I want to be able to receive rewards for my achievements so that I am motivated to accomplish my goals.
INFORMATION ARCHITECTURE & USER FLOWS
What does the structure and flow of the app look like?
This is the sitemap, showing 5 main navigation tabs that include a section for an inbox.
This is the user flow for the social dashboard.
This is the flow for messaging a friend/group. It includes calling, video chatting, and nudging.
This is the user flow for sharing a challenge or creating a custom challenge and sharing it with a friend/group.
LOW-FI WIREFRAMES
First round of digital sketches
Challenge feed & specific challenge page
Creating a custom challenge
Inbox & specific chat
Sharing a post or challenge with a friend/group.
A custom challenge created & the social feed
GUERRILLA TESTING
What did users think about the wireframes?
I created a prototype of the low-fidelity wireframes and tested them with 5 participants who fall under the target user group. In particular, I tested the usability of the messaging feature, the sharing feature, creating a challenge, and the nudging feature - features that could potentially increase user engagement and repeat usage.
Objective: discover whether my design is intuitively simple to navigate and if there are any irrelevant/redundant sections or buttons that can be discarded.
Major findings:
4/5 participants asked about the significance of the “saved challenges” icon/section. They wondered where they could find their active challenges and mentioned that the “saved challenges” section is unnecessary.
The “create a challenge” floating action button is big - it hides the content that’s behind it.
When asked to “nudge” a friend, participants assumed the icon is for nudging since all the other icons on the page are universally understood.
Participants were confused about the achievement reward for custom challenges, asking how the reward was chosen.
Recommendations:
Remove the “saved challenges” icon - add a section for active challenges either on the page itself or on another tab on the page
Change the positioning and size of the “create a challenge” icon
Change the icon for nudging a friend either by replacing it with a more relevant one or replacing it with text
Clarify how the reward was generated by adding a statement such as, “based on current challenges…”, or remove the reward from that section completely
VISUAL STYLE AND COMPANY NAME
What did I call the app and what is it going to look like?
About the company (provided in the brief):
Brand personality - a trusted friend with a good sense of humor who always has your best interests in mind.
Brand attributes ○ Contemporary ○ Trustworthy ○ Humorous ○ Motivational
It was quite a challenge coming up with a name for this app - mainly because every time I decided I liked one I figured out it is already in use. I finally settled on Barefit because it fit the brand identity. Barefit is sort of a a play on words which appeals to the brand’s humorous attribute. It’s a take on “barefoot” to signify the bareness of the social aspect of the app as well as the idea of being on foot when exercising.
The UI
Because this project was intended to be short-lived, and I was not expected to create a style guide for this project, I took advantage of the UI kit that I found aligned with the brand identity. I used the relative components needed to implement the solution and made some edits along the way to make Barefit unique.
I chose these colors because they represent balance, optimism, energy, and joy - colors that are suitable for a social fitness app and fit the brand personality.
HI-FI MOCKUPS
Let’s make it look real!
Loading page, social feed, & the different states of sharing a post
Challenges page, specific challenge, map, & my profile
Different states of creating a custom challenge & the specific custom challenge page (with and without inviting a friend)
Inbox, specific chat, chat with a nudge sent, keyboard overlay, & sending an attachment overlay.
USABILITY TESTING
What do users think about the realistic prototype?
I conducted in-person moderated usability tests with 5 tech-savvy individuals who fit the target user group. I wanted to assess the design and usability of the mobile app, as well as to test the design solutions implemented for increasing user engagement and repeat usage.
Objective: evaluate whether icons and buttons are intuitively understood, discover any redundant pages/sections in the app, and figure out whether the overall look and feel of the app is aligned with the brand identity.
What did I discover?
Recommendations:
Add context or change the floating button in the Challenges page to a CTA.
Change the icon to represent a “nudge” function, such as a vibrating or poking icon or add context and consider changing the icon to a button.
After a user chooses to share a post with a friend on the app, the section for choosing an app to share it through should disappear. Or, change the position of “write a message” to either before or directly under “friends on Barefit”.
Critical Issues - experienced by 3 or more participants
Participants were not sure about what the “Create a Challenge” icon was representing in the Challenges page.
Participants guessed that the “nudge” icon was for nudging. They did not know what to press when asked to complete the task of nudging a friend.
When asked to share a post with a friend, participants inaccurately assumed they needed to choose a friend as well as the app they want to share it through.
ITERATING THE DESIGN
Refining the prototype
This was a neutral suggestion for eliminating any association with gender.
A critical issue solved: It’s now clearer that users have to choose either a friend on the app or an app to send it through. A major issue solved: “Share” is now “send”.
A critical issue solved: the “create a challenge” floating icon is now a clearer CTA button.
A critical issue solved: The nudge icon is now a vibrating icon to make it clearer that it’s a nudging icon. A minor issue solved: It’s also relocated to the bottom so that the upper area of the screen is less cluttered. The UI is also cleaner.
A minor issue solved: it didn’t make sense to have two buttons for selecting dates when the user is only required to press once to select both dates on an overlay.
A major issue solved: 2 participants were unsure about the notification icon. I changed it to something more representable of a notification. A neutral issue solved: users are able to hide or report posts on their feed (three dots next to the post).
LESSONS LEARNED
What did I learn while working on this project?
Studying industry leaders is a convenient way to come up with solutions to design problems. A major part of studying industry leaders is to take note of features that would work and those that wouldn’t and translating those insights into action items. That really helped me during the ideation phase.
Because this was a relatively fast paced project (compared to my first capstone), I was inclined to take advantage of existing UI kits instead of creating my own style guide. I learned that UI kits are a great way of ensuring designs are consistent throughout the app.
While this is something i’ve learned before, this project reinforced my belief that designer bias always exists, and I should always remind myself that even though I might know what something means, it doesn’t mean that others around me would too.