How the sausage gets made (What are Design Systems?) - Season 03 Episode 01

Welcome to Season 3 and a slightly new format!

In this episode Paul introduces the topic of Design Systems as we discuss what they are, their benefits and how to identify opportunities to create them.

...... for about 5 minutes until someone brings up melon f*****g

Everyones favourite segment UX Tombola is back, we have a new random topic to pick apart and take on humorous solutions. Featuring an audio striptease from Mark Sutcliffe.

More UX, more tangents and more fun!

Transcript

SPEAKER_03: 0:06

Hello and welcome to Faster Horses. I'm Mark Sutcliffe at Marks underscore out of ten on Twitter if you want to find me there. And these are my co-hosts Nick Tomlinson at NT Illustrators on Twitter. Hello Nick. Hello. And Paul Wilshore at Paul Wilshaw on Twitter. Hello, Paul.

SPEAKER_01: 0:23

Hello, Mark.

SPEAKER_03: 0:24

This is series three of Faster Horses. If you haven't heard of series one or two, check out those on whichever platform you prefer. You can now also get extended versions of these same episodes early by signing up to our Faster Horses Patreon, as well as one extra Patreon exclusive episode a month, along with other benefits detailed on the site. Don't forget to like and subscribe, it really does help the show, and also follow our official Twitter page at FasterHorses UX for regular updates, interesting and useful articles and random musings from the team. Now, without further ado, let's get on with the show.

SPEAKER_01: 0:59

So what's today's topic?

SPEAKER_03: 1:02

Today we are talking about design systems.

SPEAKER_01: 1:06

Sweet! What what are design systems? Tell us.

SPEAKER_00: 1:12

I was I was gonna ask you the same thing.

SPEAKER_01: 1:14

Oh shall gosh shall I answer?

SPEAKER_00: 1:16

Yeah.

SPEAKER_01: 1:17

Okay. Go on. A design system is a collection of designs that make a system. There you go. Job done. Job done. We can finish this podcast.

SPEAKER_03: 1:34

Join us on Patreon later and we'll get more of Paul's attempt to read the intro.

SPEAKER_00: 1:43

Along with definitions from the dictionary.

SPEAKER_01: 1:49

No, a design system is um it's generally a collection of uh w all different parts of your designs that make up your product or service. So say for example you were doing a website, a design system would compare some compro uh not compromise, compose of comprise could be uh yeah, ask me for dictionary definitions, not fair to us. Um so so a design system would comprise of things like buttons, uh input fields, you have radio buttons, uh toggles, switches, uh headings, and then goes on to bigger things than like cards or uh even screen layouts, page layouts, so you'd have templates of stuff. But what a design system should do and what it takes away from is designing a whole screen or set of screens from scratch, uh, and then kind of like going on to the next thing and just doing that whole thing again. And what I what I think um I quite like into design systems is Lego, so exactly the same as Lego, you can build almost anything with Lego.

SPEAKER_03: 3:07

Um isn't there a startling statistic? Like it takes 11 blocks to build like six billion designs.

SPEAKER_01: 3:14

I think it's nine nine nine blocks, six million designs. I don't think it's billion. Could be could be billion.

SPEAKER_03: 3:21

Depends on your imagination, yeah.

SPEAKER_01: 3:23

Yeah, uh, but and those combinations you can get different things. So well, when when sometimes you talk talk to people about design systems, they go, Oh, well, you're taking out the creativity uh out of uh design, but it's that's not the case because it's what you do with those building blocks that really counts. Um and I think, yeah, a key um person to look at if you're brand new to design systems would be Brad Frost. I think we'll we'll we'll talk about this a bit later rather than getting straight into the detail. But Brad Frost is atomic design kind of set the precedent of what a design system should be and shouldn't.

SPEAKER_03: 4:03

I think I personally think that that's the where we started, but we things are going a bit further than that now. So you have to have more than just a catalogue of parts. You actually have to build out something that is more considered and more experiential and and talks about stuff like of course you've got other elements that don't really fit into neat little categories like that, such as your accessibility and such as um usability and and um considerations like that. I think yeah, you you can start with your components, um and that's the best way to start on an atomic level, but it very quickly becomes more than the sum of its parts, I think.

SPEAKER_01: 4:48

Yeah, definitely. And I think I think a good consideration for any design system is once you do one thing well, then you can repeat that and reuse it, and you're not redoing, you know, testing on a button, testing on a a layout or a card, uh to see if that's uh you know fits out all those things and getting some feedback on that, then iterating on that design, and iterating that design once that then should change everywhere, um which is easier to say than done, I know from experience, um, but that's the general con concept and uh general kind of like musings of what design system is.

SPEAKER_03: 5:32

Yeah, yeah. So what about all that then?

SPEAKER_01: 5:36

What about all that?

SPEAKER_03: 5:37

How does one set set about making a design system? Where do you begin?

SPEAKER_01: 5:42

Well, I you know what, I what I usually say if you're making a design system, if you use something more than twice, that's your design system right there.

SPEAKER_03: 5:52

That's that's yeah, that's your way of identifying that you've got a a Lego brick, as it were.

SPEAKER_01: 5:59

Definitely, and I think yeah, some people go straight into making a design system, which I think could be quite good, but what you're not doing there is considering the whole uh and you're just considering a single part. So you might be designing that one little brick very, very well, but then you're not thinking like, oh god, I've done square studs and the rest of my build is all round studs. How do I fit the thing together? So I sometimes I think well, more than often, you have to go and and look at a page, design a page, design uh a bit of the software first, and then break that down into those reusable components because really you've got to test to see if things work together well before you even kind of get into designing buttons, because you don't know. Can those things fit together? And that's why I say you've got to do things more than twice and then it becomes in into the design system. I think we we had a term, didn't we? Um snowflakes.

SPEAKER_03: 7:08

Oh yeah, yeah. So yeah, outlying items that that may become components or may not, but we still need to establish if they'll be used again, we still need to establish if what how they fit into the overall user experience and stuff like that.

SPEAKER_01: 7:24

Yeah, and and the same with snowflake, every single snowflake in the world, which is crazy, is unique, which which is mind-blowing. Um but you know, when they land uh onto the ground, do they stick and make snow or do they evaporate and totally disappear? Uh and sometimes I think unless you've got those that bigger page and that bigger uh part of the design system to test things out with, you can't really tell and you can't really describe what those things are.

