Healthcare UI and Design System – Relay Health
Fuse is a wire data and analytics monitoring product built for Relay Health, a McKesson subsidiary, to standardize the way healthcare data messages are transmitted and tracked across systems. The backend had been in development for six months when two UX designers — myself and one other — were brought in to design the entire front end before the initial release.
The constraint was significant: a complex analytics product, a live backend, and an existing Bootstrap implementation to work within. The deliverable wasn’t just screens — it included specs, custom CSS, an HTML-based style guide, and a component library for future design and development teams.
Project Details
Client Relay Health (McKesson)
Product Fuse
Tools InDesign, Sketch, Illustrator, Bootstrap, HTML, CSS
My Role UX Designer (one of two on the project)
My Contribution UI direction, interaction design, specifications, custom CSS delivery, HTML style guide, and template and component library for future teams.
Starting point
The starting point was a review of wireframes created by a previous designer before the backend was built, alongside the current Bootstrap implementation. Understanding the gap between those two artifacts — what had been planned and what had actually been built — defined the scope of what needed to be designed.
UI direction
Working within the Bootstrap framework, I explored three distinct UI directions — each varying both the navigation model and the way core content was organized and presented. The options were evaluated against the product’s use cases and end-user needs, with research into healthcare data workflows informing the decisions throughout.
Later iterations merged the strongest elements of each direction into a final approved design.
Specifications
With the UI direction approved, I created detailed specifications for the custom navigation and responsive interface. These were handed directly to the development team as the source of truth for building the product.
Custom CSS and Style Guide
Alongside the specifications, I delivered custom CSS — compiled by the development team as a LESS file — that transformed the default Bootstrap framework into a visually distinct, product-specific interface.
I also created an HTML-based style guide: a living reference document that captured all custom styles, so that future features built on top of the product would look consistent without requiring designers to re-spec from scratch. For a product expecting ongoing development across multiple application teams, this was a critical foundation.
Custom Components
Several aspects of the analytics product required components that didn’t exist in Bootstrap out of the box. I designed these to match the specific use cases of the product:
- Responsive data table with a configurable toolbar
- Table-level filter
- Time and date range picker
Each was designed to be reusable and handed to the development team for implementation.
Template and component library
Future designers working on new features needed a starting point that matched what had been built in code. I created a high-fidelity template in both InDesign and Sketch — with master pages and style sheets — so designers could work at speed without reinventing the visual foundation.
To make components accessible without leaving the design tool, I built out the Adobe Creative Cloud Library and Craft Library with all colors, styles, and components. Designers could drag and drop components directly onto the template and produce high-fidelity branded wireframes or walkthroughs quickly.
Application walkthroughs
Fuse was structured as a suite of applications, each owned by a separate product team. I created detailed walkthroughs for two of those applications — stepping through the user story for each and handing the flows to the respective development teams for implementation.
Iteration and testing
In an agile product environment, design doesn’t end at handoff. As the product was built and tested, new requirements surfaced and features were refined. Later-stage work included a dashboard with data visualizations, a secondary navigation pattern, a status display, and a database selector — each going through design, testing, and iteration before reaching its final form.
Conclusion
Fuse shipped for Relay Health before its initial release deadline. The CSS, style guide, and component library delivered alongside the UI meant the development team had what they needed to build consistently — and future design and development teams had a foundation to extend the product without starting from scratch.