⚠️

This portfolio is optimized for larger devices. A minimum screen width of 1280px is recommended.

A serene digital workspace with a mobile phone displaying the Honeycomb Health app. The phone is centered, surrounded by soft, calming colors and abstract shapes. The background is minimalistic, emphasizing the app's interface. Mobile screen of the redesigned Honeycomb Health app

Redesigning Honeycomb Health’s Mobile App

Giving rare disease patients a better way to manage their health data through a mobile-first experience. I reimagined their app from a clunky webview into a clean, accessible native app — with intuitive navigation, optimized forms, and a calm, trustworthy UI.

Mobile screen of the redesigned Honeycomb Health app

Project Overview

  • Client: Honeycomb Health (freelance collaboration)
  • Role: UX/UI Designer
  • Focus: Native mobile app design (iOS & Android)

Honeycomb Health is on a mission to support people living with rare diseases by giving them secure, portable access to their medical records — anytime, anywhere. Their mobile app is central to that vision. But instead of a true native experience, users were being served a mobile webview of the website, resulting in serious usability issues and low adoption.

The Challenge

Rare disease patients already carry the emotional and logistical weight of managing fragmented care. Their health app should ease that burden — not add to it.
But Honeycomb’s original app was:

  • Just a webview of the desktop site, lacking any mobile-native interactions
  • Burdened with long, complex forms requiring awkward horizontal and vertical scrolling
  • Not aligned with mobile UX best practices, particularly in terms of navigation and form usability
  • Missing clear onboarding, causing confusion on first use
  • Visually disconnected from modern app standards, impacting trust and perception

My goal was to transform this into a clean, accessible native app that truly served the needs of rare disease patients.

Screens flow of a rare disease patient using the Honeycomb Health app, with icons, arrows, and annotations. The environment is a clean digital workspace. No visible text.
A rare disease patient’s flow using the Honeycomb Health app

Design Goals

  • Transform the experience from a clunky webview into a streamlined, native app
  • Redesign the forms with mobile-first best practices (such as chunking, progress indicators, input optimization)
  • Define a clear and calm visual design system aligned with the mission
  • Build intuitive navigation and screen flows tailored for mobile
  • Add onboarding and app store assets to increase clarity and downloads
Six mobile screens from the Honeycomb Health app showing the process of adding and managing allergies. Screens display a searchable list of allergies, detailed input forms for allergy information, and a summary of selected allergies. The interface uses a clean, modern design with soft colors and rounded elements. Visible text includes Add allergies, Search, Eggs, Tree nuts, Shellfish, Soy, Wheat, Cephalosporins, Intravenous contrast dye, Save and Close, Discard and close, Your allergies, Add/Edit, Account, Your full name, Mobile number, Your email, Username, Change your password, and other form labels. The emotional tone is calm, accessible, and reassuring, supporting users in managing sensitive health information.
Screens from the new Honeycomb Health app showing the process of adding allergies.

UX Process

1. UX Audit & Flow Mapping
I conducted a full UX audit of the current web-based app, identifying friction points and gaps in usability. I then mapped key flows — from onboarding to form completion — to restructure the experience around user needs and device capabilities.

2. Mobile-Optimized Form Design
Given the app’s heavy reliance on data entry, I applied best practices for long forms on mobile:

  • Chunked forms into digestible steps
  • Added visual progress indicators
  • Grouped related fields together
  • Used native input types (e.g., date pickers, toggles) to reduce errors and friction

3. UI Redesign & Design System
Created a new visual language for the app — simple, accessible, and calming — supporting the serious nature of health data while feeling user-friendly and safe. Focus was on:

  • Accessible color contrast and clarity
  • Consistent type sizes for readability
  • Clear calls to action (CTAs) that guide users through tasks
  • Reusable components and iconography for consistency

4. Onboarding & App Store Screens
Designed a light onboarding flow to clearly explain the app’s value. Also created a set of polished app store screenshots with messaging tailored to Honeycomb’s mission and audience.

Eight screens from the Honeycomb Health app showing the onboarding process. Screens display a welcome message, an explanation of the app's purpose, and steps to set up an account. The interface uses a clean, modern design with soft colors and rounded elements. Visible text includes Welcome to Honeycomb Health, Your health data in your hands, Sign up to get started, and other onboarding instructions. The emotional tone is calm, accessible, and reassuring, supporting users in understanding the app's value.
A light onboarding flow was introduced to explain the app’s value

Before vs. After Highlights

Here’s a quick comparison of the original app experience versus the redesigned version. The app is now more user-friendly, visually appealing, and optimized for mobile use.

Before After
Navigation Confusing, webview-style navigation, hard to tap Tab-based, contextual navigation optimized for thumb use
Forms Scroll-heavy, no guidance Step-by-step, mobile-friendly fields
Visual Design Generic, dated webview look Clean, calming, branded UI
Onboarding None Purpose-driven walkthrough
App Store Assets Uninspired screenshots with no context Polished, informative screenshots showcasing key features
Trust Low visual credibility Stronger UX = higher trust
A side-by-side comparison of the Honeycomb Health app before and after the redesign. The left side shows the original app with a cluttered, webview-style interface, long forms requiring horizontal scrolling, and a generic visual design. The right side displays the redesigned app with a clean, modern layout, mobile-optimized forms with step-by-step guidance, and a calming color palette. The emotional tone is transformed from confusing and overwhelming to clear and user-friendly.
A side-by-side comparison of the Honeycomb Health app before and after the redesign
A set of app store screenshots for the Honeycomb Health app, showcasing the redesigned onboarding process, mobile-optimized forms, and new visual design. The images highlight key features such as easy account setup, intuitive navigation, and a calming color palette. The emotional tone is inviting and reassuring, emphasizing the app's user-friendly experience.
A set of app store screenshots for the Honeycomb Health app

Outcome

While the app was in its MVP phase during the redesign, the result was a fully native mobile experience ready for testing and launch — offering rare disease patients a portable, usable, and empowering way to own and manage their health data.

Ready to talk?

Yes! Connect on LinkedIn Not yet, see next project