SPEAKER_03: 8:04

Yeah, I think that's a really interesting idea because whenever I go into things now, I I I admit I probably think a bit too more too much about um trying to build a system with nothing for that system to actually reflect. So listing you know, you can list for days, oh I'll need this button and I'll need this button and I'll need this button. Um but if you unless you've got a body of research and and an actual product to design then um then how do you know it's gonna actually there's gonna be any any synergy in what you you know well, not even that, before you even get there, how do you know there's gonna be an actual demand for for the component you're creating or the type of solution you you're trying to put together?

SPEAKER_01: 8:49

Definitely. And I think I think sometimes, you know, we we get so people mention the buzzword design system and and we get so engrossed in making a design system. We kind of like just think 300 steps ahead and make every single icon and every single variation of that before you've actually built anything. I think you know that that is you know something I've fallen into in the past. Um and it it's it's a really tricky one to kind of go, oh yeah, I definitely know I'm gonna need that, um, compared with you know actual demand. And it's that you know, and I think with developers as well, they they do the same thing sometimes. They write code thinking like, oh, we want this to do something in the future, when there's no actual demand for it right now, and I think that comes down part to uh experience and part to good product ownership, uh, and part kind of what knowing what that demand is. And if you know that demand's coming up, then you know go for it, explore it, um, put it in the design system. But if you're not sure you're ever going to use it, then um, you know, maybe it isn't worth putting into the design system right at the minute, and let it be its own little snowflake.

SPEAKER_03: 10:15

And then we'll I think yeah, I think that's very important actually, the ability to not over-engineer or or to to I I I I kind of re re resent putting it this way, but not uh over plan for the future as it were. Because we don't really know how um things are going to change. And I think you've got to be cautious not to paint yourself into a corner by trying to build a solution that that when you take it to testing people don't want, but you've used all your bandwidth, all your resources on creating this beautiful design system that so you you just can end up forcing it down people's throats.

SPEAKER_01: 10:55

Definitely, and I think some sometimes we you know that that goes against uh other things as well, and then it does become too rigid, uh, you know, and then you've got to design a page, you think, oh no, this isn't gonna work, but I've got this design system, you know, it's been developed, it's been laid out, I've gotta go with that now. I've got to really do those things, and yet the business has changed its mind and changed its direction, and uh you've got a brand new product owner that wants to do things totally different.

SPEAKER_00: 11:28

The beauty of um creating a design system properly though is that if that does happen, you can go back to the initial um component and change it there and it cascades out and correct it everywhere, which is one of my favourite things about design with a component library, especially coming from a like Photoshop Illustrator and then even in a sketch actually does it in it. But yeah, I think that's one of the biggest benefits for me.

SPEAKER_01: 11:58

Yeah, I think and and definitely is, and it's that I mean I was trying to do design systems without realizing it about ten years ago, and I was using um InDesign at the time to do the page layouts, which are then linked to the actual Photoshop uh instances, and then if you change the Photoshop instances, it'd change on the InDesign. Uh and I was doing that and and that and that always confused me why other people didn't do that because you should do one thing uh and not do it three thousand times. You know those massive flows you had, and then you'd have to change every single screen in that flow just because oh and that's that's painful, isn't it? And that's what I think design systems should try and solve.

SPEAKER_00: 12:54

Yeah, it should be sold. Yeah, it's it's consolidating down there.

SPEAKER_01: 12:58

Oh yeah.

SPEAKER_03: 12:58

Nick.

SPEAKER_00: 13:01

No, go on, you're okay.

SPEAKER_03: 13:03

I d I I spoke over you, I didn't hear what you said.

SPEAKER_00: 13:07

Um I can't remember. Just carry. Go on, I'm sure if you got if you got a point, let's let's have it.

SPEAKER_03: 13:15

I can't remember my point now. I was gonna say you're just call you consolidating down all that work, aren't you? And it's almost automat it's also well, it's almost automating it.

SPEAKER_00: 13:28

Yeah, yeah, it is, and if you again like if you do building your if you're building it properly, like that's all accounted for from like the first instance.

SPEAKER_01: 13:45

Yeah, and I think I think as well with design systems, you know, the there's there's a lot more to do now on design. Before it was you know you'd design a a desktop site or heaven forbid a a flash site, and like you can tell it's the summer holidays and the kids are off. Uh so yeah, um yeah, I've got a six-year-old walking around in in their pants. Look, it's very warm.

SPEAKER_03: 14:22

We all wish we could be that six-year-old.

SPEAKER_01: 14:24

Well, I'd I'd say pants are optional, but hey. It depends.

SPEAKER_03: 14:34

Not when you live across from other apartments.

SPEAKER_01: 14:37

Oh yeah, the uh ripped guy with the watermelon. Oh yes, that the watermelon.

SPEAKER_03: 14:44

I don't remember him having a watermelon.

SPEAKER_01: 14:46

That was just one that just came from Nick's imagination, I think. Yeah.

SPEAKER_00: 14:51

Oh yes, of course, yeah, yeah.

SPEAKER_01: 14:56

Yeah, basically it was fucking a watermelon.

SPEAKER_03: 15:01

Please listen back to our previous episodes to enjoy this UX focus talk.

SPEAKER_01: 15:10

Oh I could just imagine Nick's friend going like, uh, it started off well, but then I had no idea what went on as soon as we started talking about the watermelon.

SPEAKER_00: 15:19

Yeah, I was on doubt when you started talking about design systems, but then when I heard fucking a watermelon, I was straight back in there. Got our first Patreon there. Still don't know what UX stands for though.

SPEAKER_03: 15:40

Next, welcome to season three. Next week we'll be talking about the UX of watermelon fucking put that in the tombola, yeah, yeah.

SPEAKER_00: 15:53

So I meant put that suggestion in the tombola, you know. Yeah, yeah, yeah. So it's a bit messy.

SPEAKER_01: 16:00

It's a business idea, you could rent out watermelons. Oh no, you couldn't tombola.

SPEAKER_02: 16:05

No, you couldn't.

SPEAKER_01: 16:11

And then freeze it and put it in your drink to cool down. Yeah.

SPEAKER_03: 16:16

Suspicious, tangy.

SPEAKER_01: 16:21

