Transforming a Legacy Health Analytics Platform - 2 rebrands, one foundation

Team

Design owner working with a PM and 2 Engineers, who come from the acquired company - APH

Skills

Data visualization, design system, wireframe, UX Copy

Theme

Health and wellness, data visualization, healthcare analytics, rebranding, dashboards

My responsibility
I worked on a fast-turnaround dashboard interface project, focusing on clarity, visual hierarchy, and scalable UI components. Within a 1-month time constraint, I was responsible for the design system and full platform redesign. It taught me to balance urgency with interface consistency and address scalability and branding.

  1. Design audit

  2. Define the design goal, given the business goal

  3. Create design system documentation with spec for handoff

  4. Design QA

Product goal

Health analytics dashboards so hospitals and employers can assess members’ health spending through robust offerings of reporting

Update legacy to modern interface

Business goal

Create a consistent experience for this newly acquired company with the main product line. Keep customer retention high for the existing customers

 1. Design audit

My goal was to rebrand the full platform, and nothing else was asked specifically. The business wanted to quickly rebrand it to retain customers from this acquired company. The long-term plan was unknown. By talking to the PM, I learned more about the user and the product value to help inform me about the context.

My first step was to audit the old platform, which includes 30+ pages to identify UI and usability issues. After it, I shared my markups with our team to address design needs and my design plan, which means taking initiatives to improve UX and develop a design system.

Problem

Legacy product that has no design system. It uses legacy code, old design patterns, and is not responsive.

Who are the users?

Hospital and employers; roles could be Claims Manager, Health Counselor, HR


User goal: analyze large medical datasets to identify patients/employees patterns, therapeutic targets, cost, and risk factors.

Design goal: to create visual alignment and modern interface based on our new branding guideline while improving UX for usability.

 

2. Design transformation

Log-in screen

Before

Problems:

  1. Ok and Reset Password alignment is awkward because Reset Password should be closer with the Password field

  2. No hierarchy between the two CTA, and OK button on the left side interrupts with the login flow

After

Improvements

  1. Center align content and title to the page

  2. Changed the CTA placement for better clarity and visual alignment

  3. Change “OK” button to “Enter” and highlight as the primary button in the center for a smooth interaction flow

Main Dashboard

Before

 

Problems:

  1. Sidebar - each pages have the underlines, which can confuse users as they don’t know which page it’s on

  2. Too much white space on a desktop view; web is not responsive

  3. Redundant info in the graph header

  4. The title’s text size is small on the sidebar

  5. Visual looks outdated and inconsistent

    1. inconsistent corner radius, border colors

    2. inconsistent spacing

    3. Gradient background

After

Improvements

  1. Redesign states in the sidebar menu
    regular state and active state to make it clear which page it’s active

  2. Propose fluid layout to accommodate different devices and be responsive
    Make the sidebar fixed in width; Make the main content area to fill the page ; min-width of the graph container: 470px

  3. Combine double titles into a title link to remove redundant info

  4. Increase base text to 14px

Monthly Dashboard

Before

 

Problems:

  1. Complicated menu

  2. Bad accessibility of the status colors

  3. The border of the title can be confused as a clickable button

After

Improvements

  1. Add a calendar icon to help user recognize that it will open a calendar picker view

  2. Update the status colors to meet accessibility

  3. Remove the border of the header

 3. Design System documentation

Because the platform has so many different types of graphs, I decided that it was necessary to create a design system to make the best plan for the visual hierarchy and clarity.

Initially, I used the rebrand style guide (main product) for color inspiration and alignment.

This documentation not only serves as a reference book for the engineers, but also helps the team to stay on the same page with rebranding.

 

 That left us with …

Ending a successful collaboration with the PM and ENG

“clear documentation from the designer helps the team move efficiently and bring clarity.”

A boost in customer satisfaction that ended with a 93% customer renewal rate


“They love it!” “They found it easy to use and had a good impression of the brand.” 93% customer renewal


Ramped up the 2nd rebranding with my design system as the foundation

It was a surprise when we learned a second rebranding was coming. But because we had this design system, we were able to quickly rebrand it this time by just plugging in the primary and secondary colors