Faster Horses | A podcast about UI design, user experience, UX design, product and technology

What should go into a design system?

• Faster Horses • Season 4 • Episode 10

Share episode

Design systems have become a key part of user experience, design and development, but what should it consist of?
 
 We have a good old poke around, question atomic design, figure out audiences and how to effectively communicate what the core concept of design systems are, why we use them and is Brad Frost right.


Should print and digital guidelines fit into a single system?


We chuck in the patterns and chuck out the chintz, with topical tangents, wrapped in the UX of a squidgy scotch egg.


All this and more are answered in this episode of Faster Horses.


🐎 80% comedy, 20% UX, 0% filler


👕 Get stickers and tees at https://www.paulwilshaw.com/shop/ 


💎 Support the show and sign up for early and exclusive content: https://www.patreon.com/FasterHorses


🎙 Spotify: https://open.spotify.com/show/5wF48uFWHs5a7gpr3eNwrC

🎙 Apple: https://podcasts.apple.com/gb/podcast/faster-horses-a-podcast-about-ui-design-user/id1496787723

🎥 Watch: https://youtu.be/GYjaKrOt1VE


PEACE!


Produced by:

Paul Wilshaw

Nick Tomlinson

Mark Sutcliffe

Anthony Jones

Chris Sutcliffe

Title music: James Medd

Sound effects: https://www.zapsplat.com 

Support the show

All this and more are answered in this episode of Faster Horses, a podcast about UX, UXR, UI design, products and technology (sometimes!)

🐎 80% comedy, 20% UX, 0% filler

👕 Get stickers and tees at https://www.paulwilshaw.com/shop/

The show is hosted by:
Paul Wilshaw
https://www.linkedin.com/in/paulwilshaw/
and
Mark Sutcliffe
https://www.linkedin.com/in/sutcliffemark/

If you want to suggest an idea, or join us on the show, send us a message 👆.

Nick:

Fix that bit in post. No, so I was saying yeah, there was what's his name? Martin Zuckerberg was on Rogan of all people, like last week and they were talking at great, a great length about VR and stuff. And. Apparently the reason why so many people get sick of it is because there's like a tiny lag between turning your head and like the amount that the headset turns. And it's like almost imperceptible, but your brain knows that it's not quite. You haven't turned as much as your head has turned and that makes you feel sick. So they're working on zero latency and then apparently like the eye tracking issue is part of the reason most people get sick as well, which is you're moving your eyes within like screens rather than the screen moving where your eyes are moving.

Mark:

interesting because the thing that I always enjoy is that there's a contrast between the fact that your brain is able to perceive these minute differences, but then what your brain then does with that information is that we've obviously been poisoned so we've gotta empty our stomach to make sure that, my, my head can move properly again.

Nick:

Get rid of the poisonous berries That, that we foraged.

Paul:

Yeah. Yeah, Isn't it?

Mark:

What kind of things that to become an evolution imperative?

Nick:

Oh, I found a fantastic like theory online about, the uncanny valley.

Mark:

Yeah.

Nick:

it was like the existence of the uncanny valley implies that somewhere along our evolution line, there was a creature that looked human, but wasn't, and we developed the reaction to be afraid of it.

Mark:

I see.

Nick:

That is terrifying to even embark on

Mark:

it is the only thing I could think of is I'm gonna say logically then, but I don't know how logical this is going to be, but at one point the whole Sapian did exist

Nick:

like branch.

Mark:

all the other branches. Didn't it. And essentially we killed them all

Nick:

They just founded everyone last week. Didn't they

Mark:

Did they? That would be categorized as news. And you should know by now, Nick, that is something I do not participate in. Exclusively trade in olds

Nick:

old

Mark:

Yeah.

Nick:

Technically it's older than all of us.

Mark:

That's true. Yeah. Yeah. So really I should know this before anyone else

Nick:

should be the cutting edge of old news.

Mark:

yeah, I'm

Paul:

I think it's in a certain time period though. Isn't it? You need to

Nick:

Yeah. From

Paul:

time periods?

Mark:

oh, yes. Yeah. That's the level of

Nick:

anything around the paleolithic era not got a clue.

Mark:

it's a bit previous. Yeah. Yeah. I unless of course I was, an archeologist or a paleontologist, some kind of bone brusher or yeah.

Nick:

I've heard, you've been referred to as several S In, my time.

Mark:

was sexiest and I've taken up onto the bank.

Nick:

you were a yeah. Hotly contested by you and David Hassel off that year.

Mark:

Yeah. Yeah. And that was a random, was he Finnish or Swedish? Some kind of singer

Nick:

sure.

Mark:

singer who was decided to someone decided he was the most handsome man to exist. And I think his most defining characteristic was how he looked exactly alike. Happens if you put all the sliders to the middle in every character creator ever

Nick:

generic.

Mark:

male number four.

Nick:

With the brown hair,

Paul:

Now, that's what I've been called earlier today.

Nick:

your wife's horrible to you, Paul.

Mark:

Yeah. But at least you can also be called the most handsome man to ever exist.

Paul:

thank you, mark.

Mark:

is

Paul:

funny story on that slider. Mine, my son came to, have you heard of the game Ark survival.

Mark:

have, yes.

Paul:

you can do your current to that, and you use the sliders. for some reason he creates this really sure. Horrifically muscly on the top path. So like the slider on the tool list is all the way down On the chest muscles all the way up the slide leg muscles all the way down. So it's this kind of like top, heavy, yet heavy,

Mark:

Hoon running around. I love

Paul:

but yeah, I don't know where that came from, but was.

Mark:

with with characters to creators. It was a game, an old game that I never got really past the tutorial section, because I always played it. When I was where to young gly, it was called wizardry eight. So there had clearly have been seven more before them, over whatever category lineage that was, it was an, party based kind of semi turn based RPG. You were able to create your own party at the start you had a selection of and skills and vices to match up where you could put airmen. And me and Chris made a party once and it was started governed by this Scottish warrior called Derek MC steel and the was wonderful band of misfits. I remember where there was one, one character called Putin. Whose nickname was was Sue beard because she had a beard and her voice was that of a, kind of a medieval milk med. And we were due to go questing around with all these individuals, but, never actually committed to it. So beard, we hardly knew ye

Nick:

Should I do my funny character creation story.