Oh god. Sorry, mum. Sorry, mum. Well, we went off topic. We did.

SPEAKER_03: 16:26

I'm going to ask a design system related question. Oh, do it. How do you make your design system unique? I guess. That's a question I can. I'm just looking now. I just punched design system into Google Images just because I was curious what will come up. This is how I operate in these podcasts. Nice. Um, and a lot of them look quite similar. Um, and do you think that that's because is it there's a reason for that? Is it um style choice, or do you do you think there's some practical implications that come into making something individual but systematic as well?

SPEAKER_01: 17:02

I there's I think there's several factors at play here. I think, you know, kind of like if you think about some of the most successful design systems, they've probably had millions ploughed into them with a lot of research, a lot of feedback, you know, and and they've been mature for years and years. Whereas if you're a startup, you know, you don't have the luxury of doing all that, you don't have the luxury of uh putting all those resources into it. So why not look at you know material design, look at the Apple human interfaces? Because let's not fail, let's not forget, uh, was it Nielsen Norman says um you know we expect the same user experience from the last great user experience we just had. So, you know, if you're uh an iPhone user or an Android phone, Android phone user, you want that same quality and that same experience, whether you're using a brand new startup that somebody's made in the basement, we're on a shoestring, as to you know, a multi-billion pound company. So you know, people I think people's tolerance as well, you know. I think I'm gonna bring it back to people's um attention spans. Uh and he always go on people's attention spans, you know, we have rubbish attention spans nowadays. I think it's on social media it's less than four seconds. In real life, it's uh you know, it's it's about eight seconds, which is less than a memory of a goldfish. Um, you know, and like people like you, Mark, you're searching on Google Images rather than reading text.

SPEAKER_03: 18:51

I'd be porking at my arrow keys to go through images to try and get some c sort of um idea of what a design system is.

SPEAKER_01: 19:01

And but it but it's you know, we look for that visual consistency, you know. As humans, we look for the simplest solution. Uh so I think that's why a lot of design systems are are similar, and why not? You know, if you're brand new to design systems, if you're um looking at starting your own design system, why not look at a steel material design, look at uh uh you know the Atlas and uh system, look at the IBM system, you know, why not um steal it, make it better, make it fit you.

SPEAKER_03: 19:36

The caveat with that is that of course, steal it to a point, or or let it inspire you to a point. But if you if if you do that too much, then of course you're not innovating then and you're kind of just being a bit too reactive. So I think it's a good starting point to um to see what has gone before and to use that as an

SPEAKER_01: 20:00

inspiration but I think um it's just as important to consider how within your product how you could actually use your design system to innovate beyond you know beyond the use of the product yeah and and you know I'd always say that's a baseline for stuff as well so you know don't copy um you know use it as inspiration you know and take it to the next step take it to the next level and I think that's sometimes that's always too easy isn't it and go like oh look look at our neighbours and go like oh they're doing that or look at kind of like how uh another website in your same sector a competitor is doing stuff and copy what they're doing but you know if you're gonna do that then you're not gonna innovate you're not gonna stand out you're just gonna become one of the crowd one of the same so it's it's it's finding that and it is such a fine balance as well between what is you know the bare minimum of kind of making it delightful compared to just being a oh I was I was doing another talk before this and someone came up with a uh a brilliant analogy of um rather than minimum viable product uh we should call them baps which is uh I know I know and uh absolutely which is barely acceptable product uh and that that's you know kind of like that's what we do a lot of the time and then we think oh you know we'll just use material design because we're using this and let's just steal that and it's barely acceptable it's that barely acceptable product and I love it I'm gonna use that I'm gonna steal that um all the time now so yeah get your BAPs out to be done I'll uh yeah I'll stick to me watermelons thank you love it do you like it what do you call that an analogy is that an analogy um I think it's um an acronym yeah I I was I was thinking what's the there must be a dictionary term for kind of like uh fruita salt fruita salt yeah if anyone knows yeah yeah ping us on twitter at Fast of Horses UK UX UX not UK fucking hell can we get that one as well are gonna be snatching it because of this so uh yeah if there is a term we'd love to know uh Nikki been very quiet on this sorry yeah I'm I'm just recovering from my COVID job and I feel like my brain's not working today so I'm trying to interject as little as possible but uh and and just try to listen really um I love the idea of a BAP I love the idea of cutting through the bullshit and saying what is meant rather than saying what sounds good but I think that's a different a different subject altogether in it possibly.

SPEAKER_03: 23:26

Yeah I know what you mean. But it's true we when we say minimum viable d how often do you actually go beyond that? What at what point do you actually have time to to go back and reiterate if you if you're building something and you steal a bit of material design and you use a bit of what Atlassian's design system does and you you use that you know maybe Frankenstein it together and ship that at what point are you gonna raise that standard? Because it becomes a process.

SPEAKER_01: 23:59

Yeah.

SPEAKER_00: 24:00

I don't know if I'm an idealist but I just almost feel like what's the point?

SPEAKER_01: 24:04

What are you making this for if everything you want to put out is just the thing you could put together in the quickest time I I totally agree and I think that that's um that's part of the factory mentality that we generally have with products and I still don't think we've we've come away from that industrial revolution time where it it was factory based.

SPEAKER_03: 24:31

