When you bring a problem to the XUI team, one of the questions you might get asked is:
Have you tried using just XUI?
We’re not trying to be difficult, this is one of the ways that helps us understand your problem better, and why you’ve chosen to try other things. We’re not against you exploring new patterns, and in fact we want you to use your domain and customer knowledge to find the best experience for your users!
Reconstructing a design using XUI, and the fundamentals, helps us identify the gaps in the current design system and evolve XUI in a sustainable way.
Design intent is how we intend to influence user behaviour through design. What does each element need to convey to the user? What do we want the user to understand? How should they interact with it?
By being clear on the specific and individual problems we’re trying to solve, we can create and reuse consistent experiences across all of Xero. Creating consistency and predictability builds trust with our customers and means they can focus on the jobs they need to do.
Using just XUI can be broken down into three steps:
To help understand how to to do this, we’ve put together a case study using a card style component.
At face value, these “cards” might seem like a reasonable usage of XUI. As we deconstruct the intent of these cards, let’s explore if there are any patterns in XUI that we can better align with.
What does each element need to convey to the user? What do we want the user to understand? How should they interact with it?
In the example below, we can start to call out specific elements that mean things to a user, or encourage certain behaviour.
Use XUI as precedence for patterns in both visual language and interaction. You might find that XUI has a different or conflicting meaning for a similar pattern.
Where possible, try to reuse existing patterns to help reinforce concepts with users. The example below is a good example of using existing patterns. XUI has a side highlight that we use on alert components like banners and toasts to indicate negative and positive sentiment.
There’s opportunities to either align, or differentiate ourselves from existing patterns. In the example below, we have a similar error message used in the XUI Text Input, although there are slight differences between the two designs:
These inconsistencies can be quite subtle, but if not intentionally thought about, can lessen the impact of existing patterns. From a user's perspective, they might question (even if subconsciously) the different icon (“does it mean something different?”) and these inconsistencies can break trust.
Sometimes we may unintentionally design something that conflicts with existing patterns. The example below uses a full width red button as the primary call-to-action. XUI uses the colour red semantically to identify errors and destructive actions – this might not be what you want to convey when you’re asking users to prepare their tax return.
XUI also uses backgrounds with rounded corners to identify primary buttons. It may not be obvious that the card footer is an action when it doesn’t “look” like a button within Xero.
See Luke Wroblewski on consistency in design.
Sometimes, we might only identify issues when we place the component in surrounding contexts. Every designer at Xero has to consider how their work fits into the customer’s entire experience. What might it look like if these cards were surfaced in other experiences?
Below, we’ve place the card in the dashboard, and you can see how some of the typography starts to create an imbalance in hierarchy.
To make sure your design works well with other parts of Xero, you can look to how we create hierarchy within our existing components. The Overview Block which is commonly used at the top of a page only uses xLarge type, but still manages to stand out.
Now that we’ve identified all of the intents and visual language we want to align with, we can reconstruct the card using XUI. You can see that there’s not just one way to use XUI.
Once we’ve reconstructed the card, we can start to identify any gaps in XUI. What doesn’t work well in XUI? Is there still a lack of hierarchy? How can we make this the primary focus on the page?
These are the types of questions that really help evolve XUI in a sustainable and responsible way. We love seeing this exploration, so please reach out to us on #xui-design with any questions.
To recap, there’s three steps to consider when trying to align with XUI.
