Gains
Role: UX and UI Designer
Tools Used: Figma, Photoshop, Miro
Problem: Gains is an established health and fitness tracking app for friends and family. The brand has positioned itself as a trusted friend known for being humorous. It is motivational and contemporary. Gains has been very successful early on, with initial strong usage. After about three weeks, though, use tends to taper off and the app is deleted. Company research has shown that a messaging feature can promote sustained engagement. So, to keep the user base strong, physically and faithfully, I was given 90 hours for a two-part project:
1 - Create the opportunity for users to message each other with health and fitness goals/achievements.
2 - Create an integrated messaging experience throughout the product that drives engagement and repeat usage.
The app’s visual design was made to be fun and friendly. In interviews people mentioned being intimidated by apps that felt overly elite.
Discovery:
Secondary research corroborated the company’s findings. A messaging feature could help with sustained engagement. So the focus of my discovery was to determine, qualitatively, how users preferred to message their friends and family in the context of health and fitness. Three solid takeaways surfaced:
1 - A majority of people are uncomfortable sending achievements to people they know. They feel it’s bragging.
2 - People aren’t opposed to sharing their achievements when the message does not sound like bragging.
3 - People are more likely to share their accomplishments immediately after achieving them.
Low-Fidelity Design:
After discovery, a user flow was generated. It describes a user messaging a friend directly after an accomplishment. I found it useful for thinking through the logic and number of screens needed. It also helped me understand navigation and steps a user might take to attach photos and achievements.
The messenger needed to be persistent. The messaging is all done in a modal window to eliminate any interference with the current app’s layout. This design could make the feature available to users at anytime while in the app. A convenient and constant reminder to message. I’m concerned this could be annoying, so subtlety will be key.
Usability Testing Results:
The user flow worked great as a guide for sketching out a quick prototype. A card sort was used to discover the most common flow users would take to message their friends and family. It also revealed interface and navigation pain points.
1- 4/6 users sorted the cards parallel to the initial user flow. 2/6 still finished, but swapped the message/photo activity order. The hierarchy of these tasks needs to be further established.
2- Activity drop down menu needs an icon next to the dates to help users differentiate between activities.
3- Contacts (Groups/Friends) drop down menu needs to be easily recognizable.
During the research for this project, I looked at fitness and hiking apps for messenger reference. This was helpful, but ultimately test subjects needed something closer to IOS and Android SMS. Understanding this earlier would have saved a bit of time.
Further Discussion Revealed: A trophy system with interesting achievements could lessen the braggy-ness of telling friends about a reached goal. This idea surfaced and was solidified during discussions that followed card sorting. Wondering if this could be an answer to the messaging concerns found in interviews, this will be added to hi-fidelity screens for further testing.
Hi-Fidelity Screens:
To help stay within the 90-hour time frame, digital screens were created with a Figma UI kit. I modified the icons, colors, and buttons to align with the brand’s fun and inviting look. The kit was a great starting point and saved me a lot of time.
The hi-fidelity screen designs addressed issues found during usability testing, such as: Icons were added to the activities, the contacts menu was given an identifiable button, and amusing factoids were added to the achievements.
Final Usability Test:
The floating messenger icon, which opens the feature, was heat map tested on usabilityhub.com. 85% of people surveyed correctly clicked it, when asked to open the messenger. 85% also felt the look of the messenger screen was friendly and 100% could recognize the activity based on the icon next to the name.
The hi-fidelity screens were put into an Invision prototype and tested with a new group of users. The following issues were observed and resolved :
Messaging was clunky. This should have been easier. A quick audit of known messenger (IOS/Android) formats revealed steps that could be removed and a layout that is more familiar.
One user was slowed while adding a photo. Referencing other apps, I saw a common flow and applied it. I learned that it is not helpful to completely reinvent common task flows.
Prototype Scenario: You’ve finished the brutal, Taylor’s Canyon hike! Now send a message to your hiking group. Attach your accomplishment and a pic to prove you made it!
Summary
The new Gains messaging feature is simple, functional, and offers a fun and humorous take on health and fitness messaging.
In the future, the achievement factoids should be updated to remain fresh and interesting so people will want to share them. Surveys should be conducted with Gains users to further understand what type of factoids people appreciate and which ones best minimize the perception of bragging.