It was that nine to five you get into a factory you make um you know you make your lovely shoes in your factory ship it you don't ask for them back you don't ever want feedback you don't ever want to iterate on that you might make a new shoe that fits a different purpose but at the same time you're not gonna kind of like recall that and go oh you know let's add a few bubbles onto that shoe let's add some sparkly glitter and then we'll reship that back out that just doesn't happen does it I think we have that you know with digital products we still have that physical mentality with them that we ship them and then we ship a new feature and it's like a new box on a conveyor belt and it's not like the conveyor belts in Yo Sushi that come around you know it's a linear linear conveyor belt that goes out and those boxes go out and you never really see them again you know you may get some feedback on that that then informs the new product but rarely do we ever go let's really make that product perfect you know and I I say this as generalist you know there are some things that do do that really well that get improved over time and get better and you know I think operating systems is one of them uh you know our design software is one of them as well uh but they still kind of rely on new features to win new customers or can retain customers as well so it it's a really tricky one isn't it to to have that fine balance between what is acceptable what's stealable what's you know kind of what should that be done as well also go on I I also want to pick up on Brad Frost because every everybody preaches about Brad Frost's atomic design system indeed uh and the way uh he set it out was very scientific which is cool uh so he's built it on kind of like based on the periodic table so he starts off with the atoms the smallest possible uh pieces of the design system then goes on to um thingy's um oh yes my favourite part of design system is the thingies yeah otherwise known as molecules that's the one god yes uh molecules and then organisms and then those organisms then make up uh pages which make up templates so I I think this is interesting this because I was reading I say reading I was thumbing through or at least googling and punching through the images of uh Brad Frost Atomic Design and he goes to layouts and templates doesn't he instead of patterns which I find very interesting and to to kind of clarify what I mean by a pattern I mean like a system of um organisms of of components that that kind of operate in a in a common way such as a filter you opening up a filter or a search functionality or something like that it's far more um considers the experience a bit more and it's a bit bigger than than just the components themselves. Because I think when when Brad Foss was talking about breaking out the page when you then go back to page layouts over patterns then we're you're still thinking about it in very analogue terms as if you were using a book. Yeah and I think that's a really interesting kind of you know he kind of deviates from his own way of thinking what he says on page one isn't the same as what he says on on page or whatever.

SPEAKER_01: 28:36

Definitely and I think there's there's uh he talks about as well kind of like from print design and brand and style guides uh you know and like how posters should be laid out and how you know you know more modern things how you should put on typography on social media posts uh and things like that um when I think a lot of it is you know when whenever I've you know I've done a design system and you try and put atomic design principles into place uh people read Brad Frost and they take it to the nth degree of kind of following that atomic des atomic design so they have the atoms molecules organisms but I always find that how do you define what an atom is without having and the whole thing about a design system is it removes documentation because you don't have to write reams and reams of pages to say this button should be used here and this button should be used here because the you have the patterns then that this is how we used it here use it here or in a similar fashion it does this and click on that and I'd like to comment on that so that is true and that is the ideal situation but one thing I've definitely found is that correct correct me if I'm wrong but I think the entire design system has to be complete by that point.

SPEAKER_00: 30:15

If it's something that's still growing and developing it's really difficult to say this is how this button works and this is where it goes. Like for example you know I've been working on draw and things recently and there are different I've identified different things that you can put into every draw that makes it a lot more useful but it's not part of the pattern um at at the moment in that component. And so anything I create with like this quote unquote improved layout or additional buttons and stuff then becomes inconsistent with how everyone else is doing it everywhere else. And you have to then either refer back you have to like create some documentation for it or refer back to the existing documentation to to sort of realise that you know I can't put these additional things in based on those rules. And I I feel like if we were just working from a component library that was a hundred percent complete you'd know where well ideally you'd know where you stand at all times when it comes to things because if it's not if it's not in it then you're not you know you're not supposed to do it. Whereas because we're halfway through the process everything's up for question all the time.

SPEAKER_01: 31:35

Yeah defin definitely I think that's that's part to do with you know that that snowflake approach we took you know and I think what you're describing there Nick and when we're talking about drawers we're talking not about you know where you put your pants and socks uh we're talking about uh things that slide out of the screen um and and those you know the design system is all those it's the the visual look of it it's the usability of it it's those micro interactions it's the animation and and you know what can and can and not do makes up the design system and unless you've got those key components those five key components then you haven't really got a pattern or a design system you've got a sketch or you've got uh some user research or you've got some fumblings in micro interactions um and I think you need to kind of have all those bases to get what a design system is and that's part of the problem I have with how Brad Frost uh defines things and it is that linear thing you get but actually design system very rarely linear you don't think I'm gonna start off with all my atoms get up to my molecules and organisms I think more often than not you have to work backwards and you have to work from how does this work on a page then take it part take it apart and then build your atoms and your molecules or even do it the other way around your organisms your molecules and then your atoms from that final you know what you want your draw to do and work on it backwards and that's you know when Brent Ross talks about it when he says atom design it always seems like you have to start with the atoms um I was just gonna say what does he what does he suggest in his in his book is it start from the atoms and work outwards. Well j generally according to the the the diagrams yeah he said build build up from atoms and then you know your molecules and your organisms and and things like that but I don't think that should be the way and also I have a problem with the terminology as well because you have to have documentation to decide what an atom is and what a molecule is and what a an organism is organism is you know is it not define itself in that it doesn't break down any further though so an atom is an icon because an icon isn't made up of anything smaller i it is but kind of what do you define you know is a is an atom a button with an icon in could that be an atom but actually that'd be that'd be text and a container and an icon yeah yeah exactly so but you know and then how do you communicate that out to beyond the realms of UX how do again I think that communicates itself because an atom is a single an atom is the smallest thing you can get in it that's so it's implied by the term an atom is not made up of other things.

SPEAKER_00: 35:06

Yes it's an individual thing. But then how do you one yeah an atom equals one so it can't possibly be anything else other than one component.

SPEAKER_01: 35:18

