Skip to case study

Rui Duan

Fitropolis: from joining to making progress

Client / context
Personal Project
Timeline
2025–Present
Role
Product Designer / UI/UX Designer
Status
In Development
Fitropolis challenge discovery, profile progress, and challenge detail interfaces

At a glance

From joining a challenge
to making progress.

Fitropolis translates research on motivation and accountability into one buildable social-challenge lifecycle: discover, evaluate, join, track, then move toward reward and support. The research-informed MVP is in active development with an engineering partner.

In Development · MVP in active development; not yet launched.

Scope
Research, MVP scope, flows, prototype, UI system, handoff, and design QA.
Collaboration
Rui Duan, Engineering partner.
Services
  • User Research
  • Product Scoping
  • Information Architecture
  • User Flows
  • Wireframes
  • Figma Prototype
  • High-fidelity UI
  • Design System
  • Developer Handoff
  • Design QA

Three decisions. One path to progress.

Follow the design story, or try the new interaction study.

The starting point

Motivation depended on fit, accountability, and visible progress

I surveyed approximately 50 people who either exercised already or wanted to start building a fitness habit, then followed up with five user interviews. I also reviewed challenge, progress, and reward patterns in Nike Training Club, Strava, and Fitbit. Google Forms supported the survey; Figma supported flows, wireframes, prototyping, UI, and handoff.

Across the research, motivation was connected to accountability, finding a challenge that felt appropriate, visible progress, and the tone of competition—not tracking alone.

Decision 01

I narrowed the product around one testable lifecycle

The early idea included workout tracking, personalization, social sharing, community, AI coaching, subscriptions, and challenge features. Building all of them at once would make it difficult to learn whether the central interaction worked.

I narrowed the MVP to discover → evaluate → join → track → reward / support. Registration, challenge browse/search, Challenge Detail, join confirmation, My Challenges, progress logging, Daily Summary, and basic ranking/rewards define the current build. AI coaching, advanced personalization, reviews, social sharing, and expanded community remain future concepts.

Discovery supports two intents: search for someone who already knows what they want, and category browsing for someone looking for guidance or inspiration. Challenge cards preview the commitment; Challenge Detail makes duration, difficulty, requirements, format, cost, rules, and rewards legible before joining.

Research-informed product scope

Three core flows define the MVP

  1. 01

    Registration

    Create an account, enter or skip initial preferences, and reach the Home experience.

  2. 02

    Find and join

    Search or browse, evaluate Challenge Detail, join, and locate the challenge in My Challenges.

  3. 03

    Track progress

    Open an active challenge, log progress, review status and ranking, and locate rewards or support.

Fitropolis discovery flow for searching or browsing, evaluating, joining, and locating an active challenge
Search and category browsing support different intents before both routes converge on Challenge Detail and joining.
Original Fitropolis progress-review flow from My Challenges to an active challenge, guidance, and ranking
Original progress-review flow: open My Challenges, inspect an active challenge, then explore guidance or ranking. The AI instructor shown in this concept is deferred; the new interaction study below develops the missing first-record step.
Decision 02

Joining changed the hierarchy from evaluation to action

Before joining, someone needs duration, difficulty, requirements, rules, format, and reward. After joining, the same challenge becomes an active commitment: current progress, next action, daily task, ranking, reward milestone, and support should lead.

I designed separate Challenge Detail and Joined Challenge Detail states. Supporting information remains available after joining, but no longer leads the hierarchy. This keeps the first post-join action visible and gives the product a clear state change to validate.

Fitropolis information architecture connecting discovery, challenge evaluation, active challenges, progress, and support
Original concept map, including deferred AI coaching, reviews, and subscription branches. The current MVP prioritizes the scoped join-and-track lifecycle.
From structure to interface

From information hierarchy to high-fidelity mobile states

Fitropolis wireframes for Home, Profile, Challenge Detail, and Joined Challenge Detail
The wireframes distinguish pre-join evaluation from active progress tracking.
Wireframes

Wireframes separated evaluation and tracking

Low-fidelity Home, Profile, Challenge Detail, and Joined Challenge Detail screens established content priority before visual styling.

