Project Background
Company Context
Maintaining and tracking one’s fitness is no easy feat. Endorfun, a health tracking app, knows this and tries to ease the burden by allowing users within a group to view other people’s fitness journey and health progress.
Business Goals
I was tasked with designing new messaging features that create sustained engagement:
Create opportunities for users to message each other with health and fitness goals/achievements
Create an integrated messaging experience to drive engagement and repeat usage
Role:
UX Researcher, UX Designer, UI Designer
Tools:
Figma
Deliverables:
Research plan, Sketches, Wireframes, High-fidelity prototype, User testing report
The Challenge
On average, user engagement is heavy for the first three weeks but then drops off and is soon deleted. How can we as designers increase user engagement and app usage in a meaningful and pleasant way?
Research
Qualitative interviews
Our target audience is tech-savvy millennials who are budget-conscious and frequently use other messaging and communicating apps.
Designing a messaging feature within a fitness app was so specific that I opted to do 30-minute qualitative interviews with 5 users over Zoom. I decided to utilize affinity mapping to evaluate and process my findings from user interviews.
Affinity Mapping
Identifying Opportunity
Competitive Analysis
Trying to create a platform where users can give/receive support and track their health was an interesting challenge. I looked at some popular apps to see how they utilized their communication features and gamified fitness and health such as Strava, Nike Run Club, MapMyRun, and Productive List.
There were several features and visuals I liked about the competitors: the bold and sleek look of Product List, the customization of Nike Run Club’s challenges, and the transparency of Strava.
Insights
After reviewing information from user interviews and competitive analyses, I gained more qualitative insights into users’ minds. I better understood user expectations, motivations, needs, and behaviors. These insights helped shape the MVP for Endorfun.
Viewing progress: Users like to see their current stats and how much they’ve progressed. Seeing a visual of progress is a motivating factor for users to continue their fitness journey.
Accountability and community: ⅘ interviewees mentioned they feel encouraged when they see their friends’ progress, can participate in challenges with friends, and can directly interact with them within the fitness app.
Ease of use: Users want all relevant information in front of them; they want things simplified so they can work on the more challenging aspect: the action towards health and fitness
Ideation
Sketching
For the MVP, the user needed to be able to send a message, interact with a post, and share their post. One feedback I received from a user was the hook of Strava, a running app. She mentioned its similarity to other social media platforms and highlighted it as a highlight of Strava. I decided to then make communication with others at the forefront of the app.
User Testing
I conducted guerilla user testing with 5 users, ages ranging from 28-34. By conducting more in-depth and time-consuming user research and learning from feedback, I iterated on my designs to make the UI more intuitive and helpful. Here are some key findings from my first round of user testing:
Homepage
3 out of 5 users didn’t realize they were on the homepage. When they were told to go back to the homepage from the Inbox, they clicked the Menu button again when they were already at the homepage.
4 users mentioned they didn’t see things they’d normally expect from a fitness homepage, such as a fitness chart, articles, user progress, etc.
Iteration: I pushed the newsfeed lower and added a fitness chart overview, indicating to the user they are on the homepage.
Before
After
Finding User Posts
One task prompts users to find their most recent posts but users didn’t know where to look. I assumed users would scroll down their newsfeed to find their old posts, but ⅗ users went to the menu button first, looking for a page with a compiled list of posts.
Iteration: I added an option to view all posts under “My Profile” since users look for a page specific to the user to view their past posts.
Before
After
Unread Messages
1 user mentioned the bold might not be a strong enough indicator for unread mail.
Iteration: I added an emoji to the right as another indicator for unread mail.
Before
After
Visual Design
Branding/Style Guide
Endorfun’s brand personality that was assigned to me was a trusted friend with a good sense of humor who always has your best interests in mind.
Their brand attributes were: contemporary, trustworthy, humorous, motivational.
I decided to give Endorfun a darker look to be sleeker and created the language to be more casual and fun to gain the user’s trust and be motivational.
I also added gradients for the bold colors to have Endorfun look more modern since gradients are part of the latest design trends.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Imagery
To stay on brand with Endorfun’s attributes as contemporary and humorous, I opted to use 3d art as the main form of visuals to appear more modern and friendly. 3d art is currently one of the design trends and gives Endorfun a brighter and more updated look.
Iterating Designs
Prototyping with Target
Audience
I conducted another round of user testing with the high fidelity designs with 5 users who matched the target audience. I focused on enhancing features users would interact with most. Here are some changes I made based on their feedback.
The Added Emoji
Users understood the bolded messages were unread, but when it came to the additional indicator of an unread message, ⅘ users were unsure of its intention. ⅗ users believed the emoji was to allow the user to do a quick react back to the original sender.
Iteration: I removed the emojis and decided to change the drop shadows to a different color as a less “obvious” indicator of unread messages along with the bolded text.
Before
After
Homepage
⅖ users weren’t confident they reached the homepage. When prompted, they had the instinct to double-check by clicking on the menu again.
Iteration: In addition to the company name, an overview of challenges the user is participating in was added with a color block to help break up the page.
Before
After
My Profile
2 users mentioned incentivizing working out by awarding medals or badges. A small motivational badge could give a boost and encourage friends as well.
1 user also mentioned the lack of customization and personality in My Profile. She suggested adding a wallpaper option to make her profile more personal.
Iteration: Users can edit and add a wallpaper, and achievement badges are displayed on their profile for users and their friends to view.
Before
After
Weekly Steps Chart
The “negative” numbers for the chart graph aren’t explanatory; 2 users pointed out the orange colors indicated days they didn’t reach their goal but the gradients weren’t consistent.
The “Add a post” prompt colors were seen as ominous since the colors coincided with the “negative” color in the step chart.
Iteration: Remove the accent orange color from the steps chart and replace it with white. Added numbers on the right of the chart to indicate whether the user has met their goal or not instead.
A week view was also added after 2 users mentioned they’d like to view their progress in other weeks or even in the entire month.
Before
After
Next Steps
After going over my designs with another UX designer, I would iterate on the colors of 2 features: the menu box and the “Add a post” prompt. One user had also mentioned the color of the prompt but the feedback was linked to the orange-red color in the steps chart.
To improve readability and have certain elements pop out more, I would adjust these two designs and test again.
Reflection
This was my first time designing a dark app and I was surprised to find it isn’t too different from designing a lighter, more airy design. Adding bolder colors was initially a challenge, but I found it beneficial as long as I limited its use. As usual, I found user feedback to be my greatest asset in making a more intuitive and easy design. I added a few additional key takeaways from this design project:
Don’t get distracted
My first iteration hardly even focused on health even though it was, wait for it, a fitness app. I got carried away with the business goal of creating a messaging and social media platform for fitness that I had forgotten about the main feature of the app. Fortunately, user testing prevailed again and users pointed out the flaws and lack of fitness content.
Going forward, I aim to incorporate more big-picture thinking and not get lost in the small details again.
Pay attention to colors
The way I chose my colors for the steps chart had nothing to do with progress and everything to do with my style guide. I hadn’t considered that my blue and orange complementary colors would be viewed as the positive/negative meanings users had attributed to it.
When trying to keep things simple, as a designer, I must carefully consider what each element, color, and component communicates to the user.
Keep things simple
When I received 1 comment about bolded messages not being a strong enough indicator of unread mail, I decided to be bolder and add a cute emoji as another signal. I figured it would be on-brand since it was 3d and simple. I was wrong.
The emoji immediately drew users’ eyes to it and because they already recognized bold messages to mean unread, they were looking for another meaning for this emoji.
In the future, I would not overload my users by assigning multiple details to one meaning. And if I do, they would be much more subtle than an emoji wearing sunglasses.