But then you you then you get like bending of the rules and you get kind of like these fancy buttons that then are are dumped into the atoms thing and I always kind of think that's self-deprecating when people do that because it makes it really hard to find something so if you're looking for you know if you're looking for a button I'm not gonna go into you know do do I find all the atoms to do is that the the right text is that you know is that used somewhere else is that used is that the right icon is that the right container you know all those things in itself as we talked before they they could be made up into you know millions of combinations and I think sometimes that's where design systems can fall down unless you've got that more rigid and everybody's on the same page that they know exactly you know which atoms make up the molecule which atoms you know which molecules make the organism and things like that. And I think yeah sometimes that gets lost yeah yeah I'm inclined to agree. I'm looking at no didn't I I'm trying to remember because if it's if we're breaking something down into atoms as as um Nick I forgot your name then do you if we're breaking things down as Bert suggests um to atoms then you what you you know you described a breaking down a button with an icon in it you've got the icon, you've got the um the text, you've got the container does that mean then we have and I can't remember if Brad Frost goes to break this down himself we have a universal almost like a periodic table of n elements including stuff like this type of container and this type of style and then it's or then it's just a matter of of adding those those atoms together to create something new definitely and you know that that's where the joy of design systems is but I think the the clarification you know the the the categorization of of parts you know when you talk about atoms and and putting those atoms together you know if you don't then provide instructions you know say let's go back to Lego if you don't provide the instructions of kind of how to build a you know model using those atoms then people can build whatever they want and that probably isn't the goal you want of your design system because you know brand guidelines you know style guides tone of voice all things like that then you know people can mix it up and make whatever they want which is good to a point but that doesn't create consistency and conformity within you know your brand your website your print material your uh you know your social media just doesn't all work together it it then you know people go off and you get and I see this all the time you get you know your social media doesn't talk the same way as your website your the images are are totally different you know because the churn of social media is a lot higher than a website um you know but if you're gonna do something on your website surely it's got to link in with what you're doing on your social media so there's that visual conformity of whatever you're doing it's that visual storytelling that links everything together from you know you know what whether you're trying to recruit new members of the team whether you're trying to sell new products all has to talk the same way in the same language and I think that's where if design systems are too free and too atomic then you know people will make nuclear bombs or they'll make um you know dirty bombs dirty bombs yeah or you know they'll they'll bring you know make a brand new melon or something um please share it mark uh don't keep it all to yourself but yeah and I I always you know people whenever they ask me about design system I say you know don't build it with the way it works for For you, for your team, you know, if and I like to call things as the you know, I like the Ron Seal approach of you know, it does what it says on the tin. Uh, you know, if you're gonna have components in your design system that buttons, call them fucking buttons, you know, don't call them uh molecules, forward slash buttons, forward slash, you know, button with icon and you know, all things like that. Because like how do you then without rooms of documentation find anything, you know, and kind of like you're putting a bad user experience into your own design system. Yeah, well like why do that to yourself?

SPEAKER_03: 40:39

One thing one thing you you raised there, which is something that I wanted to to make the point of as well, is how important a documentation side of things is. I'd say it's almost e well, I would say is equally weighted. You've got of course your your look and feel, your style, you've got of course the components themselves, and then you've got the dis uh the um documentation that holds it all together. But as you just pointed out there, it's very easy to end up with uh just rotting documents. Yeah. Documents that just don't uh that get out of date almost immediately, no one reads them, you know, they're not they're not remotely effective. What do you guys think the best way to c kind of to create documentation or to not need documentation?

SPEAKER_01: 41:26

What approach to that side of things do you think um I think you've answered your own question here, Mark, by image searching on Google and it's providing examples and how you'd use it, uh you know, and I don't think that's huge documentation, you know. If if if you've got more than four lines to document something, then what you've designed, what you've you know built isn't fit for purpose. Because you know, if you've got to describe it to even people in your company, then how do you expect somebody in the real world to use it? And I think that is key. So documentation to me is kind of more oh, we use this button in this place, don't use it, you know, uh don't use white text on the light background, things like that. Um, and then we get into more, you know, compliance, you know, accessibility, and it's the it's the use of that that uh it should be the documented part and not you know if it's um huge huge documentation then it's done wrong.

SPEAKER_00: 42:42

An interesting thing about documentation that you just kind of made me think of there is that about 50% of our team is Ukrainian now. Yep and that's not to say that because the Ukrainian they can't speak or understand English, but it does raise the the chance of like miscommunication. And uh how like how how do you combat that if we're maintaining you know, if we're the ones responsible or a few people on the team are responsible for maintaining the component library and the documentation. How how do you make sure that people of different nations with a different first language can access it just as well as you and and contribute to it as well?

SPEAKER_01: 43:25

Think think about those beautiful Lego um documentation. I'm gonna call it documentation to build a Lego model. Um, you know, think about those. They don't they don't rely on words. IKEA perfect, yeah. You know, and they are global instruction manuals, they don't need to translate, they try might the intro page or they might translate the the title of the model. That is it, you know, and that that's good documentation, you know. Document and and you know, like like I go back to you know, our attention span is is rubbish. Nobody wants to come into a new role and read reams and reams of like rules and regulations before they've even done one design, you know. Let them build a model based on your instructions, uh, you know, or things you've put together and let them find out how to build the next best model, you know, using all those components rather than kind of like you know, writing reams and reams of documentation. I think when companies say, Oh, we need to documentate the document this, then that comes from a place of not understanding documentation, of not understanding design, not understanding a design system, and it comes from a place of you know, if you're gonna do that, you're gonna end up writing documents more than you are gonna be innovating and putting together new designs, iterating on old ones, you're just gonna be maintaining a bloody document library. And let's face it, we've already talked about the the the factory of shipping out the BAPs, uh, and kind of those those minimum viable products, you know, and we don't bring them back, we don't ask for recalls, and you know, it just that's it, lives on.

SPEAKER_00: 45:23

Um Figma do a really nice job of introducing new features, and yeah, it is you know it is beyond um just simply introducing a new component or something, but when they introduce a new feature, you can more often than not download like a file that you open up in Figma and it just kind of takes you through very simply what this is and how it works in as in as few a step as possible. And that would be a really nice thing to do, particularly for like components and things like that.

SPEAKER_03: 45:50

I think if you can have interactive elements or even offload the need for stuff like that. So I mean there's a plug-in, probably plugins you could write to check for certain to make sure you've passed certain guidelines, you know, that you're using the right colours or that you're using the right padding and stuff like that. And I think if you're able to essentially make it so you don't have to write anything down and it still has a bit of vitality about it, you know, you can change things uh things however you like.

SPEAKER_01: 46:26

Um But I think I think though, you know, talking about like padding and margins and things like that, and you know, that should be built into those components and those patterns. So you shouldn't have to think about, you know, is this 10 pixels, is this eight pixels, is this twenty? Should be kind of built into it. So then you know, exactly like Lego, you know, when you snap the bricks together, you know they're gonna fit perfectly. And you know, especially like with Figma's auto layout, the way I build uh you know pages and uh templates now, it's all auto layout stuff. So it's all all snaps together perfectly and all fits into you know a screen that I know that that's kind of how developers are gonna build my screen as well. So there's less thinking for you know when you're doing a handover, less thinking about all those things, less communication, uh mishaps along the way. Uh so kind of it's it's thinking about building that as well. And if you just put a button and expect everybody to know the rules, I remember working with uh I'm not gonna name names, a uh certain person, and they said we've got all these unwritten rules in our guidelines, um you've just got to remember them. And like no, no, how would how would anybody know that? And you know, if anybody new joined the team, if anybody, you know, got run over by a bus, do you expect the next person to come in, remember, uh, learn loads of rules and regulations? We don't we don't work as humans we don't work like that. So why I'm I'm gone. I'm I'm just watching uh so we're in uh we're in fig fig jam now. Uh you know, please sponsor us Figma. We keep promoting all your shit. Um Figma now and and Nick is jostling a little stamp to say segue onto UX Tombola, which I love I love seamless. And it's also said to WhatsApp message saying, let's move on to UX Tombola now.