Paul:

Yeah.

Mark:

please.

Nick:

I only discovered what game this was the other week when mark came around to play and we fired up oblivion online.

Mark:

Oh, the scrolls

Nick:

Elder scrolls. Yeah. Yeah. Online elder scrolls online. And I didn't think I played it before, but apparently I had, because it was the game that I was playing with drew and drew was like, can you name me, character? Anything you want? I was like, yes. And she goes, call it, call him. Prince Jillian Anderson. So I played the first hour or so as prince Julian Anderson and then about a month a month or two later, we were watching some program. It might have been that sex education, or whatever on Netflix. And she saw. She saw Jillian Anderson's name go up on the screen. She goes, wait, Jillian. Anderson's a real person. So up until that point, she thought she had created the name. Jillian Anderson, the world famous actress from the,

Mark:

Yeah. I think it's one of those, isn't it? Where that's clearly buried itself

Paul:

yeah.

Mark:

a head somewhere and that itself from everything else.

Nick:

It's similar to the joke that we've got about wanting to name our. Our first dog. No, don't mind.

Paul:

should we start this?

Nick:

It's been a long day.

Mark:

intro One might.

mediaboard_video:

I'm one of your hosts. I've led design and development teams, please. Another wellness, lots of awards, and a few Nick Tomlinson. I'm a digital lead UX designer. The best investment company. And so cliff that in the digital automations coming up, we'll be talking about design to experience, change analogy by UX. why we pick apart all the experience of a random product object service. place an actual advert from Mo stele from Bolton arcade. Hello, thank you. If you want to be part of the show, you can send us questions on Twitter with the hashtag faster horse pop now onto the show.

Paul:

Oh,

Nick:

Vanessa Calvin. And. What we wanna do is get a dog and call it Vanessa Cal. And then when people say, what's your dog's name? We say it's Vanessa Cal. And hopefully their immediate response is, oh wow. You must really like her music. And then we go music.

Mark:

music. like how. How disturbing number of people in actual human reality have turned to me and said, you mean Beethoven like the dog and I've gone. Yes. Like the dog walked away from that situation

Nick:

that wrote those beautiful concerts.

Mark:

yeah. Yes. Yeah. Those amazing sym son, artists.

Paul:

TIAA.

Mark:

dog. That one of that movie is when he gets put down,

Nick:

And you can finally leave the cinema,

Mark:

I can finally leave. Yeah. Yeah. Which is actually also historically accurate to what they did with, real life human be cuz he went deaf and he thought, oh, hard luck.

Nick:

like a rare sauce.

Mark:

Yeah. Basically put up a curtain around him and just, a bolt through his head and it was. Turned him into clue. Yeah. all. Alright. Ann. You

Nick:

From.

Mark:

yes. Wherever that was. Yeah. Yeah. Oh, so I was aware this weekend, actually.

Paul:

Yes.

Mark:

I was gonna say I was gonna say I was on holiday, but that would be that would not necessarily be an appropriate reflection of what the what was actually transpiring and the way it was being received by me, myself, because I was actually aware with my niece and nephew, meant

Nick:

Oh, sorry. A picture of you on a climbing frame.

Paul:

Yeah. In the middle

Mark:

them?

Paul:

also to note it's in the middle of the night, which I've found.

Mark:

yes.

Nick:

Very disconcerting.

Paul:

Yeah. It's I was waiting for the ransom note to follow.

Mark:

No, that's fine. That's fine. I think a lot of other people were, but ideal at that time for me to do strange things like, climb on climbing frames, cuz at that point, the middle of the night or at least when it's dark raining and preferably a thunderstorm is ensuring in the background. Just assume that I'm a figment of their imagination. And they go and get a drink or heavily medicated in zoom fall. And that brings me a great pleasure. But yeah,

Nick:

Can we upload that picture to Twitter? If you still got it.

Mark:

Yeah. Yeah, of course. That can be the the cover for this podcast on the, for trying to, me trying to wrestle with the ongoing, debate and issues such as what we put into a design system which.

Paul:

Only 12 minutes in. We've got a good plenty of time.

Mark:

Which seem fully, because it definitely not seamlessly. There's a very clear seam where basically the two topics, bring us on onto today's topic, which,

Paul:

What,

Mark:

you yes. Would you like to.

Paul:

goes in a design system?

Nick:

Yeah. Yeah. Yeah. I've been charged with explaining to product soon what a design system is. And so I was doing some research to find out what my opinion was and I was watching back. What do I think? A design system. I'm gonna go get someone to tell me. Yeah, so yeah. Did a, like a you're

Paul:

I was

Nick:

well,

Paul:

you shouldn't LinkedIn poll and that would given you the answer a hundred percent accurate.

Nick:

Yeah, I just got 27 wrong answers. And then would all have been wrong. Yeah, so I went back and I started rewatching a, like a talk that I paid for about six months ago by Brad frost. I was surprised to hear that he will like he ruled some stuff out of be like, what is that noise?

Mark:

that's that,

Nick:

you just had, yeah. Is, have you just had a wish granted

Paul:

Yup. That's

Mark:

to come in at particular phrases, very separate serendipitously timed. One of us will say something and a beautiful charm will sound after.

Nick:

it's whenever one of us says, I don't believe in fairies

Mark:

Yeah. Yeah. And the death

Nick:

yeah.

Paul:

some, got some AI trained on the conversation. So every time you mentioned, mark, it a little thing every time you mentioned mythical beast building systems,

Mark:

those, are thing. Yeah.

Nick:

What was I saying? Yeah. So he said yeah. So he said some things don't belong in the design system. And I was like he probably knows more about this stuff than I do. However, I disagree. So he said things like tone a voice don't belong in the design system because the design system, by his definition pertains to things required or things that directly impact the creation of interactive. Are there Interactive's one of them

Paul:

Oh

Nick:

we've suss that out.

Paul:

yeah.

Nick:

yeah, the pertain to things that are used to design like interactive or digital interactions basically. And I was like that, our tone of voice is, or will be in our design system because it's. A rule book for people writing copy as part of the UX consideration, which is part of the design system. So I just thought that was really interesting and thought it would be a good topic to mull over it and see what your opinions were of that particular example. And then just wider what you think should, and shouldn't go into a design system.

Mark:

