Systemizing Growth through Design

Founder
Industry
Healthcare, Education, Training
Work
Design System
Relias
Introduction

What do you do when you grow quickly? You cheer! You Smile! Investors are happy, numbers are all green and management is on fire (figuratively and literally). But what happens to product teams? How does that look like to engineers, designers, managers and eventually the end user? Yes, an expensive mess that haunts and ripples across the bottom line.

We partnered with Relias' product leadership to define and create a collection of predefined, reusable design elements and guidelines that help ensure consistency, coherence and efficiency in product across all touch points. This alleviates varying codebases from the burden of inconsistencies, bringing a clearer focus towards reusability to allocate resources effectively in meeting customer needs. The design system has several characteristics, especially tailored to their clientele. Healthcare workers are busy, on-the-move, and demand clarity in the interfaces they interact with daily. Accessibility, scalability, and practicality were the core principles driving the work we did for Relias. It's a pleasure working with products that actually make a a positive impactin people's lives.

Relias
Systemizing Growth through Design

We partnered with Relias' product leadership to define and create a collection of predefined, reusable design elements and guidelines that help ensure consistency, coherence and efficiency in product across all touch points. This alleviates varying codebases from the burden of inconsistencies, bringing a clearer focus towards reusability to allocate resources effectively in meeting customer needs. The design system has several characteristics, especially tailored to their clientele. Healthcare workers are busy, on-the-move, and demand clarity in the interfaces they interact with daily. Accessibility, scalability, and practicality were the core principles driving the work we did for Relias. It's a pleasure working with products that actually make a a positive impactin people's lives.

Info
Company
Relias
Year
Industry
Healthcare, Education, Training
Work
Design System
Problem
Strategy
The Cultural Layer
Branding
Web Design
Product Design
Design System

Serving 11,000 Healthcare Organizations

Relias was experiencing fast growth and their teams were expanding quickly but spreading thin.

Throw in new product lines through acquisitions, a growing number of contractors, new hires and you get yourself a pickle that costs millions in efficiency, delays, retention and engagement.

Engineers build the same components from scratch, designers reinvent the wheel each time and eventually end-users get confused and frustrated with the variety of navigation patterns in the same product.

While a design system is not a magic wand, it was a big part of the answer. So what did we do? We joined the party!

We worked elbow-to-elbow with Relias' product leadership to create a robust and scalable design system, serving as the single source of truth that empowered their product teams and their customers alike.

Reusable design components, repeatable patterns and guidelines that empower (not constrain) designers, engineers and managers; driving consistency and efficiency throughout the entire process.

Our work alleviated the entire product team from the burdens of double work. It allowed them to stop playing whack-a-mole and focus on delivering true value to the healthcare workers that live in the front-lines.

Clarity, accessibility, scalability, and reusability were the core principles driving the foundations of the work.

Serving 11,000 Healthcare Organizations

Relias was experiencing fast growth and their teams were expanding quickly but spreading thin.

Throw in new product lines through acquisitions, a growing number of contractors, new hires and you get yourself a pickle that costs millions in efficiency, delays, retention and engagement.

Engineers build the same components from scratch, designers reinvent the wheel each time and eventually end-users get confused and frustrated with the variety of navigation patterns in the same product.

While a design system is not a magic wand, it was a big part of the answer. So what did we do? We joined the party!

We worked elbow-to-elbow with Relias' product leadership to create a robust and scalable design system, serving as the single source of truth that empowered their product teams and their customers alike.

Reusable design components, repeatable patterns and guidelines that empower (not constrain) designers, engineers and managers; driving consistency and efficiency throughout the entire process.

Our work alleviated the entire product team from the burdens of double work. It allowed them to stop playing whack-a-mole and focus on delivering true value to the healthcare workers that live in the front-lines.

Clarity, accessibility, scalability, and reusability were the core principles driving the foundations of the work.

How it looks like for product teams when you grow too quickly.
A product organization's dream situation, where one source truth guides all product lines.
Atomic Design is our blueprint and our map.

Atoms

‍

In the realm of design systems, "atoms" refer to the most elemental building blocks of design, such as colors, which must align with the brand while also prioritizing accessibility.
Typography is also a quick win, but arguably the most important one.
Icons are not so easy. Do you go with an existing library or create them from scratch? in this case, from scratch to fit a unified narrative.
Elevations! How do you define visual hierarchy between windows, buttons, modals?
A unified grid system.
Don't forget about mobile!
You know when the spacing is off. You don't think about it when it's right. A key for engineers to work independently when design is not around.

Molecules

‍

Molecules represent the next level of design elements, one step up from the atomic level. They are formed by combining multiple atomic elements.
These cohesive combinations of atoms provide a practical and reusable solution for common design patterns within a project. 
Fields, fields, fields! Marketing's favorite thing!
Warning toasts notifications were unified.
Molecules ensure consistency and efficiency by bundling related elements and interactions. This simplifies the creation of higher-level components and ensures a cohesive user interface system-wide.

Organism

‍

Systems and products should not be boring!
These complex elements, such as navigation bars, product cards, or content sections, bring together smaller building blocks to create coherent and reusable units

Templates

Templates establish the layout and structure of pages or sections, guiding the placement of organisms, molecules, and atoms.

Pages

Pages represent the highest-level components, embodying the specific content and data presented to users.

‍

The actual instances of templates, where real content is incorporated into the predefined layout and structure.
Pages ensure that the design system adapts to the unique requirements of different contexts, allowing for a tailored and user-focused presentation of information and functionality.
One year later...
Result
Client
Sasha Morris
Director of Product Management
Testimonials

Konpo worked to get our new design system implemented, which has been the foundation for many of Relias’ products.  The team delivers high-quality and thoughtful work. They've been a great partner throughout the process.They simply go the extra mile!

FAQs

Questions? Some answers.

Anything else? Feel free to reach out to
hey@konpo.studio
Who built Relias's design system?

Konpo, elbow to elbow with Relias's product leadership. Relias serves 11,000 healthcare organizations, and fast growth and acquisitions had left engineers rebuilding components from scratch and users facing different navigation patterns in the same product. The design system replaced that with reusable components, repeatable patterns and guidelines, and Sasha Morris, Relias's Director of Product Management, describes it as the foundation for many of Relias's products.

What does a design system for healthcare software need?

One answer to every common question, because healthcare workers are busy, on the move and switching between modules all day. Relias's products had come from acquisitions, so the same user could meet several navigation patterns in one product. The system fixed that from the bottom up: colors that meet accessibility contrast, typography, a custom icon set drawn to one narrative, elevations and a single grid with mobile included, then shared fields, warning toasts and navigation bars built from those pieces. Clarity, accessibility, scalability and reusability were the principles, but the navigation is what users notice.

Why atomic design for Relias?

Because it gives a growing team a map. Atoms (color, type, icons, elevation, grid, spacing) are decided once and shared across product lines, molecules like fields and toasts are built from them, organisms like navigation bars and product cards come next, and templates and pages sit on top. The payoff is day to day: engineers can work independently when design isn't in the room, and spacing becomes something nobody thinks about because it's right.

We also made our own emojis! The team's slack is filled with them and we kind of love it.
Design Systems