SPEAKER_00: 48:51

This is how the sausage gets made, everyone. It is, yeah, yeah, yeah. I love that.

SPEAKER_01: 48:56

That's a great article.

SPEAKER_00: 48:58

What how the sausage gets made?

SPEAKER_01: 48:59

Yeah, inside the sausage factory.

SPEAKER_03: 49:03

Are you vegan? Next door to the watermelon factory.

SPEAKER_01: 49:06

Uh I'm I'm not I'm not vegan, uh, but I'd I I verge onto it except for pizza. Which geez, yeah, real cheese. Cheese is just it begins with a begins with a stir first cheese. Yeah. It's chic and cheese mashed together. Uh cheese. Oh, that's so delicious.

SPEAKER_03: 49:31

I thought I'd try and find that article, which was inside the sausage factory. I just pointed out to Google. The first thing that came up was BBC2 inside the factory series four sausages.

SPEAKER_01: 49:46

That's just based on your you know your cookies and your and your your previous brass in history.

SPEAKER_00: 49:53

Document that on in your your work computer. Yeah, oh yeah, no, too late now, too late. What are they gonna do?

SPEAKER_03: 50:01

Judge me. Greg Wallace explores a factory that produces over half a million sausages a day. Wow. Why? Why, Greg?

SPEAKER_01: 50:15

Wow. Um I will I'll dig that out. I think it was on medium inside the sausage factory. Like me. While while you're doing that, Nick, fire up the segue.

SPEAKER_03: 50:27

Yeah, to to drive us to the uh to the tombola machine.

SPEAKER_00: 50:32

Now it's time for our recurring segment, UX Tomboler. Every episode we wheel out the UX Tomboler machine, which randomly selects a product, a thing, or a process for us to discuss the UX of, whether that's good or bad or perfect. Right, so it's I guess now then it's time for the the UX Tombola theme tune.

SPEAKER_03: 50:53

Oh yeah. I keep on forgetting about this, and it's my favourite part of the podcast.

SPEAKER_00: 51:02

Is that a train? Yeah. UX umbola. The fat controller. It's a little machine, it's not a train. There we go. Perfect, I love it. Thank you, Nick. Oh my god. Absolutely insane. So give it a spin. Who's gonna give it a spin? Paul, give it a spin.

SPEAKER_01: 51:26

Oh, I mean, oh love it. God, just let me dust off this. Uh here we go, go in.

SPEAKER_00: 51:37

Today's Tombola subject is airports.

SPEAKER_03: 51:42

Gosh. What's remarkable to me is how I have managed to get to the airport on a number of occasions, like three hours early, and still been had to be called to get onto the plane because I've just been, I don't know, one time I was hungover in a KFC. Yeah. Um and yeah, and me. I know, don't be ridiculous. Um definitely not hung over now. So I wonder whether there should be something a bit more proactive, like we've all got mobile phones. Surely you can you can ring my phone or make an make a at least a notification or send a text.

SPEAKER_00: 52:26

Why why do you need to get to the airport three hours early? What is why?

SPEAKER_03: 52:31

Because I need to go and buy an Anne Rice novel, don't I?

SPEAKER_00: 52:33

No, but I mean I mean like that is like a prerequisite of going on holiday or getting a plane.

SPEAKER_03: 52:38

I think it's a bit more exception that. I think it's yeah.

SPEAKER_01: 52:42

I think it it's all down to um people not putting uh liquids in small tubes and see-through bags that holds every month. Um oh god, there's so many things wrong with airports, so many things.

SPEAKER_03: 52:58

Um enclose little villages with their own fucking religions and cynically.

SPEAKER_01: 53:06

I think they take ask you to go three hours early, so you've got no choice but to buy overpriced foods and drink, yeah. Uh to purchase some uh I use the term loosely, duty-free, um, that generally isn't much cheaper than you could find on the interweb. Um and yeah, buying those dodgy um Anne Rice novels, or you know, get your sixteenth copy of Harry Potter with just a different colour cover. Uh and I'm sure that's why they ask you to go there so early. It's just ah the process hasn't changed though, has it? For it's still the same as the sixties and the seventies, you know.

SPEAKER_03: 53:51

And it's like there's nothing there's not been any consideration to streamline it to they've introduced new passport reader things, haven't they?

SPEAKER_00: 54:01

Oh yeah, they don't work.

SPEAKER_03: 54:03

That do that take yeah, yeah. It's like um it's like self self-scan checkouts that require two members of staff to operate.

SPEAKER_00: 54:12

Oh see anyone over the age of 35 trying to use one of those self-scanned passport things, and you might as well set up camp for the night because it's it's the most frustrating thing in the world to watch is someone trying to get through.

SPEAKER_01: 54:25

My my conscious bias there always tries to pick the machine, not with as many uh older people in front of me. Because I know it's gonna be a bloody bullet. Sorry, sorry if yeah, you know that that's you, but um but yeah, the passports in themselves, what a waste of paper. Um can we not do it digitally?

SPEAKER_00: 54:50

Yeah, and turn on paper. Yeah, yeah. Although they've got the stamping for some reason, don't they? I don't know what that's for.

SPEAKER_01: 54:58

The yeah. I don't know. It was it was for uh it did have a reason in the past, but I don't know what that reason is anymore now.

SPEAKER_00: 55:10

Wasn't it literally just to collect the stamps so you could be like, I've been I've been to Spain back back in the day when that was a thing that people would be impressed by.

SPEAKER_03: 55:22

Not no shit to Spain though.

SPEAKER_00: 55:24

Oh no, I'm not single in Spain.

SPEAKER_03: 55:26

Why do they stamp? Are you Google it? Um show who's boss.

SPEAKER_01: 55:38

Oh look at this. Uh why do they stamp on glass at a Jewish wedding? Laheim. Why do they stamp passport on a random page? Which is a good uh oh let's find out about that.

