SafeGym: A COVID-Aware Fitness App
SafeGym is an innovative mobile app designed to help users find the nearest gym locations with the lowest COVID-19 exposure risk. By integrating Google Maps with real-time safety data, the app empowers fitness enthusiasts to choose safe workout environments. Users can check gym capacity, log symptoms before entering, and receive notifications about safety status changes—helping them maintain their fitness goals without compromising their health.
College case study
4 weeks
Fitness enthusiasts, aged 18 to 45
Context
This project was created as part of a college case study during the height of the COVID-19 pandemic, when gyms were reopening under strict guidelines. Users faced uncertainty about whether it was safe to visit fitness facilities and lacked access to transparent, real-time safety information in existing fitness apps.
Problem Definition
How to help users safely navigate gym spaces by providing real-time safety data, capacity updates, and symptom self-monitoring, while creating an intuitive, reassuring experience?
How can I visualize exposure risks without inducing fear?
How can I promote responsible behavior (e.g., symptom logging) without making the process tedious?
How do I balance personal privacy, public safety, and usability?
Research & Data Collection
To understand user pain points and needs around gym safety post-pandemic, I conducted user interviews with fitness enthusiasts and gym staff, and analyzed competitor apps such as ClassPass, Fitbit and MyFitnessPal to benchmark features and identify gaps in the market. This research informed key insights that shaped SafeGym’s user-centric workflows, ensuring a balance between safety transparency, privacy, and ease of use.
User Interviews: |
|---|
Competitive Analysis: |
|---|
To understand how existing fitness apps handle scheduling and check-in workflows, I analyzed ClassPass and Gympass, two leading platforms in the fitness space. This helped identify usability patterns, gaps, and opportunities for SafeGym to stand out with a COVID-aware approach.
Insights & Synthesis
Through user interviews and competitive analysis, I uncovered recurring patterns of anxiety about gym safety, frustration with complex fitness apps, and a need for emotional reassurance. Synthesizing these findings led to three distinct user personas, each highlighting unique motivations and challenges. These insights informed the creation of an intuitive information architecture that prioritizes real-time safety data, simplified navigation, and seamless booking flows.
Personas: |
|---|
Creating personas helped translate raw research data into relatable user archetypes, ensuring the design process stayed user-centered. I identified three key personas, Olivia (busy creator), Nicole (working mom), and Mike (healthcare professional), each with unique goals, behaviors, and pain points. These personas reflected real user anxieties around gym safety, their varying tech savviness, and their need for simple yet trustworthy fitness app workflows.
🌱 What I learned:
Personas made me empathize with users’ emotional states, showing how fear and uncertainty impact fitness routines. They also highlighted the importance of designing for diverse motivations—from community-driven influencers to private, mindfulness-focused users.
User Journeys: |
|---|
To understand how existing fitness apps handle scheduling and check-in workflows, I analyzed ClassPass and Gympass, two leading platforms in the fitness space. This helped identify usability patterns, gaps, and opportunities for SafeGym to stand out with a COVID-aware approach.
🌱 What I learned:
User journey maps taught me to think beyond screens and consider emotional highs and lows across the entire experience. It reinforced the need for calm, reassuring design elements and critical safety information placed where users expect them most.
Information Architecture
The IA was designed to support SafeGym’s dual goals: ensuring user safety post-pandemic and providing a fast, frictionless booking and check-in experience. It prioritizes workflows for different user needs from quick access tiles for repeat users to map-based search for first-timers.
Key Insights
"Users crave a fitness app that balances safety transparency with simplicity. They want real-time occupancy, cleaning status updates, and calm reassurance without fear-inducing visuals. Trust hinges on data accuracy, anonymity, and integrations with gym systems. For staff, operational tools and seamless updates are key to adoption."
Safety Anxiety
Users feel uneasy about visiting gyms post-pandemic due to crowding, shared equipment, and poor ventilation, leading many to delay their return.
Real Time Data
There’s a high demand for features like live occupancy tracking and cleaning updates to help users make informed decisions confidently.
Build Trust
Trust hinges on frequent updates, visible time stamps, and privacy-respecting symptom sharing, ensuring users feel reassured using the app.
Smart Alerts
Users prefer push notifications only for urgent safety changes and request in-app or weekly digests for routine updates to avoid alert fatigue.
Staff Insights
Gym staff see value in real-time updates but stress the need for operational tools that integrate with their existing systems without adding workload.
Design & Branding
I wanted SafeGym's design system builds trust and energy through a clean, modern visual language rooted in IBM Design Language.
Typography: Poppins for headlines and labels, Inter for body text. Clear hierarchy: Display (40-28px), Headlines (24-18px), Body (16-12px), Labels (16-12px), Captions (11px).
Color Palette: Core Purple
#5F27CDwith tonal ramp (50-950), supported by Green (success), Red (error), and Gray neutrals. All colors tested for WCAG AA/AAA accessibility.Components: Reusable buttons (states: default, hover, pressed, disabled), category/location cards, date & time pickers, symptom checklists, navigation bars, and dialogs. Built on an 8dp grid with consistent corner radii and elevation.
Brand Expression: Friendly, safe, and inclusive. Purple anchors the identity, while illustrations and icons add accessibility and warmth. Motion is subtle, reinforcing clarity and safety.
LoFi Wireframes: |
|---|
My goal was to explore different flows and layouts that could make SafeGym simple, safe, and intuitive to use. I started with multiple variations of the Home screen, testing how best to present key actions like Find Gym, Schedule Visit, and Check Symptoms. From there, I sketched different Map layouts to balance location visibility with ratings and quick actions.
For the Schedule Visit flow, I tested calendar-based and list-based approaches to compare efficiency in booking. The Symptoms Checker evolved through several iterations, first as a long form, then as grouped checkboxes for faster completion on mobile. Finally, I created confirmation and notification screens to close the loop, ensuring users always feel guided and reassured.
By trying out multiple directions before narrowing down, I was able to refine the information hierarchy and interactions, leading to a clear, focused user experience. These wireframes became the foundation for the high-fidelity SafeGym designs.
HiFi Wireframes: |
|---|
The high-fidelity wireframes for SafeGym translate the initial low-fi explorations into polished, functional layouts with defined typography, color palette, and component states. These wireframes focus on clarity and consistency, showcasing the brand’s purple primary color, accessible type hierarchy, and reusable components such as buttons, cards, and navigation bars. By incorporating real UI patterns from Material 3, the hi-fi wireframes not only refine the visual identity but also validate interaction flows like scheduling visits, symptom checking, and receiving notifications. This stage bridges concept and final design, ensuring that SafeGym delivers both a safe and seamless user experience.
Learnings & Future Considerations
As I moved into high-fidelity wireframes, I realized that I had less time to refine details compared to the earlier low-fi stage. While the core flows, finding gyms, scheduling visits, and completing symptom checks were established, the hi-fi designs highlighted areas that need more attention. I see that typography styles, component consistency, and accessibility states (hover, pressed, disabled) could be better systematized. Some visual elements, like spacing, iconography, and contrast in notifications, would benefit from additional iteration to ensure a smoother handoff to development.
Looking ahead, I would focus on refining the design system foundations (tokens, variables, states), tightening the interaction details, and testing the hi-fi prototypes with users to validate clarity and usability. This phase reminded me that while it’s important to visualize the end product, allocating enough time to polish patterns and edge cases is equally critical for scaling the product.
Demo
Back to Top