Standardizing the illustration library at REEF
Overview
REEF relies on illustrations to communicate with its users. To expand and create consistency within REEF's design system, specifically with our library of Illustrations, I collaborated with another designer to introduce a standard for illustrations across all REEF products. We also facilitated a workshop to teach the rest of our design team how to create their own illustrations. We added illustration components to the REEF design system to make it even easier!
Round 1
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.
Lets try this again...
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.
Finally...
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.
The anatomy of an illustration
Workshop time
After we made updates to the guidelines, we created a 45 minute workshop with our design team and jumped into Figma to play! Everyone participated! See our collaborative work session results below.
Illustrations in the wild
What I would do differently...
If I could have added anything additional to this project it would be an accessibility color chart for more guidance, and less leg work for our team when creating illustrations.