New release: Using the Xero design system for a better experience

Over the next 12-18 months, every time we do a feature release, we’ll also be updating the design of the pages you see and frequently use in WorkflowMax.

It’s a great opportunity for us to think about the improvements we can make for you. For example, can we make the page more accessible or the workflow easier?

Eventually, we want all WorkflowMax screens to have a cohesive look and feel. But we need to take a step-by-step approach. So in the short term, some parts of WorkflowMax will have the old design but in the long term, all new and improved features will have a similar look and feel, so you can work more efficiently and get some more time back in your day.

Using the Xero User Interface (XUI) design system for a better experience

To help us design new pages in WorkflowMax in a way that’s consistent across all Xero 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 what you see when you log in to Xero. It contains thousands of styles and layouts – what we call components – such as buttons, checkboxes and tables.

Once the WorkflowMax 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 you. It’s an easier way for everyone to bring you new features faster.

A perfect example has just been released

A great example of the above in action is the changes to the portal screen which we’re excited to release today.

The WorkflowMax portal (portal screen) lets you switch between accounts (if you have several WorkflowMax accounts for different organisations, for example). This screen is mostly used by advisors, account managers, setup partners, account holders or contractors who have access to multiple accounts. You can also update your account settings from this page, such as changing your email or password, or enabling multi-factor authentication (MFA) on your login.

You’ll notice an improved design with colours, graphics and easier access to your own personal settings – just click on your initials at the top right hand corner of the screen. Read more about the changes to the portal here.

Here's a before and after look at our new design

The new portal page

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 means we spend less time designing individual pages and more time focused on helping your business thrive. Look out for time-saving improvements like auto-saving, inline editing, drag and drop functionality and more. 

There are a number of other pages within WorkflowMax that we’ve already rebuilt using XUI:

• Report builder manager
• Folders on quote screens
• Business settings area
• Xero connection page
• The Portal page

More product news coming in 2022

We’re working on the invoice information page as part of the upcoming folders on invoicing release. Keep an eye out for this new functionality in March. We’ll also be making the job manager more consistent with the new folders on quotes functionality and revamping the quote information page. As we confirm the next items of work, you’ll notice the old pages getting a new lease of life. Stay tuned to Max Hub and our blog in 2022 to find out what's coming next.