A Design System for 11,000 Healthcare Companies

Relias is used by
No items found.

Growth is great, but messy for product teams.

What do you do when you grow quickly? You cheer! You Smile! Investors are happy, customers are loving the product, management is on fire (figuratively and literally). But what happens to product teams? How does that look like to Engineers, Designers and Product Managers? Throw in Acquisitions, growing number of contractors, new hires and you get yourself a problem that costs millions in inefficiencies. Specially if you're dealing with a modest clientele of 11,000 organizations as your customers.

Design and code inconsistencies in product lines, spotty communication between squads, different codebases. This means that there's a lot of double work... which means a lot more than double the expenses. So teams are gradually thrown into an expensive pickle. What do we do?

Although not the entire solution, a design system is a big part of the answer. We partnered with Relias' product leadership to define and create a design system to reduce these problems and systematically deploy across the org. We designed a robust, beautiful but also scalable system as the single source of truth. A collection of predefined, reusable design elements and guidelines that help ensure consistency and coherence in the design of a product and  across all brand touch points. Alleviating varying codebases from the burden of inconsistencies, bringing it a clearer focus towards re-usalability to gear resources into meeting the customer needs more effectively.

The design system had several characteristics, specially because of their clientele. Healthcare workers are busy, on-the-move and demand clarity in the interfaces they work with on a daily basis. Accessibility, scalability and practicality were the core principles that drove the work we did for Relias.

It's pleasure working with products that actually do make a difference in peoples lives.

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, encompassing basic design elements such as fonts, colors, icons, and fundamental user interface components like buttons and input fields. They serve as the fundamental building blocks upon which the entire design system is constructed.

It's the foundational elements that enable consistency, efficiency, scalability, and collaboration. They form the cornerstone of a well-structured design system, leading to a more streamlined design and development process and, ultimately, a more cohesive and user-friendly end product.

Colors are one of the basic fundamentals to define. They need to be in line with brand but never ignore accessibility!

Typography is also a quick win, but arguably the most important one.

Designing for healthcare means that accessibility is at the forefront. Color contrasts, sizes, spacing convention are some of the foundational pillars that define the base of all the work.

Jean Massad
Jean Massad
Design lead

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

These represent the next level of design elements, one step up from the atomic level. Molecules are created by combining multiple atomic elements, such as buttons, input fields, and labels, to form more complex and self-contained components like search bars, form groups, or card elements. These cohesive combinations of atoms provide a practical and reusable solution for common design patterns within a project. Molecules help maintain consistency and efficiency by encapsulating related elements and interactions, making it easier for designers and developers to construct higher-level components and ensure a cohesive user interface across the system.

Molecules are made of Atoms.

A well built design system helps us focus away from a lot of the visual work and focus on what matters the most. A great user experience.

Hoang
Hoang Nguyen
Senior Product Designer

Fields, fields, fields! Marketing's favorite thing!
Warning toasts notifications were unified.

Organism

These are higher-level design components that integrate both molecules and atoms, forming self-contained and functional parts of a user interface. These complex elements, such as navigation bars, product cards, or content sections, bring together smaller building blocks to create coherent and reusable units. Organisms play a key role in maintaining consistency, efficiency, and a unified user experience throughout a project, as they encapsulate related elements and interactions within structured, modular design components.

Systems and products should not be boring!

Templates

Templates establish the layout and structure of pages or sections, guiding the placement of organisms, molecules, and atoms. They offer a consistent framework for designing and development, facilitating content integration while ensuring overall design cohesion.

Pages

Pages represent the highest-level components, embodying the specific content and data presented to users. They are 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.

I highly recommend working with LIFT Agency! They 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.

Vladimir Danila, talking good about LIFT Agnecy
Sasha Morris
Director of Product Management
Contact us. Tell us about your product and goals. We'd love to hear about your brand and business challenges, even if you're not sure what your next step is. No pitch, no strings attached. Let's chat: hello@lftmda.com

Stay in the loop

Sign up to receive our (occasional) newsletter with the most interesting case studies and client wins!

Subscribe to our newsletter

Say hello!

You can also reach out directly to hello@lftmda.com
Jean Massad CEO of LIFT Media / LIFT Agency. UX/UI design
Schedule an intro call with Jean Massad via Calendly
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.