How and Why We Should Make UX Design Circular

Ashley May at UXDX EMEA. Video: https://youtu.be/SbDDcY39yUA

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Trainline, trains and the UX team

[00:00:00] Hello and thanks for tuning in today. My name is Ashley May and I'm a lead UX designer at Trainline in London, and today I'm going to be talking about designing out waste in UX, and how and why we should apply the principles of the circular economy to digital products and services.

[00:00:26] So as I said, I'm a UX designer at Trainline. Trainline is the world's leading rail and coach travel platform. The mission of Trainline is to help customers find the best value for their journey and get smart real-time travel information, and it's also to encourage people to travel in a more sustainable way. With Trainline, passengers can seamlessly book, search and manage their travel on one device, and we handle millions of routes across over 270 coach and rail carriers, 45 countries and counting in Europe, and you can book worldwide. The app's been downloaded over 44 million times, and our retail API platform, which is known as Platform One, hosts more than 90 million visits per month.

[00:01:27] And here's a nice train, which I'm putting here for no other reason than I like it. It's a confession of mine actually, which is to say that I am a bit of a train nerd, so I'm very much in my element being a UX designer at Trainline. But there's more to it than that, which is that trains are great, they're a sustainable method of transport. Actually, in the UK and EU, transport creates 27% of greenhouse gas emissions, so changing how we travel is one of the best ways we can help the planet.

[00:02:03] And if we look for example here at a journey from London to Edinburgh: if you travel by train you're using 24.9 kilos of CO2, if you go by car it's 97.8 kilos of CO2, and if you go by plane it's a whopping 179 kilos of CO2. So that modal shift is a huge way to make a difference.

[00:02:29] And that's what we do. We are part of the product team at Trainline. We are a UX team made up of almost 40 people and we work at the convergence of design, data and transit. We have three main disciplines within the team. So there's UX designers such as myself, who are responsible for everything from the initial wireframing up to the visual creation. We have UX writers, content designers and localization experts, so as our markets have grown across Europe we've had to modify our tone of voice to be able to speak in a local language, and that's meant that we've had to integrate our team with the localization. And we've also got user research, who give us insights on customers and the market, and we work together to create products for our customers.

[00:03:25] And like many product teams we also use a design system. Ours is called Depot, and it's owned and steered by our platform team, which is a cross-functional guild of UX designers, content specialists and engineers. And it was pretty much born out of a need to make sure that we systematize our designs and make sure that our ways of working are made as effective and efficient as possible. But crucially, it was also given space and time by Trainline as an organization to be developed, which is a key point.

The problem: UX design generates waste

[00:04:10] So what's the problem we're here to talk about today? The problem is that UX design is obviously a human centered discipline based on customer needs and insights, it's by humans for humans. But humans are complicated and squashy and weird, and a lot of our systems end up becoming the same. We generate a lot of waste in the form of discarded hypotheses, dead end designs, single-use documents. And this does have a real world impact, it's not just digital. It's got project velocity, interrupted product cycles, energy wastage from servers and screens, and even our own well-being and time as people.

[00:04:59] Before we go into that I'd like to just recap the design history lesson, find out how we got here. So if we go way, way, way back now to 1440-ish, Johannes Gutenberg, the advent of the printing press, right up to 1990-ish. If you're talking about the rail industry, we had printed books and artwork and timetables, tickets, and all these things had weeks if not months of turnaround time. Things were sent by post, it was very slow, very methodical, up to 1990 and the advent of desktop software like Photoshop.

[00:05:40] But we had Photoshop files coming on disks. If you wanted to share files you used FTP or CDs. It was very siloed, it was very individual, and lots of bad habits snuck in. And that continued up to the usage of tools like Sketch and Dropbox, so we had file syncing, we had the ability to sync files and share them, we had the advent of initial design systems. But things were still semi-siloed, there was still no real way to collaborate cross-discipline. Up to 2019-ish in terms of our adoption at Trainline, up to today where we've adopted Figma as a tool, which gives you browser sharing, live collaboration between design, between localization, content and developers, and it's much more efficient and much, much better for collaboration.

[00:06:36] But it's clear that historically we've gained bad habits and been creating throwaway tools, throwaway work on disconnected tools, and products to a degree do equal waste. And the drivers for us at Trainline have been growth post-Covid, coupled with the push to drive more sustainable rail. That's a good thing, but the growth has led to upscaling of our systems and finding that some of them aren't necessarily fit for purpose. Market diversification, so we've opened up new markets as I said with new audiences, and this has led to opening up new teams in different locales, so we've got product teams in France, in Spain, in Italy. And this means that we're working remote first and changing our ways of working, and it's stress testing our systems. And also, coming out of re-platforming as we have been in the last few years means that we're revisiting some legacy designs and those need to be updated, and that's another test of our systems.

Ecological waste and UX waste

[00:07:52] Talking about waste, so this is obviously traditional ecological waste. What is it? It's single-use items, non-recyclable materials, products that favor convenience over usability. How does it happen? It's the byproduct of bad habits, bad systems or bad design. In terms of the things we're trying to protect, our sort of most valuable products, it's the air we breathe, the water we drink, the land we live on, basically our mineral resources. And how do we fix this? It's by being able to recirculate as much waste product as possible, whilst reducing harmful material waste in the first place.

[00:08:40] But this is also waste. This is UX product design waste. It's disconnected or legacy designs outside of systems, it's having to recreate files, it's unlean process chains[?]. It's also the byproduct of bad systems, bad habits or bad design. And for us as UX designers, our MVPs are our customer experience, our finances and prosperity as a business, our own well-being and our impact on the environment. And ways that we might fix this is our ability to recirculate as much useful work as possible, again whilst building effective processes in the first place.

