Audrey Tan from Xero: Creating a long-lasting design system vision

‍Chris:

Hi, and welcome to The Design Systems Podcast, the place where design development overlap, brought to you by Knapsack. Check us out at knapsack.cloud. So hey everybody, today I'm here with Audrey Tan. She's the director of product design at Xero. We've been talking a little bit about life, the universe, and everything. Really excited to have you on and to chat about some of the really incredible stuff you guys have done with culture and intention around design systems.

Audrey Tan:

Thanks so much. Happy to be here, Chris.

Chris:

So diving right in, one of the things that I think was interesting about kind of the notes before the show was this idea of the intention setting behind the design system. So a lot of times when you think about how design systems get created, how they evolve, is you have an insurgency. You have some team, or some group of people, maybe a solo designer, maybe a developer, product owner, that basically says, "My life would be so much easier if I had a system to manage all the stuff that's being thrown my way." What you guys have done is kind of taken that in another direction, maybe a more elevated position of, we actually want to look at it from an organization perspective. What do we get out of our design system? And how do we set some broad intentions about that, that is company wide? Tell me a little bit about that.

Audrey Tan:

Yes. At Xero, as of a year ago, we had sort of two designers full-time on our design system team. Our design system is called, we call it XUI, which is spelled X-U-I. Xero has this thing with we love our Xs and we just put them in front of everything. So XUI as our design system only a year ago had about two people. And when we talk about intentionality, it was really kind of the time, that crossroads where we're like, "Yeah, we want a design system, but not just because we want to help increase developer velocity, or because everybody else who's cool has one. But we really want it to work for us." And so since then, we've scaled it from a team of two designers to more than a dozen. And it's an actual pod with some product managers that really actually, within the past year, have set what we would call a design systems vision that really encapsulates what it is that we hope to achieve from it kind of three to five years out from now.

Chris:

Got you. So you have this pod, so tell me a little bit more about that. Is that like a formal structure in the organization? What does that actually mean?

Audrey Tan:

Yeah. So it's an actual team that's dedicated solely to the success of XUI, and sort of the use of XUI across Xero and ultimately for our customers. So the pod is comprised of about eight engineers and about a dozen or so designers, and managers who actually do sprints. So they will identify a need, whether it's to shiny up a component, or maybe the need actually has to do with more like evangelism and getting more people across XUI. But yeah, it's a fully dedicated team.

Chris:

Got you. So that fully dedicated team then, their sort of mission is now this three to five year plan around what the intention setting is for the design system and some outcomes you guys are hoping to achieve. Talk to me a little bit about that formation process. So you have two designers that go to 12 designers. You have an informal structure that goes to a formal structure. What does the outcome of that planning process look like?

Audrey Tan:

Yeah. So the outcome I think has, for us, has been a more real just group of bodies in team that the rest of Xero design can sort of look to, to tap into. And how that manifests in an example is I had a designer on my team, and he's like, "I'm not really sure how to incorporate and do this brand refresh for this other part of the platform. How should I do it?" And it was like, "Well, let's connect with Zach on the ZUI team." We had a really great meeting, formed the Slack channel, and it's not opened up just lines of communication. I also think that it's really given all of Xero, not just designers but engineers and product people, sort of an anchor as to belief that we really have committed with bodies and people, really smart people, to make their lives easier. And it's just a matter of putting in the effort to tap into the work that they're doing, whether that's by going into office hours and things like that. But it's really, really yielded some great results.

Chris:

So I love that phrase you used, where it's gotten people to believe in the commitment of Xero to a better workplace. I think that's something that in particular I latched onto, largely because that commitment is representative in resources towards this system. And so it sounds like the goal of the system for you guys is, yes, it's in service of customers. But it's also in service of the people that work at Xero in trying to make their lives better and easier. And I kind of brought that up in the starting point, how most design systems are an insurgency because somebody is trying to make their own life easier by creating a system where one never was present before. You guys are basically talking about that on a company wide scale of, let's make our lives better by continuing to invest in this design system.

Audrey Tan:

That's right. And I think that an example of how it's not just a singular group, but I would say one of the themes of the vision that we were able to articulate this past year was having a co-ownership model. And so as a theme to this vision, it's sort of us saying, this is us saying that we really care about including that person who is championing accessibility, including maybe even the people, the PX person, the people of Xero person, to make sure that we're designing a system that is inclusive and truly feeling actual very global, which I think is kind of unique to Xero because we have customers in so many different countries.

Audrey Tan:

