Nova: Healthcare Design System

The Challenge

Through rapid growth and acquisition, our client’s product ecosystem became fragmented. Multiple apps and platforms looked and behaved differently, which led to:

• Inconsistent UI and interaction patterns across systems
• Redundant design and development effort
• Increased complexity for users, especially hospital staff
• Slower product delivery due to lack of shared design language

The challenge with Nova was not just to create a library of UI components but to define a design language that could be embraced across teams and applied consistently back into live product environments.

My Role

I led the design and implementation of Nova, overseeing a team of designers throughout the project. My responsibilities included:

• Defining the vision and strategic roadmap for the system
• Mentoring and guiding designers on research, pattern definition, and component design
• Facilitating design reviews and ensuring quality and consistency
• Driving collaboration between design, product, and development teams

This took the form of managing client relationships with product managers, developers and others, and keeping clear communication going between the teams. We needed to understand the client's problems and needs, and we also needed to make sure our work was delivered in the best way, with clarity around Nova and how to use it.

Research & Discovery

We began by auditing existing products to map recurring UI patterns and behaviours. This pattern inventory gave us a clear picture of what elements were repeated across products (which should be standardised as components) and where inconsistencies caused issues.

From this audit, we identified core interface elements - such as navigation, buttons, and form inputs - and grouped them into logical families. This research ensured that Nova was built upon real user interface needs rather than theoretical ideals.

Strategy & Prioritisation

With research insights in hand, we prioritised component design based on impact and ubiquity:

1. Structural components Focusing on high‑impact elements like main navigation to establish the backbone of the design language.
2. Ubiquitous interactive elements Designing commonly used items such as buttons and form inputs to bring consistency to everyday interactions.

This phased approach ensured teams got value early and could apply the system to core product screens quickly. It also meant that any overarching changes that would have the most impact are done 1st, so the rest of our work is safe.

For instance, once we decided how the main navigation should be structured and created a layout around a vertical nabber at the top, and a secondary sidemen, the structure of most pages would fall under that.

The other components we then defined lived within that layout.

Team Organisation

We were a team of 3 at the time, and we worked on different products most of the time, but sometimes we needed to work on the same one.

Common Patterns in Different Apps

When working on separate apps, every time we found the need for a component or pattern to add or adjust in Nova, we started by adding all the use cases we could find across everything into a dedicated page in the Design System Figma file. We then reviewed it with the whole team.

From there we either added it to Nova, or we made it very clear what we were to explore before the next call.

Organising in the Same APP

When more than 1 person was working on the same application, we needed a way to organise the work between us. For that we divided the work into sections, where we added screenshots of the existing app on the left, and added our equivalent designs to the right.

We also used the section names to add a status and our own initial next to it. For this we used the StatusUp plugin for Figma, as it allowed us to update the statuses on the section names easily, and it also ran a report where we could see the status of each section.

With this method we could always be aware of where we were in the project, and share it with other teams.

Accessibility & Design Principles

Accessibility was core to Nova’s principles. All pages, components, and interactions needed to be accessible and very clear, in particular within the healthcare industry.

All components were designed to meet WCAG AA and AAA compliance standards to ensure usability for a wide range of users - a necessity in healthcare settings where clarity and accessibility are critical.

Beyond technical compliance, we also established interaction rules, such as “only one primary button per page”, to promote clarity and reduce cognitive load.

Initial documentation lived in Storybook for developer reference, but as adoption grew, we transitioned authoritative documentation into Figma so that designers and engineers could access guidance directly within the design workflow.

Component Architecture & Variables

Nova’s components are built on a foundation of organised variables and tokens:

• Primitive variables: Core values (colours, typography, spacing)
• Semantic variables: Logical tokens (e.g., color‑action‑default) that reference primitives
• Mode support: Includes light and dark themes for flexible visual application

Instead of a strict atomic hierarchy, we created configurable components that adapt to multiple contexts. Where components became too complex, we broke them into smaller, composable parts - balancing flexibility with usability.

We published Nova as a Figma library, enabling teams to reuse components and benefit from shared updates.

Visuals to include

Implementation & Collaboration

A pivotal part of Nova’s success came from continuous collaboration with developers and product managers. Rather than treating design and implementation as sequential handoffs, we worked in frequent iterative syncs with engineers. During these sessions, developers would share implementation progress, offer feedback, and highlight technical constraints - which helped refine components in real time and avoid late‑stage rework.

These iterative cycles ensured Nova’s components were not only designed well but also built well, aligning design intent with engineering realities and delivery deadlines.

Impact & Adoption

Nova delivered tangible benefits:

• Consistency: A unified UI language reduced visual and behavioural discrepancies.
• Speed: Teams could reuse components, decreasing design and development time.
• Collaboration: Shared documentation and variables improved cross‑functional alignment.
• Accessibility confidence: Embedded standards ensured accessible experiences by default.

Teams reported faster iteration cycles and fewer alignment issues when adopting Nova - translating into improved product quality and team efficiency.

Key Learnings & Next Steps

Building Nova reinforced that successful design systems are:

• Grounded in real patterns and usage
• Built with close collaboration across disciplines
• Supported by integrated documentation that lives where teams work

Looking ahead, we plan to expand Nova’s library and improve onboarding materials to help new teams adopt the system even more seamlessly.