CLIENT
PH-LIFT, A National Platform Supporting 3,000+ Local And 50 State Health Departments By Centralizing Public Health Data, Delivering Insights To Guide Decisions And Improve Community Health.
TEAM
Project Manager
Data Specialist
UX Designer
QA Tester
Developers (2)
SERVICES
Design System
UX / UI Design
Rapid Prototyping
Interactive Data
STACK
FigJam
Figma
Google Sheet
Chart.js
Dovetail
STATUS
Under Development
Challenge
Design systems thrive where clarity and trust are critical especially in public health.
For PH-LIFT, we needed a scalable foundation to support data-heavy interfaces for researchers, policymakers, and health professionals, while accommodating complex visualizations and future growth.
My Role
As Lead Designer, I created the PHL Design System from scratch with my team and client, defining a visual language that unifies the platform’s experience.
Key contributions:
Defined reusable components and UI patterns that gave system more flexibility.
Translated low-fidelity wireframes into polished templates rooted in the new system.
Built interactive prototypes to demonstrate core user flows and facilitate feedback.
Developed accessible visualization standards beyond PH-LIFT’s core brand palette.
Created thorough documentation outlining component behavior, usage rules, and design rationale.
Research & Insights
We kicked off the project by interviewing stakeholders and potential users. These sessions helped us uncover how different teams might engage with the tool and what their priorities were.
In parallel, I reviewed existing public health data platforms and design systems from adjacent data-heavy industries to learn from proven patterns and avoid common pitfalls.
The research surfaced several foundational needs, including:
The system had to support varying levels of digital literacy and prioritize accessibility at every layer.
Visualizing data had to move beyond basic charts insights needed to be clear and decision-ready.
The design system had to express the new brand without compromising function or scalability.
These insights shaped a system built for accessibility, modularity, and real-world utility across roles.
Design & Testing
I started by compiling a detailed UI inventory sheet that outlined every necessary components and define their behavior.
Next, I established the visual elements, including accessible color palettes, typographic hierarchy, grid systems, and spacing rules, all aligned with PH-LIFT’s brand.
Then, I began with foundational UI components (buttons, inputs, labels, tooltips), then advanced to complex data modules responsive tables, filters, and comparison graphs views designed to reflect Chart.js-driven elements that we decided to use in development stage to represent all data in front-end.
Every component including those requiring micro-interactions was documented with clear usage guidelines.
Designs were tested via interactive prototypes with internal teams and decision-makers. Task-based testing helped validate real-world flows and ensured the system supported both intuitive use and efficient data exploration.
Solution
A robust and scalable design system now anchors PH-LIFT’s experience. It’s thoughtfully designed to feel clear, cohesive, and deeply human across every product touchpoint and interaction.
Results & Impact
While the product is still in development, early outcomes show clear benefits:
Users completed workflows like comparing data or exporting reports with ease
Stakeholders praised the system as clean, intuitive, and a strong reflection of the new PHL brand.
Team collaboration improved, with the shared design language enabling faster iteration, and smarter testing.
Retrospective
A key lesson was the challenge of designing components that serve both dense analytic views and broader public-facing content. It required deep collaboration with data specialists and thoughtful iteration.
Designing for public health comes with weight. Accessibility wasn’t a checklist item it was the backbone of every design decision.