Two phones showing the SpookFit onboarding welcome screen and the in-game ghost-proximity chase alert
UX/UI Design Mobile App Gamification 30UX Challenge

SpookFit

A Halloween survival game where the only way to escape the killer chasing you is to actually run.

Designed solo in a 30-day design sprint, SpookFit turns a 30-day fitness challenge into a horror narrative: your pace controls your escape, and your friends are counting on you to make it to the gate.

RoleUX/UI Designer (Solo)
Timeline30 Days
PlatformiOS ยท Mobile
ToolsFigma, AI-assisted UI
View Prototype โ†—

Escape the Killer, One Run at a Time

A solo entry into the 30-day UX Design Challenge, built to solve a problem every fitness app shares: people quit within days, and streak counters don't stop them.

Challenge

Boost physical activity and engagement with a mobile app that fuses an eerie Halloween theme with a 30-day survival challenge.

Objective

Motivate users to complete a month-long challenge where they outmaneuver a relentless killer through real-world runs, clever pacing, and clue collection.

Methods

Ideation & concept sketching, user surveys, competitive SWOT analysis, persona development, high-fidelity UI in Figma (AI-assisted), prototype & pitch video.

Design Challenge 01
Motivation decays fast

Most people abandon fitness apps within the first few days. A streak counter or step total isn't urgent enough to survive a bad week. The app needed a reason to open it that felt like it mattered today, not eventually.

Design Challenge 02
Group accountability can backfire

Users who form workout groups to motivate each other often end up worse off: when one member disappears, the rest feel drained instead of supported. Social pressure needed a design that didn't collapse the moment someone else flaked.

Female & Male Ages 20โ€“45 Students & Working Professionals "Adventurist" mindset

Where It Started

Pages from the original notebook, before a single screen was drawn. Click any page to zoom in.

Hand sketch page one: character types, tracking mechanics, activity types, and early Halloween iconography
Page 1. Character types, tracking mechanics, and early Halloween iconography like jack-o-lanterns and gates.
Hand sketch page five: avatar customization, castle gate, and social collaboration mechanic
Page 5. Avatar customization, the castle gate, and the "who's counting on you" social mechanic.
Hand sketch page six: mapping how the killer's proximity drives pace and incline
Page 6. Mapping how proximity to the killer should escalate pace, incline, and urgency.

From Sketch to Screen

The same idea, five steps from a notebook page to a shipped interaction.

Step 1
Sketch: early brainstorming of characters and tracking
Brainstorm the world and the mechanics.
โ†’
Step 2
Sketch: avatar customization and castle gate concept
Sketch the avatar and gate concept.
โ†’
Step 3
Sketch: mapping pace and incline to the chase
Map pace and incline to the chase.
โ†’
Step 4
Shipped screen: the village chase begins
Ship the village chase.
โ†’
Step 5
Shipped screen: the ghost proximity alert
Ship the proximity alert.

Five Questions, One Real Insight

A short survey aimed at one thing: why do people quit fitness apps, and what actually keeps them coming back?

  • 01 On average, how long do you spend on your phone?
  • 02 Which application do you use more? Why?
  • 03 Have you ever used a fitness app? Why, and for how long?
  • 04 Talk about one of your goals that you've achieved.
  • 05 Why are you interested in a 30-day fitness program?
Interview outcome slide: word cloud and list of reasons people abandon workout routines, plus five interviewee avatars

Why people quit

  • Prioritizing job-related tasks
  • Perfectionism
  • Lack of emergency reasons to keep going
  • Laziness
  • Wasting time on social media
  • Neglect
  • Wrong expectations going in
Before each interview, participants built their own avatar in Ready Player Me. It let them experience the same first step a new SpookFit player would take, and it made the conversation about motivation feel personal from the start.
Finding 01

Most people lose track after just a few days and keep postponing their fitness goals. The drop-off isn't a lack of intent. It's a lack of urgency.

Finding 02

People who form accountability groups to stay motivated often end up feeling drained, not encouraged. When teammates don't show up, the group's motivation collapses with them.

Why this shaped everything: instead of cheerful peer encouragement that breaks the moment someone bails, SpookFit builds urgency from a story that never depends on anyone else showing up. A killer keeps chasing regardless, and each player's progress still carries a stake in their allies' outcome, so the social pull stays real without being fragile.

Designing for Olivia

The person behind every decision in this case study.

Portrait of Olivia Wilson persona
  • GenderFemale
  • Age31
  • StatusSingle
  • EducationBachelor's degree
  • OccupationCivil Engineer
  • LocationChicago
Olivia Wilson

"I'm all about enjoying my workouts without the weight loss pressure, while staying true to my plan to reach my goals."

Olivia works long, unpredictable hours as a civil engineer, which makes it hard to stick to a routine. She's determined to prioritize her well-being anyway, and she likes connecting with others, giving and receiving support, all while working out on her own terms.

Goals
  • Weight loss
  • Consistent fitness
  • "Me" time while staying connected to others
Motivations
  • Exciting, personalized, moderate-intensity workouts
  • Exercising solo while sharing achievements with friends
  • Activity tracking and progress awareness
Frustrations
  • Loses motivation mid-month
  • Some days feels too tired to work out
  • Afraid to start, since she's never finished a plan before
Personality
IntrovertExtrovert
ThinkingFeeling
Personal energyPerceiving
Tech savvyIntuition
Technology
Software
Social media
Mobile apps
Brands she uses
Spotify Nike Vans

Olivia's 30 Days, One Session at a Time