[00:09:26] And that's where we talk about the idea of the circular economy. So as I mentioned, circular economics is a way of recirculating as much of the material in the product process as possible. So at the point of use we try and intensify use, dematerialize things to as much of a degree as possible. At the point of disposal we make sure things are reused. If things cannot be reused, we look at the idea of remanufacturing or refurbishing, back to the point of production. And then things can be broken down into constituent parts, in some occasions, with the idea of recycling.

Goals for circular UX design

[00:10:08] So that brings us on to our goals for a circular experience, for circular UX design. So we're looking to design out our ideas of UX waste and pollution, with more sharing and alignment sessions, better systematizing with our design systems. We're looking to keep our products and materials in use, so recognizing that in the product team we rarely start from scratch, and that's actually a good thing. And to regenerate our standard systems, so we've started with our tooling, we're continuing with our design system, we're looking to see what's next.

[00:10:45] So essentially the bold statement here is that systematizing the product process increases scalability and pace. Which in other words means that we need to invest in not just designing, but in designing the things and the tools we design with.

[00:11:03] How do we do this? So, with planning effectively, making sure that we've got an agreed scope for projects, we've got clear abstracts and agendas and we've got good, well-written OKRs, that's objectives and key responsibilities. With tooling, so as I've mentioned we're using tools like Figma and Miro with much greater amounts of collaboration, and we're also looking at automated dev releases with our developers. And systematizing, so with effective code based documentation with developers, with using our design system which is Depot, and also leaning on native UIs. If a customer is used to using an iOS device, we don't need to reinvent the wheel when it comes to building a pattern out in our app. We can lean on something the customer knows, that's more efficient in terms of development and it's better for them in terms of usability.

The design waste crew

[00:12:02] The who is us. We're a small guild within the Trainline UX team, and we're working together to rethink and overhaul our design ops within the UX team. And we could have come up with a cool name, but instead we called ourselves the design waste crew. And that's what we do, we take out the trash. We look at the inefficiencies in our systems and look to optimize them.

[00:12:33] So what do we do to do this? We've started by collaborating across the team to map our product landscape and tag it for visibility, which means we're going from not knowing who's doing what and who's working where, to having a broader visibility over our surface area and identifying where collaboration can occur and making sure that nobody's stepping over anybody else.

[00:13:00] We've defined the rules for filing structures and naming conventions, which means going from random unnamed pages and layers to a much more consistent labeling and naming system, which makes files easier to use and easier to work with.

[00:13:19] Number three, we're optimizing our design templates for consistency, which means we're going from this kind of squonky free jazz concept, where everybody has their own way of laying out design files and developers get scared when they open it, to a much more measured way of ensuring consistency. So it optimizes our design processes and benefits the team at all stages of the process.

[00:13:48] Number four, we've made our files easier to find with tagged covers. This is a really simple one and we borrowed it from the delivery product team actually, which is that we're going from this idea of a very unvisual way of searching for files with very little clues to what's going on, to a much more systematized, coded method to help find files faster at a glance.

[00:14:18] And finally, we are circling all of this back to creating master design files which our designers can use and which consume shared components from an atomic level. And that then gets fed back into our design system, kind of circles the process. And the key thing that we're remembering through this is to keep feedback loops at every stage of this, to make sure that we can measure our effectiveness and optimize wherever is necessary.

[00:14:52] So what does this look like in principle? This is kind of an oversight, an overthinking kind of diagram of what we see it looking like at the moment. So we've got concepts of internal recirculation throughout the process. So we go from discoveries and workshops to concept generation. At this point we have peer reviews, we revisit designs if necessary. And then, being that we've got our systems and the designs in place in a much more coded, discoverable way, if we've got discarded ideas at this point, they're easier to find, so we can go back to the discovery phase and revisit them when necessary.

[00:15:36] We go through to the user research process and we have a cycle of external feedback where we can learn from our customers and refine where necessary. We go up to the point of design specs where we hand off, and then we make sure, as I said, that we recirculate our designs back into the product with our design system. And then at end use we've got an external feedback loop again, where we've got testing of prods, feedback from customers, and ways in which we can recirculate ideas back to the next point.

Eight steps to making UX design circular

[00:16:15] And the benefits of making UX more circular are that using the right tools and the right processes improve our effectiveness. Saving time in our working week saves us screen and server usage, which benefits the environment. Increased efficiency not only benefits Trainline, but it improves our well-being as people, gives us higher job satisfaction and more time to solve the right problems. And we're not recreating files from screenshots, we're actually working on solutions that benefit customers. Smarter working leads to smarter design solutions, and that leads to smarter travel for our customers.

[00:17:03] So I'd like to close with eight steps to making UX design circular. So firstly, break it down. Collaborate on work with others, we are better together, nobody works in a silo. Secondly, look before crossing the tracks. Never hypothesize before work is locked in. Thirdly, we need to practice what we preach. We should design to empathize with our colleagues as much as with our customers.

[00:17:36] Design from the Depot up, so that's our design system, we need to make things reusable and shareable and not reinvent the wheel every time. Trash is treasure, number five, so let's make our discarded sandbox concepts shareable and discoverable. Design for the V2 and the V3, and basically by that I mean design like somebody else is going to pick it up, because the chances are they will and it leads to a more effective process. Always ask why, so make sure we read the brief and understand the scope, and if something feels surplus, be brave enough to say so. And start small, because bigger things and bigger systems, big ideas, come from small changes and making a small start.

[00:18:27] So in summary: so that customers can travel smarter, or shop smarter, eat, communicate, sell or bank or stay healthy, or whatever the product is, so that they can do their thing[?] smarter, we need to design smarter. So let's take the same scrutiny to our tools and processes as we do to our end products, and let's get better at designing the things that we design with. Thank you.