Reimagining design at Xero

In the design team, we spend our days collaborating with product and engineering teams to solve problems for three million subscribers around the world. This collaboration is critical, because design isn’t just about making something ‘look’ beautiful. It’s about creating an experience that helps you complete a task quicker or make a strenuous process easier.

Since we’ve ramped up our investment in upgrading the technology that underpins our platform, there have been a number of design changes across Xero. We know change can be tricky – especially when you’re busy – so I thought I’d explain a little more about how we’re doing this, and give you a bit of a sneak peek into some of the design changes you’ll see in the months ahead.

What you can expect in the months ahead

Here are a few products in Xero that will be getting a fresh new look (and some additional functionality) soon:

• We’re updating the ‘import’ workflow in contacts to make it easier to bring your contacts into Xero. This follows our update to the list view page, which gives you better visibility of your contacts in Xero.
• The refreshed design in Hubdoc will automatically match contacts found in Xero to new suppliers that are used in Hubdoc. This saves you from manually searching for and attaching a contact every time.
• In our Xero Accounting app, there’ll be new functionality that gives you the ability to sort your contacts by name, amount owed and owing, email and date added. This will help you find the contact you need faster than ever before.
• Our history and notes report will be refreshed with a cleaner design, a new ‘reset filter’ button, and the ability to select both individual dates and pre-selected dates. The new ‘load more’ functionality will make it easier to scroll through your results.
• We’re giving our inventory solution in Xero a new look. This will include updates to the product details page, history and notes table, as well as the workflows to edit an item, make an adjustment to stock, import an item and import an opening balance.
• You’ll soon have two ways to view transactions on your bank reconciliation screen. You can choose between an enlarged, zoomed-in view, or a compact view that displays more transactions on screen. Simply move the toggle to choose the view that best suits your needs.
• We’re also updating the bank rules edit screen, where you can change a bank rule you’ve previously set up in Xero, or delete the rule completely.

Why we’re giving our products a new look

We understand that you’d rather have a new feature than a new design. But upgrading our technology means we need to update the design of the pages you see in Xero. So it’s a great opportunity to think about what improvements we can make along the way. For example, can we make the page more accessible or the workflow easier?

Eventually, we want all Xero products to have a cohesive look and feel. But the scale of our platform means we need to take an iterative approach. So in the short term, it means we’ll have some products with a modern look and others that haven’t changed for years. But in the long term, everything will have a similar look and feel, so you can work more efficiently and get some more time back in your day.

To help us design new pages in Xero in a way that’s consistent across our products, we use a design system called Xero User Interface – or XUI. XUI is like a digital library of elements that our designers use to build the experiences you see when you log into Xero. It contains thousands of styles and layouts – what we call components – such as buttons, checkboxes and tables.

Once a product team has completed their customer research and decided what the page needs to include, the designer can pick and choose different components in XUI to create the page in a way that’s familiar to customers, making it easier to learn and use. We then work closely with the engineering team to make sure the design is connected to the technology that underpins our platform.

The beauty of XUI is that we can reuse components, so we don’t end up with 100 designers all trying to create the same date-picker. It also means we can update a component once in XUI and the change can be reflected everywhere. This saves us a huge amount of time, so we spend less time designing individual pages and more time focused on helping your business or practice thrive.

Help us imagine the future of Xero

We’ll continue to keep you updated on the changes happening in Xero. But if you’d like to be involved in the design process, you can join our design research panel. It’s a great way to get involved in our product development, and includes things like online surveys, interviews, user testing and other kinds of research, to help us shape the experiences you deserve in Xero.