SPEAKER_03: 55:51

Uh here we go. It says Oh the uh the random page.

SPEAKER_01: 55:58

Uh what determines uh the page that gets the stamp on your passport? Quora. Qua I don't know how you pronounce that. Quora is it? Uh there's a head of UX role going at there. Uh I found out earlier.

SPEAKER_00: 56:17

Wait, Quora. Quora, yeah. Uh is that a thing where you ask a question you've got to pay to get the answer?

SPEAKER_01: 56:23

Uh no, I don't think you have to pay. Uh you just get random people answering, so the the uh quality of questions varies wildly. Yeah.

SPEAKER_03: 56:35

Any citation needed on all responses.

SPEAKER_00: 56:38

Yeah. I mean, anyone who would hang around on those websites and answer random questions doesn't deserve to be listened to in the first place.

SPEAKER_01: 56:46

The top the top the top voted uh answer on here ends with uh, but it is always best to speak as little as possible to the officer.

SPEAKER_00: 56:58

Okay, okay. I mean that's just my rule for day-to-day life, doesn't it? Yeah, yeah.

SPEAKER_01: 57:04

Well, I don't I don't just yeah, like like small chat with them. Kind of, yeah, what did you have?

SPEAKER_00: 57:11

I uh yeah, I'm not an international terrorist. Uh yeah, yeah. Definitely not got a briefcase full of cheese un unpasteurized cheeses.

SPEAKER_01: 57:21

Cheeses and melons.

SPEAKER_03: 57:24

I just fucking snorted them. Great. Use border control officials often place stamps in passports as part of their immigration control or customs procedures. There you go. So many interlocking little systems, isn't it? Oh yeah. That no one's taking any kind of accountability for.

SPEAKER_00: 57:44

No. Well, that's the thing. So the the airlines are completely separate to the airport, aren't they? The airline to the airport and the process of getting you through it is nothing to do with the majority of the process the major what am I saying? The airlines control very little of the actual process of getting you from the desk to the plane. That's controlled by like I'm assuming official like passport controller, which is probably an offshoot of the government in some way, right? And then the logistics of the building owners and managers.

SPEAKER_03: 58:22

Just not speaking to each other, are they? Maybe that's our UX solution is to get them all in a room and have a good old chat.

SPEAKER_01: 58:30

I think airports are ripe for digital transformation, you know. They you should check in. I mean, you know, the security thing I get, but surely there's better ways to do security. Uh definitely. You know, you you talked about um uh self-scanning checkouts and passports are doing the same thing now, and uh you know I think AI and facial recognition, you know, could solve some of this.

SPEAKER_00: 59:02

Um they have a bit of that now, don't we?

SPEAKER_01: 59:05

They probably yeah, they generally do everywhere. Um I was reading an article the other day that said um facial recognition's everywhere, tough shit if you've got an opposition to it. And uh and you know, if you think about it, CCTV cameras have been around for years and years, and you know that, you know, as a dumbed-down view, somebody'd have to go through with a footage and track somebody's you know, a missing person's whereabouts through through all that. So, you know, using a bit of technology to prove that improve that, you know, hopefully helps for the good rather than the the the bet the worse and the negative sides of things. Um but yeah, it's it's just like the like the stamping of passports, it's it's really archaic, isn't it?

SPEAKER_03: 59:52

I I w the other thing that happens to me at airports Go on I always have to get undressed.

SPEAKER_01: 1:00:02

I would never knew this was going somewhere like this.

SPEAKER_03: 1:00:07

I always get told. But I uh I get a uh force official. Oh, excuse me. Take off your clothes.

SPEAKER_01: 1:00:18

I thought this had this happened at the bar while we were waiting for the play. Reading my Ann Rice novel and getting a bit too into it. Layer by layer.

SPEAKER_03: 1:00:30

But yeah, because the the um because I wear three-piece suits and I usually have cufflinks and my wear my watch and and stuff like this, I tend to wear braces. Um there there's bits of metal. You know, I use a lot of metal. But then again, you know, there's zippers on my trouses and you don't ask me to remove them. But the amount of times I've I've I've been told, can you remove your jacket? Can you remove your hat? Fine. Those two, I'm okay with that. Can you remove your cravat? Can you remove your waistcoat? Can you remove your shoes? That's normal, that's fine. And I'm stood there, like undone. And then and then I have to, of course, they go, Yeah, that's fine, you're not carrying a bomb. Have fun.

SPEAKER_00: 1:01:20

I could have told them that. Um carrying a bomb in your fucking in my cravat in your cuff links like James Bond.

SPEAKER_01: 1:01:28

Yeah. It's the it's the it's the chaos before and the chaos after that annoys me. So they don't really prepare you very well. Or they or they write it on science, and here we go, here we go. Why have lots and lots of writing and you know, going back to documentations on design systems, why have all that? You know, give us the bloody IKEA uh furniture assembly manual of what we can or can't yeah, beforehand, what we can or cannot do, and you know, can we do that? And I'm always oh do we have to, you know, how many things can I fit in a clear plastic bag? Apparently, if you've got the biggest plastic bag in the world, you could probably put loads and loads of fluids on a plane. Um but if you've got a tiny plastic bag, then you can only fit a few.

SPEAKER_03: 1:02:21

You can only fit a little bit of cocaine, yeah.

SPEAKER_00: 1:02:26

Um they're not they're not looking for cocaine, Mike. My word for it. Alright, okay.

SPEAKER_01: 1:02:31

It's just from your experience, Nick.

SPEAKER_00: 1:02:33

Um not not my own personal experience, but as a as an onlooker.

SPEAKER_01: 1:02:41

Oh, okay, okay. But but it's that it's that everybody goes in, you know, not 100% sure of what they need to do, and then everybody comes out the other end frustrated or pissed off, yeah, naked, or they have to scroll scru rummage around and get their laptops back in the bags, get the belts back on, get the shoes back on. There's there's there's no space to do it for a start. That's very true. And secondly, it's just fucking chaos.

SPEAKER_00: 1:03:13