I can say off the bat. Oh, go ahead. Paul.

Paul:

No one was going to say though. What, when was this from? Was this a recent tool core?

Nick:

was this year. Yeah,

Paul:

Okay. Interestingly, I really like more Brad Frost with design systems and stuff like that, but I disagree with him on a lot of stuff.

Nick:

He's very dev centered. Isn't there.

Paul:

yeah. The naming convention on the categorization of the design system. So the atoms molecules, organisms, stuff like that, I think is a nice way of categorizing it. But then when you try and communicate, what is an atom over an organism, those lines are super blurred between

Mark:

Okay.

Paul:

of those. And then you end up kind of going like then it says like a semantic argument you'll have

Nick:

Yeah.

Paul:

is it an organism? Is it a molecule? Is it what is the smallest thing? And I think in science, that's quite easy to say because it's an atom but in design a button is that an atom because got a shape and it's got a label on. It's got different states or an icon and things like that. then maybe you can have an animation and things like that. Is that molecule or organism?

Nick:

I, interestingly, we went through a similar thought process and I think if, as soon as you start thinking like that you've got to involved with it. Atomic design I think is like a framework or a way of thinking that helps you make sense. Like creating components and layouts and stuff. And as soon as you start arguing internally with yourself about, does this constitute an at a more molecule and it has to be right. We have to pick the right one. You're missing the point. It's a framework to help you figure out the structure of what designing, rather than the right answer. Like it fits into this a column A atom or, Column B molecule.

Mark:

I think that's a good point. The idea that it's ultimately a sliding scale because so I talk through atomic design and E atomic research as well, which is a growing,

Paul:

Yeah. Yeah.

Mark:

In the inductions I give with work the way that I've broke it down I encountered exactly the same problem you were describing which is I wanted to demonstrate how we in a design system, in our design system pull these things together. And which is which is atoms, which is what I found that realistically it was a bit difficult. To describe, which was which it was very blurred. what was less blurred was that what exists on atomic level is the smallest constituent parts that I was fine with because you've got containers, you've got labels, you've got iconography.

Paul:

Yep.

Mark:

was a bit easier to put something exact on, but then I noticed as you go from left to as you go through atoms organisms patterns, I, the way I've been describing it to people is it becomes more behaviorally led. So when you have something that is a container or a or a label without in isolation, there's no behaviors attached to it. It can't do anything. There's no interaction design, we move on, as it becomes, so I would, in this case, I argue that a button. Was a molecule because it it performs a very simple interactive function, which is it can be pressed. I think if that button became part of something like a gonna say a model, but I say model are more patterns than they are, then there

Paul:

Yep.

Mark:

So again it's not perfect. But again, at the very far end of the scale, I think if you're thinking in terms of behavior, can be absolutely behaviorally led. So your filter pattern or your data visualization pattern be extremely flexible in terms of components. It. Actually contains I think maybe farm fields farms is a good ex example of this, the behavior that it's it's allowing to, to perform can be quite similar throughout that quite similar in terms of where that pattern lives. So that's how I've been categorizing things when it comes to Frost's, taxonomy, as we say, because I do think an excellent starting point, but I think that's just what it is. And I think also because Brad frost, isn't a UX designer. From what I remember is a web developer, which explains his developer focus, which I think is ultimately a good thing.

Nick:

it's fine as to that is what he does. So that is how we will think.

Mark:

Yeah. but us as designers are now at the point where, UX design considers the entire funnel of what a user goes through from discovery. All the way through regular use and support and management and stuff like that. So your design system has to be prepared to, to cross all those functions, all those different areas. And it becomes quite, can become quite a strategic thing. And I think the taxonomy Brad cross is implemented whilst the good starting point needs a lot more development to encompass that sliding scale and those for more behavioral elements.

Paul:

Yeah, and then going back to Nick's point, what should be in our design system? I'm not, I, yeah, I think of voice should be in our design system it's quite, I've got, I use a graph to explain what a design system is at m y work And that says the design system encompasses absolutely everything if. And I think we talked about this, about people speaking different languages and speaking French who speak in Spanish, if somebody is using a different type of voice over there and a different tone of voice here. So even if you go from like websites when app, or from something where facing to a customer portal or something along those lines, things need to talk the same way. So I've done, I've taken Brad Frost's. atomic patterns. I've got core now as my main thing, so that encompasses tone of voice, encompasses colors, typography, things like that, I think fall slightly outside of the patterns of atoms, molecules, organisms that's where I think that needs to be in there because if you don't have one source of truth in there, you could go to a different application uses that's slightly like that color slightly, I'll use a different form field type over here and things like that. And then you don't have that in and everything should come on under that designs system So I think loads of things go in there to be honest,

Nick:

I think tone of voice is a really interesting one. And that specific thing sent me down a bit of a spiral today. So I'm trying to communicate in this document that I'm creating about what, it's just a 101 on a design system to people who won't necessarily be interacting it at the same level as a UX designer, but they need to know what it is and what it's for and might get bought into the concept of it. And I wanted to explain that yeah, it's a repository of the contributions from everyone in the business, basically. And it's a repository for all the rules on. On the brand, like from tone, the voice to, like really granular stuff, UX behaviors and component behaviors and stuff. And I was like, I was think. Some businesses, as you touched on there, Paul, I have two I've more than one tone of voice. And sometimes they've got, you might have a UX in product tone of voice, which has to be a certain way. And then the marketing tone of voice quite rightly would be completely different because it needs to be engaged you, or it needs to be like, depending on what sort of brand you are like or vicious or, whatever it needs to be. But if it's offline and we are UX designers, Do you need to account for it in the design system. And if you do like how much do you need to account for it? And that got me thinking about colors in terms of RGB for digital, and then in the design system, do you need to have the CMYK color values for print, which we would never touch as digital UX designers regardless. Does it need to be in there because it's all part of the same document.

Mark:

So I've got an opinion on this, I think, shotgun. so I think this is really interesting because most important thing about this comes down to the idea of single source of truth. Now I think if you have, and this links very much to the maturity of user experience and the perception of user experience in your company, I'm currently working on the UX strategy, where I work and it's a huge undertaking. It's just, yeah, it's it's consuming everything, a lot of fun, a lot of fun, but re realizing how much it has to touch because your design system should, if you are going to be a, I was gonna say emotionally mature, then bit of a Freudian slip a UX mature, user driven organization, which is meant to be the dream. That's your sixth level, according to, Neil Nelson Neilson Norman NNG those chaps Neil then Then user experience has a seat at almost every table. Basically it's considered at a board level in

