CatchMe

UI/UX Design

Project Overview

Designed to motivate movement anytime, anywhere, CatchMe turns fitness into a rewarding social game. It encourages users to stay active by connecting them for shared exercise experiences, making health fun and accessible.

  • 2 week timeline

  • Figma

How it works

Select Equipment

Choose Your Route

Solo or Multiplayer

Outpace Monsters

My Approach to Design

Empathize - Define - Ideate - Prototype - Test

Transitioning through five crucial phases—Empathize, Define, Ideate, Prototype, and Test—we develop user-centered solutions iteratively, ensuring effectiveness and innovation.

Empathize - Understanding User Needs

Market Research

To understand how CatchMe stacks up against competitors like Apple Health, MyFitnessPal, and Fitness+, I conducted a comparative study, analyzing their features, user experiences, and market positioning.

AppleHealth

MyFitnessPal

Fitness+

Features

AppleHealth is a centralized platform for tracking and managing a wide range of health metrics, offering a holistic view of personal health.

MyFitnessPal is a comprehensive nutrition tracker with a vast food database, focusing on dietary management and community support.

Fitness+ is a immersive fitness service integrated with Apple devices, providing personalized workout experiences based on Apple Watch data.

Pros:

  • Integrates a wide range of health data for comprehensive monitoring.

  • Compatible with third-party apps and devices for easy data sharing.

  • Extensive food database for accurate nutrition tracking.

  • Strong community support for motivation and advice.

  • Seamless integration with Apple devices for personalized workouts.

  • Wide variety of workout types and levels available.

Cons:

  • Primarily available only on iOS devices, limiting accessibility.

  • Some features require a subscription for access.

  • Advertisements can be intrusive in the free version.

  • Requires Apple Watch for full functionality, limiting use to Apple ecosystem.

  • Subscription-based, adding extra cost for users.

General comparison with CatchMe

  • Engagement:

    CatchMe's game-like features may engage users more playfully than traditional health and fitness apps.

  • Social Interaction:

    Both CatchMe and MyFitnessPal emphasize community, but CatchMe focuses on outdoor activities, while MyFitnessPal centers on dietary support.

  • Accessibility:

    Unlike Apple Health's restriction to iOS, CatchMe could appeal broadly if available across platforms.

  • Content Variety:

    While Fitness+ offers guided workouts, CatchMe encourages exploration and physical activity outdoors.

User Research

To better understand customer needs, I conducted a survey questionnaire. A total of 20 people participated.

Using Affinity Mapping in CatchMe app interviews helps categorize user feedback, identify trends, prioritize concerns, enhance collaboration, inform design choices, and guide iterative enhancements for a user-focused experience.

Affinity Map

Define - Clarifying Design Challenges

Key Insights from User Interviews

  1. Health Prioritization: Users value their health and strive for a balanced lifestyle, focusing on diet, exercise, mental well-being, and quality sleep.

  2. Challenges Faced:

    • Time constraints limit regular exercise.

    • Lack of motivation for maintaining exercise routines.

  3. Technology Openness: A strong openness to using health and fitness apps as solutions to their challenges.

  4. Preference for Gamification: Notable interest in fitness apps that integrate gaming elements to make exercise more engaging.

  5. App Feature Recommendations:

    • Educational content to inform and guide users.

    • Progress tracking features to monitor achievements.

    • Gamification to boost engagement and motivation.

Summarizing and analyzing the survey questionnaire data, I crafted user personas based on insights gathered, streamlining my understanding of key frustrations highlighted in user interviews: time constraints for regular exercise and lack of motivation.

POVs and HMWs

Drawing insights from the compiled user personas, I formulated two sets of Point of Views (POVs) and How Might We (HMW) questions, tailored precisely to address the identified challenges faced by individuals, such as time constraints for regular exercise and lack of motivation.

Problem - Time Efficiency

  • I would like to explore effective ways to assist young individuals (aged 18-44)in engaging in exercise routines that require minimal time and no preparation. This is because, according to my interviews, a common issue they have raised is the lack of time available for exercise.

  • How might we help busy young adults (aged 18-44) engage in quick and easy exercise routines without needing to spend much time preparing?

