A Product Illustration Platform for Xero
Accounting gets a bad wrap. For those who don’t run businesses, it can seem like the ultimate snoozefest. Spreadsheets, calculations, numbers, reconciling, invoices. Ugh. What’s worse, is that its often synonymous with an endless wasteland of papers, forms, or dull grey user interfaces. Why would you want to spend valuable hours of your life in the sea of despair when you could be enjoying sunshine in the land of The Reason I Actually Get Paid.
Launched in 2006, Xero became the must-have for many small business, and became widely known as the world’s most beautiful accounting software. And it was, at the time. Eleven years on, it’s still the linchpin of over a million small businesses in 180 countries, yet its visual style wasn’t keeping up.
With more and more digital products looking to humanise their software, Xero set us on a task to do the same — build an ownable illustration style to add life back into a product that had had lost its personality.
Illustrations that empathise
Product illustrations differ greatly from many other types of illustration. While all attempt to illicit feeling in some degree, product illustrations are designed to respond to or anticipate a user’s emotions while using various features.
Accounting may seem unemotional but when you put it in the context of someone’s livelihood, the smallest interactions can be at times joyous or disastrous. We needed to understand how Xero’s customers used the product and chart the moments of delight and pain they encountered along their journey.
So we sat down and listened. Over the course of numerous interviews with accountants and owners alike, we learnt some critical things. Namely, People. Love. Xero. It may not be ultra sexy but they lean heavily on it for the running of their businesses. It’s flexible and reliable. It makes tricky or complicated tasks seems effortless. It is a mainstay in businesses because it is exceptionally functional … and yet something was missing.
Building an illustration platform
Our strategy from the start was to establish a conceptual framework for the illustration style. While we’d be exploring aesthetics, our main role was to establish a system which would then be finalised into a style by illustrator(s) we recommended. We knew that the direction needed grounding in an idea that the bigger Xero creative team would believe in, making it easier for handover as they rolled out the illustrations in their refreshed ui. More so, it needed to inject the product with the charm and personality it needed.
We also focused on maintaining a tone that was both playful and serious. The task was to ultimately create something that elevated the user in moments of happiness (like reconciliation of bills) but reassured them in moments of distress (late invoices, low funds etc).
So we started with reference. Lots of reference.
Which were honed into rough territories that were developed from our interviews with users.
We presented two directions, both with a focus on characters, and ultimately landed on this:
Escalate the Ordinary:
Through our eyes, the world of Xero is extraordinary. From a distance its characters may look similar to us, but as you’ll see they do things in unexpected ways. Tricky tasks are impossibly easy as they reach across skyscrapers to speedily hand invoices to clients or place paperwork onto organised stacks five times their own height. With shifting, fluid forms, heights and lengths, theirs is a world of constant clarity and accessibility, where no task is too hard.
This is the charming world of Xero. A place where characters are always willing to lend an extensive helping hand.
In this route, Xero characters are flexible, quirky and sometimes manage to defy the laws of physics. They live in their own land of XUI (Xero User Interface) and reflect the product through their behaviour, as well as a cheeky nod back to the logo. And so began the sketching…
Our focus on sketches was to understand where they would live in the product, so we broke everything down into three categories:
- Scene — larger illustrations with more elements, great for onboarding or splash screens
- Spot — smaller illustrations perfect for empty states or dashboards
- 50x50 — Not quite icon level, these could be used in smaller areas to reinforce micro interactions eg. Success or error messages
We also a outline the purpose of the illustrations as:
- Functional (directional, spotlight, guidance, clarity)
- Able to communicate a core message with focus
- A chance for unexpected positive reinforcement
- Providing relief in negative situations
- Relflecting the nuance of a moment (often through metaphor)
Getting in to style
The most challenging part from here was establishing our style. As a team we set out our guiding principles to make sure it was:
- Separate to the UI but not too overbearing
- Complementary to the overall product colours
- Able to sit within a systematic framework
- Legible at multiple scales
With a variety of references and ideas in our heads, we went away and explored and explored until we dreamt of funny cyclops characters in varying shades of blue.
After weeks of iteration of style and aesthetic, it was time to get honest. We hadn’t nailed it. Principles, sketches and fundamentals were all working great, but with a world of options on how finally execute the finished illustrations, our exploration was getting broader and broader without narrowing things down. Importantly too, our aim was to ultimately pass this on to a full time illustrator to help refine and finesse the final style.
So with that, we said goodbye to our little illustration babies, and said hello to Marco Palmieri.
Having worked with Marco before, we felt pretty reassured that this next phase of the project was in his capable hands. As we write this the final illustrations are still in development but Marco has shared with us a little bit of his early exploration so far, which we’re loving. Stay tuned for more updates on the project.
Shout out to the rest of the team — Mel Baillache, Ben Walker, Jeremy Lord and Jason Little.