Paul:

Yeah.

Mark:

considered in customer strategies. It's considered through every single affairs of discovery. Like I mentioned earlier from, when people are trialing the product or just defining out about it, which is where your webspace might occupy the way to where they're getting support, which is where your customer services might come into it. Now just because if you think about it like that, your design system might start, and this is true for things like accessibility or being owned by your UX team might ultimately be managed by that. But it doesn't mean that things like marketing guidelines and marketing documentation, Be a part of that design system platform. I think ultimately should, your design system should grow encompass these things. And sections can be owned by web development team, your web your marketing team, your creative services team and those individuals, cuz it makes where things that do need to cross pollinate such as perhaps an illustration library. Or tone of voice where there needs to be some level of continuity. At least it's far easier to see that all in one place. it's easier to bring those stakeholders together one single of truth, which may have documented. This is what you have for you for in product. This is what this is what, or maybe it's done differently. This is what users see. This is what see,

Paul:

Yeah.

Mark:

things, our sauna driven. But everyone else can be in that room. Every, all those stakeholders can be in the room at the same time pointing at the same diagrams and the same pages of documentation. That though is that requires a lot of understanding of UX in general. why it's high maturity

Paul:

So interestingly, so the way I always system. To any company essentially, it's going to save you the company money. What you were saying there, Mark is exactly right. And everything under the sun should fit into the design the brand guidelines. If you make brochures, leaflets, posters, they should all fit into the design system. And the reason I say all those things should fit into the design system, because if you do one icon, you do that one icon. Then that should be usable on print leaflets on your website, on your customer portal, on everything else in between. And then. Have that same consistent one thing. Otherwise you've got what you end up doing. Then as you get different departments, different groups, creating their own icons or having their own little brand style guidelines, little icons, and then it becomes, oh, actually you've got across the business. If you did a design audit or, a systems audit, he'd find you've got yourself like 50, 60 icons that do the same thing of and then you work in a monetary value. And if you said every single person, if it takes you like an hour or something like that, I call them expanding the out that could cost the business, say 60 quid. And then you multiply that by 50 and then you suddenly think. That is really good case for a design system because you actually saving the business money. And that's why I think voice, even your photo library should be a spot in the design system, because again, how many frustrating hours has anyone spent looking through of stock photography to find the perfect stock photo, by the way, we did a, an episode on stock photography go back and listen to that. If you haven't already,

Mark:

shameless.

Paul:

a yeah. Shameless plug. The amount of hours you spend looking for that perfect photo. And then, if you times that by five designers, that's five hours, and then you if you've got eight, does that's a days worth to find or photo online. If somebody took a day to find one photo, then. That's probably better spent than five people spending an hour finding one photo at across different departments. And then it just become, it just becomes a numbers thing.

Mark:

The interestingly, this is exactly the same. Kind of equation I've been working on for accessibility and it,

Paul:

now

Mark:

and it links very tightly into the UX law of, I can't remember the whose load is, but responsiveness and productivity increasing if responsiveness is under I think, 400 milliseconds. And there's that synergy between user human and computer interaction. But the equation I'm gonna be using, which I encourage everyone to use, cuz I'm gonna be using this to explain how we're losing thousands and thousands of of our users' time. Or we could potentially save thousands of dollars worth of time. Because if it, if you have a, an INAC accessible component and let's say that it takes because of this accessibility issue, it takes a user five seconds. Longer to interact with this part of your process, but there's one part of your process. It takes 'em five seconds longer. They encounter this problem, say they're doing a repetitive task. They encounter that problem 40 times a day, then say, you've got a predicted amount of, we could have up to 2,00/5,000 users who encounter that problem. And you can translate that five seconds. You times that by how many times they reach it in a day, it by how many customers are having the problem. And times it by the, basically the salary of that person, the hourly salary of that person, you've got a monetary figure of how much an inaccessible component is costing your customers. But again, I think comes into another part that kind of sits around the design system. And this is very much in the forefront of my brain. It's something we can do a separate topic on, that is where the strategy sits because part of your strategy has to be that communication.

Paul:

Yeah.

Mark:

How do you make it so that, so we accept accessibility as part of your design system. Let's say that we think that's the case.

Paul:

Fake this cross.

Mark:

Yeah. Yeah. How do you communicate to your designers? What accessibility means to them, to your developers, what accessibility means to them and then to your business leaders and executive. What accessibility means to them, what it means to designers, and user experience designers in particular is very different to implement implementation and Tech constraints. And that's very different to basically the return on investment and money talk that executives expect. So how do you communicate these different things? yeah, it can be something that grows exponentially outward when it comes to what, what belongs in.

Paul:

Yeah, definitely. Nick, I've got question for you. Development guidelines fit in the design system.

Nick:

sounds like a trick question because I would immediately say yes,

Paul:

No trick question. I'm just curious. Cause I think we've covered marketing kind of So I was wondering how we told them fine prep.

Nick:

guidelines then.

Paul:

Coded coding standards fly your accessibility standards. The.

Nick:

Accessibility is an interesting one. Isn't it? Because who owns that? Is it the UX that are researching it and putting it into the components? Is it the dev that are building the components or is it QA that a check-in sure those are the two people who have done their job, put it in properly and it's working. Suspect if you. Up and running efficiently. It probably should

Mark:

should be

Nick:

It should probably lie with QA to

Mark:

to like, check that everything

Nick:

there and

Mark:

and present

Nick:

accurate before the certain thing is released. But I think it's everyone's job to

Mark:

everyone to get it.

Nick:

person that.

Paul:

Yeah

Nick:

and then

Mark:

Then how you actually,

Nick:

something

Mark:

is something I've

Nick:

dealing with an issue struggling with recently is like, how do you accurately represent what the accessibility levels are? And communicate and effectively the best way to do that is to have an interactive component, that has accessibility requirements apply to it that you can view in real time through something like storybook or something like that. issue that we're having

Mark:

companies

Nick:

You can't

Mark:

and on half of the,

Nick:

our app together and our web experience together. It's two different platforms. So it's React and React Native. Is react

