 It's also my birthday. No, it's not. It's not. I'm kidding. Sing me a birthday song. No, don't. So, today our presentation is titled Scaling and Polishing is for Designers Not Just Dentists. I really have no excuse for this title. I just like puns. So, hi, I'm Jill. Hi, I'm Simit. We're product designers at Zendesk. I'm focused mainly on the Zendesk Message Product, which is part of the Zendesk platform, and I'll tell you more about that later. Before I was a product designer here, I was actually an illustrator and brand designer here as well for a couple of years. And before that, I did brand and web projects mostly with other clients. So, I worked mainly on the Zendesk Chat product, which Jill will explain more a bit later. So, before that, I graduated from Industrial Design before joining Zendesk. So, I created this device that can pull light and I traveled to Dubai to showcase it. Okay, so because our talk is mostly about what we design at Zendesk and how we design at Zendesk, we thought we better answer the question first, like what the heck is Zendesk, which I think a lot of you won't know. So, Zendesk is customer service software, basically any way in which a business wants to talk to its customers. So, whether that's like by email or phone or like the FAQ page on your website, Zendesk wants to be the platform that enables that communication. So, I mentioned before, I focus on Zendesk Message. So, that deals with social messaging channel. So, stuff like Facebook Messenger, Twitter Line and Simon deals with Zendesk Chat. And so, that is live chat software which is on websites and apps. So, these are all the products that are on our Zendesk platform. Okay, so design that skills. What does that mean to us? We've kind of identified these three areas in which growth has really caused some interesting growing pains and challenges which we found scalable design to be a really important part of how to solve. So, today we're going to share a bit about how and why we've tried to implement this at Zendesk. Okay, let's go. Growing platform. What does that mean? This dude was our original Zendesk brand. They called him the budi which is a combination of Buddha and Buddy. Isn't that good? So, the budi is just a calm guy. He's just a zen soul in the very chaotic and unglamorous world of customer service. That was the vision. And our founders who founded Zendesk in Copenhagen they were just focused on email support in 2007 and they wanted a software that was nice to look at, easy to use, very different from typical boring, painful enterprise software that was out there at the time. And it worked really well for them. Zendesk grew really fast and ended up acquiring three companies. A lot of you may know Zopim which was a Singapore startup that was acquired. It deals with live chat software. So, basically, you know, Simon works on Zendesk chat. That's Zopim, but it was rebranded. Zendesk also acquired Byme which deals on analytics and acquired Outbound which deals with proactive messaging. So, there are all these acquisitions, right? All over the world. Byme is in France. Zopim is in Singapore. And they're simultaneously developing other products as well over the years. So, we developed Help Center in Copenhagen. Talk in Ireland. Connect in Australia. And as you can imagine, when you've got like a whole bunch of different teams designing different products all over the world, you're going to end up with some really disjointed experiences, different brands, different experiences, different expectations within the product. And we had this vision, right? Of like a seamless Zendesk ecosystem where an agent could come in and just go from software to software and have a really nice time working with our software. And some of this really didn't play well with that vision. And so as idealistic designers, as we all tend to be, we feel sometimes like this. Oh no, I hope my boss doesn't see that. Okay, so going back to our brand. Going back to our brand. So what we did to solve this problem was first we looked at our brand, right? And we looked at this and we were like, I mean firstly, it's a Buddha. Secondly, like it just doesn't scale. We need like a brand that really can scale with our platform, right? We need a new brand with room to grow. So we started thinking about what makes a brand family? What is it to have diversity within lots of different products and yet unity within the Zendesk platform? We looked at super simple solutions and like crazy colour palettes, textures, photography, patterns and all the while we asked ourselves what are the values of Zendesk and how can we represent them visually? So this was the brand that we launched at the end of last year. Basically, every product brand encompasses two simple shapes. We call them the relationship. And so essentially, it represents the communication that happens just between two people. You know, you want to have any relationship? You just need to make one connection between two people. And that's really what we want at the heart of our software. It's just two people making a connection. And so the two shapes as you saw before, they're like fighting or they're playing or they're jumping and that's what we want our platform to enable people to do to have that interaction. So we developed this system that has really simple rules and guidelines that make it super easy. So if we develop a new product or we acquire a new company, we know that if we want to, we could integrate it into this system really easily. And at the same time, while maintaining that unity, we know that each product can have a really diverse and built out universe. So they all live very independently and yet very harmoniously together. So it can still be a really lively, quirky and vibrant brand even though it's just like simple shapes. It still holds true to that original Zenda's vision of being this creative and charming brand that's not painful and boring, hopefully. And yeah, so that's how we built out a scalable brand system for a growing platform. But of course, that was not the whole solution. So besides the rebrand that Jill mentioned, the product team is also looking to create a unified experience across Zenda's platform. So as you can see, this is what we looked like before. So the level of inconsistency and fragmentation between the products is pretty obvious. We had many different treatments of type, color and layout that just doesn't seem to work together. We soon grew to realise that we needed some form of an alignment and that's why we created our design system called Garden. So Garden is still a pretty small team based in San Francisco with about 1.5 designers and two developers. Yes. So one of the major projects that the Garden team is working on is to provide alignments to our icons. So why icons? You may ask. It seems very basic but what happens when we have many designers across different countries turning and creating assets for different products? We end up with many, many, many icons some of which look the same but are used for different purposes and others that look different but are used for the same purpose. So what do I mean? So take this I icon as an example. So we currently use this icon in three of our products right now. So in chat mobile it indicates when a visitor is looking at a link in the chat dashboard it means that the visitor is active on your website in support it shows that another agent is looking at the ticket and in guide it is to customise the design. So all of this kind of show how we use the same icons for different use cases which might be confusing for our users who are actually moving across different platforms because that means that they have to relearn what this I icon means. Another example will be the thumbs up and thumbs down icon where they all kind of reflect a similar rating system but right now we have about four different styles. So over here you can see that we have a combination of line icons and fill icons some of which are joined and others together. So this also means that there are four different designers designing the same icon which seems to be very ineffective. So what now as you can see this is just an example where the design system is needed. So when the garden team first started on this project we had to all dump our icons into one document and it's now 77 pages long pretty insane. So we are still working through this project but along the way we have found brand AI to be a pretty useful tool as like a common resource file or what we call the source of truth. So all the approved icons are kind of consolidated into this plug-in where we could just drag and drop it into our design files. So the second area that I talked about a growing audience what does that mean? So as I mentioned before Zenda's grew really fast through like acquisitions product new products being developed and as it grew that meant that our audience became more and more diverse. So right now we have around like 35% non-English speaking accounts which is pretty high it's like more than 1 in 3 and we're in around 150 countries and territories and we support over 40 languages. So that's a super diverse audience. And on top of that we have customers like these who are international brands in and of themselves and they need to support a really international audience as well. So how can we help them do that? So a big part of that solution is the I18N team. So for those of you who don't know I18N is the short form for internationalization and our internationalization team basically helps us to localize all our products into different languages. They themselves are distributed all around the world so we're lucky enough to have like one I18N guy who sits right near the designers and we disturb him all the time. So as designers we really need to take the effort to poke them and be like hey can you please look at my design cause we need their perspective. So let me give you an example. So you might for example design something like this and you're like okay that's fine I guess like let's ship that that looks alright. But an I18N person might look at this and be like wait hold on what will happen when I translate all these strings and they become much longer what would happen what will happen then you might get something horrible like this. Okay wait firstly I'm super super super sorry if you speak Tagalog because it's like I Google translator all the text so I'm sure this is gibberish so I'm very very sorry if you speak Tagalog I'm sure it's nonsense but okay it was just to make a point okay and my point is you can see certain parts like how your text starts to like truncate or like one line becomes two lines or like things get super long then it knocks everything else down like that is like disaster if you ship something and then someone in another language saw this you'd be like oh my god quit my job so yeah so how do we kind of try to handle that so this is actually a tool that one of our colleagues made so basically you can type in the English text and it gives you again it's Google Translate but it's an estimation of how long it might be so you can see something like this where it's like save and continue as in English and then it's translated and you can see that the string length can change anywhere from between five characters to like 24 characters so if you think about that when you design how much variation do you need to account for on your design right it definitely will change the way that you design something yeah again it's not accurate lah don't look at the okay anyway as we did this presentation I asked the like funny things that I could share with you also I'm going to share with you some silly stuff so in the Zendesh message product we have this tab called the active tab it's where all your ongoing conversations live okay so it's like ongoing conversations and when it got machine translated so before an IT nine person had seen it it got translated to like Huatong which for those of you who don't speak Chinese means like physically active but you're running it's like so dumb like it's totally nonsensical and if you put yourself in the shoes of like a Chinese speaking agent you only speak Chinese you open up the software you just be like what the heck is a Huatong like tab like it's just ridiculous okay and like another one so we've got two lists one is all so it's for all the agents and one is mine meaning it's assigned to you so as you can imagine this got translated to this like a minor okay I don't know how to say that Chinese word but it's like means minor okay so I just thought that was just really dumb because again imagine you are and you know a business owner all you want to do is talk to your customers talk to your customers on Facebook Messenger for example and then you open this up and you see that there's something that's like asking you a mind something like it's just so stupid so our point is bad translations are just bad you X like you have to care about it and it's such a good example for me of like you you might try so hard and you design something you put so much thought into it you go and research it then your developer codes it out and it's beautiful but then one shitty translation results in a totally broken user experience right I mean you can see how that would be awful so for us it's really important for people to if you're trying to cater for a diverse audience to invest in an IT9 team that not only is good but cares about your product and knows your product well they understand when mine means mine and not mine okay but it doesn't it's not just limited to like language so for example this was an illustration that we did for some collateral in American and European markets and we you know it's very quintessentially San Francisco and you know Chinese takeout but they wanted to use the same collateral for Asian markets it's specifically the Chinese market so at that time I happen to be the only Asian designer on the brand team and immediately I was like no no no you cannot use that because it's really inauspicious a lot of us who live in Singapore would know that's really inauspicious to have like the chopsticks sticking out of your food like that and so immediately they were like oh okay so they took it they didn't really understand but they were like okay let's remove and I just thought it was a good example that I could think of where a diverse team really helps when you are looking at a diverse audience like if you're trying to support a diverse group of people your team it's great if your team is diverse because it really helps to mitigate a lot of that stuff that you may not know like cultural sensitivity who knows okay the last thing I want to talk about in this in this section is all the shades of gray so we know that designers love shades of gray and we know that we love using many many many different shades of gray on top of other shades of gray there are some engineers in the corner who I feel are smirking at me because we are big culprits of this like we will definitely sometimes have bad contrast issues and but we're trying to ask ourselves more and more what does this mean when you're looking at a design on a low quality 12 inch display non retina monitors right how does it work for the colour blind or people with visual impairments are you excluding people just through your design so one way that we've tried to help this is oh okay yes that's really bad okay this is plug in and sketch that we use that's called the colour contrast analyzer and basically the contrast in these two things is so bad you can't even see on the projector but it's like white text on light blue background okay and basically what you do is you select two options and it does the colour contrast for you and it gives you the ratio so we know according to the web content accessibility guidelines the ratio that passes is like 2.7 so this like 1.1 to 1 is like a mega fail obviously um yeah so we put together some resources and we're gonna we're gonna give out the the presentation after the event so hopefully you'll get this in your inbox so you can click around and see but I put a link to like the plug-in that I mentioned as well as the web content accessibility guidelines that we mentioned and some other links that we found really helpful for how to design in a more inclusive way because we really feel that's your responsibility if you have a diverse audience you need to include them so the final way in which Landess has really grown is through our internal design team so we have about 30 plus product designers and distributed across six different countries from Singapore to Copenhagen to San Francisco so we collaborate regularly across the world even though we all work on different products so just one example of the challenge that we face with such a distributor team so this was an actual screenshot of a timetable that we tried to take um to schedule a call across Singapore, Copenhagen, San Francisco and Melbourne as you can see it is almost impossible so one of the main things that we have learned or are still painfully learning is all about communication so with a decentralized team structure we have really learned to embrace asynchronous communication and that means taking an extra time and effort to reach out and stay engaged with other designers in other countries so it's definitely a lot easier to go up to someone and be like hey Jill can I can I borrow your eyes and something sure as compared as compared to writing your thoughts now because that involves crafting the message we have to first set the context over explain and finally wait for a reply which in this came in this case came weeks later so but we have kind of really embrace this process whether it's like sending someone a personal slack message or actually calmenting actively on envision so investing in documentation is also really important so again taking the time to explain why we chose A versus B can few tiresome sometimes but it does go a long way it doesn't just help you it also helps other designers and stakeholders involved to understand why something was designed in a certain way and also to provide a useful point of reference for others who are working on similar projects so the design team in in Zendes uses Basecamp for project updates and progress so the general structure that we have found to be really helpful was to first set the context second highlight your problem third present your solution and explorations and finally any future considerations so we also invest a lot in travel where we proactively go to other offices and talk face to face because in spite all of this nothing really beats face to face communication so I set out my Zendes journey at the creative offsite in San Francisco last year so there were many many presentations made made and was kind of good to see everyone gathering together besides work related staff it is also important for us to get to know our colleagues on a on a personal level and off sites are a great way for a distributed team to do this so this year we went to London and Paris so apart from offsite we also go down to other offices for projects specific needs so this was when I went down to Melbourne for unification project and sharing another designer here just came back from Melbourne last week so but we can so we try to get a lot of FaceTime through video calls as you would imagine so we do a lot of regular syncups and you can see in the photo on the right we're actually literally standing up because we were doing a stand up and we wanted to feel like we were on the same room not really didn't really work but yeah so another way that we have actually found really helpful like Simon was mentioning it's about building relationship and sometimes you can't just keep talking about work so one of the biggest reasons we actually started our instagram page which is super random is really because we felt that if every time I talk to my colleague it's always about work right it's always about a project or a pattern you're never going to really be able to build that relationship that you want to build so we were trying to just kind of give a glimpse into our lives in the office but outside of work to especially to our international colleagues so even if it's something as silly as like drawing on balloons yeah we thought why not let's share that part of of of our team and I'm I'm just saying you can follow us I'm just saying I mean no pressure you can have snacks if you follow us okay so recap so there are three areas where scalable design has really helped a growing platform a growing audience and a growing creative team and throughout the talk we've mentioned a whole bunch of tools that have been helpful to us and hopefully will be helpful to you guys so again I've collated it and this will be in your inboxes hopefully so simin mention brand.ai it's where our design component library lives it's where our design system lives basically a lot of you who use sketch would know that in their latest update they just really sketch libraries which is pretty great so definitely if you've never tried to design a design system go and try it it's we found it really helpful and yeah it's fun to do I think so we also use basecam as simin mention for documentation so we like to yeah just put our thoughts in a place where other people can find it and read it envision is used a lot for prototypes and flows because it's really easy to like click and leave a comment on your own time slack is where we slack Dropbox is where we put our files and we've also we've also found Dropbox paper really helpful for collaborative writing so it's a relatively new product if you've never tried it highly recommend it's really nice to use Trello is useful when you're kind of doing a project that has a lot of parts so if I'm doing a project where I want to put like a Kanban style like oh I'm going to do this and I'm doing this now and I finished this it's very helpful for a colleague especially one who's not in my office to have that Trello Board link and be able to follow me as I'm doing it like on their own time and finally Google slides which we use a lot just because it's so visual and we can take like snapshots of what we're doing and share them with each other in a really easy way so we've talked a lot about scalable design processes tools and even like organisational design and all of us have all of this has enable us to think about design in different ways and hopefully you too so um design can scale however besides all these things that we have talked about we have found that it is all for nothing if we do not have the most important thing we need a great product team so for design to truly scale we absolutely need to collaborate and get the inputs from our product and engineering counterparts so for example in the icons project that I mentioned before it might seem like a really design-centric project but even if all the designers in our mocks it really means nothing if we are an if we are unable to work with our product teams to ensure that consistency actually lives in our product so with that final caveat we're done with our talk and we're happy to answer any questions of your feelings or you want to share about your day or if you want to sing Desmond a birthday song yeah any questions oh yeah so you may have noticed some random people giving out swag design team so if you ask a question you get swag that's simple simple feelings yeah yeah good question so the question is how do we work with our product and engineering teams so our engineers are very difficult now I'm kidding I'm kidding I'm kidding so yeah so we work in scrum teams so we're attached to to usually now it's like maybe one or two scrum teams each and each like um we for engineers with one product manager yeah so we so some teams do things differently some of them have daily stand up some of them have virtual standups um but yeah essentially they work in a sprint style oh some of them also kind of depends on the scrub team but most of them work in a sprint kind of like two week sprint and then we participate in those plannings we try to be as embedded in our in our scrum teams as much as much as we can because it's trying to execute like or you know work on a design that you've done definitely it's super helpful and they can just feel like they can come up to you and be like a can we talk about this yeah so we try to be as close to them as we can yeah and also in terms of sprints usually when we are creating like a feature or something the design usually come before that so that we will kind of do our design our marks then we will share them with the engineers and the product managers and then you'll give us their feedback and then we iterate over and over again until we find a perfect or not perfect find the solution at that is good at that point of time and then that's when the engineering team starts building it yeah we're also really lucky that we work with product managers who really um uh respect and and value the design input so a lot of the time even if we're like talking about a feature I think we're really lucky that we are product managers who um lucky so for those who who may not have had that how do we deal with uh changing design inconsistencies to be consistent especially when there may be like people who are already using our product yeah it's true it can be quite painful um so we do have to be very like mindful of that so definitely especially for our products that are more developed like Zendes support and Zendes chat which have hundreds of thousands of of of existing users we do have to be listening to their feedback really closely a lot of the time we dog food a lot of I mean we use all our own products so for example if we're gonna push out a change in Zendes chat we will a lot of the time test it on our own advocates so we'll we'll push out the change on their dashboards only and we'll quickly get their feedback so that's one way that we have found to be really helpful so because they use it everyday just like our customers so they hate something they're gonna let us know yeah I think we also try to incrementally change this is the product now and then boom then like there's a whole new product so we slowly change like maybe we we change the font then we change a sudden button and then like slowly slowly yeah we are still we are still working on it so we haven't really completely solved our inconsistency problem yet anyone else oh yep so sadly neither of us were here during the acquisition that happened three years ago I joined right after it as well and she joined about a year ago there are the designers here who were around during the acquisition but all of them are not meeting my eye lines so it was I can say it was it was definitely interesting I think that the culture here was really really strong because it was a start up right I mean the the super tighten it and very very strong in that own identity and then I think when the acquisition happened there were a lot of shifts that had to be made we had to get a lot more use to being again super open about all our design thinking documenting why we decide to do something just making sure that if someone is not literally sitting next to me they know what I'm doing all that really painful and sometimes can be tedious stuff but I think the team really had to make that extra effort to put in all those processes yeah that was a major part but I think also we yeah again you know the the global creative team we love to like get together in one country so that also helps yep which teams oh across like the design teams and if we're like working on one project okay so he's asking how do we communicate across the different teams especially globally so that happens that's a great question that happens very often where I'm working on a design pattern someone else is working on a different design pattern and sometimes it's really hard to like communicate and get that resolution so the garden team which Sima mention is actually a big part of that they tend to arbitrate a lot of this so if I'm working on sale like and someone else is working on a different drop down menu and it's more than just UI right it's UX it's like how it works and all the different states and all the different components they can be the ones who really will step in and be like okay give me all your feelings and thoughts and then they'll go and write it down and then they'll go and experiment so having that team dedicated to like components has actually been a huge help do you have anything to add okay is there anyone from like so she's asking was the garden team initially a full-time a full-time job it was I think sort of like maybe 60% of one of the designers in SF's time and then very quickly they started ramping up but yeah it definitely didn't start off it's like okay you know you only do this yeah that's why we have like the 1.5 so still have the 1.5 one of the designers is working half on like another product and half on garden we are we are realizing that the the design system is also quite important so we are trying to build up that team as well yeah maybe we'll take one more question cause it's hot I feel warm do you all feel warm is it just me sorry I think so the design system we use brand.ai so the design library is maintained by the garden team and they are like upload assets and then we're able to drag and drop so they tell us when they've released a new version they're like yay we released version 3 and then we all go and update and then we can just drag and drop and usually they are they are really they're becoming more and more detail in their documentation so if they've released some new component we have all read about it for weeks and we know it's coming yeah sorry come on yeah that's a good question so if we want a new icon do we just create it and send it to them sometimes we do especially if it's very specific right if it's very specific to something that I know only my product is really going to use I'll probably just create it and then like let them know and then let them edit in but if it's a very general one yeah so sometimes we will have designers because we have a select channel sometimes we have designers who will like comment and say that hey guys I need and and thumbs up icon anyone else have it then then people who have those icons will actually reply to that and we try to kind of use the same or align and then if there are more and more people who needs the icon then the garden team will come in and be like okay across many many designer so we will try and build it yeah still very ad hoc we don't have that much process around it yeah okay I feel very warm let's stop okay so feel free to come and talk to us later yeah happy birthday Desmond okay right