Bringing Scalability and Accessibility through Atomic Design

Background

The dozens of apps within a product suite developed by different teams look exceedingly varied from product to product. While they may all share a common logo and brand colors, their interfaces and experiences are divergent from each other.

The most persistent problem plaguing large enterprise product suites today is the lack of consistency. A unified and consistently-designed experience can drive the performance of users and businesses, a quality that is lacking in most enterprise product suites.

Improving design consistency becomes a significant challenge once a company grows beyond 25 employees.

Inconsistencies and the steep learning curves that come with every new software particularly plague the healthcare sector. Complex processes and medical equipment require different software tools to get the job done, and a lack of consistency among them is what causes IT siloes, technical debt, and development hurdles. Not to mention the impact on productivity – the continued strain on the mental model of users hampers clinical decision-making and delivery of care.

Problem Statement

Visual inconsistencies in layouts, fonts, placements, colors, typography, etc. strain the mental faculties of users and increase the possibility of fatal and costly errors. Design and development efforts are long-drawn and complicated due to the absence of a ‘single source of truth’ which drive these processes, and as a result, incur massive technical debt in the long run – which impacts productivity, and the cycle of decline continues.

Goal

Creating a design system to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages.

• Improve consistency
• Ensure visual cohesiveness
• Create a unified user experience across a healthcare product suite
• Save time and resources on long-drawn and costly updates
• Focus on innovation rather than corrective measures

UX Strategy

The visual disparity amongst healthcare apps means a steep, new learning curve each time for users. UI inconsistency is highly distracting and interferes with clinical decision-making and problem-solving – both critical aspects of healthcare delivery. It is also the primary reason causing delays in product/feature releases, increasing design debt, and leaving no time for actual innovation. 

Thus, 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 ensure hassle-free design and development in the long term. 

Design Process

The design process began with a thorough UX audit, which revealed usability issues and challenges such as –

Device inconsistency

Complex data visualization patterns

Lack of accessibility

From the development perspective, it resulted in –

Extended time required for minor fixes/releases due to code inconsistencies

New feature implementation impacting the performance of others

Persistent increase in technical debt

Design

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. 

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.