Paul:

Yeah.

Nick:

Therefore you can't have one single source of truth for both of those things. So the Figma component library or the Figma design kit, as we're thinking about calling. It a single source of truth, it's not it's not live and it's not interactive or not as interactive as like a story, but would be. I'm personally trying to deal with that issue at the moment. Because I feel like writing down some of the accessibility guidelines, like via wide wildly between like really. Wide definitions like super specific impenetrable like some of them are actually like sums that you've got to work out to figure out like the focus states of things is quite a complicated, it's not some, is it what's the proper word for a big. A big adult Yeah.

Mark:

a big

Nick:

That's what adults call them. Yeah. Quite complicated equations

Mark:

a formula.

Nick:

took yeah. Our formula. And to communicate that to a junior UX designer when you're only half sure. You understand that yourself is very

Mark:

Yeah.

Nick:

if you've got an interactive component and you just got, this is what

Mark:

He says, wow.

Paul:

Yeah.

Nick:

it's a way

Mark:

Way

Nick:

to explain to me I've got something that I've started calling the accountant test at work, which is if an accountant was to follow the link to the design system whatever the looking at makes sense. And then if it doesn't make sense to an accountant, then you need to simplify it basically. And anyone can hover over a button, see it, change color. And

Paul:

Yeah.

Nick:

you know, like a. Read quick

Mark:

summary.

Nick:

the color ratios and the fact that it's triple air. understands that triple A's good, awfully directly, even if they don't understand what the rate is, just the.

Paul:

No not rating system that the, a AA plus the triple I that I think that's confusing on all kinds of levels.

Nick:

It's one of those things in there. It's quite ironic that it's, like accessibility is one of the, one of

Paul:

yeah.

Nick:

like good UX, but actually documentation around it is fairly impenetrable.

Paul:

Hello.

Mark:

of, one of the things I always get distracted doing when I, whether I'm looking at website online is tapping through everyth. Just be like, let's see if you've got the accessibility in here, since you're telling me

Nick:

Yeah.

Mark:

I'm gonna use this with my eyes shut and see how I get on and to do a good job. I think if there's one thing that back to that, like the core question, which is what is in a design system? I feel like you've got a central set of groupings basically. And I think those groupings are owned by different people, more or less. So to elaborate. This is based on, so what I did was I stole Nick just sneezed

Nick:

Hit the snooze

Mark:

bless you. yeah,

Nick:

but still managed to throw the entire podcast off regardless.

Mark:

Yeah. That's it. Yeah, I stole this diagram from Paul worked on it individually now to basically make it so I can claim it as my,

Paul:

Okay, that's

Mark:

Cuz cuz that was it Banksy that said that Picasso said all ideas are substantially stolen. no good artists. We talked about this last time.

Nick:

artists

Paul:

Yeah.

Nick:

great artists steal,

Mark:

Yeah. Yeah. That's it.

Nick:

Banks has stole from somewhere.

Mark:

yeah. Yeah. Cause he's well, good in he thanks.

Paul:

Nana.

Mark:

Up there for thinking down there for dancing and that

Paul:

yeah.

Mark:

Anyway at the center of the diagram which I believe Paul, you were using in similar sense to why, how I used it basically to induct what design system is and how it's been used stakeholders who aren't UX designers.

Paul:

Yeah.

Mark:

And it described five central components which was the in fact, I'll give you my adopted version. My, my version. you have the design kits, is what your designers use to make screens, Mac interfaces, and build out components. you've got your component library, which is the end result of what your developers make, who UI devs, got the dev sandbox, which is worthy, make it, that's something that's ultimately owned by your UI devs and, your head of UI, your head UI developer cuz they get to, I haven't got a clue about anything like that. So I let them I'll let them decide what the best thing to do there is. I've also added your research repository as Cause I think that's something that should be governed by your researchers, but ultimately accessible. By the stakeholders who need it, via your researchers, you don't want people going, adding shit that, they think is research because you've punched something into LinkedIn and got wrong answers. Then you've got your documentation well. Now documentation can be tricky because that touches like everything else. Cuz your design kit to have documentation. Your research report will probably have research ops documentation. your development documentation as we've mentioned already. how you tackle that? That's I dunno that can be on its own site. It can be within native to whatever, but bringing all that together is quite difficult. Overarching, all of that we've identified at work. We've, we're not calling it look and feel anymore we feel that's a bit. It's a bit restrictive as a term. It's a bit easy to pigeonhole, into making things pretty, so work all in it, design language which I believe we had a discussion about one of our previous podcasts.

Paul:

Nice plug.

Mark:

Shameless pug there. Yeah. And whenever I say Shameless pug, I want a picture of a pug in a silly hat to, to pop up on screen. and then encompassing around all that, you've got your UX strategy as well, which is your biggest layer out, which is how you do what you're doing. So I'd say all of that constitutes ingredients in a design system discuss

Paul:

I like how you mentioned documentation. Cause I was gonna ask if you think that should be part of your design system and interesting. We were doing quite a few. I think it really borders on service design more than like UX design or anything like that. So we are taking. Everybody across the business sales support, presales everybody into that and saying, how, what point does this become, your job, does it become this and how everything links together to get a product or service. And interestingly, we took them out something today and people keep talking about as a product, but it's not really a product. It's more of a back-office thing that we just do, but because it's taken a lot of effort for that to happen and there's loads of automation that happens to make it happen. It's services are in and that how we're talking about that. So what we're even doing, where we are designed and how the salespeople. Put that into Salesforce or a Dynamics or whatever CRM you're saying. And then we'll work in that is like the whole ecosystem we're putting in to play some will say that is even that's part, but design system. So we've got all the documentation, we've got scope of work, how they're presented customers and things like that is all part of the design system. So it's interesting that

Mark:

I think that's, that really interesting because essentially what you've got there is you've got your ops cuz I'm working for the UX strategy stuff. I'm working with our product manager.

Paul:

yeah.

Mark:

And she is mainly working in aha and basically completely overhauling how this 20 year old company uses products. She's oh gosh, she's got quite the fight ahead of her,

Nick:

Oh,

Mark:

but

Nick:

back. You

Mark:

yeah.

Nick:

a second, mark.

Mark:

Did that,

Paul:

Ah,

Nick:

