RACHAEL HYLAND
Just because you're focused on improving your health and fitness, doesn't mean you have to go it alone. Too many fitness apps center on the individual in isolation and ignore our need for connection. With robust messaging features filled with delightful surprises, FiTogether aims to keep users engaged and connected on their journey to the best health of their lives.
DURATION
3 months
(Dec 2020 - Feb 2021)
PROJECT INFO
Second Capstone Project for my Springboard UX/UI Program
Team of 1
TOOLS USED
Sketch
Marvel
Miro
MY ROLE
UX Writing, UX Research, User Flows, Wireframing, Usability Testing, Style Guide Creation, Lo- and Hi-Fi Designs and Prototyping
Overview
The Challenge
As part of this project for my UX/UI Design program, I was provided with the general premise of this app, a health and fitness tracking tool.
I was also provided with the central issue: a steep decline in usage after 3 weeks, leading to deletion.
The Solution
I was also provided with the proposed solution: a messaging feature that would keep users engaged beyond the 3-week drop off period.
It was up to me to decide how to craft this messaging feature to achieve maximum engagement.
To solve this challenge, I created a feature that allows users to message one another within groups or individually about their health and fitness goals and achievements.
Another concept central to the messaging feature I designed is Challenges. These are activities you can engage in with family and/or friends and share with other individuals or groups as a way to keep others up-to-date on your fitness progress.
By creating a robust messaging feature with numerous convenient and innovative elements, I hoped to spark engagement with the app and maintain it sustainably.
1) Basic messaging screen, 2) Users can choose from a range of "Challenges" or activities that are filtered by popularity and seasonal relevance, 3) Users can challenge their friends and family to these activities by sharing the "Challenge" via private message, 4) Users can also share the details of an ongoing or past challenge with a message group that isn't participating in the challenge.
Project Timeline
Phase 01
Phase 02
Phase 03
Phase 04
Phase 05
Phase 06
Plan & Research
Map & Ideate
Test & Analyze Part 1
Iterate Part 1
Test & Analyze Part 2
Iterate Part 2
Project Plan
Research Plan
Competitive Heuristic Analysis
User Flows
Lo-Fi Wireframing
Prototype
Usability Test Script
Preliminary Usability Testing
Summary of Findings
Mid-Fi Mockups
Improved Prototype
Usability Test Script
Final Usability Testing
Summary of Findings
Hi-Fi Mockups
Final Prototype
Methodologies
Plan & Research
Project
Plan
Research
Plan
Competitive Heuristic Analysis
The sincerest form of flattery
First, I developed a Project Plan and Research Plan to keep myself on track and accountable throughout this process.
To build a successful messaging feature, I conducted a heuristic analysis of competitors; this is one of my favorite methodologies as it's relatively efficient if you're low on time, gives you a broad sense of the competitive landscape and a deep, analytical dive into your competitors' strengths (to be emulated) and weaknesses (to be avoided).
While conducting this analysis, I didn't stick to just fitness and health tracking apps, as most of them either do not currently have messaging features or have insufficient ones. Thus, Instagram made my list as an app that is not primarily devoted to messaging (similar to fitness tracking apps), yet contains an easy to use and flexible messaging feature.
Research Takeaways
Use clear icons + elegant and dynamic design.
Give users the freedom to perform a plethora of actions while keeping the UI uncluttered, lively and easy to navigate. Easier said than done, am I right?
Make it personal.
Make sure the messaging experience mimics in-person interactions IRL.
Cater to control freaks.
Give the user control over who sees their messages and posts so that the personal can stay personal and public bragging can be widely broadcast. Speaking of control, users should have the ability to delete and edit a shared item even after it's been shared. We're all guilty of typos from time to time, that doesn't mean they need to be preserved in the historical record.
Mirror users' mental models.
Sharing flows should reflect what users are used to experiencing with social media and should be intuitive, with as few steps as possible and copy that is appropriately informal.
Give 'em sharing and communication superpowers.
Allow users the ability to share a wide variety of media to keep things interesting and enable them to communicate via more than one medium (such as voice message).
Keep things light and breezy.
Provide an abundance of emojis to express any emotion as well as quick replies integrated with the messaging feature for those who prefer to keep things easy.
Make sure it's unique.
Enable customization of shareable elements with color schemes, the ability to add titles and descriptions and the option to take a picture or video and attach it to a post so users feel like the message is uniquely theirs.
Challenge users to have fun.
The option to "challenge" another user or group of users might just be the most underutilized gem of most health and fitness tracking apps today. Unfortunately, Fitbit has buried this feature so that it's almost impossible to find. However, the ability to "challenge" others seems like the key to increasing a feeling of connection between users while enhancing engagement with the app. Find a way to make this feature stand out in the UI and make it fun and easy to use.
Methodologies
Map & Ideate
User Flows
Lo-Fi Wireframing
Prototype
Going with the user's flow
With the learnings from my competitive analysis in mind, which helped inform my sense of what features I should and should not include in my app, I set about creating user flows for common pathways within the app. This exercise helped me visualize how a user would navigate their way through the app and any sticky points relevant to that and how many screens I would need to create later in my wireframing phase.
A skeleton of sense
Once I had a better idea of which flows I wanted to move forward with, I started creating wireframes for my major flows: 1) one user challenging another to an activity in a private chat and 2) one user sharing a challenge that they're currently completing in a group chat. Creating wireframes is a great way to visualize and experiment with the look and feel of the app in a more realistic way that is still relatively low-risk as its components can be changed or deleted easily.
-
It was important to have the messaging feature accessible via an icon from the dashboard
-
I also wanted icons for a "new post" and "notifications" so that these features would be readily accessible as well
-
The "Explore" icon would be for exploring new groups, influencers and workouts
-
"Together" would show your friends' and family's status updates and achievements
-
"COVID-19," of course, would be a repository of virus-related information
-
It was important to have a search bar for when a user wants to search for another user who isn't in their frequent or recent contacts
-
This is an expected shortcut without which a messaging app isn't entirely useful
-
I wanted to have some type of sorting mechanism for contacts to make it easier and faster for users to find what they're looking for
-
"Frequents" and "Recents" (no contact can be in both) seemed to make sense in terms of boosting efficiency and ease of use
-
The messaging apps I studied in my heuristic analysis usually had an indicator of a user's status (active or inactive), which is useful as it lets the other user know about how long their interlocutor will take to respond to a message
-
In addition, the messaging apps I studied usually included information about users (their name, username, who they follow and their profile info)
-
They also included information regarding the date and time of any messages so the conversation's context is always clear
-
I implemented a plus button with some oft-used icons displayed next to it so that users can insert challenges into messages
-
I found the plus button to be an elegant way to disguise icons that would otherwise overwhelm the limited space, while ensuring that all of the important functions are still accessible
-
When you tap the plus button, you can see the expanded view with all of the icons displayed
-
I wanted to have separate icons for inserting a challenge (or "challenging" someone to an activity) and sharing an achievement (like a badge, challenge or some other achievement)
-
My two main flows were sharing a challenge in a message group and an individual challenging another to an activity via a private message
-
In this sharing flow to a message group, I wanted the "Challenge" icon within the plus button (previous screen) to be the gateway for both the sharing flow and the challenging flow to cut down on the number of icons on the screen and make the process easier and more efficient
-
In the sharing flow, users can simply select a challenge from their "ongoing" challenges or a past challenge (filtered below this) with the radio button, customize the post and post it in a message group
-
Similarly, if a user is challenging another user to an activity, they can simply choose from amongst popular standbys (filtered at the top by popularity) or seasonal challenges (also filtered by popularity and relevance) by selecting the radio button next to the desired activity
Methodologies & Deliverables
Test & Analyze Part 1
Usability Test Script
Usability Testing
Summary of Findings
Uncovering the truth
with usability testing
Before I solidified my designs further, I needed to test with real people to determine if I was moving in the right direction or needed to make some drastic changes to the look and functionality of the flows. For this first round of usability testing, I conducted moderated tests with five different users and identified key areas for iteration in my next round of design and usability testing.
Icon Overload
Users had difficulty distinguishing between the "new post" icon and the "messaging" icon (paper airplane). And, in general, most users seemed confused and overwhelmed by all of the icons on this screen.
Purple is Just...Blah
The purple accent color, which I chose as part of a monochromatic color scheme that wouldn't overwhelm the user (esp. considering the gradient background) proved to be underwhelming and lacking in accessibility.
What the What? The Icon Saga Continues...
Many users found it difficult to locate the plus button and the challenge icon within the plus button. Furthermore, they had a hard time understanding the functions of the icons within the plus button at a glance.
Tap that...Challenge
Although radio buttons are commonplace and easy to use, some users weren't a fan of this option over simply making the entire challenge tappable. The latter solution is more elegant and intuitive, so I did away with the radio buttons.
Rank and File
One user suggested ranking the challenges (e.g. easy, moderate, etc.). This seemed like a good way for users to find what they're looking for easily and efficiently. I also planned to add a search bar so that users could search for a specific challenge.
A Bit Much
In the interest of giving users the ability to customize challenges, I erred on the side of excess. A user pointed out that the open-ended ability to change a challenge's mileage diluted it. So, I later decided to create a dropdown menu with limited choices.
Badge of Honor
Once the challenge has been accepted by all parties, one user suggested adding a small icon that would appear next to each person's profile picture, indicating that they are currently engaged in a challenge. This status update would be visible to all.
A Need to be Unique
I originally envisioned the app to be a "COVID-era" fitness tracking tool that would help people feel connected, but users had difficulty understanding what made this app unique. So, I knew I had to double down on the copy and imagery to stress togetherness.
Easy Peasy
Another user suggested that quick replies or pre-populated messages are also an expected feature. I originally implemented this idea with a scrolling list of reactions and later iterated on this design to create something more user-friendly and visually appealing (second screen).
Testing Takeaways
Clear away the cobwebs of a cluttered UI 'n inscrutable icons.
Get rid of extraneous icons and clear up the ones that lack clarity. Make sure the most important functions stand out.
Avoid muddling your message with a muddled color scheme.
Color schemes set the mood for a product and, in turn, influence your users' mood. When using a gradient, ensure that the colors possess some contrast and movement. Last but not least, decide on an accent color that is noticeable yet not distracting.
Be transparent whenever possible.
Be clear with users about the difficulty of challenges so that they can more easily scan and find what they're looking for. Also, brownie points for adding a search function for users who've "been there, done that" 400 times over.
Challenge users when they want to be challenged.
Giving users endless options for reducing the mileage of their challenges is erring on the side of limitless choice combined with illimitable laziness. Sure, give them choices, but don't go crazy.
Break free of features with limited usability.
Rid yourself of those pesky radio buttons. If a user can tap an entire thing, her finger and, by extension, she – is happy. If she can only tap a small, arbitrary circle off to the side, not only is her finger P.O.'ed, but she's in a pretty foul mood as well because you've just made what should be a simple, quick process into a Sysyphean challenge.
Overcommunicate and you'll be rewarded.
This goes part and parcel with transparency. If a user is engaging in a challenge with a friend, make sure a special icon or badge appears next to their profile pic for the duration of the challenge, not only to reward the user for challenging themselves, but to encourage an atmosphere of transparency and open communication amongst everyone using the app.
Let me see, hear, feel, touch & taste? the difference.
If this app is different from others because it's not focused solely on the individual sculpting "carved-from-carrara" abs in splendid solitude and instead encourages "togetherness" that warms the cockles you'd better declare it from the mountaintops with your copy, visual design and functionality.
Methodologies
Test & Analyze Part 2
Usability Test Script
Final Usability Testing
Summary of Findings
Trials of testing (round dos)
Prior to this second round of usability testing, I iterated on my designs based on the feedback I received during the first round and updated my prototype accordingly. For this round as well, I conducted moderated tests with five different users and later iterated again based on their reactions to the newer design.
To Post or to Share, that is the Question...
When posting or sharing a challenge to a message group, users were unsure if the post had been successfully shared. Users found the process confusing due to its novelty and because the term "post" has become synonymous with "posting" publicly or at least amongst a larger group of people. So I realized I needed to change my terminology to "sharing," which seemed more appropriate.
Don't Make Me Click Twice...
There was friction at first with the "schedule a start date" flow because users did not want to click "next" after they'd selected a date. Initially, I thought requiring users to click "next" would give them a chance to check that the date was correct before continuing. But, in the interest of minimizing clicks, I later enabled the calendar to disappear automatically once a date had been selected. However, on the confirmation screen after that, I ensured that users had the ability to edit the date.
Fabulous FABs
While trying to give users a multitude of options and declutter the UI, I ran into issues with users who didn't know where anything was. Later, I decided on a simpler design with a larger message field, barebones copy and only two of the most-used icons displayed outside of the plus button. Lastly, this isn't a photo app, it's a fitness app, so I tucked the gallery away in the more prominent plus button, where all of the other features are labeled for easy recognition.
Aggregation Gone Haywire
In my many iterations of the challenging and sharing a challenge flows, I at one point had the idea to restrict the challenge/share a challenge process to one icon (steps & star) to avoid overloading the tiny message field with icons, combine two similar processes in one and leave the trophy icon solely for sharing "achievements" (like a badge, etc.). However, aggregating these two actions with the pop up pictured here was confusing to some users. So, I went back to the drawing board (again).
Parting is such sweet sorrow
To end, I learned an enormous amount from this second capstone, some of which surprised me. If you ever wanted to be reminded again and again that YOU are not the user you are designing for, then simply conduct a slew of usability tests and watch your users fiddle with elements you thought were perfectly straightforward.
One of my enduring issues throughout the process of developing this app was my color scheme. Originally inspired by a color scheme I saw on Dribbble, it was only through soliciting feedback from users and fellow designers that I realized the more natural, earthy tones I love so much in art weren't as compatible with the digital realm as I had hoped.
When a fellow designer commented that the color scheme appeared "muddled," I decided to investigate this impression, which I now shared, and chalked it up to the colors being too subtle and similar to one another to create a successful digital gradient. Once I resolved this issue, the "looks" element of the app was more or less resolved.
On the functional side, I struggled with how to implement flows – challenging another user in a private chat and sharing an ongoing challenge with a group chat – that were unlike anything I'd seen in other apps yet needed to appear natural and intuitive to users to get their attention and maintain it.
I did this through the endless flexibility of the "plus button." Getting users to notice this button and interact with it was the first challenge; the second challenge was creating a flow that was frictionless, contained as few steps as possible and reminded the user of a typical posting flow on social media to evoke the comforting feeling of familiarity within a novel element.
Ideas for further development include building out "Challenges" as its own category on the dashboard, incorporating more imagery and videos of trainers exercising to inspire people to get moving and creating an actual "posting" flow that is similar to social media and will satisfy anyone's urge to take a sweaty selfie and brag to the world about their latest workout.