Featured Case Study
Vitality
Health Score Tracking App — UX/UI Case Study
A premium mobile & desktop command center that translates complex biomarker and fitness data into a unified, actionable biological score.
- Role
- Lead UX/UI Designer
- Duration
- 8 Weeks (2026)
- Tools
- Figma, ProtoPie, Tailwind
VITALITY
Today's Analysis
Saturday, October 12
Your cardiovascular tone is excellent today
The Challenge
Modern health tracking apps overwhelm users with fragmented data points. Sleep graphs, daily steps, and nutrition logs compete for focus, without telling a coherent story of how the user actually feels.
Our core objective was to design a clean experience that aggregates complex biomarkers into a single normalized Vitality Score, promoting consistent daily engagement without tracking fatigue.
The Solution
We built an elegant circadian-responsive interface centered around a dynamic biological ring. Users get a real-time, gamified summary of their physical preparedness alongside simplified data logs.
The app adjusts color spaces based on current recovery phases, offering ambient feedback that matches natural daily light shifts.
Methodology
Design Process
01
Discovery
User interviews with 24 biohacking and health enthusiasts to map primary needs.
02
Information Architecture
Translating medical inputs and API metrics into simple index ratings.
03
Visual Design
Crafting beautiful glass-morphic dial states, glowing gauges, and dark theme variables.
04
Usability Testing
Tactile evaluation of keypad size, finger target zones, and numeric layouts.
Structure
From Sketches to Structure
Low-fidelity gray-box structures validated dial placement and information hierarchy before the circadian color system and glass-morphic surfaces were layered in — validated across both the mobile app and the desktop command-center breakpoint.
Mobile Dashboard
VITALITY
Today's Analysis
Saturday, October 12
Your cardiovascular tone is excellent today
Circular progress chart serves as the central focal point showing the normalized health index score; status badge delivers contextual balance rating; tracking rows break down individual driver indices.
Desktop Command Center
VITALITY
- Overview
- Activity Logs
- Biometrics
- Profile
- Settings
Guest User
Premium Member
Health Command Center
Consolidated analytics and biometrics review
Oct 12, 2026
Live Health Indicators
Active Energy
642 kcal
Resting Heart Rate
58 bpm
Core System Recovery
94 %
Global Vitality Score
Your cardiovascular status ranks in the 91st percentile
Sidebar navigation anchors the five core sections; the live-indicator row and global score panel keep the most decision-relevant data above the fold.
Design System
Visual Identity
Circadian Spectrum Palette
Midnight Indigo
Dashboard Primary
Rose Recovery
Low Preparedness
Olive Health
Peak Recovery
Circadian Gold
Secondary Accents
Dark Slate
Canvas Base
Typography
Instrument Serif
Used for prominent display scoring, main headings, and project highlights.
Geist Sans
Standard interface copy, labels, numerical values, and metadata streams.
Grid & Spacing
4px Baseline Matrix
Consistent spacing structure ensures touch zones meet high accessibility standards.
Modular Grid Transitions
Symmetrical breakpoints maintain visual hierarchy across different screens.
Interfaces
Final Designs
VITALITY
Today's Analysis
Saturday, October 12
Your cardiovascular tone is excellent today
Dashboard — Primary
Deep Indigo visual index
VITALITY
Today's Analysis
Saturday, October 12
Your cardiovascular tone is excellent today
Dashboard — Low Recovery
Rose emergency indicator
VITALITY
Today's Analysis
Saturday, October 12
Your cardiovascular tone is excellent today
Dashboard — Restored
Olive balance validation
VITALITY
- Overview
- Activity Logs
- Biometrics
- Profile
- Settings
Guest User
Premium Member
Health Command Center
Consolidated analytics and biometrics review
Oct 12, 2026
Live Health Indicators
Active Energy
642 kcal
Resting Heart Rate
58 bpm
Core System Recovery
94 %
Global Vitality Score
Your cardiovascular status ranks in the 91st percentile
Desktop — Health Command Center
Consolidated analytics view for the web dashboard
Outcomes
Results
4.8★
App Store Rating
Lauded by biohacking communities for clean design metrics.
62%
Daily Engagement
Industry-leading daily active user ratio compared to generic trackers.
3x
Retention Boost
Threefold improvement in month-over-month user consistency.
Self-initiated conceptual UX/UI project. 'Vitality' is a fictional product created for portfolio demonstration purposes.