Built from her persona and the research findings above, mapped onto a single day inside the challenge.

1. Trigger
"I want to actually finish something this time."
Feeling
Hopeful, but wary after past attempts.
Design response
Honest onboarding that shows exactly what the 30 days involve.
2. Onboarding
Follows the gold coin, learns to watch for alerts.
Feeling
Curious, a little tense.
Design response
A guided tutorial screen that teaches the core mechanic before any pressure kicks in.
3. Daily Commitment
Checks today's goal and sees Jessica and Luise's status.
Feeling
Some days motivated, some days dreading it.
Design response
The plan is broken into small stages so it feels achievable, not just "run 6 km."
4. The Chase
Mid-run, an alert fires, and she has to pick up the pace.
Feeling
Adrenaline, focus.
Design response
Real-time proximity alerts translate effort into narrative stakes instantly.
5. Completion
The gate opens, stats log, and the streak continues.
Feeling
Relief and pride. "I actually did it."
Design response
Visible badges and stats make the achievement concrete, not just a checkmark.

Four SWOT Teardowns

Three fitness apps and one non-fitness runner game, analyzed for what to borrow and what to fix.

Generic Training App
Home / Gym Workout App
StrengthClear workout info, simple interface
GapNo skip/speed options, no sharing with friends, lacks energy
SpookFitBuilt urgency directly into the UI with a live chase timer and reactive alerts
ChallengeMe
30-Day Challenge + Social Accountability
StrengthInfo-graph dashboard, invite friends, workout history, big timer
GapConfusing onboarding, fully manual logging, no encouragement after actions
SpookFitGuided onboarding, automatic reactive feedback, and individual stakes instead of fragile group dependency
Peloton
Connected Fitness
StrengthClarity, live-class prominence, clean information hierarchy
GapNo music control, volume/mood mismatches
SpookFitAdopted the same at-a-glance clarity for streaks, lives & badges on the dashboard
Temple Run
Chase-Mechanic Reference (Non-Fitness)
StrengthDiverse maps, strong small-screen performance, global challenges
GapInterrupts for feature registration, no player-to-player space
SpookFitBorrowed the lives, rewards, and chase loop directly. The same loop, except it requires you to actually run.

What Makes It Engaging

Gamification research that set the ground rules before a single screen was drawn.

๐ŸŽฏ
Lead With Value
Onboarding shows the goal immediately, with no wasted screens before the point lands.
๐Ÿ”—
Sync, Don't Re-Enter
Integrates with existing health data instead of forcing manual logging.
๐Ÿ””
Push Notifications
Keeps users updated on progress without requiring them to open the app.
๐Ÿค
Social Support
Connection designed for encouragement, not just a leaderboard.
๐ŸŽš๏ธ
Customization
The journey adapts to a player's capability and goal.
โšก
Immediate Feedback
Every action gets an instant, visible reaction, so the player always knows they did well.
๐Ÿ†
Competition & Achievement
Badges, levels, and progress that make effort visible to the player and their friends.
๐Ÿ”’
Data Privacy
Stated as a non-negotiable for any app tracking real-world location and biometrics.

Four Weeks, Solo

1
Brainstorm & Sketch
Concept sketches, narrative ideas, early wireframes
2
Research
Surveys, competitive SWOT analysis, persona
3
UI Design
High-fidelity screens in Figma, AI-assisted generation, hand-refined
4
Prototype & Pitch
Interactive Figma prototype + narrated pitch video

From Login to the Gate Opening

The full path a player takes through a single workout. The same loop repeats daily for 30 days.

Initial Concept, Week 1

A rough sitemap breaking down what a first session needed to include, before the mechanics were fully designed.

Initial user flow sitemap from the ideation phase, showing account creation, login, and tab structure
Polished Flow, Week 3

The full decision tree once the chase mechanic was locked in: duration, location, avatar, allies, and the run itself.

Polished detailed user flow diagram from login through the chase workout to resuming the next day

In short: log in, choose a duration and location, build an avatar, see who's counting on you, then open the gate and run. Speed and incline respond to the killer's proximity in real time. Clearing the distance opens the gate and the streak carries into tomorrow.

Inside SpookFit

High-fidelity screens from the Figma prototype, grouped by where they sit in the flow.

Onboarding
Home & Streak
Daily Challenge
Chase Gameplay
Map & Levels
Profile & Achievements

The Prototype, Running

Captured straight from the Figma prototype.

Animated walkthrough of the SpookFit sign-in and welcome screen
Sign in & welcome
Animated walkthrough of starting the day's challenge
Starting today's challenge
Animated walkthrough of reviewing the workout plan
Reviewing the workout plan

Why It Works This Way

Why horror, not streaks?
Streaks measure the past, but a killer chasing you creates urgency in the present. The research showed people don't quit from a lack of data. They quit from a lack of stakes.
Why individual obligation instead of a group challenge?
The survey finding that group accountability backfires meant the social layer had to give a stake in others without making a player's own progress depend on anyone else showing up.
Why a live chase mechanic instead of a static timer?
Borrowed from Temple Run's lives-and-rewards loop: speed and incline respond to proximity alerts in real time, so effort is felt immediately instead of summarized after the fact.
Outcome: submitted as a solo entry to the 30-Day UX Design Challenge. It's a complete concept-to-prototype cycle covering research, persona, competitive analysis, and a high-fidelity interactive Figma prototype.
UX Research Gamification Design User Flows Figma Visual Design AI-Assisted UI
View Full Prototype โ†—