.svg)
Sylvia Robles
TLDR; Standardized the illustration library for the design system and held a workshop with the design team to introduce illustration styles
My Role & Team
I teamed up with two designers to create standards for Illustration that contributed to the design system at REEF Technology.
The Challenge
REEF relies on illustrations to communicate with its users. While our small, but mighty, design team used a stock illustration service to create visuals for the REEF Cloud Platform, we saw the opportunity to expand and create consistency within REEF's design system.
We wanted to try a minimal approach using lines and organic background shapes with light backgrounds in a monochromatic color theme using shades and tints from our action blue. What resulted were illustrations that were cute, but, didn't really push the point across- these could be confused for being disabled and we needed the illustration style to bring our brand to life.
Refining the Vision: Round 2
Here is where we started to combine colors and elements, we decided to stick to a light shaped background which we could combine with bolder outlines and pops of color. We went through several iterations of color combinations. Since our goal was to make illustrations easy for anyone to create from our design system, we had to avoid ambiguity in applying an outline style.
The Final Touch: Simplifying for Success
We moved away from outlines and bold strokes and settled on a very simple formula for the perfect illustration that anyone on the team could create themselves. Then we added components that were necessary for each illustration to the design system.
Establishing Illustration Guidelines for Designers
I developed comprehensive illustration guidelines as part of the design system to ensure designers could create consistent and cohesive visuals across their screens. These guidelines outlined clear rules for using brand colors, shapes, and proportions, providing a reliable framework for building illustrations that aligned with REEF's visual identity. By integrating these guidelines into the design system, we made it seamless for designers to produce high-quality, on-brand illustrations efficiently.
Illustration refresh
Collaborative Workshop: Bringing the Guidelines to Life
After refining the illustration guidelines, we hosted a 45-minute workshop with our design team to put them into action. The session was hands-on and interactive, with everyone jumping into Figma to experiment and collaborate. It was a great opportunity to see the team engage with the new guidelines, and the results speak for themselves—check out our collaborative work session below!
Illustrations in the Wild
Now that we’ve established clear illustration guidelines, it’s time to see them in action. These visuals have been integrated across various REEF products, from emails to the KDS pause feature and the REEF Cloud platform. Each use case showcases how the illustrations enhance communication, provide clarity, and create a cohesive user experience. Below, you’ll see how these illustrations have been brought to life across different touchpoints, illustrating our brand’s personality and adding a human touch to every interaction.