fix that in post.

Mark:

I think you might have been the one who dropped actually because

Nick:

you.

Mark:

oh

Paul:

oh,

Mark:

it is the KNS who are wrong. is it me?

Paul:

slightly.

Mark:

was that? Yeah. I'm working with so I'm working with our operations manager product operations manager to figure out where UX fits into the wider products management space which is an interesting challenge. Again, what I think I'll be asking us to cover UX strategy in a future podcast. So I'll get on my sort box then When I've been figuring the stuff out, there's been a space to one side, which is is that a product deliverable or is it an ops deliverable? Is that something that's gonna improve? What we deliver or is it gonna improve how we deliver it?

Paul:

Yeah.

Mark:

and I think that I personally believe there does need to be a clear line between what you deliver and how you deliver it, because ultimately I've noticed for me, at least it's very easy to confuse one with the other. You

Paul:

Nick's just pastures elbow on his microphone.

Nick:

She probably, if you're watching on YouTube probably saw unheard.

Mark:

Yeah.

Nick:

feast for all the senses.

Paul:

Yeah.

Mark:

Just one of the many services we hope to provide in our faster house is offering

Nick:

the F the world's first four D podcast

Paul:

What's the, what's that? Is it a ASM? The audio?

Mark:

ASMR.

Paul:

Hey SMI. Yes. Kind of Seattle we'll have a little, he should have a little segment and

Nick:

UX

Paul:

does. Nick does. ASM are,

Mark:

Like the automatic, the UX automatic peer segment.

Nick:

I'm trying to think of one can't, conjure up a UX on

Mark:

No me, either me, but that being said, a lot of this is complete segment segment side, cyber segue. That's

Paul:

psycho. Yes.

Mark:

yeah, there are, you think about it, the way that certain UX terms are used interchangeably, arguably like design system by people who don't understand what they are, almost treat them like on a matter of peers that, they're described what they are just through the stones of the words and you get this when you get that oh, we need we need a UX design on this it's go on. We just need to figure out what the is of this. Yeah. Yeah. And once we've got that UX design, it'll all fall into place. I watch this, I'll listen to this podcast. Once and these three old white men were talking about how to, for a business to, to succeed. They, I need to fuck a watermelon, but once I've done that, I've got to get a UX design in. We just gotta do that.

Nick:

I just had a stroke?

Paul:

Just summed up the last hundred episodes.

Mark:

Yeah. Yeah, that's right. That in there. Yeah. Yeah. And also some,

Nick:

about, and then when you said all that was like, oh no, it must be another podcast.

Mark:

oh dear. dear. just reveals where next insecurities truly lie.

Nick:

Oh, no like

Mark:

yeah.

Nick:

are.

Mark:

yeah. Yeah alright. What was the one that we were talking about? Which business users? A few terms, which business users use

Paul:

Oh yeah.

Nick:

MVP has been

Mark:

That

Paul:

Oh yeah.

Mark:

that's a UX automatic here.

Nick:

Yeah.

Paul:

Yep. And VP.

Nick:

a sound.

Mark:

yeah. Yeah. And people expect you to know what it slash or of IUR.

Nick:

on a mat up here. Really?

Mark:

Yeah.

Nick:

with the mouth and the verge of the UX designers. Say it

Paul:

yeah. Huh?

Mark:

though, on our executive on thee.

Nick:

coming to

Paul:

It's nice. I have a new segment for the show.

Nick:

Oh,

Mark:

cause we definitely need more of them.

Nick:

Yeah, that's not.

Paul:

Yeah.

Nick:

Yeah.

Mark:

Where were we? Anyway?

Paul:

I don't know. Parking on about something,

Mark:

I was

Paul:

how

Mark:

how,

Paul:

Design system is gone.

Nick:

yeah.

Paul:

Yep.

Nick:

talking about separation between product and.

Paul:

yeah.

Nick:

The way that you deliver it or

Paul:

Yes.

Mark:

yeah basically another podcast episode in number itself freely as.

Nick:

down.

Paul:

Yup.

Nick:

need

Mark:

Shit. Yeah. It's just as well we're not recording this or something, so I've gotta write down in the minutes. Yeah. it will only be kept between us three and the entire internet.

Nick:

So just those three.

Mark:

Yeah. Because I would say that if you are gonna put that in your design system or advertise that as part of your design system, I'll say then you do need to create quite a clear line and those lines might have different. Each side of that line might have different owners and stuff.

Paul:

Yeah.

Mark:

you know, your processes and who figures them out, people can get very precious over quite sometimes quite rightfully so sometimes just because it's the way things have always been done. so I think that can be something that you've got to manage individually. But there is a certain amount of trade off between the.

Nick:

Where is your, both of your in the design system? Is it it a confluence page? Is it a link that you share in that to actually to a Figma? Like where is the first step in the journey of the design system? Because I've been thinking about stuff like storybook cup possibly live anywhere rather than online. if everything is represented in Figma, there would presumably be a folder. And then in that folder was a file. And in that file, the file is entitled. Toolkit or dev UI kit. And you go into that file is basically just a hyperlink and that hyperlink takes you to storybook. that how you would do it, or would you have a confluence page It? And the confluence page is the kicking off point Audi on the luck.

Paul:

interesting I say is what's the lowest common denominator in your business. So for me we've got it on SharePoint. I is our N because everybody in the company can access SharePoint. The problem I've found with Figma is your gateway in Figma is an exclusive tool. And some people. I don't really know how to use Figma. So for example, if you've got your design system categorized and pages on the left-hand side, can't guarantee that somebody can navigate out left on side or knows there are different pages

Nick:

you have each individual page in Figma represented as a hyperlink in SharePoint then?

Paul:

he could do. I, what we've generally done is we're using confluence more, but we're opening up confluence the whole company, but SharePoint's like my gateway drug to get people in apart from doing talks on every kind of, couple of weeks and things like that. But SharePoint is like my two minute like intro. But then if you want to find out more information there's confluence, then confluence has all the links out to every single thing on the design system.

Nick:

It's because if your Figma. But the kicking off point, you have to share that link somehow. So

Paul:

yeah.

Nick:

that lives is the kicking off point, which is usually like something like your SharePoint. Oh you confluence. And the realization of that in the middle of this podcast has made me visibly sad. Okay.

