Systemizing Growth through Design

www.relias.com

Healthcare,

Education,

Training

Design

System

W
h
a
t

d
o

y
o
u

d
o

w
h
e
n

y
o
u

g
r
o
w

q
u
i
c
k
l
y
?

Y
o
u

c
h
e
e
r
!

Y
o
u

S
m
i
l
e
!

I
n
v
e
s
t
o
r
s

a
r
e

h
a
p
p
y
,

c
u
s
t
o
m
e
r
s

a
r
e

l
o
v
i
n
g

t
h
e

p
r
o
d
u
c
t
,

m
a
n
a
g
e
m
e
n
t

i
s

o
n

f
i
r
e

(
f
i
g
u
r
a
t
i
v
e
l
y

a
n
d

l
i
t
e
r
a
l
l
y
)
.

B
u
t

w
h
a
t

h
a
p
p
e
n
s

t
o

p
r
o
d
u
c
t

t
e
a
m
s
?

H
o
w

d
o
e
s

t
h
a
t

l
o
o
k

l
i
k
e

t
o

E
n
g
i
n
e
e
r
s
,

D
e
s
i
g
n
e
r
s

a
n
d

P
r
o
d
u
c
t

M
a
n
a
g
e
r
s
?

Y
e
s
,

e
x
a
c
t
l
y
!

A

M
E
S
S
.

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

Info

Company

Relias

Year

Industry

Healthcare, Education, Training

Works

Design System

Links

www.relias.com

Branding

Organism

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

design

system

doesn't

solve

everything,

is

a

big

part

of

the

answer

partnered

with

Relias'

product

leadership

create

robust

design

system,

serving

the

single

source

truth.

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

‍

Organisms are higher-level design components that integrate both molecules and atoms, forming self-contained and functional parts of a user interface.

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

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.

Templates

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

Templates 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.

‍

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.