Designing A Comprehensive Color System - Linda Dong, Lyft

so hi I'm Linda I am a design manager at lyft we are known for being very pink I've been a design manager at live for around a year now and in that time the team has been working on a lot of really exciting things so we just announced our redesign of the lyft passenger and driver app this week and this is something that we're really really proud of because it's been a need for a refresh for a while now and during my tenure at link link lyft I've really watched the team grow from less than 20 people to 80 people and within product design the team that I manage is called core design so we're seven people and that's our dog pronto she rides motorcycles and she wears bandanas all the time and so our team is really I love it it's so unique I think every one specializes in such a different area the things that our company does or sorry our group does is illustration 3d sound prototyping motion and of course we work on design systems and our biggest product is the lyft product language or LPL for short this is our design system and fun fact this is lyft first design system and the reason why it exists and the reason why our team exists is definitely a response to just the sheer growth of the company as a whole as well as us trying to kind of set up a higher bar of quality and consistency in our design process so today you've already heard some like super amazing talks about scaling your design system and prototype prototyping and kind of like how to get it off the ground what I would love to do is take us more on a deep dive into a topic that we're probably all super familiar with as designers and really as human beings but maybe not experts in which is color I love color as you can see and so I want to talk about color but I also want to talk about how to create a comprehensive color system inside of your design system color is super fun it's really nice to look at but it's very complex and that's because color intersects so many different fields it intersects culture emotion psychology math science and current new technology so for example what do you think of when you look at this color so oh okay no yeah go for it he's got that oh yeah I agree with you for me it feels like oh this looks like danger or blood or violence or I'm just a very morbid person but a part of me I mean I'm Chinese and if you grew up in China for example you could look at a color like this and you might think oh no this is happiness or good luck or money so we all kind of bring our sort of past associations and history to the colors that we look at in addition colors are super important to all of the brands that we work on so even without any logos or labels I think you can look at these colors and know exactly which companies I'm referring to so on the Left Facebook Twitter snapchat lifts although I we are in LinkedIn so I don't know that yeah good job yeah exactly and there's a large you know it's like a logical connection to these colors as well so if you look you know do the colors on the left do they feel more reliable and more mature do the colors on the right they feel more energetic or fun and why is that and then on the flip side color is super technical so I'm not gonna get into color science on this talk but just to say that there are really infinite ways to model measure and mix colors together and where that really comes to a head for us as designers is that we have to take into account what our colors look like on the hardware that we're designing for and our industry does not make this easy for us so every screen and device that we design for emits light in a different way so your designs on an iPhone 10 look completely different than on an iPhone 5 has anyone ever tried their designs out on a pixel - yeah those if you have not you should do it because those colors are whack and that kind of leads to this nonsense where we as designers are expected to navigate all of these hundreds of different color space profiles and sort of know how to apply that to our designs so really color systems they are incredibly hard to build because they have to have emotion because they have to reflect your brand because they also have to be usable for UI and the hardware and because you want to make it your color is accessible to a universal audience so how do you do this how do you take the approach of creating and color system in the first place well for our team we really had to turn this into a product design problem and so usually when you think of color you think of it as a visual exercise but for us we really needed to have an understanding of who our user base was what our angles were and how we were going to measure success so as a manager I make a lot of product specs this is what a product spec would look like for something like a color system so for us our users are our internal design teams who work with us day-to-day and our ultimate ly the users of our color system the requirements are the things that I mentioned before has to be lifti colors have to meet legibility standards they have to have understandable usage consistent vocabulary and they have to be scalable for the future and you have to validate and measure your success in the same exact way that you would do when building any type of product feature and for us that means using research using prototyping and measuring the adoption of your system so I'm going to take you through how our team went about approaching our color system in the four chronological ways that we tackled it naming picking accessibility and scaling okay so color naming we're gonna play a little game here so just shout it out when you think you know the answer what color is this purple indigo was it herbal anyone no it's actually mulberry or at least that's what we call it at lift I have never encountered a mulberry in real life okay next one what color is this a carnation pink all of you are wrong its dusty rose too okay let's try the inverse what color do you think this represents someone say green is this what you expected no yeah doves are white you're right this person was definitely thinking of a pigeon okay multiple choice time what you eye does time to leave color get applied to silence yeah I don't know either I couldn't figure it out and then this is the final question this is very hard which one of these is lift pink seven okay I am you're probably the closest so I'm very mean none of these are lifting but they all existed in our code base and they were being used across our UI so that was a little bit of the hot mess that we were in before our color system and this is what it looked like in practice so in product design we were using different naming schemes for even our own colors we had UI pink we had grey 7 we had error red and they all lived side by side together at the same time iOS was using a completely different naming structure with completely different colors and for whatever reason they were using like irrational numbers to describe their colors I don't know and so iOS is different than design Android was different than iOS and web was different than Android so we saw this and we were like okay before we can tackle anything we have to figure out how to even be able to communicate with each other so we needed a single color vocabulary if we were gonna have any long-term consistency and I think this is something that might touched on as well so what did we do we started with the semantics and I think it's par for the course that any good design system solution starts with the semantics I'm thinking about color as a product design problem we really were trying to figure out who our users were and one of our biggest user base is our engineers and our engineers work in almost text-only environments so we knew we needed color names that could communicate what they are without someone having to see them so at that time our brain creative team was also in the middle of a redesign and they had met made a set of secondary colors that they were using for print and illustration so these are aware than names I don't know why I did include the names where the names like dusty rose and desert and aquamarine and sky came from and our first our team was like great you know they already did the work for us we'll just use their names but I think we quickly realized that what their problem is and what I product our problem is were completely different sets of problems sets of users for them they were trying to be evocative you know like when you go down the makeup aisle and all the lipstick is like sexy pink and like people are trying to really kind of entice you with the color names but for us we needed to make sure that the language that we were using was as straightforward and clear as possible so we decided to diverge very purposefully on this this was a moment of inconsistency that we were okay with so what we ended up doing was we took brands original hues and we added a few more to make 16 so that was just so that we could be inclusive of all the colors you know around the spectrum that aren't just ROYGBIV and we set up a couple of requirements we said okay we're not gonna use any abstract names and we're not going to use long names because when things are long people start to abbreviate them so we looked at a lot of historical naming of colors tried to come up with Universal topics that people were familiar with this is really hard because everyone comes from a different cultural background we had a very difficult time with the word tangelo which is between red and orange tangelo is a mix between a tangerine and a grapefruit today you learned and that calls like the red-orange debate of 2018 where everyone hated the word tangelo they thought it was like jello I thought it looked like the pokemons like no one knew how to spell it no one knew what it was and so one of our iOS engineers who works on the partner team to us client libraries he came up with a name sunset and we were like ah okay that makes so much sense everyone's experienced a sunset and even though I mean technically sunsets can be different colors at least like the emoji of it is red and orange so that's sort of the process that we took with every single one of our color names it's not perfect but it definitely solved our user problems of being short syllables and direct and universal so we had our hues and then the way that we decided to describe the shades of every color was to use modifiers so zero being the lightest version of that color 100 being the darkest and so with that Hugh's plan modifiers we went from a situation like this to a naming convention like this and I think if you just take a moment to just picture what those colors might look like the expectations actually match up pretty well to the reality cool okay so we had our vocabulary figure it out and next we needed to tackle actual color palette generation so this is the usual process and this is one I'm super guilty of where I kind of just take a color picker and click around till the colors look pretty and then call it a day so there are two big problems with this the first one is that I made that using my eyeballs and my eyeballs see things differently than your eyeballs do the second one is that this process is not scalable how would I even go about telling another designer hey add three more colors to this design system how would they even go about it the process all came from inside of my head and I didn't really even understand why my decisions came from and so when there's no process behind the decisions that you're making and no way to communicate that to another designers you don't have a design system so these are the things that we really wanted to make sure that our color system took over that we wanted it to have some logic to be able to communicate to other designers on our team we wanted a global lift palette something that was really large that we could pick a small subset of and that was because our product needs are always growing lifts as a company is always growing and we wanted a color system that could grow with it so there are a couple of ways that you can start off by systematically programmatically creating color palettes so you can take a color like that blue in the middle and you can step it to black and then step it to white or you could take a color and take another hue and put equal amounts of those colors over a spectrum and so this is a way that we thought like oh this is nice this is a really great start to how we can programmatically generate our colors but unfortunately this linear process was just not working for us and that's because of science so there's this thing called the Weber Fechner law apparently which kind of states that if you go through a color from light to dark and equal steps your eyeballs don't actually perceive that difference as equal so it's almost like a law of diminishing returns as you get to the darkest color and you can see the difference between the first two bands that look really different and the last two which look almost exactly the same and this effect is also different on different hues so the same thing happens with blue and yellow but they look completely different and that's because as I was saying color is very complex it's not linear and it's not 2d it's this 3d shape and it's very weird-looking our color needs as designers are also not linear and what I mean by this is that if you take a look at the context in which we use color in our UI we actually as designers weigh very heavily towards the lighter shades of every color and that's because we have to show things like place holders disabled inactive states touchdowns and those all have to be differentiated enough between each other in between a normal state so Kevin who he didn't want me taking his picture and I don't have momochi yet so this is as good as it's gonna get so he was on our team and he kind of was the one who realized all of these issues of programmatically generating your own colors so he actually came up with a super clever intricate ways intricate way to tackle creating UI centric color palettes programmatically and that was by using math and by using Bezier curves so in framer he created an algorithm that pulls any color across a curve for hue for saturation and for luminosity there's a little bit of science here but the way that I wanted to describe is just the fact that if you use a curve any color on that curve looks like it has a relationship to every other color on that curve and this is sort of like the same reason that Apple decided to smooth out the corners on all of their icons because it makes the entire unit look more like one set and so with these curves what we were able to do is just really tweak out you know the muddy colors that you tend to get in the middle and grab those kind of if you look at that luminosity chart grab those colors that were on the lighter ends of the spectrum before you hit dark so that it could be more usable for UI and so this is sort of like the before and after so on the left is what you get with a linear progression and then on the right is what you get using our algorithm and we just thought this was amazing because it came out with colors that we could actually use in interfaces no one needs like a hundred shades of things that look almost black at the same time we still really wanted to retain that brand energy that brand feel so we took brands primary and secondary palettes and ran them through our algorithm and the output of that was what we called spectrum so as you can see it's got all of the colors that were in the original brand palette but it's also got darker more usable colors that are still related to those original brand colors and we've got you know our big super poppy pink and so now you're probably looking at this thing like Oh lifts color palette is just the rainbow [Laughter] but this is just our global palette so what we really wanted to do is what we did here is take a portion of that and say okay for this year this is sort of like lifts color palette and this is what we're using in our UI and so I want to touch on a point of accessibility and if there's one thing to take away from this talk it's that accessibility and accessible colors don't mean ugly colors I know accessibility accessibility is something that is really hard and teams struggle with it all the time our team struggled with it and I do think that there is a sentiment out there that if I make designs accessible you know my designs might look pretty bad and I just simply think that's not true because accessibility just means legibility and in my personal opinion something that is hard or hurts my eyes to see or something that I can't even see in general is just inherently less beautiful than things that aren't so we take accessibility very importantly at lift and it's also because we have a very specific use half of our customers are actually drivers in our drivers mount their phones really far away from themselves they're driving in rain they're driving in sunshine they're driving at night so there's a lot of context that you know that our UI has to live in for them and so we want to make sure that there is legible and as high contrast as possible because this is honestly like our drivers livelihoods so in terms of color what that meant for us was that we had a goal all of our colors will be level AAA color contrast acceptable which means a color contrast of 4.5 to 1 and the great thing about math is the fact that you can bake in this stuff programmatically so if you look on the right of the slide you can see those white and black numbers that was us calculating what the color contrast ratios of those colors were on black and on white and we made sure that we set a parameter that one of those numbers can never hit sorry both of those numbers can never hit underneath 4.5 so this is where we came up with our accessible pink color which is pink 60 and I've been using it throughout this presentation and I don't think it is any less beautiful than our lift pink and so to make this consistent across the board we kind of came up with as universal rule everything 60 and below is accessible on white everything 650 and above is accessible on black in addition to that we also tested out all of our colors in context on the devices that we would actually see them on because it's one thing to see it on your screen and it's another thing to see it out in the real world and you can just see right here the difference between these three devices kind of nuts and this was fantastic because we really tweet the parameters of our curves through testing it out in the real world and then the last thing that we did for color contrast was we decided collectively we are gonna support p3 wide color gamut which is a fancy way of saying that the newer devices like iPhones MacBooks and a lot of computer displays are all wide color gamut displays so they have they show a larger range of colors and they make your colors more vivid so across the board I highly recommend this this is what we did it lifts and this is supported in sketch okay and so the reason why we invested so much in the methodology in the math of building out our color system is because we really wanted to make sure that it could grow with our team and our product using an algorithm meant that we have a repeatable process for generating colors that we can teach across designers this is lifts color pink for brand over the years so you can see that even in the span of three years they changed it three times and we need to make sure that our color system would be able to be flexible enough to support the next rebrand so this is our product spectrum for 2018 if we need to add or do you know erase a color from our UI we can simply choose from that same global set if none of those colors are working for us we can revisit the curve that we have and add in more data points and we've already done this for a lot of our UI as well and then if all of a sudden lift is like hey we're knowing or a pink company where a green company hopefully our color system is set up enough so that we have the ability to adapt to those big changes and then my last point is really just about adoption adoption adoption so for me this has always been the case if you built it they will not come and so just like if someone came over to you and like I have a better version of English use it that's never going to happen you really have to be incredibly active in getting your design system in front of other people so when we were finished up with color the team did just as much if not more work to evangelize it and to get in front of other teams so that everyone could be fluent in this language Lindsay our design system LEED made a ton of documentation about color best practices when to use in how much we did a lot of brown bags a lot of all hands and the great thing is that we utilize our engineering partners Kathy and Sam to do engineering iOS and Android presentations on color Shannon our UX prototyper and Kevin also made this amazing sketch plugin which puts in our color system right into sketches color picker so that it makes it incredibly easy for a designer to adopt those colors and their designs and also for engineers to be able to see exactly what colors were using so the last thing that we did to make sure that it was a seamless adoption was that Sam on our iOS team wrote a script that pushed all of that nonsensical color naming conventions etc into the closest color in our new system so within one fell swoop you know our entire system was actually adopted in the code base so that was our approach our approach does not have to be your approach so I am not suggesting that we all go out there and programmatically have to generate all of our colors what I am saying though is that there is always a way to take a systematic approach to every aspect of your design language no matter how subjective or how visual it might feel so the next thing that our team is doing is that we're working on our illustration system on our sound system and we're going to take the same kind of Universal approaches that we did with color and apply it into those aspects of our design system and this is really all just a culmination of saying treat your design system like a product design problem it will make your decisions so much easier and then advertise the crap out of it thank you [Applause]

Channel: RETHINK

Views: 7,213

Keywords: color-system, design-systems, linda-dong, linda-dong-lyft, lyft-design

Id: bmeo_13QtrU

Length: 28min 56sec (1736 seconds)

Published: Tue Feb 26 2019