Page Title
Need the design component?

Have a cool project for us?

How can we help?

You can book multiple services

What do deadlines look like?
Enter your contact info
Full name *
Email *
Your message was sent!
Thanks for reaching out! We'll get back to you shortly.
Take a look at Surge - a project we think you might like!
Oops! Something went wrong while submitting the form.
Need the design component?

Have a cool project for us?

Or just say hi?
hey@konpo.studio
We’re on the lookout for impactful projects, where we can really sink our teeth into the work.
Jean Massad
Founder
Make an appointment

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, 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? Yes, exactly! A MESS.

We partnered with Relias' product leadership to define and create a collection of predefined, reusable design elements and guidelines that help ensure consistency and coherence in product design and across all brand touchpoints. 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 difference in 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 and coherence in product design and across all brand touchpoints. 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 difference in people's lives.

Info
Company
Relias
Year
Industry
Healthcare, Education, Training
Works
Design System
Branding

Organism

Design System

Serving 11,000 Healthcare Organizations

Throw in Acquisitions, growing number of contractors, new hires and you get yourself a problem that costs millions in inefficiencies. While a design system doesn't solve everything, is a big part of the answer.

We partnered with Relias' product leadership to create a robust design system, serving as the single source of truth. It comprises predefined, reusable design elements and guidelines, ensuring consistency across all brand touchpoints.

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.

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!

We also made our own emojis! The team's slack is filled with them and we kind of love it.
Design Systems
amp
Design Systems Product Design SaaS Websites
Relias
Design Systems Product Design
Clinical Ink
Design Systems Product Design
Moveek
Banding Design Design Systems Product Design
Surge AI
Branding Design Design Systems Product Design SaaS Websites
Vectornator
Design Systems Product Design SaaS Websites
Vectron Biosolutions
Branding Design Design Systems Product Design SaaS Websites