Designing PocketHealth: A Solo Case Study on Crafting a Medical Dashboard from Identity to UI/UX
DESIGN

When tackling a product in the health-tech sector, the stakes are exceptionally high. The interface must not only be clean and modern but must also evoke deep trust, clarity, and accessibility. Recently, as the design lead for PocketHealth, I took on the challenge of building this product completely solo.
Managing a comprehensive healthcare project independently meant wearing multiple hats simultaneously. I was responsible for everything: from establishing the initial brand identity to architecting the entire end-to-end user experience and solving complex data visualization challenges.
Reflecting on the final implementation seen in "Dashboard.jpg", here is a look behind the curtain of how this standalone design journey unfolded.
1. Crafting the Brand Identity: Establishing Trust and Empathy
Working independently allowed me to ensure that the visual identity perfectly translated into the final interface components without any dilution.
Logo & Typography: I designed a clean, approachable wordmark for PocketHealth, integrating a soft medical cross element into the typography. The goal was to move away from cold, sterile clinical branding toward a warmer, more human-centric healthcare experience.
The Color Strategy: I selected a vibrant, trustworthy color palette dominated by high-energy blues and comforting purples. This deliberate gradient approach injects life into the interface, keeping it professional yet visually engaging for patients who might be managing stressful health situations.
Cohesive Iconography: I custom-built a set of rounded, friendly icons—such as the clipboard, pill bottle, and medical shield—using distinct background hues (purple, blue, pink) to visually categorize data categories before a user even reads the text.
2. Architecting the Layout & Information Hierarchy
As a solo designer, the biggest hurdle is managing cognitive load. Medical dashboards can easily become cluttered with endless rows of numbers and medical jargon. I structured the "Dashboard.jpg" interface into clear, scannable priority zones based on immediate patient needs.
The Immediate Action Zone (The Hero Banner)
The most critical task for a telehealth patient is knowing when and how to see their doctor. I placed a prominent, high-contrast purple banner right at the top. It features a welcoming avatar of the physician, explicit appointment details ("Dr. Sarah Chen - Cardiology"), and an unmistakable, high-contrast "Join now" call-to-action button anchored with a real-time countdown clock.
The Daily Management Zone (Left Pillar)
Directly under the hero section, the left column acts as the patient's daily checklist. I designed a dedicated "Medication Reminders" widget that functions like an intuitive to-do list. Each medication card features clear dosing schedules (e.g., "Daily • With Breakfast") paired with straightforward interactive checkboxes. I also added a bright pink, micro-copy pill notification ("REFILL SOON: 1") to create subtle urgency for critical prescription renewals.
The Diagnostic Tracking Zone (Right Pillar)
The right side handles historical and long-term data. The "Vitals Trend" section presents blood pressure and pulse rate tracking over a 30-day period. Instead of a harsh, intimidating medical chart, I transformed it into a soft, smooth gradient area graph that looks elegant while remaining perfectly readable, supported by clear average numeric metrics below the canvas.
3. Resolving Complex UI/UX Challenges Solo
Owning the entire design lifecycle meant diagnosing and solving UX friction points entirely through self-driven iteration and rigorous design validation.
Problem 1: Maximizing Viewport Real Estate on Smaller Screens
The Challenge: Medical dashboards have to display massive data volumes, but cramming everything onto a static screen causes severe cognitive fatigue.
The UX Solution: I implemented a highly interactive, collapsible left navigation sidebar. As seen in "Dashboard.jpg", the sidebar features a small toggle chevron. This allows patients to collapse the menu entirely, giving the data widgets maximum screen real estate when tracking complex medical trends.
Problem 2: Designing for Digital Health Accessibility (WCAG Compliance)
The Challenge: Healthcare platforms cater to diverse demographics, including elderly users or individuals with visual impairments.
The UI Solution: I deliberately utilized large font sizes for primary status headers and ensured all critical data badges (like the pink indicator on Metformin) use distinct geometric shapes alongside color to convey state. The profile anchor at the bottom left clearly displays the patient's full name ("Maria Gonzalez") and unique ID number in high-contrast text, making administrative verification effortless.
4. Retrospective: The Power of Independent Design Ownership
Stepping back and looking at the fully implemented "Dashboard.jpg", this project proved to me that executing an entire design cycle solo yields an incredibly cohesive product experience. When a single designer owns both the strategic branding and the tactical UI pixel-pushing, the product maintains a seamless visual narrative throughout.
PocketHealth successfully balances the sterile requirements of clinical data tracking with the warm, accessible requirements of consumer SaaS design. It is an intuitive digital companion that empowers patients to take control of their health journeys with absolute confidence.
Designing PocketHealth: A Solo Case Study on Crafting a Medical Dashboard from Identity to UI/UX
Ui/Ux design
Product Design