Design Systems with Soul | Product Designer at Google | Reed Enger

[Music] okay so my name is Reid I am here finally a circuitous route through the design industry I think like many of us I started in print design years ago and worked my way through small agencies I did some freelance I taught classes and I worked at huge in Brooklyn for a couple of very excellent years I love Brooklyn and now I work at Google about two years ago I moved to Seattle to be the caretaker of the design spec for the Google cloud if you have not used the cloud it looks like this it's a little grim but what it lacks in beauty it makes up for in all most horrifying power it's an extremely extremely powerful platform it's a very large platform built and maintained by a very large team at last count I think we had something upwards of 300 people working on it just in the UX capacity and probably double that in engineers so a very advanced large complicated beast and I was responsible for maintaining the system that allowed people to work together efficiently on it about six months ago I changed teams now I work on artificial intelligence where I continue to work on design systems I'm building a system for intelligence I can't show you any of this work unfortunately I really wish I could cuz it's super fun I also built and maintained with my good friend Rick loved a platform called Trivium art history looks a little bit like this right now it's changed a lot over the years we try to share artwork from around the world we try to broaden the discourse of art history from just the Western world to be a slightly bigger bigger window on it you haven't been to the Guggenheim to see this show to it it's incredible so let's talk about Design Systems I'm sure okay show of hands how many people here have used a design system or using one right now yeah it's almost everybody right and then how many of you have contributed to a design system or worked on the system itself yes good okay so lots of folks deeply invested in this space for the sake of shared vocabulary as any good system designer should establish my clearest definition is a design system defines and organizes the elements of logic that make up an ecosystem to make it teachable and scalable and their old design systems emerge I think wherever many people have to work together over a long period of time to do something complicated this is a spread from the ten books of architecture by a Roman military architect named Vitruvius it's a beautiful and old example of a design system and it's still weirdly relevant and useful today if paul has allowed the same rules that we apply to our digital design systems mmm Christopher Alexander architecture I think really dominated the design system space up until maybe the 1970s just because it required so many people to work together it was the perfect application for it but then we saw the emergence of graphics standards manuals this is how I was introduced to design systems transit is another place where lots and lots of people need to use a shared vocabulary fast-forward to now and almost everybody has a design system because these platforms are serving ecosystems that are like the Roman cities of old they are massive and hopefully built to last so what goes into a design system how this breaks down in a number of different ways I love all Ikoma Tova's book design systems and she breaks the system down into functional and perceptual patterns functional basically being the age EML of the individual elements perceptual patterns being the colors and the styles and the typography that give it a unique brand voice Brad Frost atomic design modern classic Adams build into molecules you wind up with functionally oriented organisms of repeatable code which are then arranged into templates and delivered to the user as pages it's another really nice way to break down a system on the cloud we sort of had to expand this model this is the structure of the cloud design system we surveyed our users and asked them what they need and they responded with this lovely spread so we have all of the typical things we have the styles and the components and the patterns things that would wind up in a sketch sticker sheet or code snippets ideally but then we also have best practices and resources and guidance around the sort of murky waters of data display but if you look around or if you just compare notes between yourselves you know that there's tons and tons of things that can go into a design system experience models vocabulary voice principles you know if you're working on artificial intelligence for instance you might wind up working with voice you might not have any UI UI at all but you'll still need a system probably so if I was to apply my own system to design systems it would look something like this I think if you have these four things your design system is probably headed in the right direction principles are of course the values that drive the ecosystem that you're defining and principles get a bit of a bad rap we'll talk about that more soon guidelines are the best practices the do's and don'ts how to start applying those values to the system the patterns are the meat and potatoes of a design system the componentry the sketch sticker sheets and the practices I think at the least love and might be the most important practices are how you keep a system alive and relevant because it's I insist has to grow with the ecosystem that it serves and the practices define how that happens so I'm going to talk to you about four practices that I try to use when I'm working on design systems hopefully it will be useful first design principles should be actionable and measurable so this is a really tricky one because design principles have to serve many masters the Google design principles of which there are four this is number three serve every product in the Google ecosystem that slides that's the cloud that's Gmail at everything how do you get so many people to agree well you keep it really simple this is what I like to cut call a rallying cry principle everyone can agree on simple design it makes a really good poster but if you are trying to evaluate your work based on the principle like simple design the question becomes simple compared to what so one route to take if you are dealing with vague principles is to just interpret them so on the cloud we take each of the Google design principles and we break them out into individual guidances that are measurable so simple design might break down into users quickly learn how to complete tasks this is so good for us because cloud platforms biased towards power users and this is a reminder not to forget the newbie it's a good principle and with the right benchmarking you can absolutely test it eBay before their I want to say 2017 redesign had the principle we craft big changes in tiny spaces and small tweaks to global ideas it has such a nice cadence to it like I really I want to like it but again what global ideas are we tweaking and how after their redesign they rolled out a new set of principles and they evolved their old principle which is a little vague into original but familiar differentiate only in places where it really matters much better because now you've got a conversation about when you abide by best practice and in standards and when you deviate the other option if you're dealing with tricky principles is just to borrow heavily from others I don't know which one of these came first but Airbnb has the principal unified each part is each piece is part of a greater whole no isolated features or outliers and Etsy has create unity so I don't I'm not suggesting that either companies stole the concept of unity from the other but it's a great practice to look around see what other platforms principles are and then steal them to design for quick reference and glance ability this this feels really easy and so I almost didn't want to talk about it tonight but it's I think it's it gets a really common problem in design systems this oh god this is the data table design spec as it appeared when I joined the cloud design system team it's a nightmare but it's also something that happens very very easily because you start with something really simple a basic table every time you add functionality to it you add something to this back because the spec is documenting the creation back aspect documents the creation of something but then once that object is created you need to change this back to be about reference so in general kill paragraphs like this turn them into bullets I don't like bullet points you'll notice I don't use any in this presentation but they are super good for glanceable readable content walls of text which are essential when you are documenting a component for the first time later can be distilled down to a single image this image actually does contain all of the same information as this business and then if you have statefulness just show it as an animation don't try to lay it out this one should be obvious but just takes that extra few minutes and Photoshop and Jay King around with the timeline number three get painful feedback often a design system is just like any other user experience in that it should be user tested the cloud design system serves enough people that we put out a quarterly satisfaction survey measuring these six categories and then when we get the results back we chart them out and we break it out by user role so designers and developers have very different needs for a design system and so we want to make sure that we're not losing one of one part of our audience you'll notice that accuracy is pretty low among designers in the pink when you dig into this then you get the really good salient stuff I'm never certain if the features documented are actually available in the real components no this is an issue of trust you have to trust a design system and this is a fundamental flaw we found so our specs look like this this is the spec page for the comparison table and it works pretty well I was just proud of us for getting the description down to a tight little - senses right and turns out we were missing status because the comparison table hadn't actually been built yet and so designers were putting it into their designs and then engineers were getting pissed and then designers were getting pissed and then I was getting emails so this is such a small change but it made a dramatic difference and that I think is one of the most important things when we're not in a design system sit down with the people that are going to be using it ask them questions a survey might be overkill but you'll get good feedback and it's probably gonna be simple actionable feedback hopefully finally find the souls in your system I'm excited about this one and this is where I'm gonna get really annoyingly earnest because this is this is where my passion lies in the late 17th century there was this guy named Gottfried Leibniz you might know him as the second person to invent differential calculus after Newton I'm a historian by the way so I'm gonna I'm gonna belabor you with a little history right now please be patient with me so Leibnitz was also interested in this idea called the theory of substantial form which too badly paraphrase means that every element in the world water glass a tree has a unique purpose and intention and he called that purpose its soul so the soul of a water glass is to keep me from getting to Thursday and it turns out this idea of objects having a unique purpose is something that has kind of followed mankind through history people kind terrible patriarchal language Aristotle wrote about it he called it high low morphism so there's your big ridiculous word for the day and he meant the unity of an object and our perception of it oh that's pretty good sounds like a you exort wrote it Hildegard von Bingen who was a brilliant and scientist and composer called it viridis meaning the vitality of things that are connected to their purpose and the aesthetic writer and theorist william Hogarth called it Fitness and objects fit to its unique function so what does this mean if we say every element in a design system has a soul let's look at what that might be so for example I'm going to talk about Trivium this is my shameless plug so this is a time lapse of Trivium evolution over the last eight years I've been working on it off and on since 2011 and initially I would redesign Trivium based on my own personal tastes I would just do whatever I thought was cool looking and then later I instrumented the platform and began making redesigns based on a whole slew of engagement metrics as you do proper data-driven design but I realized I was missing out on something I was I was designing based on data I was not in signing the experience that I wanted people to have I wasn't understanding and serving the soul of the ecosystem of Trivium so I created a soul focused design system I started with the principles these are them shared diversity design for exploration deliver a tangible experience and keep it interesting at all costs so here's an example here's an example of how a good principle cuz I think if these are pretty good principles a good principle can force change on a design even sometimes against convention so this was the artwork detail page for Trivium pretty classic stuff plenty of white space you've got your relevant meta above the fold click to zoom scroll for more details it turns out that this is pretty much the convention across the field the met the MoMA Google Arts and Culture everybody kind of has this this layout what does it deliver a tangible experience because tangible is super tough online it means to touch it means that things should be touchable and we're talking about pictures of our work so what does it mean to create a tangible experience hi this is Emperor pious by the way you can see each hair in his eyebrows so basically what we did it's a very simple change we just blew the images up we just made them super big so now when you go to Trivium you just have to reckon with this artwork it's just right up in your face you've got a scroll to see the whole damn thing the details are just jumping out at you it's a very different feel even though it's not that difficult from a code perspective the experience feels different and if you keep scrolling you get back to your overview I'm not gonna take the overview away and in fact we added a silhouette so we scale it based on the height of the object so that you get a sense for what it would feel like to stand in front of this artwork and look into Emperor pices kind and tired eyes but it's not just principles that state the soul of a system according to Leibnitz everything has a soul and that includes typefaces so when doing this rework on Trivium I asked what is the soul of the typeface of Trivium what is its unique purpose and I came up with this posture contemplation and reference history there's not a lot of places online where you can contemplate so in 2017 I was using a typeface called M thread which is awesome it's super bold it looks great on screen and you can you can punch it out of an image with white I mean it's just it's a so nice but definitely feel all that contemplative does it it was fighting with the artwork it was taking up too much space so after reviewing a statement of intent I realized I had to use something more like Optima Optum was a very quiet face it leaves a lot of room plenty of letter spacing and it was designed by Hermann Zapf after being inspired by the Roman inscriptions in the Basilica de santa croce so it's got a fantastic lineage let's walk this all the way out is it overkill to give a drop-down menu a soul probably but here's what happens if you do this is a screenshot of the Trivium sticker sheet I use this when I'm building new experiences if you zoom in you see that every component has a statement of intent at the top so a summaries statement of intent might be to pique your interest body copy is intended to help you deep dive into written content and even the humble related content link gets a soul and that is to offer you an opportunity to continue your journey and this super fun thing happens when you do this you can use those statements of intent in your code so I rewrote my functions to rather than call the name of the object to call its intent and what this does is it turns your code I know it's PHP I apologize but it turns your code into a user story so this is the this is the code for my artist by a like biography page basically and it leads off with provoke curiosity that's a specific style of header then peak interest summary dive into content explore images and then finally continue the journey what I like about this aside from being just massively UX navel gaze II is that it forces me to be very intentional with the work every component does have to be unique because it has to have a unique place in this story and it has to move the story forward and the placement of those components also needs to be intentional because a user will walk through this start to finish because we make it scroll so damn much so that's that these are my four recommendations for design system practices create actionable principles edit get feedback and find the souls in your design system thank you [Applause]

Channel: awwwards.

Views: 18,065

Keywords: awwwards, awwwards conference, awwwards new york, google, digital design, google cloud, design systems, awwards, design, design talk

Id: r7wXvvxXTHI

Length: 21min 43sec (1303 seconds)

Published: Thu Mar 07 2019