What if icons were loved just as much as components?
A journey to improve the workflow and documentation of UI icons at Auto Trader
As we all know, good documentation is essential for a good design system. It serves as a reference for designers and developers, all the way up to product owners, who need to work with them.
When it comes to iconography within a design system, you’ll often find a list of icons your organisation uses. But that’s probably where it stops. We don’t tend to dig any deeper than that when it comes to our visuals, but we should question:
- Where did they come from?
- Who made them?
And more importantly:
- How were they made?
- Am I using them correctly?
- When/where do I use them?
Understanding where we are today
A good starting point was to look at how and where icons are being used across our different products and channels. For example, are they appropriate for the context? Are they drawn well? Is the styling consistent?
Here’s what I found:
A lack of consistency
Some icons feel heavier than others because a variety of stroke weights are being used as a result of poor scaling. But sometimes the lack of consistency goes even further, for example, our website and app use completely different icon sets😱.
Issues with sizing
At Auto Trader we officially have four icon sizes but out in the wild you’ll be hard pressed to find more than two. As there’s no written rule on when to use a certain size over another, we’ve tended to favour the smaller 16px icon. My feeling is that this is too small to be used as a default because it’s hard to strike a balance between liability and detail.
It’s not obvious when to use an icon
Currently there’s no guidance on when to use an icon over something larger like a pictogram. This can lead to inconsistent experiences since all the product designers have different views about when to use icons.
That’s what they call a bottle neck
Our icons have been produced single-handedly by one designer with little documentation. This has created a bottle neck situation since teams often request an array of new icons at the same time. There’s also some risk when only one or two people are responsible for creating something. How easy is it for someone else to take over that knowledge if they decide to leave?
So where do we go from here?
A very good place to start is going back to the basics and defining what role an icon has. It sounds obvious but definitions can vary across different organisations.
“Icons are a compact symbol that represents an object or action. They communicate a message at a glance and draw attention to important information. As a general rule they should be used in combination with a text label.”
— Our definition at Auto Trader
Map out a new workflow
Drawing and creating icons is a specialist skill. You need familiarity with visual metaphors and the ability to communicate abstract actions. So, this isn’t a task for everyone; you need to find the right group of people that are up to this challenge. At Auto Trader, that’s our Creative Studio team, who together will share responsibility for creating our UI icons.
Introduce a Maker’s Manual
Part of this new workflow is the introduction of a Maker’s Manual. A step-by-step guide that documents how to create our icons. This includes everything from using our grid, adding just the right amount of detail, and how to correctly export. Standardising how our icons are produced is important. But so is good documentation so that other designers can be easily onboarded to the workflow.
Give direction on how to use
To help our product designers use the icons, we’ve created a usage guide. An example of this is when to use a ‘small’ icon (FYI, it’s only when the space is restricted). It’s also important to think about accessibility, think clearance and alt tags, as well as naming conventions.
Aim for simplicity
We streamlined the process of icon creation, from requesting new icons to drawing and documenting them. My goal was to reduce the number of sizes down from four to two, our ‘standard’ and ‘small’ size. It’s implied in the naming that we primarily use the ‘standard’ but when space is very tight we may use the ‘small’. Rather than drawing out two sizes, we simply draw one and scale the other. This saves us the trouble of reducing line weight.
So what’s next?
At Auto Trader we’re all about learning and validating what we do, this includes our documentation. Our Creative Studio will produce a new batch of icons using our Maker’s Manual to test our fresh new approach to icon creation. As we gather their feedback we will iterate, improve and perfect the new guide based on how easy and useful it was for them to follow.