It's really important that we have this sort of co-ownership, whether you're a designer in the US, sort of representing kind of what you believe people in the US kind of want more from a design system, some of the standards that we might have that might be differing from different countries. And so yeah, I definitely think that it's been really great just to get eyes. And yeah, people kind of are rallying around a design system is more than just something that makes a developer ship faster.

Chris:

Totally. I think that's actually kind of speaks to you guys' origin and nature. I mean, being a company out of New Zealand, just by the very nature of New Zealand, you kind of have to be a global organization. And so I love the idea of taking a bunch of different teams that are beyond developers and designers and incorporating those other stakeholders into the co-ownership of that design system. How did that really get kicked off? I'm curious how you get a team that's focused on localization, or internationalization, or a team that's focused on accessibility to really join in the pact of the design system.

Audrey Tan:

I think first off, you just have to take a breath and realize sort of kind of what you want to achieve. And I think from that, you're able to sort of organically get names and faces and understand what these names and faces mean in terms of what their commitment, what their role is at the company. So for example, looping in someone like myself, who I don't represent just my specific portfolio of billing and automation and things like that, but I also represent sort of a designer in the US. Right? And so identifying those stakeholders and being very intentional about making that list of people that you want to include. And sometimes the list can be kind of long and big, but actually, being very smart about what that person brings to the table, being mindful of sort of their time, time zones, that's also a thing.

Audrey Tan:

But I think it really kind of starts from that. And I think that what I was really, really impressed with about our process is it was just a lot of white boarding. We love our virtual white boards now, of people just writing in everything of what they want out of the design system, what their expectations are, bringing in their different perspectives. And I thought it was a really good example of that divergent thinking that designers like to sort of talk about. And so a lot of that brainstorming, a lot of the iteration, and it actually happened over very specific, it was over a sprint that we did this.

Audrey Tan:

And so it wasn't just like, "Oh, let's just try this and see how it rolls." But it was very much like, "There's a beginning and an end to this sprint." And at the end of it, this is what we hope to sort of have, that we can ... Again, that is not like the end result or goal, obviously. You still keep massaging over. But we came out with five sort of principles or pillars, the co-ownership model being one of those. And so it was a really collaborative process.

Chris:

So when you think about what happens in that sprint, so you took this finite amount of time, handful of weeks, and you basically said, "We're going to go, and we're going to source collaborators, we're going to develop a set of baseline principles." What did that process look like?

Audrey Tan:

Right. So that process was a lot of using the virtual white boards, and people just kind of being, creating that safe space where people brought their own sort of passions and priorities. And some of the priorities probably actually didn't make the cut. So I think part of that process was also sort of ... It was an exercise to help prioritize also the things we wanted to focus on. So there was a priority exercise, and then another part of that process, which I really enjoyed, which was we actually had a board that represented a press release of what Xero wanted, would've run with in the year 2024 of, hey, Xero's launched this amazing design system. What do we want that press release to say about us?

Audrey Tan:

And we actually, it was with, I don't know, one of the big tech publications, and it was broken down into: What's the headline? What's the sub headline? What are some of the quotes that we want to include as part of this press release? And so I actually think that was a really great specific exercise to get people to focus ahead and actually get excited about what we want our design system to say literally in a couple years.

Chris:

That's awesome. So you guys actually constructed a reality that you then used as basically that North Star to move towards.

Audrey Tan:

Absolutely. Yeah. And having it sort of be grounded in the actual structure of a press release, I think it was kind of fun. And really, it can inject a lot of, hey, now I actually get it. It's not just a strategy on a page with boxes and words. It's like, "Oh, okay. Someone not at Xero would be able to read this and sort of understand what it is that we have achieved, which is awesome."

Chris:

That's great. I think that's a nice concrete deliverable for a planning process like that, that is a little outside the box. As another part of this, one of the big things that you guys constructed was this visioning statement, and beyond that visioning statement, a couple of practical principles that would apply to it. I think that principles as a way of grounding decision making about a design system are very powerful, and that not everybody can be involved in everything decision that is made about a design system. And when you're absent from that decision process, the principles are that guiding rubric for how to make the right decision about the way forward. Talk to me a little bit about those principles because co-ownership being the first of many. What else did you guys come up with? And kind of give me a sense of why.

Audrey Tan:

Yeah, absolutely. So another one of the principles was that we want our design system to be expressive. And I think that it was really great to have this principle in there as a nod to us showing others that this isn't just about the software. This isn't just about the experience of a customer who's actually purchased Xero. This is about the whole experience of, I hear about Xero in an advertisement, I see something. I go to the dot com, and having sort of the branding and the way that our voice and tone tie into this whole product. So I really like that word, expressiveness, to sort of as, like I said, a way to make sure that brand is also part of this system. Right?

