Bringing Scalability and Accessibility Through Atomic Design

This concept was honored with the iF Design Award 2023 in the User Interface design category for its wide-spread application and attention to detail.

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.

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.

Atoms are the most basic building blocks such as HTML tags, buttons, labels, icons, and other small elements which can be replicated consistently across the product suite.

Molecules comprise independent atomic design elements, each with their own characteristics, style, and format assembled together into new groupings.

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Templates consist mostly of groups of organisms stitched together to form pages, based on what the requirements call for.

Pages are the final stage of the Atomic Design methodology, where renditions of templates are created as per the requirements.

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.

Impact

  • Improved build time by 34% and allowed the business to truly 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.

More by Koru UX Design

View profile