Problem - HolisticWellness

  • I would like to discover effective ways to help young adults aged 18 to 44 efficiently engage in fitness and maintain overall health, while also providing interactive features for stress relief. Through my interviews, it is clear that fitness, nutrition, and mental well-being are highly valued by this demographic.

  • How might we create a fitness platform that not only promotes physical health but also includes interactive features to help young adults (aged 18-44) manage stress and enhance their overall well-being?

Following the creation of the persona, this storyboard illustrates a typical user experience scenario. It showcases how a young adult aged 18 to 44 utilizes the CatchMe app to achieve fitness goals and manage mental well-being. By immersing ourselves in the user's perspective, this storyboard provides invaluable insights to better understand their needs and behaviors, guiding the design and enhancement of the CatchMe app.

Storyboard

Spencer is so busy with work that he has no time or motivation for exercise.

Spencer is an architect who has an overwhelming workload every day.

Choose your mode of transportation (running or cycling) from your current location to challenge nearby users to race back home. Estimated calorie burn: 500 calories. Click "Start" to begin!

Spencer's friend, Shuting, introduced him to a fitness app that allows him to exercise anytime and anywhere, making it fun and enjoyable.

After a while, Spencer not only achieved a full workout through the CatchMe app but also gained 23k followers by successfully challenging others. This brought him great satisfaction and joy in both his mind and body!

Find nearby users and let the game begin!

Ideate: Generating Creative Solutions

Feature list

With a total of 15 potential features in mind, I ultimately narrowed down the selection to just 3 due to time constraints. This careful curation ensures that we focus our efforts on the most impactful features within the project timeline.

Virtual Adventure :

Provide diverse, immersive virtual challenges across various locations, offering rewards and catering to different fitness levels and interests.

User Registration:

Simplify onboarding with intuitive registration, including social media login options for enhanced convenience, while gathering pertinent user data to tailor the app experience.

Gamified Workouts:

Incorporate gaming elements, interactive features, and real-time feedback into workouts for enhanced user motivation and engagement.

I've created a sitemap, task flow, and user flow to complement the carefully selected features.

A sitemap helps me organize and visualize the structure of my app, ensuring a seamless and intuitive user journey throughout.

SITEMAP

A task flow allows me to map out the user’s journey, step by step, ensuring a clear and efficient path to achieve their goals within my app.

TASKFLOW

A user flow maps out the user’s journey in my app, pinpointing areas to optimize their experience.

USERFLOW

Prototype: Building Interactive Models

Wireframes

With my potential solutions documented, I proceeded to translate the research and ideas into visual solutions. Starting with low-fidelity wireframes, I gradually refined them into an interactive prototype.

Low Fidelity

Branding

After establishing the initial conceptual design, the next crucial step is branding the product. This involves defining core values, crafting a mission statement, and identifying target users to establish a unique identity, build trust, and connect with users through consistent visual and messaging strategies.

Core Values:

Fun, personalized, community-driven fitness app with rewarding competitions and innovative tracking features.

Mission Statement:

Making fitness accessible and enjoyable for everyone, fostering a supportive community, and revolutionizing the fitness experience.

Target Users:

Young adults aged 18 to 44 seeking a convenient and engaging fitness app to stay active, reach fitness goals, and connect through challenges and rewards.

Following the establishment of core values, mission statement, and target users, I proceeded to create a Style Card and Component Library.

Style card & Component library

Furthermore, I proceeded to create high-fidelity wireframes, which showcased the core elements of the Catchme app.

High Fidelity

Test: Evaluating User Feedback

I conducted unmoderated usability testing via Google Form to evaluate the wireframes and gather feedback from five testers. The main objective was to assess the ease of navigation through the flows and gather user frustrations and feedback. After receiving feedback, I made modifications to the prototype based on the findings from the testing session.

  • 80% found the app straightforward.

  • 100% could easily locate the user registration process.

  • 80% believe the app provides clear instructions for tracking a run or joining a multiplayer race.

Test Findings Summary

Reflection

In this project, I undertook the complete UX design process for the Catchme app, from understanding user needs to interface design and user testing.

I conducted thorough research on young people's health behaviors and challenges, translating insights into a user-friendly design.

Despite being a practice project, I gained valuable experience and skills, with successful user tests providing helpful feedback.