Category
App Design
Client
H&N Research
Year
July,2025 - Present
70%
Yearly plan adoption over monthly
50+
Screens shipped from one design system
<6mo
From concept to first paying customers
Introduction
H&N Research is a health-focused iOS app that helps users track vitals, log meals, and scan food using AI. As the sole product designer, I owned the full lifecycle: research, information architecture, design system, and 50+ screens shipped across light and dark modes.
Project Under NDA
Certain aspects of this project are under NDA. While visual assets are restricted, I am happy to discuss my design process, technical decisions, and the high-level impact over a call. This case study is currently being updated with additional visuals and details. Apologies for the inconvenience
The Challenge
No existing design system. No component library. No documentation. The product needed to support multiple complex features (health tracking, AI scanning, meal logging, onboarding) while maintaining visual consistency across light and dark themes. Everything had to be built from scratch, by one designer.
How I Approached It
The design process involved several key stages:
Research
Ideation
Launch
Understanding the Users
I created two personas representing core user groups: a patient managing a chronic kidney condition, and a health-conscious professional tracking daily wellness. A SWOT analysis mapped competitive positioning and informed feature priorities.
Mapping the Product
Before designing any screens, I mapped flow in the app: onboarding, home dashboard, meals, health tracking, settings, and global modals. This gave the dev team full visibility into scope and kept the design work structured.
Building the Foundation
Primitive Tokens
48 raw color values organized into scaled groups (Core, Red, Green, Blue, Gold, Alpha) from 100 to 800. These are the building blocks that everything else references.
Semantic Mapping
52 mapped variables with Light and Dark mode columns. Every UI element points to a named token like "btn/Primary/bg-active" or "Sentiment/negative" instead of a hardcoded hex value. Switch modes, and every screen updates automatically.
Components
Reusable components built with full state coverage. Input fields alone cover 8 states: empty, placeholder, with icon, active, error, and dark variants. Every component is tokenized and ready for handoff.
Bringing It Together
The entire UI runs on mapped variables. One system, two themes, zero duplication.
Reflection
System First, Screens Second
Investing time in tokens and components upfront made everything after it faster.
Constraints Drive Creativity
Being the only designer meant every decision had to be intentional and scalable.
Design for Handoff, Not Just Figma
Named variables and documented states made the dev team's life significantly easier.
