From silos to design systems
Sage was founded in 1981 and has grown into a multibillion-pound business serving millions of small and medium-sized businesses with finance, HR and payroll software.
The Experience Design (XD) function is responsible for ensuring Sage products, websites and services are usable and accessible. It’s a pivotal job, especially for a user-led company like Sage, and requires a large team of people to do it.
But how did XD evolve at Sage? What did the early design systems look like? What does XD look like today? How might it evolve in the next 10 years?
These were the answers I wanted to find out….
Where did XD start at Sage?
Did it all start in Newcastle, block 5?
Back in August 2011, Ben Wilson stood in front of the big old office building in Newcastle and walked up to what looked like “a spaceship with a door in the middle”.
He’d joined as a usability specialist, moving from a very small company to the large Sage corporation. I asked him what XD looked like back in 2011.
“There were developers who built the software and business analysts who would analyse the requirements, but there wasn’t yet a specialised role in UI design. Although the features and functions worked well, the interface and workflow could be improved….” (Ben Wilson)
Ben and his team of 2 were tasked with enhancing the user interface for a desktop product called Sage 50.
Across the pond
Three years earlier in Southern France, Julien Vanière joined Sage as a Webmaster. I asked him what XD looked like in 2008.
“The early beginnings of XD didn’t really start until 2010, when the CEO at the time [Paul Walker] saw multiple computers with different Sage products installed. While he was looking at the different computers, he couldn’t understand how they were from the same company because all the products looked so different!” (Julien Vanière)
Was this realisation of the inconsistency across Sage products the catalyst for change?
We had designers in Austria
People in XD at that time concentrated on their own products and many designers did not know that others existed.
“Sage has long been a global organisation, but before Slack, Teams and Zoom, it was challenging to seek out professionals with shared interests, and to collaborate on live projects, within large organisations” (Ben Wilson)
Ingrid Zillinger was a UX Designer based in Austria during that time.
“There were no tools to search for people… you would rely on people to find people, we were very siloed across teams and countries” (Ingrid Zillinger)
So, did it all start in Newcastle, Block 5?
No, it turns out there were designers dotted around the world — it’s just people didn’t know it!
The growth of XD and early design systems
Harmony
Julien Vanière’s role changed to Ergonomist in July 2012.
“We started an early type of design system called Harmony around 2012, we had some images and screenshots (in Photoshop) that we shared with our development teams… it was not documenting components in detail, more a general look and feel… it was not really about user experience, the main focus was on UI at this time.
We were a small group of 3 and we were sharing things and trying to decide together what could be the right thing to do for the products that we were working on.” (Julien Vanière)
Carbon
The birth of Sage One in 2011 (the first cloud product at Sage) removed a lot of design constraints and allowed designers to try different tools and processes. They recognised the need for a set of reusable components.
“This was the early seed of the design system because we were building a new system, it was a blank sheet of paper. It was called Sage One Platform (SOP) — that was the start of something reusable”. (Ben Wilson)
However, they found that SOP didn’t work well in all situations and technology had moved on, so in 2014 they started using Carbon. They used the same components but updated how they worked. The intent was still a development framework, no guidance, no rules, no Sketch files, just a webpage.
Harmony you say? No, Armonye
In 2014, Joseph Kim joined the Sage 300 product team as a UX Designer in Canada. He was tasked with creating a design system to help transform a desktop product to a cloud product. The design system was called Armonye but only used for Sage 300.
“The problem was that the organizational structure was a little bit distanced, so we didn’t really speak much with each other. That was the biggest problem. That was the reason we had a design system that never took off.” (Joseph Kim)
Design system silos
Harmony, the new Carbon website and Armonye were specific to their own products with no alignment with other Sage products.
They were susceptible to brand changes with products being left to interpret changes themselves which brought additional problems.
“We had multiple rebrandings. Brand was giving us new things, they would tell us ‘ these are the new colors, and you play with that’. So we had to do everything… all products were making everything on their own, not really trying to align things between products.” (Julien Vanière)
Executive level support
In 2017, Klaus Kaasgaard joined Sage as an EVP of Experience Design. He questioned why we did not have a Sage design system and why all products did not treat the Sage brand in a consistent way.
“So that was the first design system project… we typed the HTML for the website ourselves. You could look up a component, you could download the sketch file and then see the developer’s version online. We tried our best to design it not just for our product, but for the rest of Sage too.” (Ben Wilson)
Getting support from other teams
In the early days, getting support from other teams was a challenge.
“When promoting the Design System across Sage, I wanted to inform and persuade, but not direct. I think that’s the best way to gain buy-in and build solid foundations. It’s important to support teams in taking their own steps to adopt the Design System, and by doing so, they will contribute and change it, making it better for everyone.” (Ben Wilson)
Sage.com was also working on a design system
Sage.com (the website team) were also working on a design system. Previously, the design had been done by an external agency but in 2018, the design was moved in-house.
Joseph Kim moved from his role as product UX Designer to join 2 other designers in Sage.com. They started a UI kit in Sketch to inject some consistency to the designs left by the agency.
We had a design system that considered multiple products and a design system for our website. How did XD grow from there?
Sage XD today
Sage investment in design
The real growth happened in 2019 when Sage acknowledged that investment in design was investment in customer and business success. Sage started to grow the XD organization and hire new specialists.
“The biggest investment in User Experience and Accessibility I’ve experienced in my career has been here at Sage. There’s a shared understanding at all levels of Sage that experience and accessibility are good for users, good for business, and the right thing to do.” (Ben Wilson)
A dedicated design system team was born
The design system started by Ben was valued so much that Klaus created a dedicated design system team. “This was the first time it would be someone’s dedicated job to run the Design System… not a secondary side project. It would actually be a core team’s responsibility.” (Ben Wilson)
In March 2020, Julien was promoted to Director of the design System for product. He started with a team of 3 (1 UX designer, 1 visual designer and 1 content designer) which has grown to 10 in the space of 3 years. It now has a dedicated PO, 5 designers, 1 content designer, 1 developer, 1 UX researcher (me!) and 1 accessibility designer.
Read the story from one of the first recruits into the design system team who joined back in April 2020 here.
Sage design system today
The design system is used by 16 of our largest products. It includes 54 components and 11 patterns which are fully documented in Zeroheight and accessible to WCAG 2.1. It also includes a dedicated design system Figma library.
“The team reworked that very simple early site into something much more robust and much more capable of spanning different products with plenty of guidance for designers on how to adopt it. And that’s really what we were missing.” (Ben Wilson)
Sage rebrand
When Sage launched its major rebrand in 2022, the design system team helped Sage products and Sage.com work on a consistent look and feel and ensure the new colour palettes and fonts were useable, accessible and aligned with the brand.
Sage XD In 2023
The investment in design is obvious. A snapshot of XD at Sage today shows over 300 people (from graduates to principals) in many roles:
· Accessibility design
· Content design
· Creative technologist
· Experience design
· Illustrator
· Motion design
· Solution design
· UX design
· UX research
· As well as XD leaders, managers, directors and VP of Design!
They’re located in 12 countries and multiple cities including: Austria, Belgium, Canada, France, Germany, India, Ireland, Romania, South Africa, Spain, UK, US.
A design system a day keeps silos at bay
I’m pleased to say XD now communicate between roles, countries, products, and teams! This has been helped by the creation of a solid design system as well as improved technology such as multiple Teams, Slack and Yammer channels, show and tells, meetups, drop-in sessions, coffee chats, specialist guilds and communities plus many more initiatives to keep teams communicating both virtually and in-person.
There is also the acknowledgement that design is something we need to do together.
Future of XD
So, what will XD look like over the next 10 years?
“We’re in an artificial intelligence ‘summer’ right now — the new capabilities of AI are exciting. Balancing the technical, ethical, and risk associated from a business perspective can unlock real opportunities.” (Ben Wilson)
“In my experience, every few years there’s a seismic switch. We were in Balsamic and then Axure and then Sketch and then Figma, it happens quite suddenly… I wonder what the next one is?” (Ben Wilson)
“Something that will never change is that we are a support team. We are here to make the life of other teams easier so that they can be focused on their key responsibilities, on their knowledge and expertise. They have no value in creating multiple times the same components, but they have the expertise on their product to make this experience more branded, more powerful, more aligned with what the customers need.” (Julien Vanière)
It seems that despite the changes that are coming, be it a new design tool, a new job title, voice control, AI and AR… design systems should remain a constant support to XD, provide a single source of truth and fully represent the Sage brand… we saw what happened before we had a design system!
Were you part of the original Sage XD team? We would love to hear your memories and perspectives — please feel free to comment below.
