How and Why We Should Make UX Design Circular
How and Why We Should Make UX Design Circular
Lead UX Designer at Trainline Ashley May takes the audience through Designing Out Waste and Circular UX Design by sharing a case study of their experiences in process improvement and building out design systems at Trainline.
The talk will give you a sound understanding of:
- The need to overhaul the old ways of designing throwaway work using disconnected tools
- How to systematise design to increase scalability and pace
- Why this offers a win-win in the form of better employee and customer satisfaction while at the same time driving bottom-line performance
- How to leverage the collective knowledge of a design guild to strengthen design processes and systems
Ashley May, Lead UX Designer ,Trainline
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.
So, as I said, I am 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 kind of seamlessly book search and manage their travel on one device, 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 has 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.
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 kind of more to it than that, which is that trains are great. They're a sustainable method of travel. Transport, actually, in the UK and EU creates 27% of greenhouse gas emissions. So changing how we travel is one of the best ways we can help the planet. And if we look, for example, here, on a train from a journey from London to Edinburgh, if you travel by train, you're using 24.9 kilos of CO2, to 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.
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. 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. And like many product teams, we also use a design system. Ours is called Depot.
And it's owned instead 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 the need to make sure that we systematize our designs and make sure that our ways of working are kind of made as effective and efficient as possible. But crucially, it was also given space and time by the trainer and as an organization to be developed, which is a key point. So what's the problem we're here to talk about today? Problem is that UX design is obviously a human centred 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 that 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. We'll go into that, I'd like to just recap the design history lesson, kind of find out how we got here. So we go way, way, way back now to 1440 ish Yohannes, Gutenberg the advent of the printing press, right up to 1990 ish, when, 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 was very slow, very methodical, up to 9090, and the advent of desktop software like Photoshop, where 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 kind of sync files and share them, you 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 train line, 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.
But it's clear that historically, we've kind of gained bad habits and been creating throwaway tools, throwaway work, so disconnected tools. And products to a degree, do equal waste. And the drivers for us Trainline have been growth, post COVID coupled with the push to kind of 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 remotely first and changing our ways of working. And it's kind of stress testing our systems. And also coming out of replat forming, 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. Talking about waste, so this is obviously traditional ecological waste. So what is it? It's single use items, non recyclable materials, products that favour convenience, over usability. How does it happen, it's the by-product of bad habits, bad systems, or bad design. In terms of what 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 by being able to recirculate as much waste product as possible, whilst reducing harmful material waste in the first place?
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 an un-lean process of churn. It's also the by-product of bad systems, bad habits, or bad design. And for us, as UX designers, our MVP is our customer experience, our finances and prosperity as a business, our own wellbeing, 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. And that's where we kind of 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 kind of try to intensify use of dematerialized things to the degree as much 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 and some occasions with the idea of recycling. So that kind of brings us on to our goals for a similar experience for circular UX design. So we're looking to design our ideas of UX waste and pollution. With more sharing and alignment sessions, better systematizing with a design system, we're looking to keep our products and materials in use. So recognizing the inner 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.
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 designed with. 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 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. We're also looking at automated dev releases with our developers, and systematizing. So with effective code base documentation with developers using a design system, which is depo. And also leaning on native UI, 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. Who are we? This is a small guild within the chain line UX team. And we're working together to kind of rethink and overhaul our design ops within the UX team.
And we could have come up with a cool name. But instead, we call ourselves the design waste crew. And that's what we do, we take out the trash, we look at inefficiencies in our systems and look to optimize them. So what do we do to do this? We started by collaborating across the team to map our product landscape, and target 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 kind of stepping over anybody else. 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 labelling and naming system, which makes files easier to use, and easier to work with.
Number three, we optimize our design templates for consistency, which means we're going from this kind of swanky 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.
Number four, we've made our files easier to find with Tag 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 unusual 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. 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.
So what does this look like in principle? This is kind of an oversight, an overseen kind of diagram of what we see here looking like at the moment. So we've got the concept of internal recirculation, throughout the process. So we go from discoveries and workshops to concept generation. At this point, we have peer reviews, we kind of revisit designs if necessary. And then being that we've got our systems and designs in place in a much more coded discover a way, if we've got discarded ideas at this point, they're easier to find, we can go back to the discovery phase and revisit them when necessary. We go through 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 and prod feedback from customers, and ways in which we can kind of recirculate ideas back to the next point.
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 this screen and server usage, which benefits the environment. Increased efficiency not only benefits the chain line, but it improves our well being as people because there's higher job satisfaction and more time to solve the right problems. We're not recreating files from screenshots, we're actually working on solutions that benefit customers, which as I say, smarter working leads to smarter design solutions. And that leads to smarter travel for our customers.
So I'd like to kind of 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. 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.
Designed for the V2 and the V3. 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. So in summary, so that customers can travel smarter, or shop smarter eats, communicate, sell or bank or stay healthier, or whatever the product is. So that they can do them and you 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.