Chris:

Are all of those digital touchpoints, the marketing side of things, the product side of things, the partner channel side of things, is all of that a part of the design system in the way that it's currently thought of?

Audrey Tan:

So I would describe that as a work in progress for us, but that's essentially why we have this principle, is because organizationally at Xero, it sometimes might feel that the marketing department is a bit more together, and in terms of just even how they do their illustrations. And what we want to do is move towards a place where how we express ourselves at Xero is consistent from the moment someone hears about us on the dot com all the way through when they actually use our platform to send an invoice. All the things that we love as designers, the colors, the tones, the little border radiuses, that it's all one cohesive feeling, so that and we're able to use the design system effectively to dial up and dial down the different ... How strongly do we want our Xero voice to be at this point of this customer's journey? So that was another pillar that I really appreciated.

Audrey Tan:

And if I could talk about another pillar that's probably my personal favorite, it's this shared commitment to quality. And I think it kind of builds on the co-ownership model because if you don't have co-ownership, and if you don't have a commitment to quality, then suddenly you can get maybe a situation where it's just like one group sort of being the Nazi, and I'm going to hold the keys to the kingdom kind of thing.

Chris:

So when you think about the application of that quality standard, that is a shared commitment to quality is also a representation of a more federated model for contribution, where you don't have that singular person that is in control, or that singular group that's in control. You share that control in a federated manner, and everybody needs to still maintain that quality standard. Is that kind of akin to what you're going for there?

Audrey Tan:

Yeah, absolutely. And it sounds great, but if you think about it, it's really a challenge to achieve because it requires probably more a commitment to doing check ins and actually being more upfront with somebody who's not using a design pattern the way that they really should be, or the component that we're building isn't quite meeting the needs across a couple different use cases. So I think it requires a bit of honesty there, but that's why I really appreciate the fact that we have this in there as a way to sort of break into some of what might be some challenging conversations around needing to push something a little bit harder.

Chris:

So I think that's awesome that you have this idea of this federated model that is a commitment to quality. It allows you to have conversations that you wouldn't normally be able to have, largely based upon that value. What else did you guys come up with as a part of this?

Audrey Tan:

So another one of our principles really is around having strong technical foundations. So you've got to acknowledge the importance of picking the right tools, making sure that people know how to use the tools the right way, and realizing that it's not just about developer tools. Right? It could be about tools for someone on our content team. We have a dedicated content team at Xero. How can we make sure that they have the right tools, so that their workflows all make sense and are contributing to the design system? And it's sort of what I like about these principles, it's sort of like they kind of stack on top of each other, so there's the co-ownership model, the commitment to quality, the technical foundations. And it's sort of like if you don't have the prior, the following becomes a bit more difficult.

Audrey Tan:

And it's like with the technical foundations, it's not just about tooling. It's also just giving people sort of the ability to feel free to inject the art into the technical aspect of what they do, if that makes sense. So yeah, we just wanted to make sure that our technical foundations were such that we could give everybody in their own discipline sort of the ability to control their own destiny, if that makes sense, to sort of set them free, let them contribute, sort of have what can be hard about design systems in terms of process and overhead, just sort of disappear.

Chris:

That's interesting. It seems like you guys really value that autonomy as a part of the intentionality and really the foundations for this system. And that seems to have played out really well in the actual implementation. Can you talk about some of how you guys live these principles in terms of the delivery of the design system to the organization?

Audrey Tan:

Yeah, sure. So I would say a specific way that we're kind of leveraging this is with kind of a strategic initiative we have at Xero to really kind of modernize our platform. And I feel like if you work at a SaaS company that's older than 10 years old, someone's going to be asking the question, or someone's going to identify the need of, hey, maybe it's time to go into the engine and revamp a couple things. And so I think that as part of this initiative at Xero to sort of modernize parts of the platform, obviously with that comes this end experience of what the users are touching and feeling in the software.

Audrey Tan:

And so with XUI, it's really kind of, it's nice to have these principles because now that we're all trying to modernize, we're able to use these principles to give us guidelines as to make sure that we're sort of playing and contributing in the way that we're supposed to. I'm not going to go rogue, but I'm also not going to expect someone else to do it for me. I'm going to contribute myself. I'm going to be collaborative in this process.

Chris:

That's really great. I think that concept of play was a big conversation that we recently had with Jess Clark. And I love that, that word comes out over and over again in these conversations, where people want that playground, that experimentation area, that sandbox, that they can test out their ideas within a defined set of constraints that means they aren't completely, like you said, over in some foreign land, not working on the same product, but still have this sense of adventure and exploration.

Audrey Tan:

