PRODUCTIVITY · MOBILE · 6 WEEKS

Build your
momentum.

UXVitals designed Momentum — a productivity companion that turns everyday tasks into a journey worth showing up for, with gamified streaks, a friendly capybara mascot, and progress you can actually feel.

SERVICES
UX Research · UI Design
PLATFORM
iOS · Dark Mode
TIMELINE
6 Weeks
UX AUDIT — MOMENTUM APP
29
/100
Pre-Design
Engagement Score
Emotional Feedback
18%
Progress Visibility
24%
Streak Motivation
31%
Onboarding Clarity
38%
Focus Mode UX
22%

No emotional rewards Progress buried in lists Cold, transactional UI Strong brand opportunity Clear user motivation
01 ABOUT THE PROJECT

Most apps treat productivity like a checklist. Momentum treats it like a story.

People don't abandon their goals because they're lazy — they abandon them because progress feels invisible. Momentum was designed around a single belief: when you can see and feel your consistency building, you keep showing up.

Meet Momo, a calm capybara companion who turns streaks, focus sessions and milestones into moments worth celebrating — without ever feeling loud or gimmicky.

The Problem

Productivity tools feel cold and transactional. Progress is buried in lists, motivation fades, and there's no emotional reward for staying consistent.

The Solution

A momentum score, visible streaks, and celebratory milestones — wrapped in a warm companion experience that makes every small win feel earned.

The Approach

Research the drop-off, define the emotional hooks, prototype the dashboard, and pressure-test a reusable dark-mode system across every screen.

01Discover
02Define
03Prototype
04Design System
05Polish & Deliver
02 UXVITALS PROCESS

Diagnose. Design. Validate.

Our three-tier methodology applied to Momentum — starting with a forensic audit of drop-off points, then designing from the friction outward, validating at every milestone.

🔬
DIAGNOSE

Engagement Audit + Drop-Off Mapping

Audited the existing app's task completion, streak abandonment rate, and emotional feedback absence. Interviewed 10 users to identify the exact moment motivation collapsed.

✏️
DESIGN

Emotional Architecture + Dark Mode System

Designed the momentum score gauge, streak visualisation, and Momo companion interactions. Built a comprehensive dark-mode design system — tokens, components, and motion guidelines.

VALIDATE

Prototype Testing + Handoff

Two usability test rounds (5 users each). Iterated on the momentum gauge legibility, Momo celebration timing, and focus-mode entry. Delivered a developer-ready Figma spec.

03 USER PERSONA
A
Alex Parker
LEVEL 12
Freelance Designer · 27

"I don't need another to-do list. I need a reason to keep going."

14d
Avg. streak
5
Apps juggled daily
GOALS
  • Stay consistent without burning out
  • See real proof that effort compounds
  • Protect deep-focus time from chaos
FRUSTRATIONS
  • Motivation crashes after a few good days
  • Progress is invisible inside endless lists
NEEDS
  • Emotional feedback, not just data
  • A glanceable sense of "am I winning?"
04 COLOR PALETTE

Energetic green on near-black, with signal colors that map to effort.

UXVitals rationale: the green-on-void pairing keeps eyes fresh through long focus sessions; signal colors (orange = hard, yellow = medium, green = easy) create instant cognitive mapping for task difficulty.

PRIMARY
Momentum Green
#9BE94B
VOID / BASE
Void Black
#06080A
Effort Orange
#F97316
Hard tasks · warnings
Focus Yellow
#EAB308
Medium tasks · alerts
Calm Blue
#3B82F6
Needs · data · info
Milestone Purple
#A855F7
Achievements · Momo
#06080A
#0A0F0C
#0C1110
#161C17
#2A3329
05 TYPOGRAPHY
Aa
Space Grotesk
Display & headings. Geometric, confident, slightly technical — it carries the numbers in the momentum gauge and every screen title.
400 500 600 700
Good Morning, Alex
Track your growth and celebrate wins.
BODY · PLUS JAKARTA SANS
A clean humanist sans for everything you read and tap. Friendly enough for Momo's encouragement, neutral enough for dense stats.
Regular
The quick capybara
Semibold
The quick capybara
Extrabold
The quick capybara
06 LAYOUT GRID

A 4-column structure with a 24px safe margin keeps every screen breathing.

Mobile-first, tight but generous — the grid creates consistent rhythm from the home dashboard to the focus-session timer without ever feeling cramped.

4
Columns
24px
Safe margin
16px
Gutter
8pt
Spacing base
RADII Chips 8 · Buttons 16 · Cards 22 · Sheets 26
07 COMPONENTS & CARDS

A small kit of reusable surfaces — rebuilt here from the live UI.

Every component carries an intentional emotional weight: the gauge creates pride, the stat card builds evidence, the difficulty pills create agency.

112
Tasks Completed
↑ 34 more
vs last month
STAT CARD
MOMENTUM
84
Momentum
PROGRESS GAUGE
Finish SaaS Landing Page
● Hard ◷ 90 min
DIFFICULTY PILLS & BUTTON
Easy Medium Hard ▶ Start Focus
DIFFICULTY PILLS & BUTTON
08 THE SCREENS

Four core surfaces, one consistent rhythm of warmth and data.

Every screen follows the same emotional arc: orient → motivate → act. Dark backgrounds recede; the green accent and Momo always lead the eye to what matters next.

🏠
Home Dashboard
Momentum gauge · today's streak
Task List
Difficulty pills · quick start
Focus Mode
Timer · Momo companion
🏆
Milestones
Streaks · badges · history
09 VALIDATED OUTCOMES

The numbers after testing.

Post-prototype usability results measured against the pre-audit baseline. Two test rounds, 5 users each — statistically consistent improvements across all engagement and retention signals.

+83%
Emotional satisfaction
with progress feedback
–61%
Day-3 abandonment
rate in prototype
3.7×
More focus sessions
started per session
96%
Users said Momo felt
"motivating, not annoying"