Paul:

Sorry. Sorry.

Mark:

I think I'm gonna hopefully it's gonna do one or two things. It's gonna inspire a little bit of Hal in you, I'm sure UX to baller will serve to crush it's gonna further dread. because I think there is there, not, there's never gonna be a big bang solution for this, cuz it's just

Paul:

yeah

Mark:

can be built into existing organizations. I think it's why a lot of focuses on startup. Because that's the dream situation where you've got the big blank desert of your big blank

Paul:

I'm not, it's where you can control the stuff. If you've got to start over 20 people in, he fucking easy to get 20 people on board.

Mark:

But you've got 400 and of hips

Paul:

yeah. Yeah. Good luck.

Mark:

yeah. So it's got to be a slow process. I think the couple of things you can do, the first thing you've gotta be mindful of in my opinion, is who is viewing it and what do they need from it?

Paul:

Yeah. Yeah.

Mark:

you we've mentioned here that it in figure as a centralized space is probably not the best one. If a lot of your users are either people who are accessing the design system don't know how to use Figma, but I think there are parts of your design system, which designers are only gonna. Or designers are interested in, so can live in those tools that designers understand. And so I think who's viewing what if it's roadmap stuff that people need part of a UX strategy. These things need to be viewed on an executive level. How do they access them? So I'd about your design systems, stakeholders, and what they, their, what stake they're holding as they were. What is that their need to see? then the other thing I think you can, Alice says, hello, the other thing you can think about then is in a dream world, a person would be able to enter your design system from anywhere and get where there need to be in an intuitive way. So that can be an next point. And I think what I'm, think what I'm This is my realization. I dunno if this is a good thing going or not, almost having a decentralized approach. To a centralized design system, is that you've got these interconnected pathways.

Nick:

It's like spokes on a wheel and no matter

Mark:

yeah,

Nick:

on the outside of the wheel and no matter which book you journey in on year old, reaching the center 0.0, all To. Design system,

Mark:

exactly, And I think that's a really brilliant analogy actually, because travel down a SP go back to the center and then travel down a different spark as you need to, you have to pass through this centralized hope. Yeah. exactly. Yes. And if you want to, you can, this, I'm really drawing out this analogy for, Nick you can have a cap a cover that hub. And that can be in the form of a centralized scientist centralized platform. So your hubcap, if you didn't yeah, can be this rapper, which is similar to what go.uk have similar to what apple has on the material design has on their stuff. All these layer stage maturity organizations ultimately end up with this that you can which whoever needs the information, their needs, that information.

Paul:

Yeah, I think, yeah. Cause what will, you've got to remember as well that people can and can shoe the entire design system in one setting. So they're going to just give them the information, the one there and then, and that will be loads easier for them to digest. I think what a lot of people forget about when the instigate design system is the UX of the design system itself and how, how. Tree gain access to that information. But if we were denied our mobile phone screen, treat that with love care, and respect it, test it out when we don't design system that just choke any old bullets and expect people to read it and follow it doesn't happen like that. Recent, we're going well over all the way. Recently I've done it just because I know the attention span of people is in teams. For some things, I put like a little Wiki in teams so that people can reference it, search it and find that information just by searching teams. So they, because they never really leave teams that's, that Rica system just put those there's kind of light level gateway. I know. Yeah.

Mark:

wasn't designed for human consumption. So

Nick:

I think, I feel like that is probably a valid strap line for the actual product. Like teams never leave.

Mark:

thought meant not valid for human consumption.

Nick:

Even not.

Mark:

So I think there's a really important point here which you touched on the Paul, which is as UX designs, we should be giving our design system, the UX stem UX treatment. As we, we give the things, the design systems about for that also translate to put that into a sentence that means treating your design system as a product.

Paul:

Yes.

Nick:

Oh, yeah.

Mark:

And this is something that you are in an organization, which is very low on the old UX maturity scale is just establishing itself. You're gonna have a lovely fight explaining this we've I've, we've been through it. We've all been through it. And we have believe it or not made headware with it, but we've all been through this process of explaining, no, this is a product, not because you sell it, but because you get such a return on it it's effectively a product. And if you treat it with the same processes, the same quality assurance with the same care and respect, as you say, the same level of expertise you get out of it, the same kind of thing you get from a product.

Nick:

I think you have just uncovered such I was just thinking, oh we're gonna, gonna embark on this for another half an hour. Now. we should do a part two to this podcast we should, in the next episode, we should talk about a design system as a product is a

Mark:

Yeah. It's design system.

Paul:

it.

Nick:

Why is it? No, what's that mean?

Mark:

You think, do you think its as design?

Nick:

a product and why is it?

Mark:

Are you wrong? Yeah. And why is the answer? Yes. Yeah. Yeah. Yeah.

Nick:

that.

Mark:

Because there's

Paul:

Yep.

Mark:

which I could talk about attached to this because which it comes to, again, that strategy part, which I think does loo more for us if your design systems as a product, can you treat your UX team like a business and what are the implications of doing that? And where does that fit it? An organization.

Nick:

that's all

Mark:

Sod. Yeah. Yeah.

Paul:

Do it.

Mark:

I actually thought that was,

mediaboard_video:

it's time for you. A segment of the show where

Mark:

never love It

mediaboard_video:

object, service, or

Mark:

gives me life.

mediaboard_video:

ball and machine discuss it's terrible. All grit UX spin the wheel, Nick.

Nick:

That sound is actually the sound of my wrist. Not the Yeah, in a tiny little wheel. We have lost all the suggestions on the UX. Tombola I tried to text you some time ago, but like podcast as you weren't looking at your phones. So we just need to pick, just need to pick a subject and interest in subjects we can No more than five minutes on.

Paul:

I'm going to say scotch eggs or

Nick:

Great.

Paul:

the

Nick:

how much experience of scotch eggs have you got pal? vegan. constitutes our every time we do time we do a UX, tombola let I go off on a fucking tie red door.

Mark:

We all, that's all. This is us three

Nick:

I've

Mark:

ranting.

Nick:

to Scotland, what I don't expect when I do finally go there, it's like a border like wall around the entire city of Scotland made out of sausage meat in breadcrumb.

Paul:

and the field fried MozBar just as fortifier.

Nick:

in abundance out there apparently, but,

Mark:

yeah,

