Reimagining Xero.com from the outside in
Xero is a global cloud-based accounting software business, and its website (Xero.com) is the front door of a rapidly growing technology company meeting the diverse needs of millions of external users (and hundreds of internal ones) all over the world.
Over 9 months, we designed a system for the transformation for Xero.com: a complete toolkit that goes beyond visual and interaction design, and into the way teams from 5 different regions around the world work together to design, deliver and constantly improve beautiful user experiences.
Xero.com had inconsistent quality across its 10,000 pages. Internal teams felt unclear and frustrated about how to improve it. Simply designing a new website wasn’t enough for lasting change. We engaged hundreds of users, internal and external, in a design process reimagining Xero.com from the outside-in.
– A vision and design principles describing Xero.com’s fundamental aims
– A digital identity bridging the gap between marketing and product experiences
– A modular design system, meeting the highest levels of accessibility, tested with users all over the world
– A digital playbook guiding Xero’s website team to deliver great experiences.
The new website has been piloted in Australia, NZ and UK with significant uplift in quality of user experience and commercial effectiveness. New global teams and capabilities have been established to deliver this new experience, with the NISR model embedded and expanded.
In the future, our design system and operating model allow for personalisation to happen in a radically different way for Xero: one-to-one experiences at scale. For a business that does the majority of selling online, this is critical. Based on McKinsey data (https://tday.ly/35Itoo3), this evolution could close a major opportunity gap, leading to an increase in revenue of 15%.
This project brings together a range of leading and emergent digital design practices—object-oriented user experience, atomic design systems, decoupled content management—into a toolkit of design transformation, just for Xero. It’s unique in the way it approaches the development of the website as equal parts organisational change, technological challenge and experience design.
In 2019, our process was global, human-centred and conducted almost entirely online with users and internal stakeholders from around the world. We ran co-design workshops, user interviews and project rituals, all through a combination of Google Hangouts, Miro, and Figma.
It was good practice for 2020.
We took an object-oriented approach to design: each part of Xero.com’s content and design was broken down to distinct building blocks. This means that Xero teams in any part of the world can create local content, design and marketing experiences from those building blocks, while still telling one consistent global story.
We created a custom operating model: ‘NISR’ (needs, information, structure and representation) that decouples each part of the experience from the others, leveraging the full capability of Xero’s technology (including Adobe Experience Manager). This took us from digital design to organisation design, mapping workflows, structures, roles and responsibilities.