Bringing Scalability and Accessibility Through Atomic Design

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.

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.

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.

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:

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.

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.

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.