Nick:

but what constitutes. Scott, like what about the Scott JAG? Mix it scotch

Mark:

yeah. That's

Paul:

a

Mark:

probably love a

Paul:

yeah. Be interesting. Cause the vegetarian version is called a picnic egg. So it's

Nick:

anywhere

Paul:

yeah,

Mark:

vegan

Paul:

Allah.

Mark:

the ground and spits on

Paul:

I wonder if it's like a Cornish pasty, so like a let it's made in Scotland. You can't technically call there a scotch egg.

Mark:

Oh. Or like whiskey, it's not made in Scotland, it has to be spelt

Paul:

Yeah. Champagne.

Mark:

Sharp. Yeah. It's just is. It's not made it didn't come from France, but it was made by a man who did, not champagne then. Is it awesome?

Nick:

That

Mark:

Is it awesome?

Nick:

that was not a joke. That was a real thing that a company

Mark:

a slogan which you really should be

Nick:

champagne is often rugged. Scottish eggs are often regarded for their excellence. There is an English scotch yet. Paul Mason.

Mark:

by one mark Steeler to be enjoyed exclusively at picnics. this is apparently what it is. It seems to be, I was gonna say, though, and you can tell I've not had dinner cuz all of these so fucking amazingly they've done nothing but talk about. Food and drink for the past two, three minutes I, yeah.

Nick:

of a picnic egg.

Mark:

Yeah. But I would've expected. And if this doesn't exist, I think there might be space for it to exist. But an egg is courted in FAF and then bread crumbed.

Nick:

So what

Paul:

Oh,

Nick:

sounds delicious and I

Mark:

Yeah.

Nick:

leg?

Mark:

I'd say for my purposes. Yes. It would be a vegetarian option as opposed to a vegan one, because I'm not sure what you'd do for a vegan option

Nick:

Kiwi is the ag of the fruit world.

Paul:

coconut cocoa and coconut tree.

Nick:

When I think

Mark:

tofu.

Nick:

I think of fully realized product, which is like egg about the size of a five-year-old. And it's how big is a human child? I don't know

Mark:

Usually a bit bigger than that.

Nick:

the size of my head, which if you've met me

Paul:

if

Nick:

inaccurate.

Paul:

you feed you them scotch eggs, this is the height. This is the maximum height.

Nick:

Yeah. But up in there is that the bones of curled.

Mark:

Like a twister

Nick:

exactly. There would be. If you straightened them out, they'd be like a good feet.

Paul:

This must be where my son's getting a little.

Mark:

what is inspired by

Nick:

come full circle again.

Mark:

it's like poetry, it rhymes

Nick:

Yeah I was expecting like an egg and you take the egg out to like you going on a country trip to Cornwall or Scotland or somewhere else that makes food that they've named after themselves. You walk out into the middle of a field and you get your You throw it down on the ground and you sit in that weird sort of S shit manner that people seem to do

Mark:

Lux?

Nick:

Yeah. With the feet out Which is the only time it's acceptable to sit like that.

Mark:

Unless you are in like long as you're a, on a shes

Nick:

yeah, on the bonnet of a Chevrolet Corvette or something.

Mark:

Which is also the sexiest time. You can eat a SCO, especially one that's the size of a five year old.

Nick:

I need kingdom cloth in the middle of a field with your other half, and you get out the picnic egg and you're like, crack it or over your knee like WWF wrestle a brick into one spy and

Mark:

Yeah.

Nick:

cracks off. And inside the picnic egg is like a full picnic for two

Mark:

A full picnic for two people.

Paul:

Ah, nice.

Nick:

rolls, There. room. Temperature, Bri two glasses, some champagne and some cheap non vintage domestic champagne.

Mark:

yeah. Paul, my song,

Nick:

mass home.

Mark:

Paul Mason.

Nick:

Yeah, that's what I was expecting from a picnic and not the product. I think

Mark:

product. Absolutely. Absolutely.

Paul:

it, Kelly. Can I make a request? I, can I. Can I ask that for Jay prince Gillian Anderson soulless

Mark:

Hello. I need to, I've got exactly the same advice. It's Anderson. After I read a stressful day of of Royal appointments solving extraterrestrial like to go with my a prince moldy. To a lovely, I like to other like having a cigarette this entire time.

Nick:

Monday.

Mark:

at prince Anderson and. And as I'm lay on my gin somewhere else, I bolted services. I crack open the picnic, which I would carry them under my arm, cuz it's a smart size of a 12 inch, five year old child. And I crack it over my knee or I feeling very romantic over the knee of David do coffee and a collection of brown and rolls and fish food. it's it's cheese, volovants , sausage rolls and it's those little sausages with a bit of cheese and pineapple on a toothpick. And I feed on my princess the next four hours. I wanted it. They're not from Scotland and they're not made to buy a man who did partys max Taylor, 40 instead of 49 50 class. Wow.

Paul:

Amazing. you, And prince.

Mark:

They didn't come from And,

Nick:

and that's the same.

Mark:

but I've seen a sign

Paul:

I visited the factory in solvency last week.

Mark:

with with what's his face. This is a callback. Now the one who visits the bean factories and the sausage factories.

Paul:

Greg Weiss,

Nick:

Ah, great goodies, fucking beans. Final. How could eat an entire bucket for it in Boone's? Why psyche's catchphrase and then child bucket.

Mark:

And that's just what he said. We've got Greg Wallices's seal of approval. When he came to our opening ceremony of the scotch party, he said he could eat a bucket of them, which meant that he could fit one in a bucket.

Paul:

ah,

Mark:

We, we didn't have a theme song for tum

Paul:

Oh, God.

Mark:

Thank you.

Paul:

Just

Mark:

My cat's breath smells of cat food.

mediaboard_video:

That's it for this episode of faster horses. If you liked the show, please subscribe and leave a review. It really does help. join us on petro.com/faster horses from 1.2 a month. For more chats UX. Tombola the new products from bolt heads on Mark's dealer. Thanks to James Medd. I'm mark. So cliff Nick. Followers on Twitter at faster horses, UX, and we'll catch you in two weeks for more faster classes.

Paul:

I'm going to reedit that I don't, I'm going to put in a unit I'm just going to put in Prince Gillian Anderson

People on this episode

Head Shot

Paul Wilshaw

Host