Um the biggest problem about airports and the entire checking in procedure is other people. It's it's the it's the person in front of you at the at the metal detector who stood there taking his fucking waistcoat off and taking his his belt and his shoes off, whereas you're there in your onesie like every fucking other same person who's come to the to the airport that day. You should be able to like pay a premium to go down a side corridor with like a gap of five minutes between where you're gonna be assured that there will be no other people fucking up the process, because I know exactly what I'm doing and what I'm expected to do. But I remember from last time that I went. But you've got you've got people there who are like fucking either pissed or borderline out of the lines.

SPEAKER_03: 1:04:06

That's the other thing, isn't it? The alcoholism at airports that does not help one bit.

SPEAKER_01: 1:04:14

And they they actively encourage it as well. Um I I remember uh being on a flight um to uh Phoenix in Arizona and this was at the time where you could smoke on planes, um, but only in a certain section. This is just before they phased it out, you know, to keep to keep everybody's health. You can only smoke at the back because uh obviously if you're travelling forward, smoke only goes back. Yeah, yeah, it only goes backwards, doesn't it? Yeah, just crack a window and yeah, open up that door on the side just by the toilet. Uh let all the pressure out. Um and yeah, and kind of you know, they they brought drinks and drinks, you know, before before you know it on a you know an eight-hour flight, you're pissed off your bloody head. Yeah uh with free drinks and godness what and yeah. Did you get pissed, Paul? I did, yeah, sorry.

SPEAKER_03: 1:05:16

Don't apologise, I would have done the same.

SPEAKER_01: 1:05:19

I was sitting next to an American guy who kept going to the uh air stewardess. Oh, well I've two over here, and I didn't I didn't even know him.

SPEAKER_03: 1:05:26

Uh that's very convivial of him.

SPEAKER_01: 1:05:30

Hello, I think because he didn't want to drink alone, so he roped me into it, and I just uh my refuse. My polite Britishness went. Yeah, yeah. Okay.

SPEAKER_00: 1:05:40

I'm tea total, thanks, but um yeah. Go on then.

SPEAKER_01: 1:05:51

So yeah, um, but but aga again, you know, uh airports have not changed, not adapted to new security measures that uh don't allow you to kind of do that. You can pay, can you, to get the fast track. But I find the fast track is just uh slow. Just as slow, but it's for the more middle class and uh well wealthier uh people who appear to be slow basically.

SPEAKER_03: 1:06:18

Yeah. That's what they'll see it as.

SPEAKER_00: 1:06:20

Yeah, um you've just reminded me of right, this is what honestly one of the my I'm getting mad just thinking about it. When when you call, when you sat at the gate, right, and they call and everyone stands up and cues. They cue from the fucking gate all the way down the fucking hallway thing, like the air bridge. And I'm just sat there going, you can't leave until I get on this plane. Why have you got up? You just what the f what do you think you're doing? You've you've already got a seat allocated before you get on the plane. And if I sit here for ten minutes after the last person gets on a plane, you've still got to wait for me. So why why are you queuing? Just fucking wait.

SPEAKER_01: 1:07:03

I know, I know, and they they I don't yeah, I don't get that. You know, why get everybody and then you you get people then at the front of the plane, you know, just pissing around with the baggage and getting everything out and and you know, putting things in the luggage, you know, taking the coat off, standing there in the middle, and you just ended up getting another cue behind that person.

SPEAKER_00: 1:07:28

Why not just let on kind of like just fix that down first and then get your fucking neck pillow out after everyone else has gone?

SPEAKER_01: 1:07:36

Yeah, or or just you know, fill up the first, you know, uh five rows at the back first, the first five rows after that, the five rows after that.

SPEAKER_00: 1:07:45

I'm pretty sure they do the front first, aren't they?

SPEAKER_01: 1:07:48

Yeah.

SPEAKER_00: 1:07:49

I'd like to fill it from the back down rather than the front.

SPEAKER_01: 1:07:51

Yeah, unless you've got both, you know, then fill it up from the seats furthest away from the entrances first.

SPEAKER_03: 1:07:58

But if you've got a seat allocated to you, then you're you know, you're stuck with that. So you the airport should probably find a way of saying, right, that's per that seat you're up. That seat you're up. Yeah, that seat is how to get it.

SPEAKER_00: 1:08:14

Like the Argos ticketing system, where you've just got you've just got a number and it goes bing and then you've got to get up and go. Obviously the difficulty with that is the if you're 156 and 155 is some fucking daft cunt who's not paying attention and they call they end up calling their number like 15 times because they're sat playing on the Game Boy or whatever.

SPEAKER_03: 1:08:38

This is very true. Yeah, but it's not a perfect solution.

SPEAKER_01: 1:08:41

It i it isn't, but at least it eliminates that the whole kind of like herd mentality. And yeah, and I oh god, it does it does bug me, and then people just they what is it? We just have to get in a queue and we have to be first in that queue.

SPEAKER_00: 1:08:57

Uh it means nothing though, you're not first. That's the thing. I know it's not like they're handing, it's not like you're queuing for a PlayStation and they've got a set amount of PlayStations, and you actually look they have to get yours that day. Like you you're all you're all waiting for each other. It's not like if you're the first in the queue, you set off like set before everyone else.

SPEAKER_01: 1:09:17

You're gonna get there ten minutes earlier. Yeah, exactly.

SPEAKER_00: 1:09:21

One passenger flying off by himself. It's like some broken computer game, they just fly out there. Yeah, I think earlier, um Paul, what you said there, what the so I've I've been going on holiday pretty much every year since I was little until very recently when I became an adult and had to book my own holidays and therefore I didn't book any holidays. But um the entire the entire process from when I was a little kid up until recently is is exactly the same. Apart from after like um 9-11, they started to introduce like testing, you know, you had to put your stuff in little bottles and various tweaks to the security system. But that's exactly what they were, they were additions to the already old and broken system that they've tried to squeeze in rather than just taking a look at the whole thing again and going, There's probably a better way we can do this better. We put a man on the moon like 60, 70 years ago. Yeah. And I'm still gonna take my fucking shoes off when I go through the airport.

SPEAKER_03: 1:10:23

And that wraps up another episode. Thanks for listening. Don't forget you can sign up to our Patreon at patreon.com forward slash fasterhorses for an exclusive extended version of this episode, as well as one bonus episode a month and other perks detailed on the site. Don't forget to subscribe on your preferred streaming service and follow us on Twitter. Catch you in a couple of weeks for another episode of Faster Horses.