Bringing Scalability and Accessibility Through Atomic Design

A design system solution for a healthcare product suite plagued by visual inconsistencies violating WCAG accessibility guidelines, and increasing the risk of errors.

Accessibility

Design System

HCI

Overview of the UI elements created as part of the new design system for a healthcare product suite

Background

Products within a healthcare product suite: Same, and yet so different

A typical healthcare product suite comprises an EHR, patient portal, admin portal, medical database software, and billing portals. The most persistent problem plaguing healthcare product suites today is visual and experiential inconsistency. While they may all share a common logo and brand colors, their interfaces and experiences are different from each other.

This lack of standardization in products within the same suit causes a huge impact on the productivity of the product team. It hampers their efficiency and slows down the scaling. For the healthcare business, the absence of standardization comes in the way of maintaining a global ecosystem of digital products with brand consistency.

THE PROBLEM

Who likes healthtech products? No one, really

Every design and development change made to any healthcare product within the suite ends up being long-drawn and complicated due to the absence of a ‘single source of truth’ that drives these processes. The result – healthcare products incur massive technical debt in the long run – which impacts productivity, and the cycle of decline continues.

Additionally, the visual inconsistencies in layouts, fonts, placements, colors, typography, etc. strain the mental faculties of users and increase the possibility of fatal and costly errors.

OUR GOAL

Standardizing experiences across the product suite to make better products, faster

To help product teams design consistent and accessible products based on a pattern library and documentation on how to use the system. This would help speed up product development, ensure scalability, and enhance the user experience.

DESIGN PROCESS

Getting a bird’s eye view of the product

Our design process began with a thorough UX audit, which is an expert assessment of the product’s performance in terms of usability and user experience. It revealed the following issues:

UX Strategy

Creating a unified experience across the product suite

Our UX strategy was focused on finding the right solution to unify appearances across apps, ensure accessibility, meet compliance standards, provide users with a sense of familiarity and ease of use, and save the organization’s time and resources by codifying design decisions to be replicated at scale.

Examples of UI elements used in the healthcare product suite

Design

Building visual consistency, block-by-block

The concept of Atomic Design pairs UX design with the laws of Chemistry to build easily modifiable user interfaces. The best part of Atomic Design is that it allows UI/UX designers to have step-wise control as they create, thus simplifying the interface design and development processes.

Atomic Components

We applied these stages of atomic design to concurrently create final UIs and their underlying design system.
We picked the most essential tasks and workflows to try out the new UI and conducted usability tests to gather early feedback about what was working and what needed further refinement.

Key Highlights

The foundational elements – atoms, molecules, and organisms – were mapped out and customized to see how they best work together and adapted across different screen sizes.

Alt text - Desktop and iPad versions of the UI created using the new design system

Winner of the iF Design Award 2023

User Experience category

The new design system improved UX and cut development costs threefold

IMPACT

  • Improved build time by 34% and 3X savings in development costs, letting the company focus on innovation and rapid scaling to meet user and industry needs in real time.

  • Enabled faster iterations and testing by 24%, thus ensuring smooth roll-outs of new features, consistent removal of legacy codes, and negating design and technical debt.

  • The W3C – AA level certified system ensured accessibility across user groups along with a decline in errors and the need for customized training, and improved delivery of care through enhanced usability.

1500+ healthcare UX projects completed for startups to industry leaders

Check out other HealthTech Projects

AIDiagnosis & TreatmentPersonalized Medicine

Enabling Personalized Care through Digital Twin Technology

Depicting different UI elements of the digital twin module
Outcome TrackingPractice Management

Disrupting the OKR Software Market with a Modern, Minimalist Approach

Snapshot of Ayraa, the minimalist OKR platform’s desktop UI

Ready to Start Up, Scale Up or Streamline Your Healthcare UX?

Schedule a conversation with our UX experts and discover how we can help you design and build faster than you previously thought possible.

koru-logo

FIND US AT

USA

859 Willard Street, Suite 400, Quincy, MA 02169

INDIA

6/8, Kumar City, Kalyaninagar, Pune 411014

Great-place-to-work-award

© 2024 Koru UX Design LLP