Fitropolis high-fidelity Home, Profile, Challenge Detail, and Joined Challenge Detail interfaces
Concept screens share navigation and cards while changing priority after joining. Interface content, review counts, and completion figures are illustrative sample data, not product outcomes.
High-fidelity UI

High-fidelity UI makes the state change visible

The high-fidelity system preserves shared components while changing hierarchy after someone joins.

Fitropolis DEMO / 01
Interaction exploration
Challenge detail
Beginner friendly 7 days

Walk it out

A low-pressure daily walk to build a consistent habit with a little community accountability.

Daily target
2 mi
Total goal
14 mi
Format
Solo + community
Step 1 of 3: review a challenge before joining.

Playable prototype · sample values only

New design exploration · October 2026

Make the state change do the explaining.

A compact interaction study for the join-and-track lifecycle. Each transition answers the question the user has at that moment, while the phone UI keeps the action close at hand.

  1. 01

    Evaluate first

    Duration, effort, and format are visible before the join decision.

  2. 02

    Orient after joining

    An honest empty state names the next action instead of implying progress that has not happened.

  3. 03

    Reward the first signal

    Validation, recovery, and a single progress update make the first log feel safe and consequential.

Watch the interaction walkthrough

Recorded from this new exploration: join a challenge, log a walk, recover from a save error, and see progress update. No audio; illustrative data.

Scope of this exploration

Illustrative data · not a shipped product or user-test result

This interaction runs locally in the page. It sends no data, calls no external service, and stores no personal information.

Decision 03

Competition needed a supportive counterpart

Leaderboards can create accountability, but research indicated that competition alone could discourage beginners. I designed multiple progress signals: personal completion, individual and team formats, ranking for people motivated by comparison, rewards and milestones, and community entry points for support.

The active state prioritizes personal progress and the next action before broader rankings. Competition is one motivator, not the definition of success.

Original Fitropolis concept showing progress, ranking, and community support
Original concept: personal progress sits alongside ranking and support. Training and review concepts extend beyond the MVP; displayed counts, ratings, and activity values are sample UI content, not measured outcomes.
In practice

The system makes progress visible and actionable

I built the mobile system in Figma with warm orange accents for action, progress, and reward; rounded cards for challenge modules; consistent bottom navigation; clear metric hierarchy; repeated challenge-state components; progress bars and charts; and compact ranking and reward patterns.

Home supports daily progress and discovery. Profile records current challenges and achievements. Challenge Detail supports evaluation, while Joined Challenge Detail prioritizes active progress. The system keeps those screens related without giving every state the same hierarchy.

The mobile UI system

The mobile UI system in context

Fitropolis challenge evaluation interface in an angled device mockup with separated information panels
Challenge information and the join action in the original device mockup. Counts and reviews are sample content; reviews remain outside the MVP.
Fitropolis Home and Profile mockup showing daily goals, challenge discovery, and achievement modules
Home and Profile connect daily goals, discovery, and achievements through repeated cards and navigation. Original concept with illustrative activity data.
In practice

Design and development are progressing together

I own research synthesis, product scope, UX architecture, user flows, wireframes, the Figma prototype, high-fidelity UI, the design system, developer handoff, and design QA. My engineering partner owns implementation and contributes technical-feasibility feedback.

The Fitropolis MVP is in active development and not yet launched. Future concepts such as AI coaching and advanced personalization remain outside the MVP until the core join-and-track lifecycle is validated.

In practice

What I learned

The strongest product decision was reducing scope. A broad fitness platform could contain many attractive features, but it would not reveal whether the challenge lifecycle was understandable or motivating.

Separating evaluation from active tracking created a clearer product structure, a more focused MVP, and a testable pre-launch hypothesis. The UI system supports that decision by making current state, progress, and next action visible.

NEXT PROJECTS

See all WORKS
See all WORKS
Choice mobile commerce interface system shown across product, cart, and checkout screens
Product Design
Designing continuity across a mobile commerce journey
Numi Tea concept identity and packaging preview
Visual Design
Numi Tea rebrand
Product Design
UX/UI Design
Visual Design
Product Design
UX/UI Design
Visual Design