Project Overview
Spotter is a health tracking app designed for families and friends, enabling users to monitor each other’s progress in health and fitness. The main focus of this project was to design new messaging features that drive user engagement and repeat usage.
Project type
iOS App Design
Date
January - February 2024
Role
UI/UX Designer, UX Researcher
Link
The Problem
On average, users engage heavily with the app in the beginning but lose interest over time, often resulting in app deletion. The lack of a messaging feature and the absence of a mechanism to alert other users along their health and fitness journey prevent users from staying connected and feeling supported.
The Solution
To create sustained engagement and encourage repeat usage, I introduced an interactive feature that is more fun and engaging than just a simple messaging feature. Users are prompted to capture pre-workout and post-workout pictures. These pictures are posted along with the workout data. This allows users not only to visually track progress and witness transformation but also to interact and message one another effectively.
Project Timeline
To ensure the successful completion of this project within the given timeline, I created a comprehensive project plan. This involved allocating specific hours to each task and carefully scheduling future work. Additionally, I selected research and design methods that best suited the project's requirements and timeline, ensuring efficient progress throughout.
Discover | Understanding the Problem and Our Users
The design brief outlined the company's context, goals, and the problem we aimed to address. Primarily, user engagement was heavy in the initial weeks but declined over time, often resulting in app deletion. The hypothesis suggested that the lack of a mechanism to alert or message other members as fitness goals are met resulted to this decline. To address this, the company aims to enhance user engagement and promote repeat usage by integrating a messaging feature into the app.
Before jumping into design right away, I conducted a competitive research to observe and analyze industry leaders, identifying strengths to emulate and weaknesses to avoid.
Competitive research :
Primary research :
In order to understand why and how users utilize messaging within a fitness app and to identify factors leading to the decline in app usage, I conducted user interviews. Conducting these interviews remotely enabled me to gather detailed information from diverse users’ perspectives and experiences effectively.
​
Participants were selected based on the following criteria:
-
Ages 18-34 years old who exercises often
-
Who are on their phones for several hours a day
-
Messaging and communicating with friends and family is a very important part of their daily lives
​
Research findings
After conducting interviews, I created an affinity map to synthesize findings. This method was the most efficient in terms of time and cost for organizing research findings and visualizing the solution path.
The primary reason that people use messaging in a fitness app is accountability and the desire to share, connect, and compare with others who share similar goals and interests. Additionally, reasons for discontinuing app usage included forgetfulness, laziness, and the oversaturation of the fitness app market, including various apps, online and offline classes and resources, and social media.
Ideation :
Organizing insights shared by our users using an affinity map has provided valuable guidance towards finding a solution. Users wanted accountability within the app and with other users, as well as a need for sharing and discussing their workouts while remaining engaged and committed.
​
This insight led me to integrate a solution into the app: the pre-workout and post-workout picture feature.
​
By prompting users to take these pictures, they naturally create opportunities to connect with others through their workout routines and progress. Additionally, this feature promotes accountability as users strive to regularly log their workouts and share their progress. This idea aligns with the current social media trend of authenticity and celebrating work and effort that was put in, fostering a sense of pride in users.
Design | Turning Ideas to Reality
User Flows :
The initial step in the design phase was to create user flows for the new features: taking pictures before and after a workout, and interacting with a friend’s post. These flows helped me to visualize user interactions with the new feature and ensure smooth flow and usability.
Initial Prototype :
With the user flows in mind, I sketched out designs and created wireframes. These tangible deliverables helped me translate ideas into visual representations and made it easier to run usability tests with the low-fidelity wireframes.
Validate | Test, Iterate, Deliver
Usability Testing Round 1 :
The purpose of the usability test was to assess the functionality of newly incorporated features, the ability to take pictures before and after workouts, and a messaging feature.
Objectives
-
Examine how these features work together to enhance user engagement and interaction
-
Understand their collective impact and potential on promoting repeated app usage and sustaining user engagement over time
Tests were conducted remotely with 5 different participants and many valuable insights and feedback have been gathered.
Usability testing findings
Positives
✦ Messaging
â–¹ Some liked that “Like” and “React” functions are tied into the messaging
â–¹ Familiar and intuitive way to message and react to each other’s posts
â–¹ It it motivating to see other people work out and be able to comment and communicate
✦ Overall
â–¹ Simple, intuitive, quick and easy to learn
â–¹ Clever idea - like the concept of having pride in working out
â–¹ Very nice and detailed
​
​
Negatives
✦ More clear design and instruction
â–¹ Navigation bar needs to be more clear with either labels or more descriptive icons
â–¹ Instructions could be better and more clear
â–¸ Difficult to tell whether it’s a preview or it’s going to be shared
✦ Picture comparison
â–¹ Easy to miss the arrows to switch between before and after pictures
â–¸ Side by side comparison? Lack of space wouldn’t allow
✦ Personal preferences and privacy preferences
â–¹ Some may would not want to show their workout data
â–¹ Some may not like the “like” function on post as it can be used to compare people or feel self conscious
Iterations and High Fidelity Prototype :
After organizing and reviewing all feedback and taking it into consideration, I made iterations to my wireframes. Then, by incorporating my own branding of the app, I created a high fidelity prototype to test again.
High-fidelity design
Usability Testing Round 2 :
After addressing the issues identified in the first round of usability testing, I conducted the second round to reevaluate the functionality and identify any remaining or newly discovered issues from the high fidelity prototype.
Usability testing findings
✦ React button
â–¹ Function and purpose are not clear
â–¹ Leading it to the chat might disrupt flow
✦ Overall clarity in design and functionality
â–¹ “Back” button to retake a picture
â–¸ Be clear where it would take the user
â–¹ Future dates seem clickable
In the second round of usability testing, besides small issues, it highlighted that the “React” button on a friend's post is rather causing confusion and disrupting the user flow. To address this issue, I reworded the button to “Message” to make it more straightforward and clear. Additionally, by enabling users to send a message directly from the post without redirecting them to the chat, it ensured a smoother flow without any disruptions.
Conclusion | Final Prototype & Key Learnings and Takeaways
✦ Key Learnings and Takeaways :
Reflecting on the journey of completing a project and achieving its goals, it felt similar to remodeling a part of a house - adding character, improving functionality, and providing solutions. Introducing a new feature into an established app was an exciting endeavor.
Throughout this project, I enhanced my ability to implement ideas into existing products seamlessly, fostering better flow and harmony. It was rewarding to witness users enjoying and appreciating the new features, strengthening my confidence in proposing innovative ideas.