Right. And I think especially as designers, we crave that allowance for creativity. And sometimes I think a lot of us forget the importance of injecting that into our day to day. But through tooling, and whether you're the type of designer that just loves the tools and wants to know what the latest and greatest and play around. It's like we want to encourage that, but in a way, we're still sort of moving the needle, getting everybody sort of closer to this end state, where we could even achieve what we actually wrote in that press release.

Chris:

It also seems like that press release is really cross functional because you have content, you have engineering, you have design, you have product ownership. You have all these different things that are a part of this pod ecosystem you've talked about. So tell me about that enablement of cross functional workflow because traditionally, getting designers and developers is hard enough to put them in a place where they feel like they can work comfortably together. But then all of a sudden, you're adding marketing people and content people, and all these other folks to this ecosystem that absolutely should be there. But even crossing that boundary of designer developer collaboration is very challenging for a lot of businesses. How did you guys really look at that challenge of getting all these different stakeholder groups to really collaborate and work together? And how did that play out?

Audrey Tan:

Yeah. So I would describe it as still very much a work in progress. And I think that first, it's about the designer developer, and then even with product, I feel like. So if you were going to visualize sort of a stakeholder group as these concentric circles, it's like you have this core group of stakeholders that probably need to get it first and foremost. And then once you have that right, you're able to sort of branch out and then have conversations. And so to be fair, I would say Xero's at a place where we're still working on that classic tripod of product design and engineering, however, but with the way that Xero is, within design, we have research and we have content.

Audrey Tan:

So it's really just about kind of being proactive with those conversations and having a good memory to what you took away in that conversation because you might have that conversation, but realizing the output might not be able to happen for a good six months, maybe even a year. But to me, I feel like it's really important that we kind of have the perseverance and the fortitude and the patience to sort of still realize that as much as it's a work in progress, I know that it's still very important that we get to a place where the cross collaboration between me as a product designer and a designer on the marketing team is so smooth and seamless that imagine a world where we could essentially ship the new sort of guide to a new product sort of like, I don't know, instantly. How cool would that be?

Chris:

Right.

Audrey Tan:

And so it's about sort of staying committed to that journey and that end state. But yeah, it's definitely a work in progress. But I would say it helps when you really enjoy the people you work with and as much as [inaudible 00:22:15]. Yeah, Xero's a company based in New Zealand, and so I work with a lot of kiwis and Aussies, and they're just delightful, and so it sort of helps.

Chris:

That's great. Yeah. I think that what's interesting to hear you talk about the journey that you're on and how it's an ongoing process. It sounds a lot like culture building. It sounds a lot like talking about how you want to create a culture that is about this collaboration, about this federated model, about the principles that you define. And by defining that culture, by definition, you're going to be putting people on this journey, on this pathway towards this very intentional future you set for yourself. I think that's a really interesting model for not just design system work, but adoption, about growth, about exploration, all those different things. Was that the intent from the beginning? Because it's a pretty awesome way of being in a company as it relates to a design system.

Audrey Tan:

Yeah. You know what, I will say I believe that was the intent because when I think about where we are now and where we still have yet to go, it's been an amazing process, not because we can necessarily brag about moving KPIs and stuff like that. But it's been nice to see a few tangible examples of how it's really manifesting in terms of shipping product that I as a designer, that my team feels proud of. Right? And it's sort of, as part of that, it's not just about shipping that pretty thing, but it's being able to say to yourself, "Oh, it's because we went through this process of committing to a design system with the intention of just not making it faster if we're engineers," but like I keep saying, but really making it kind of better for all.

Audrey Tan:

And it sounds almost a little kind of utopian, sort of in this paradise world. But I do think that you've got to hang onto a little bit of that, sort of thinking sort of in the ideal, and just doing the grind every day to commit doing your part to kind of making it happen as part of the design system.

Chris:

Yeah. I mean, it definitely does sound like you're living a little bit in Elysium. But I think that's amazing. Right? I think that thinking about what's possible with a cultural definition around the idea of this collaborative process. I think that it's also interesting because in my head, I've been through this conversation trying to think about which one came first, this chicken and the egg idea of a systems based view of the way that you think about building software, and a brand, and expressing that brand, or this commitment as a culture to having this system to leverage to make all these things work well together.

Chris:

And I think that's kind of a little bit brilliant that, that's a little bit of a flywheel, just in my brain right there, where one feeds the other, and that feeds back into the first. I think that's a cool way of looking at a system and thinking about how that culture of people relates to that system.

Audrey Tan:

