How Sage used zeroheight to go from the Wild West to Clear Design Principles
Sage has a lofty mission, “knocking down barriers so everyone can thrive.” Their finance, HR, and payroll software allow businesses to spend less time on mundane financial reporting and more time serving their customers.
The Experience Design team at Sage has a similar goal. They’re focused on allowing internal product teams to thrive and create stellar user experiences. In turn, Sage customers have everything they need to grow their businesses.
A couple of years ago, they noticed a critical problem holding the Experience Design team back from achieving their full potential: the lack of a design system. Without clear guidelines, reusable components, and code snippets housed in a design system, the product organization at Sage was wasting time. And worse, they were missing opportunities to optimize the user experience.
No Guidelines
Before the design system was created at Sage, product designers basically had free reign to create whatever they wanted.
“The biggest challenge we’ve had, which now we’ve overcome, is around how people could accept to follow the rules. For years, product designers were left alone to apply the brand in autonomy, so we had to make them understand the value and benefits of following common guidelines”
– Julien Vaniere, Design System Director at Sage
Certainly, this approach would lead to product inconsistency for any company. But for Sage, the problem was amplified. With over 230 members on the experience design team and frequent acquisitions, it was incredibly easy for user experiences to become misaligned.
Luckily, designers at Sage got to work on creating the beginnings of a design system.
The Beginnings of a Design System
Like many design systems, the design system at Sage started with a few designers recognizing a problem and setting out to solve it. For three years, the fix was an informal design system that they contributed to during their spare time.
While this was a huge improvement over nothing, it still fell a bit short – their work wasn’t official, and there was nothing requiring product designers to follow the guidelines they published.
Eventually, Klaus Kaasgaard, EVP of Experience Design at Sage, made the case for the company to form an official Design System team. Once it was approved, they finally had the budget and personnel to make their work even more impactful.
The newly appointed Design System Director, Julien Vaniere, knew that the next step would be deciding how to build their styleguides.
Choosing a Platform
The members of the first Design System team at Sage started by contemplating two solutions – creating their design system on a brand management platform or building an in-house solution.
Initially, they started with the brand management platform. Julien got an opportunity to test the product in beta, and the platform was already being used by the Sage brand team. On the surface, it seemed like a no-brainer. However, problems quickly emerged as their new platform of choice was slow to introduce features meant for designers building design systems.
Once it was clear a brand management platform wouldn’t cut it as the backbone of their design system, Sage contemplated building a solution of their own. While that would have allowed them complete control over the look and feel of their styleguides, they ultimately decided it would require too much work. And, building the platform would mean waiting even longer to start realizing the benefits of a built-out design system.
Right before their deadline to choose a tool, the Sage team found zeroheight. It was a solution meant for building design systems. And, many features they would need to build, like a Figma integration, already existed.
Getting Started with zeroheight
At first, the designers on Julien’s team wanted to deeply customize their styleguides. After all, they had just left a platform that allowed them to use CSS to create just about anything they wanted.
But, Julien wasn’t so sure that the ability to customize any and everything was the right way to go.
“When you think about sustainability, the zeroheight approach is way smarter…and the benefit is all of the pages look the same. It’s very easy for me to update everything. So, when we had new branding, it took me half an hour to copy that to a dozen styleguides.”
– Julien Vaniere, Design System Director at Sage
In addition to faster updates, the zeroheight platform allowed designers to focus on getting the right content into their styleguides. The templates were already available, so the discussions centered around rules and guidelines instead of content layout.
And for Sage employees, a common theme has made it easy for them to flip back and forth between different styleguides without feeling like they’ve landed on a new website every time.
Using and Measuring the Sage Design System
Almost a year and a half after building their design system in zeroheight, Sage has developers and designers visiting their styleguides on a daily basis.
In a two-week span in August, the Sage Design System was visited more than 1,500 times. The Sage Design System team uses Google Analytics to measure the usage of their design system.
For Sage customers, the design system is a silent hero. Everything in a Sage styleguide has been user-tested, accessibility reviewed, and created with input from multiple teams. So, when developers grab a component to use in an upcoming product release, they can be certain that user experience has already been thought about extensively – a huge improvement from the rogue designs developers used prior to Sage adopting zeroheight.
Another benefit for Sage has been freeing up time to spur additional innovation. Julien noted that prior to a design system, ten different teams worked on creating buttons for the Sage platform. Now, just one team creates buttons, documents their work in zeroheight, and all teams benefit.
Julien unequivocally notes that the time they’ve saved as a result of creating and maintaining a design system benefits Sage end users in the form of a more consistent, easy-to-use product and faster product development.
Investing in a design system, and adopting zeroheight, has proven key in allowing Sage customers and employees to thrive.