Professional project · Illustration

Sage: an illustration language for an enterprise design platform

I illustrated Sage, HelloFresh's enterprise design system, an internal platform that brings a design team's work together in one place. I drew every illustration on it.

Role
Illustration and logo
Context
Internal platform, so only the illustrations are shown
Team
Enterprise design team
Overview

The brief

The platform felt too plastic and not well branded, and Sage had to grow from a design system into the whole platform. The brief was a fresher look and feel, with a new logo and illustrations to carry it.

I had drawn the team's illustrations before, and a second version of them. This time we started again, and my goal was a set that felt friendly and helpful instead of plastic.

We had a single deadline for the whole redesign, the new look and every illustration on it, and we finished on time. The set grew to more than 70 illustrations, and the team chose my logo by vote from four options.

The principles

Helpful first: every illustration should make the system easier to use

The language

One set of rules, so everything reads as the same hand

The set

Selected spot illustrations

This third version has more than 70 illustrations. Here are some selected spot illustrations from the set, drawn in Adobe Illustrator. Each one holds a single idea, in the same flat, rounded style.

Interface and documentation

  • Green notebook with a pencil and sticky notes
  • Glasses, magnifier, clipboard and sticky notes
  • Map with a route and sticky notes
  • Computer monitor showing a dashboard
  • Open notebook with a chart, glasses and a pencil
  • Blue folder with a lemon outline and a ruler
  • Orange notebook with a plus badge
  • Style guide notebook with an Aa type sample
  • Red notebook with a bookmark
  • Stack of three server units

Data and reports

  • Bar chart with a rising arrow and vegetables
  • Report page with a bar chart and magnifier
  • Report page with a bar chart
  • Report page with a line chart and magnifier
  • Report page with a line chart

Food and production

  • Checklist with a tomato and broccoli
  • Monitor showing meal cards with approve and reject marks
  • Delivery truck with a lime on the side
  • Forklift
  • Closed green box with a lime on the front
  • Open green box with a lime on the front
  • Tomato
  • Mango
  • Carrot
  • Broccoli
  • Potato
  • Yellow pepper
  • Green pepper
  • Red pepper
  • Lemon
  • Red chilli
  • Green chilli
  • Kiwi
  • Brown mushroom
  • Light mushroom
  • Shiitake mushroom
  • Pear
  • Blueberry
  • Aubergine
  • Banana
In motion

Illustrations that move

Some of the illustrations are animated with Lottie, a format I learned on this project. Every animation below is in use: most in the Sage platform, and the rest elsewhere in the enterprise system. Each one is a lightweight vector loop that plays while it is on screen.

UX principles
Detached component
Hardcoded styles
Bugs detected
Emergent components
Token coverage
Token updates
Recent commits
Product usage
Recipe testing
Ongoing

Still growing

The first push was twelve intense days, and all the coffee I had set aside for the whole month went into them, just to squeeze enough ideas and creativity out of my brain. It was also a lot of fun. The team gave us full freedom to shape how the platform looks and which direction the illustrations took, and it really opened up what we could do. Sage is still ongoing, and most of the team is now working on the components of the new Sage.

The platform is internal, so no screens, adoption numbers or results are shown here.

Next

More projects

← Back to all work