Totally. The chicken or the egg question, the answer, I feel like it doesn't matter. But it's what's more important is that we're thinking about the wheel and really just pursuing outcomes that are better for the customer, that are better for us as people who work on the design systems, that we have those wins. But yeah, I totally agree with you. It's an interesting one. And whether at Xero, it was the chicken or the egg, I think just believing, back to that word, belief, that what really matters is the contribution. It's the build. It's that creativity, it's that process. That's what kind of inspires me.

Chris:

That's awesome. When you think about taking that inspiration and applying it to what's next, either professionally or personally, where do you take that inspiration and run with it outside of this immediate work with the design system team?

Audrey Tan:

I guess for me, when I sit down at my computer every day, whether it's because I'm dialing into work, or I'm needing to do a Zoom call with a friend, or something like that, I think how it inspires me is really just being able to maintain that perspective and just be kind of chill about ... It's like there's this ... This is terrible, Chris.

Chris:

You're doing fine.

Audrey Tan:

I'm not going to be able to articulate this in a way that's not too-

Chris:

Oh, we get woo woo up on this show.

Audrey Tan:

What is woo woo? I don't even know what that is.

Chris:

The whole idea of Shamanism and the woo woo-ness and everything like that.

Audrey Tan:

Okay.

Chris:

Yeah, dive in.

Audrey Tan:

No. Yeah, this is going to sound super meta and cheesy. But I've been really lately been focused on this idea of, for me personally, wanting just to be okay with, I don't want to use the word failure because I don't really view them as failures. It's sort of just like missed deadlines, missed expectations that one had that didn't necessarily come to fruition, and sort of I guess being okay with that. And I guess maybe the way to tie it into the design system here is our last pillar is embrace the chaos. Our last principle of our design system is embrace the chaos.

Chris:

That's awesome.

Audrey Tan:

And I think that's probably the thing that I am, especially having moved in the pandemic, the pandemic itself, just the chaos. Right? And being able to have systems, delight in my systems, in my tiny little system of my daily breakfast routine, or whatever it is, but then still be able to zoom out, pan out, and say, "Yeah, life is chaotic. And this part of my life might not be completely in line with what I imagined it being at the point I am in my career." But just being okay with that, if that makes sense.

Chris:

Yeah. Finding some sort of acceptance and some peace about it all. I think that's cool. It's a very mindfulness driven idea is that you can control what you can control, and then it's about understanding how those other things just kind of flow through you.

Audrey Tan:

Yeah. I think that's a good way to put it, a better way to put it. To let it flow, sometimes I like to describe myself to other people as I'm like water, can truly kind of go with the flow. I don't think I was always like this. I think I was probably more so like, "No, we have to have a system, and there needs to be controls. And I need to have control." But I think to make it really kind of about life, I guess mindfulness is a good way to describe it, I think for me personally. Yeah, embrace the chaos. Have a system, but embrace the chaos too.

Chris:

And I think that what's interesting is that when you think about leading the design system effort or leading the design system team, I think that the ability to absorb that and to find that peace inside of what is typically a pretty chaotic process is probably a good thing. I think honestly, if you try to white knuckle it through a design system implementation, you'll drive yourself crazy.

Audrey Tan:

Yeah.

Chris:

And so I think that there is a bit of peace to be found inside of embracing that chaos and realizing that not everything about the system is controllable, largely because you want other people to own it. And they're not always going to think about it or approach it the same way that you are.

Audrey Tan:

Right. That's very true. When you say white knuckling, I was recalling what my colleague, Zach, was saying. He's like, "Yeah. We're definitely flying the plane while building it." Or what's that analogy? We're building the car while driving the car.

Chris:

Yeah.

Audrey Tan:

And it's chaotic. If you plan, it's like ideally you have all time to really think through every move. But in reality, I feel like especially with design system, it doesn't work that way. And so as much as dot your Is and cross your Ts, just being able to say, "Okay, this is where we are now, and this is good enough for now. And we're going to still commit to quality, obviously." But it's okay, let's just keep moving, keep swimming.

Chris:

Awesome. Well, Audrey, been a real pleasure to talk to you. I hope as you continue down this journey, you continue to find that peace and acceptance, and are able to just keep swimming.

Audrey Tan:

Yeah, man. Thank you.

Chris:

That's all for today. This has been another episode of The Design Systems Podcast. Thanks for listening. Our producers are Ryan Peterson and Shayna Hodkin. Our musical composer is Wes Willis. Our editor is Zach Marcus. If you have any questions or a topic you'd like to know more about, find us on Twitter @TheDSPod. We'd love to hear from you with show ideas, recommendations, questions or comments. As always, this pod is brought to you by Knapsack. You can check us out at knapsack.cloud. Have a great day.