About Fitbit
Fitbit, leading wearable tech since 2007, offers diverse devices from step trackers to smartwatches. Its app, social features, sleep tracking, and coaching support millions of users worldwide.
About Project
This project was created during my master’s program-user interface class. As it focuses on redesigning Fitbit’s “Challenges” feature, I aimed for a realistic interface.
I chose it due to my interest in Fitbit devices and challenges connecting with fitness friends.
It serves solely for educational purposes, with all credits to Fitbit.
Tools
Jira
Figma
Figjam
Project
1 UX Designer (Myself)
My Role
User Experience Design
User Interface Designer
Timeline
1 Month
Oct 2023 – Dec 2023
How Might we..
help Fitbit users create a Challenge for a specific activity quickly and easily read challenge stats, challenge details, and chats so that they can stay updated and motivated with their friends?
Goals
Enable users to create custom challenges, clearly communicate the statistics of the challenge, and help users socialize with friends by motivating them while establishing and maintaining the Fitbit look and styling.
User Stories 1:
Name
Daniel Binoy
United States
Single
Software Developer
Behaviors
- Loves outdoors whenever not working.
- Uses Fitbit to track activities like Cycling, Weight Training, etc.
- He goes to the gym four times a week.
- He is very social and has a lot of friends who own Fitbit.
- He loves to have a balance between activities and social life.
Needs & Goals
- Have a healthier lifestyle.
- Wants to create a challenge for a specific type of activity.
- Wants to create a challenge with ease.
- Wants to have sustainable outdoor activities.
Pain points
- Challenges are hidden in the discover tab.
- It took a while to find challenges in Fitbit.
- Fitbit has only step challenges.
- Cannot challenge activities like Cycling, Swimming, etc.
User Stories 2:
Name
Jenny Adams
United States
Married
Account Manager
Behaviors
- Loves spending time with her friends and family.
- She goes running four times a week.
- She uses Fitbit challenges with her friends to track steps.
- She is very busy during the weekdays.
Needs & Goals
- Wants to make a habit of exercising every day.
- Wants to create & easily track the running challenges with friends.
- Wants to have an organized view for challenges to view Challenge details & Group stats at one glance.
- Wants to have chats and post pictures with my friends to stay motivated.
Pain points
User Flow
Through user stories and persona, I mapped out how the user would navigate to achieve the goal.
Low Fidelity
Legend
Title of Screen 0#
(Red for user flow 1 screens)
Title of Screen 0#
(Blue for user flow 2 screens)
Details on the screen
Style Guide
As the project focuses on redesigning Fitbit’s “Challenges” feature, I aimed to ensure a consistent interface and UI components for a realistic design.
Mid-Fidelity
As I started with the initial design system and created mid-fidelity wireframes, I tested the mid-fidelity prototype with five users.
Usability Test 2 - Summary
Solutions on 1st Iteration and 2nd round of Feedback Summary
Solution on 1st feedback.
High Fidelity Screens
NEW CHALLENGE TAB
Users can select Preset challenges or create a custom challenge.
Scroll & filter the preset
challenges by activity.
“See All” opens the presets on separate screens so that users could vertically scroll through the presets.
Scroll through the presets.
Creating Custom Challenge
5/5 Users were able to navigate from Create a Challenge to Challenge Dashboard screens easily.
VIEW PRESET DETAILS
Users can select existing preset challenges for instant challenge creation.
CREATE CHALLENGE
Users can create a custom challenge for an activity by clicking on Create a challenge.
- Leaderboard challenge
- Goal challenge
CREATE CHALLENGE -01
Creating Challenge is divided into three steps.
Step 1 – Selecting activity and Metric
The progress bar informs users about the number of steps required to create a challenge.
User select the type of activity for the challenge.
Selection of metrics
Description for metric selection helps users to know- How the challenge would be measured?
CREATE CHALLENGE -02
Step 2- Date, Days, and Image selection.
Challenge duration picker
Start date selection picker
Default image is set for the users. They can add other images from library or upload an image.
CREATE CHALLENGE -03
Step 3- Name, description and Invite friends.
Character limit for Challenge Name and Description informs users about the text limits
Placeholder for profile images and the number of members gives an overview to the users about who all are invited.
SUCCESS SCREEN
When the challenge is created users have the success screen with all the challenge details.
By clicking on “Let’s Go” users land on the challenge screen.
CHAT SCREEN
A Challenge user socializes within the challenge group.
The banner of who is winning helps users stay motivated while on the chat screen.
The description helps users to inform them that they can start a conversation here.
Users can chat within the challenge to stay motivated.
Each user chat is color coded to help distinguish other users.
CHALLENGE DASHBOARD & STATS
Users can view the challenge stats and Challenge details while on the chat screen.
Segmented controls for Challenge stats and details.
When clicked on the controls there is an overlay screen for the details. In this way, users can view the stats while chatting with other users.
Users can view personal stats and group stats on the challenge stat screen.
Users can scroll to view the other users and their stats.
Challenges while designing
While working on Fitbit designs, I found the dashboard of challenge screen design task challenging as there was conflicting feedback during my first round of usability tests.
To achieve clarity, I experimented with three layouts and collected feedback from the user from 1st and 2nd usability tests.
As I had feedback on all the screens, I was able to make informed design decisions.
Notable Design Decision
FEEDBACK SESSION 1
4/5 Users felt that statistics were not clear and end date would be more useful in the challenge details.
4/5 Users felt that there should be a prompt or buttons for the drag feature on the challenge dashboard screen that informs the User that it can be pulled down.
3/5 users suggested improving the styling of the challenge details screen as some of the elements with the same styling are interactive, and others aren’t.
There was confusion with the icon for closing the overlay. Few users did not understand the icon. Others misunderstood with upload icon.
TESTED THE ALTERNATE LAYOUTS FOR OVERLAPPING STATISTICS
Layout 1
The collapsible tabs took more real estate at the top of the screen.
5/5 Users did not enjoy this interaction.
3/5 users felt that the personal chats should be on the right side of the screen as they are familiar with the layout of other apps.
Layout 2
Segmented controls for Individual screens.
4/5 Users mentioned that this is a pretty standard layout and that they found the overlapping designs more fun to interact with.
Design decision - Overlapping stats screen
- Layout 1 was ruled out as it had negative feedback.
- 4/5 Users enjoyed the interaction of chat, challenge details, and challenge stats on the same screen as they could chat and view stats at the same time.
- It has the same number of clicks as layout 2.
- 3/5 Users mentioned – If they are in the challenge, there is no need for separate screens for stats and Challenge details as they would use the chat screen more to socialize and stay motivated. They may use Challenge stats once or twice a day and challenge details would not be used much.
- Considered color accessibility for the final iteration of this design
Next Steps
For the next steps:
I would consider feedback received by real users and re-iterate my designs.
I would consider more features like- sharing a link to challenge so that users could join with a link.
I would also consider designs for private chats within the challenge groups.
It would be interesting to design some interface of how users would view the challenge stats on the Fitbit watch.