Designing An Illustration Voice For Sage
Back in 2018, I was hired by Sage to help create an illustration voice — a style that reflected the Sage Design Principles: clear and guiding, reassuring and trustworthy, adaptive and contextual, delightful and useful.
Before being welcomed into the Sage XD team with the goal to create an illustration voice for the company, I underwent a couple of sketch tests. Those successfully demonstrated my craft, skill and aesthetic.; I now had the task of putting together the Sage illustration voice.
When I joined Sage, a bold colour palette had already been selected by the Brand team and the use of a geometric theme throughout graphics had been decided.
A Brief History of Sage
Sage began as a startup, where founder David Goldman Sachs wanted to automate the print estimating and basic accounting process in his own business. He worked with a team of Newcastle University students to develop software to manage this more efficiently.David realized that other companies could also benefit from this and formed Sage in 1981 to begin selling the software.
Today, Sage has millions of customers and around 13,000 employees across 23 countries, including the UK and Ireland, mainland Europe, North America, South Africa, Australia, Asia and Brazil.
Why Use Illustrations in a Design System and What is The Purpose?
Creating and implementing an illustration design language system helps to reinforce the brand by incorporating a color palette, graphic accents, and a visual tone of voice.
Illustration is also a great way to communicate and tell a story. It gives a personal touch and makes the overall design experience feel authentic. The nature of the idea or concept you’re trying to convey will determine whether photography or illustration would be more appropriate to be used.
For example, an illustrative treatment will lend itself better to more abstract themes or topics. Illustrations typically help to communicate complex ideas, transforming them into easy-to-digest visuals — something photography cannot always achieve.
Process
Establishing a starting point
After reviewing the illustration voices of other SaaS companies for inspiration, I first started to explore styles and develop a hand-drawn look and feel, creating a spectrum of characters from cartoony to more realistic and serious to create a context that might inform the illustration voice I wanted to achieve. I produced some sketches and moodboards to review with the other members of the team, and we decided to go with characters that look more serious and less cartoonish. We illustrated humans using a true-to-life colour palette and made shading more subtle. This was the beginning of establishing a new, user-friendly, illustrative path.
In terms of branding, a crafted, hand-drawn illustration style is typically received as more organic (as opposed to digital illustrations). It’s implicit that they are drawn by a real person rather than downloaded from a stock library. And while the hand-drawn style takes skill and more time to complete, it suggests a realistic and professional tone. In this case, the hand-drawn style helped to convey that Sage holds the same dedication and care towards their customers and clients.
Exploration
Once the principles had been established — the foundations of colour and the use of geometric shapes — next came exploration (and A LOT of mood boards). The geometric theme was incorporated to stylise the characterisation of illustrated figures: over-exaggerated limbs, sharp edged elbows, pointed noses — all help reinforce this style. The sharp line is consistent throughout Sage UI elements like Sage.com. Incorporating the character world with the sharp line element helps reinforce the brand’s graphic language. At this stage, a distinct style had been established using four foundations: colour, hand-drawn brush stroke, geometric shape and sharp edge.
Trial and Error
Originally, I started my process of illustration in Adobe Photoshop, as the brush tool is more organic. However, after several weeks I decided to drop PS and opt for vectors; transferring my process to Adobe Illustrator. I used a vector brush preset, which was as close to pencil as I could find, as to not compromise quality. Plus, using Illustrator was beneficial as it saved the worry of scalability issues further down the line.
Sketch > Vector
The next challenge of character creation is inclusivity, so naturally, my first port of call was research. I looked to sources such as ‘You Can’t Just Draw Purple People and Call It Diveristy’ from Shopify. artists like Alice Lee who created the illustrated voice for Slack and ‘Illustrating a more human brand’ from Dropbox.
These guides helped to shape my process in character creation. I also focused on the Sage Brand Library of Photography as a reference point, which I found to include photography that is inclusive of gender, race, and body type. Using an actual person from the library as a basis of my sketch, I would over- exaggerate angles to add a geometric aesthetic and eventually move into Illustrator.
We decided on a palette for characters that were true to life and excluded any whimsical details. As the illustration language was to represent the Accounting world,; the visual tone of voice needed to be authentic, trustworthy and down to earth.
Defining the Visual Language
Character creation and figuring out the rules of the universe was only the tip of the iceberg; when creating an Illustration system, there is a whole spectrum of visuals to take into consideration. The character components I had begun to establish were mostly for hero banner usage; I needed something less dominating and fussy — something easy to digest…The Spot illustration was born! Simplified versions of hero illustration, the Spot illustration is more versatile and less open ended, ideal for instructional and on-boarding purposes or to highlight a feature — an important addition to the illustration ecosystem.
Iconography
My next mammoth task was to extend my skillset into the iconography sector and create a visual language for the product icons to be used across all Sage digital properties and markets (this has now grown to 100+). We needed a solution to allow users to select their product by scanning visuals to help orientate and make quick decisions, regardless of language.
Like my character design process, I examined other platforms to establish competitors and I came up with several strong concepts to tie all products together. From sketching to vectorising, I presented the ideas to several team members to gain insight into other creative thinking.
After much refining and improving, we agreed on the concept of geometry and shape. Creating one beautiful icon is easy. Creating a few good looking icons isn’t that hard either. It’s making them cohesive that is the actual challenge. We needed an approach that could stretch out to 100’s of existing products, yet still keep consistency and future proof ourselves for new, upcoming products.
Mathematics connects both accounting and design, and Sage’s products all use mathematics, be it for an invoice or a monthly salary. In the design world, mathematics takes form in geometric shapes. This was the theme we agreed on: a diverse and simple solution to represent complex products, and to unify the suite.
Next on my agenda was to develop a spot icon style for marketing usage that was smaller and more UI focused — a balance between fun, flexible, and straight to the point. I took inspiration from the product icons theme, which heavily relied on shape to work as the backbone of the design, and combined it with the stroke which already existed within our detailed icon set. Colour palette played a part, as it dictates where the icon would belong: mint for small business and blue for medium, using yellow and slate as an accent colour.
This is the bulk of the illustration hierarchy — blending illustration down to crisp UI. People loved the new suite! However, now there was a new dilemma: the hierarchy existing in our Design Language System made the newly designed graphic assets accessible to anyone who had a link to the portal…The characters began to pop up everywhere! Bringing me to my next quest: documentation.
Documentation
Now the illustration style had been set throughout: character, spot, product and icons; setting clear instruction with dos and don’ts was imperative. This benefits both designers and stakeholders within the company to create alignment; the key objective was to help users keep assets consistent and guide usage.
The illustrative personality throughout Sage should feel as though it came from the same person, expressing the standards and guidelines through use of colour palette, brush library, perspective and composition.
Next?
With hundreds of presentations and discussions with other fellow creatives and teams across Sage, I feel like we managed to engage and inspire! The Sage illustration voice was born from the XD team, now integrated company-wide and continuously growing and evolving.
An illustration language system can have a dramatic impact on user experience, so for our next step, we want our illustrations to branch out into motion graphics. To come up with a solution of how our visual adapt in an animated world, which serves to delight, inspire and guide our users for a continued excellent user experience. We are creating a tool where fellow creatives can design their own characters, close to the Humaaans, mix-and-match illustrations, which we intend to make available on our DLS.
