Sweatness app design
Reaching fitness goals made fun.
Timeline
SECTOR
Design Role
Introduction
This project was completed as part of Duolingo’s THRIVE Product Design Challenge for applicants. I had a lot of fun with the prompt and was inspired by Duolingo’s friendly and colorful brand in creating my design.
Prompt
Duo the Owl has just downloaded a new fitness app called Sweatness and wants his friends to be able to follow his activity. But Sweatness is missing a “Daily Activity” section and needs your help to finish it! Fully design one concept for how you might visually display at-a-glance daily activity in the profile of a fitness app.
Goal
Make reaching fitness goals fun and foster healthy competition.
What is Sweatness aiming to do?
The prompt’s mention of Duo wanting his friends see his fitness activity led me to understand that the app must have a social component. Other than that, the prompt allowed for an open exploration of the app’s concept.
I started by narrowing the scope of my design by figuring out what type of fitness app I was designing for with the leading question:
What value does the Daily Activity section provide and what kind of app can to make the most out of it?
The (slightly unreadable) note documenting my thought process in answering the question
What is the Daily Activity page aiming to do?
- Show friends your fitness activities of the day / provide an overview of your own activities
- Add social aspect to fitness as a source of motivation to engage users and encourage them to continue using the app
- Compete with friends in fitness
The Goal
By assessing the purposes of the app and its Daily Activity feature, I concluded that the ultimate goal of Sweatness is to make reaching fitness goals fun and foster healthy competition.
Solution
%201.png)
%202.png)
%203.png)
A fun approach to fitness
Sweatness helps you move towards your fitness goals in an approachable way without taking away the fun.
Users can earn points for completing activities, unlocking new features and lessons that will help them move along their fitness journey!
Secondary Research
There were two things of primary interest that I addressed through my secondary research. I wanted to know the 1) metrics people reference the most on their fitness journeys and 2) how social interactions can be utilized to fuel fitness motivation.
Takeaways from the online sources I collected
Findings
The metrics people utilize vary by fitness goal, but counting steps is the most popular form of competitive working out.
Some other common methods apps use in order to keep users motivated to exercise include
- Online communities
- Sharing workouts
- Fitness challenges
- Badges
- Recorded stats across time; progress indication
Competitive Analysis
I listed down the features of leading fitness apps from the App Store and noted the differentiations and overlaps through a Venn Diagram. I was particularly interested in the overlaps in features because it gave me a good baseline of the features I should consider for Sweatness.
Diagram: Comparison of MyFitnessPal, Peloton, Strava
Lower left: Squaddy, Corecircle
Overlapping features include displaying stats and streak over time intervals, syncing abilities with other health apps, and social challenges for the community or your friends to participate in.
Ideation
After analyzing the features of several fitness apps on the market, I tested out three potential approaches* to the Daily Activity page and ultimately narrowed it down to one.
*Approaches
(1) Activity summary followed by activity feed (forum format)
(2) Activity summary followed by activity feed (image-forward social media format)
(3) Activity summary only
Check the Figma file to see the approaches in detail
Gamifying fitness
The social aspect of the app naturally encourages competition and I used this opportunity to introduce streaks and points in hopes of making competition healthy and fun!
The layout is designed to reduce visual clutter for easier scanning.
User Research
Method: Survey, sorting
Fitness journeys are unique and personal to each individual.
With that in mind, I conducted an open-ended survey (Google Forms) with 5 of my active friends and asked them about the features/metrics they would find most helpful when tracking their daily fitness activities.
The answers fell under 3 categories: Steps/distance, progression, and metrics of fitness.
I also asked them if there were anything they would be curious about when checking out a friends fitness profile and gained an important inspiration.
Stat comparison with friends can be a fun motivation and knowing their common workout activities can be a good inspiration.
Sorting the features in terms of importance and order
Given the following six features (a mix of features I sampled from researching competitors)...
- Today’s exercise activities with time
- Timeline of when activities were completed
- Total exercise timeTop activity of the day
- Overall progress (%) to hitting daily fitness goals
I had my 5 testers rank them in terms of importance:
And in terms of the order they would want to see the features on a friend’s page (top to bottom):
Sorting in terms of importance gave me a sense of which features to emphasize and sorting in terms of order gave me a sense of preference for page navigation. It also highlighted the difference in value people have for their own page and for other’s pages.
Findings
People are more interested in seeing a summary of their friends’ activities.
They want to be able to see other people’s key activities at a glance without spending much time. Because people prefer summarized findings, timeline was also the least valued feature across both sortings.
Design
Wireframe to basic UI
Removing the timeline
I removed the timeline because it was excess information that people didn’t find useful. It also didn’t add as much value to my goal compared with the other features.
Wireframe to basic UI
Refining the basic UI
Appearance
- Made the page more colorful
- Lots of rounded corners and squircles :)
+ Option to add and message friends too
Daily missions + progress
“Daily missions” (formerly challenges) has been combined with overall daily progress to hitting goals to remove redundant information.
It’s been moved to the top of the page so users can see a summary of their friends’ daily progress first.
Steps
I changed the steps display style to a progress circle. I was previously unsure about because it could reveal other users’ personal goals.
Walking League
After visiting my project goal, I thought it’d be interesting to let users advance in their league each time they hit their step requirements. Step requirements would be increased each time a goal and encourage improvement.
Top exercise + fun metrics
I combined redundant information and repurposed the bottom section to show miscellaneous metrics.
While they’re not the numbers users are most interested in seeing, they still value these metrics in general!
Final Screen
Conclusion
Since I only had to design a single page, it was a really fun learning experience being able to get into the nitty gritty details of every single design choice. I ran into quite a few unexpected ideas as I was nearing the end of my project such as the Walking League which really helped tie it all together!
What I learned
1. Peer feedback saved my project
I asked two other designer friends to look over my project and they challenged all of my design decisions, making sure there was valid support behind everything.
2. Storytell the process
I put extra effort into organizing the Figma file for this challenge and had a lot of fun structuring it as a story for easier digestion. It also made referencing everything easier for this case study:)
Some things I would do differently...
- Spend more time polishing the survey, ensuring the wording is as concise and unbiased as possible
- Show my wireframe designs to the testers to get their feedback and remove some of my own assumptions
- Video interview my friends to get more candid and detailed answers from them which would hopefully help form some better insights
You've reached the end...why not take a look at my other projects?
