Inside Marketing Design at Zendesk

Welcome to the last interview of season three of "Inside Marketing Design." I'm Charli. I'm a big marketing and brand design nerd. I've been working in this side of the industry for my entire career. I love learning from my peers about how they get their work done, and that's exactly what this show is about. 

‍

On today's episode, we're going behind the scenes with a company whose marketing side I've always admired, Zendesk. I'm speaking with Kristina Alford, who is a design director leading the digital design team, and Meghan Kelley, a senior digital designer working on design systems as part of their team. Zendesk offers customer service, and sales CRM tools that businesses use to give their customers a great experience, and one of the largest companies that I've spoken to this season with more than 5,000 employees. And as you'll learn in this episode, they place a lot of focus on systems that help keep consistency across a company that is so large. So if you're currently working on a design system, you're definitely gonna pick up some tips from this episode. 

‍

Before we get into that, though, let's say a big thanks to Webflow for sponsoring the show. Webflow is a no-code website building tool that gives designers all of the power of code without actually making us write it ourselves. One of my favorite features is interactions where you can create animations on a timeline to occur when someone interacts with your site, whether that's clicking a button, scrolling a page, or even just, like, the page loading in. These are the kind of special touches that can really elevate a design and bring it to life, and they are so much easier to implement when you don't have to, like, write the JavaScript for them yourself. I highly recommend you check it out for your next website project at insidemarketingdesign.com/webflow. 

‍

Now let's dive in, and take a look "Inside Marketing Design" at Zendesk. Welcome to the show, Kristina and Meghan. I'm very excited to have you here, and to learn more about how you do all the great work that you do at Zendesk. I look at the site and I see it with its, like, localization 'cause I'm in Spain, I see it in Spanish, and I see all the amazing product imagery, and yeah, you're doing a lot of great work. It'll be exciting to dig into it. Let's start by you giving us the lay of the land. Tell me about the digital design team at Zendesk that you're both on.

‍

Kristina:- Yeah, so the digital design team has been an official team for probably around just under two years. We're a team of eight and that includes three copywriters, a producer, and four designers.

‍

Charli:- Nice. And where does that team fit into the wider, like, company structure of Zendesk?

‍

Kristina:- We're part of the creative department, which is actually a really multifaceted design team, which is really exciting to be a part of. So it includes all kinds of functions, anything from presentation to design to events to sound and video and photography. And we're part of the marketing organization underneath that umbrella.

‍

Charli:- Kristina, as design director then what are you responsible for?

‍

Kristina:- So I'm responsible for a lot of little things, but overall making sure that the team that executes on the design for our brand and marketing website is properly supported, and that we can actually deliver both really great design as well as the relevant product information for our customers, yeah, all over the web.

‍

Charli:- And Meghan, what about you, a senior digital designer on this digital team, what are you responsible for?

‍

Meghan:- So I work with Kristina, all the lovely people on the digital team, very lucky, such a creative and talented group within creative, and overall on Zendesk. And my focus is actually on design systems, so I'm really evolving and maturing our digital design systems in particular Greenhouse. It's our reusable and atomic digital brand design system that powers our marketing website, supports our digital, our web, our product, and our creative initiatives here at Zendesk. And kind of to use an old cliche, but I'm really in charge of flying the plane while building it. A lot of teams really depend on the work that we do at Greenhouse to, like, make sure it's running smoothly, and stay up-to-date and in parity with our code base, so that they can do the incredible work that they do. We really try to focus on giving them the room to be creative, to be fresh and innovative, too, within systems, but, also to give them the infrastructure, and the behind the scenes support that they need to make their jobs easier and more efficient, so they don't have to reinvent the wheel each time.

‍

Charli:- That's really interesting. It sounds like your role is like there's some operation stuff involved as well as design stuff involved, and honestly it was just really exciting to me to hear that there is someone who leads design systems on a marketing design team that is a bit rare, right? A lot of product design teams, obviously have folks focused on a design system, but it's not as common to have that on the marketing side. So we'll definitely get into talking about Greenhouse more later on. I hear, Kristina, that you were the first one to, like, start putting that in place. So I'm keen to hear more about that as we go as well. So the marketing site is the main property that your team works on, right? What about the rest of brand design, marketing design at Zendesk? Are there other separate teams that handle that stuff like social media images, I don't know, illustration, all those other types of brand assets?

‍

Kristina:- We're broken down into different functional teams. So, for example, we have an identity team that really looks at, like, the foundational elements. We have an in-house illustrator, and she creates illustrations, of course, and we have our film and story teams. They're responsible for things like our video. So we have people that focus on animations as well as live photography and video. And then we have an events team, events and campaigns, which they create really amazing specific assets for those campaigns. Of course, copywriting, which is, like, for me is so, so important because I mean without copy, without content, you really don't have design that's functional.

‍

Charli:- Yeah, otherwise we're just making pretty pictures, right?

‍

Kristina:- Right, it needs to have function and serve a purpose.

‍

Charli:- Yeah, for sure. And I wanna get into next talking about the fact that you do have copywriters on your design team, but first, I'm curious to know how you collaborate across all these different design teams within Zendesk, like, not just in the marketing side, but also with product. Any insights you can share about, yeah, where your work crosses over, and how you might get feedback from each other, and that sort of thing?

‍

Kristina:- Depending on the team or the project, I would say the collaboration looks very different. I would say it's also evolving over time. So, for example, the identity team that I was just mentioning about, they've only been really in, like, creation as a centralized team for about a year. Previously, our overall brand designers were much more generalist, and we've really switched to being much more functional, not functional but specializing into people's core areas, which has been really, really exciting. In terms of collaboration within the team, we definitely have a crit I would say. I think we do it every other week. It's really great when people are able to present work, whether it's in progress, or just updating when something is finished. In terms of the projects, the way we staff projects, actually, that becomes really important. So, for example, if we're talking about a campaign that may actually include a design and writing staff from across the team. So you may have a designer from campaigns, you may have a digital designer focusing on that digital interaction component. You may even have consultants, like Meghan would come in and make sure that the digital aspects are aligned to the larger system. Depending on the project, they kind of can look a little different.

‍

Charli:- Right, so one project might be owned by one team, but you're sort of like bringing in people from other teams to cover different areas of it with this specialized model.

‍

Kristina:- Exactly.

‍

Charli:- That's really interesting. How did you decide that it was time to specialize teams into these different functions versus having it be generalists like there used to be?

‍

Kristina:- I mean I think a lot of it has to do with scale. So I'm speaking a little bit from my history, and a little bit from what I've heard because I actually joined the team as a specialized designer, which at that time wasn't common at all within the brand designers, but what it meant is that when we were a smaller team, we were able to have a much more centralized mind share, right? When you only have five designers on a whole team, everybody knows what everyone's up to. It's not necessarily like you have to have big team meetings and check-ins where you have crossing timelines and roadmaps, and it's really hard to keep track of everything. And, of course, as people grow projects grow, and there also becomes I think a desire, and a need for having shared discipline knowledge between teammates. So you're gonna have a different sort of working energy within a group of identity designers who are really well-versed within typography, and traditional graphic design versus the sort of energy you would have between digital designers who are really focused on interaction and motion on the web, and sort of those aspects.

‍

Charli:- And what about developers? What does your collaboration look like with developers, 'cause there's no developers on your team, right? So where are they within the company?

‍

Meghan:- I'm a huge proponent of connecting early, and often with our developers, and they're actually cross-functionally in a different team than us, but they serve the marketing initiatives of the creative team.

‍

Charli:- So they're there to do marketing specific projects. They're not, like, shared with the product, or anything like that.

‍

Meghan:- They're under the product engineering group. Their feedback early in the process of creating a landing page that uses Greenhouse is really, really imperative because they can identify things that are not feasible, or higher level of effort with us early on. And there's multiple checkpoints throughout a digital design project that runs where we have set, like, milestones with the developers to make sure that we're aligned with what we wanna end up building. And then overall, like, just in Greenhouse and systems work, I mean what's really cool about Greenhouse is it's not just a style guide that exists in Figma. It has code parity. We have a react component library.

‍

Charli:- The dream.

‍

Meghan:- It's so exciting, we're so lucky. That team is absolutely amazing. And then to Kristina's credit, she really spearheaded that beginning relationship with the developers. The first version of Greenhouse was actually in code, and we've just been continuing to mature it and evolve it. So what's really interesting, and we'll get into this a little bit more, is the way that we connect with our developers in the digital process is really devoted to the different stages of the project that it's in. So we have a kickoff, we have revision one, we have revision two, we have revision three, and then throughout that we identify whether the project is a priority one or priority two, and that gives us the space and the time to make additions to the system. And so there's a lot of cross-functional collaboration that happens in those different milestones and stages to make sure that we can support the creative innovation that we wanna give our designers freedom for, but also to support it at the infrastructure level.

‍

Charli:- Oh interesting. So I'm guessing that, like, if it's a lower priority project, perhaps there's less room for that innovation, and creativity?

‍

Meghan:- Yes, yeah.

‍

Charli:- And the higher priority stuff gets that time more.

‍

Meghan:- We've learned that by trial and error, and this is actually really interesting kind of this embracing of the creative process for systems, if you will. We started thinking about all the projects, try to be, like, more holistic, like, okay, this is a copy change. Does this copy change then really warrant a component shift here? How much time and timeline and people involved would that effort take, and is that worth it to the business overall? The business objectives, and the marketing initiatives around that. So when we put that lens on, we realized that we should start standardizing around timeline and contribution requests 'cause a lot of our projects, and our partner collaborations are conduits for contribution for us. We learned that the system, like, we need to evolve it, we need to meet the designers where they are. The process for making sure that we can support that shifts depending if it's a priority one or priority two. We have a longer scope period for contributions for P1 and P2 then we do P3s.

‍

Charli:- That makes sense. That makes a lot of sense. Okay, I'm really excited to get into talking about this design system stuff, but I do wanna talk about copywriters first, and address this 'cause this is something that is very unique. There's a lot of things unique about Zendesk, I think we're learning. It's unique to have someone who owns a design system on the marketing side of things. It's also unique to have copywriters on a design team. Often I think we find copywriters are part of, like, the marketing team, or, like, a separate team of their own, and there's cross-collaboration happening, but you've got them within your team itself, Kristina. What led to that decision to have the copywriters being part of the digital design team?

‍

Kristina:- I would say it was somewhat of a natural progression in the sense that we had a central copy team. So like they weren't necessarily part of the functional teams originally, but once we were actually noticing we were staffing projects, we were using the same couple of writers over and over with digital projects, and they had a large vested interest, and not just learning about the way that brand, voice and tone is translated on the web, but also thinking about the web as a holistic landscape for what the copy could look like. Delving into how some of our digital tools around the experimentation and testing could be improved. It actually became a really much more natural progression to have them integrated in the whole process. So not just staffing writers in projects, but also having writers involved in how we design, and contribute components. How we run our processes through projects, like, when does it make sense to have writers involved? And then throughout the process of having them being fully integrated, I think we're now at a place where we're thinking about, like, oh what does it mean for writers to run a design project, and what kind of projects lend themselves to being more messaging-focused versus design-focused now that we have the capabilities of these specialties on the team.

‍

Charli:- Well, that's really interesting. Can you share an example of a project that you found does lend itself to being more messaging-focused that a writer is more likely to run than a designer on your team?

‍

Kristina:- One great example is about a year ago we ran a project that was updating our global diversity, equity and inclusion page. And it was a really interesting project because we were able to, I would say, lock down the art direction fairly quickly, or in a way that was fairly straightforward, but one of the biggest challenges was the fact that we had so much to save. Zendesk is a company that really, really values how we show up to unrepresented groups overall. And so that means that we have a lot of programs, and a lot of initiatives, and a lot of things we wanna say about where we are, and where we wanna be in the future, but we only had one page. So that meant that there was a really big effort to not only collaborate with our various stakeholders who were submitting the content they wanted, but also make it feel really cohesive within the Zendesk voice, and a pleasurable reader experience.

‍

Charli:- Oh, that's exciting. So a writer led that project to make that design, and build happen, essentially.

‍

Kristina:- Yeah, it was, I would say, definitely pretty writer-focused on that one.

‍

Charli:- Very cool. And you mentioned as well getting them involved in components. What have you learned there about ways that getting writers involved with the design of a component for a design system leads to that being more successful?

‍

Meghan:- We're actually super lucky. Again, our copywriters on our digital side, and across Zendesk, like, a lot of them are just very systems-minded, systems thinkers. They're really passionate about making things work, and that are efficient, but are also, like, connected to the messaging that we do here. And so it's a really cool opportunity for us on systems because we can think about content in terms of its framework, and that can work in tandem with our design systems. Copy can have a really direct influence on how library components are created in our tooling, and how they're ingested in really what story they're expressing to our audiences. That can manifest itself in several ways, and the amount of width a component takes up in a column grid, or what language is really long and phrasing that maybe would drop to a separate line, or even when it comes to expected click results in a button, that language that you have around those elements can shift through different pages. So what are the common frameworks and commonality between the language that we're using, and the messages that we're using, that's related back to our business objectives around the audiences that come to the page. So it's like that bigger really interesting philosophy that our content copywriters share, which is really cool and exciting. We've really started at a nascent level, but we're really starting to think about how character ranges show up in the components in the documentation itself. How do we socialize best practices to our audiences that are using Greenhouse? How does then that inform the people that are writing within those components, and how does copy itself change regionally? Like, you mentioned you're in Spain. Localization is a huge factor. Some of the phrasings maybe doesn't translate in all languages. So what the component downstream affects that have to happen around that. We just had yesterday a situation where we had a sticker button that has to wrap because the language is so long, but the amount of space that we had for that sticker was very compressed. How does that component, and that composition need to evolve to support that? We wanna serve up the best experience we can. We're thinking about localization best practices for copywriters as well as the library itself. Documentation and the way that you name components has to relate to a clarity in what those components are going to do for you. We have to be able to find them, so ease of use on keyword searches, what they're actually named is really key, especially in our tooling. And so how do we really lean into that, and standardize around those kinds of requests, and needs of the system.

‍

Charli:- Oh, wow, that's so interesting. So yeah, of course, you've got the writers involved not only in the, like, content that goes into the components, and obviously that helps make them more robust because you can test different edge cases, and, like, cover more factors, but you're also having them do, like, UX writing for the system itself to make it better for people to use, I love that. I didn't even think about that, honestly. When it comes to the design system we're working on right now at ConvertKit, I think we can put a lot more thought into the naming of things, yeah, based on that.

‍

Meghan:- There's a lot of opportunity. It's really an exciting place.

‍

Charli:- How do writers get involved in the design process? You said, obviously, sometimes there's a project that they lead, but are they involved, basically, at every stage a designer is? Are they involved right from the start in a digital design project?

‍

Kristina:- They are. I would say at the beginning of every project they're there from the beginning of kickoff all the way to handoff. I just pass handoff into QA as well. One thing that we've really exploring lately is sort of like what other work streams can content own within projects. Recently we've been doing a lot of content, and copy user testing. So that includes things like having unmoderated tests, looking at more of messaging-focused A/B testing that we do, to also provide overall content recommendations for our civic user groups because our site, while we're always talking about Zendesk, we're sometimes talking to very specific groups, whether that is someone who maybe is from an SMB versus enterprise, or sometimes even in different verticals that there are messaging differences that are really vital, and impact our users in more positive ways if we're aware of them.

‍

Charli:- Oh yeah, that's awesome. What advice do you think you have for designers who want to get better at working with writers? 'Cause I've found that there's often a healthy tension between designers and writers where the writer is like, I need all these words, and the designer is like, can we have half of them because it doesn't look good in my design. Any advice that you can share for writers and designers to understand each other better, and have a better working relationship?

‍

Kristina:- I would say that in my previous experiences the relationship between design and writing has felt a little bit more transactional, right? So you would get a Word document from writing, and then you would kind of flow it into your design, and be like this doesn't work. Sometimes I think that's where some of that tension kind of comes up, but I think that even the tools that we use, now that we have copy and design happening in Figma means that we are able to have collaboration going back and forth, so the writers flow their own copy into the design. So it's not necessarily like design is being like, hey, this doesn't work what do we do? It's sort of like the writers are actually able to adjust their copy to fit the design. They are so design-minded, and they know when things are working and when they don't, so they're able to make adjustments themselves, and not necessarily have to rely on design to update, or change things as well.

‍

Meghan:- Because we're in Figma, there's this really cool place for us all to work together early in the process. It's really similar kind of to how you think about working with your developers. You wanna involve them early in the process, so that you can all kind of cross-collaborate, and cross-pollinate ideas back and forth to understand what the best solutions are moving forward. Before we moved to Figma, we did surveying of our copywriters, and we learned that they really wanted to be involved in the design process early, and it was actually more challenging for them to be working in a video call telling the designer what to add to a design component, and tweaking it back and forth. And that not only took them out of their creative space, but it didn't allow them to assess how the component was working best with the copy, and the messaging that they needed to impart. It just opened doors for us the ability to calibrate early, and we discovered a lot of better messaging around that. Our messaging pages got stronger, we delivered more clarity, and more consistency across our pages, and maybe Kristina can speak a little bit to that too.

‍

Kristina:- In terms of things being consistent, I would say that we've really been able to up-level this in multiple areas I would say, like, in multiple facets. Having the standard foundation of having this design system across creates a level of unity that is really, really helpful. The way we've been able to approach pages as I would say, like, as groups looking at it from a user journey perspective has been a lot more cohesive. So we're not only looking at pages from like, oh, we're uploading this one page, or we're updating this one section. We look at them as sort of a holistic journey. So when people are encountering certain keywords we use that we are not necessarily changing them back and forth, or really careful about what kind of jargon we use, or making sure that we're not being too industry-focused because we have a wide variety of people that come to our site. One other thing that's been really interesting is that I would say our tone has evolved a little bit over time. Like we've definitely had periods where we're a little bit more straightforward and direct, and times where we're a little bit more playful, and being able to have the writers so closely tied to the design means that we're able to make updates that make sense across certain areas, and less of those areas where we have those pages that kind of stick out like a sore thumb.

‍

Charli:- Yeah, okay, so basically our takeaway from this is let the writers into the Figma files, and it's all gonna be better from there, love it. Well, now that we know more about who is working on digital design stuff at Zendesk, we need to dig in on the system that honestly seems like it's powering all of this consistency, and letting you stay really efficient, keep things updated and all of that. Meghan, do you wanna give us the lay of the land for design systems at Zendesk? 'Cause you take care of Greenhouse, but I know that there's also a product design system as well. Tell us about the difference between the two, and, like, does anything get shared between them?

‍

Meghan:- This is a really cool topic because, yes, there are two design systems. There's actually probably a little bit more, too, if you think about brand design systems as well. Garden is our open source product design system that supports and powers the Zendesk product, and the Garden team sits inside product design. Greenhouse is our digital design system under marketing that supports and powers our website properties, and the two systems overlap functionally in the React code base. That's kind of new for us, but they have very different visual styles. They serve different purposes and different use cases in the way that a marketing and a product design team, and the needs around those teams and the systems would be different they emulate that. So when you think about Greenhouse components and patterns different than Gardens, Greenhouse really needs to support more media, more imagery, longer marketing messages, and different types of call to actions and copy. We're kind of in the midst right now of really refining what the best ways we should be interacting and working better together, and it's an exciting opportunity for us moving forward.

‍

Charli:- How did Greenhouse come to be? How did you come to have this robust design system on the marketing side, so much so that there is, like, people who work full-time on it like I said, it's rare for a marketing team, where did this all start?

‍

Kristina:- Well, when I first joined there was a sketch file called Brand Kit. It was a great tool that basically allowed for designers to be able to essentially, like, pull buttons, and pull colors and sort of have a cohesive feel. So it was almost acting like a web design style guide, but the issue was that it actually was used more of an interpretive tool than actually, like, a reusable system. For example, when we decided to actually invest the time, and the energy into building a design system, we actually discovered we had so many inconsistencies across the web. Like I think we had something like 14 different colors of blue, and, like, 50 different buttons that were all a little bit different, and it was all because everything ended up being sort of, like, one of a kind, even though maybe some of the code was being, like, repeated, it wasn't repeated at a systems level, and so we had a lot of inconsistencies, so that meant that, like, things visually looked together, but they weren't actually consistent in the way that we wanted them to be. I would say about six months after I joined Zendesk, we really took the time to create version one of Greenhouse. So we had a system that we could reuse, and actually started enabling us to create more work because it started cutting down the time, and, of course, as Meghan's evolved it, it has exponentially skyrocketed in terms of efficiency, and the way we take in new components, how we progress them, and how we iterate, and, of course, work with our developers and designers.

‍

Charli:- Yeah, tell us more about where the system is at today than, Meghan. Where is it at in terms of maturity do you think?

‍

Meghan:- There's definitely this interesting shift that's happened. After version one of Greenhouse that was a really great foundation standing point that Kristina managed with our web team. We had to shift the philosophy of systems, and how they're treated at Zendesk a little bit. They were seen as more like projects with an endpoint. There wasn't really a lot of effort around thinking of them as an on ongoing, evolving, needing maintenance machine that makes our work more efficient, and really supports us in the behind the scenes. Getting leadership involved in those initiatives was really, really key in the beginning because Greenhouse was starting to walk the path of previous systems that had been tried and abandoned. We were starting to kind of suffer from some of the similar systemic issues. Teams were still working in silos. There was not a lot of collaboration, and connection with our web partners who were wanting to keep in parity with us, but the lines of communication weren't really there, and established as much, and a lot of that was because there wasn't someone dedicated to doing this. Kristina and the team did a really amazing job getting to the point they needed to, but they also had a lot of other priorities that were being required of them. When I was brought on, I was dedicated to maturing Greenhouse, so I really could focus in and that was really, really key. Another area that became clear as an opportunity to evolve Greenhouse was figuring out how to integrate the system into existing processes that existed really in the creative groups. We had digital landing pages that were being requested from our marketing teams, and the digital pages needed to use Greenhouse, but teams weren't talking, and connecting with each other as much. We talked about this a little bit in the beginning around different milestones in the digital design process that allowed for open communication and collaboration, but that wasn't quite there yet. So we really needed to take an audit at our processes, and how we worked together as well as because there were not clear defined ways of talking to each other, or there was a governance meeting, but it was canceled once a month, teams weren't really able to have the space to talk as much, and tasks for regular system maintenance were deprioritized against marketing pages. We were suffering from Snowflake webpages, components that were out of alignment, foundational issues with our breakpoints and our grid that were just different in Figma. Actually, we were in Sketch at the time than in the code base. We needed to audit the foundations, audit the components, and audit the processes from really the ground up because a lot of designs that were beautiful were handed off. I mean there was a QA process which was really great, but Snowflake work was created. There was a lot of morale and lack of connection between the web team and creative. So building better bridges, and kind of mending some of those relationships was really important in the beginning.

‍

Charli:- I love this idea of a design system being the, like, thing that can mend relationships between designers and developers too, because I mean ultimately at the end of the day we both wanna be creating great looking webpages that work wonderfully nice and smooth, nice to interact with, but clearly things break down when a developer doesn't notice the details that a designer does and all that on these. I love this term Snowflake pages. I've not heard that before. I can totally see how a design system where it's like, no we're figuring out the details in the components so that we don't have to have this conversation again essentially. Like, they're all gonna be there and figure it out for you. You can just use the component and we'll get alignment. How did you get to this point of, like, trying to solve these problems that you were auditing your way through?

‍

Meghan:- Yeah, so we had a really great opportunity where when I first joined, a few months later we actually moved our tooling over to Figma, and so it gave us the chance to really reintroduce our systems, and really establish better bridges. When we started moving over to Figma, we had to recreate the Greenhouse library from scratch to be able to take advantage of all the goodies that Figma offers us.

‍

Charli:- Like auto layout.

‍

Meghan:- Like auto layout, and allowing further ability to control how components can be used and designed, could cut down, and did cut down on RQA time. Designs were being shipped where spacing was all over the place in terms of how close text or imagery were to each other, or where the endpoints of modules were to another that were stacked. And so there was a lot of, like, inconsistent language, and rules around that. So Figma really gave us the tools to lock that down, so that our designers could focus on more quality things, not have to worry about reinventing that each time. I speak about building the plane while flying it, truly, we were auditing the library, we were auditing processes. We were defining systems governance around how to keep this library going, and maintained and working, and how to properly communicate the tasks, and the management work to our leadership teams 'cause they had given us the go ahead. Thank you Kristina. For moving over to a different mindset around how systems could be thought of to really support the work we do. Ensuring them at a level that was more ongoing, and evolving maintenance. And so how do we bring back that level of efforts at a task management level for our Thai system governance, and realized we need to do operational management around the work too.

‍

Charli:- So tell me more about how governance happens today then? Like, say someone wants to iterate on a component, or maybe add to the system with the new component. How does that get decided, and what does the process look like if we're getting something added or changed?

‍

Meghan:- That was a really, really exciting and big step for us. We didn't have a contribution model going in, and we didn't have clarity on how teams would work with us, and so we talked to our audiences to learn how they wanted to work with us, and what kind of projects they were working through. We created spaces for those conversations to happen. We established office hours. We put together contribution models that's a user flow that someone can walk through and understand if something's gonna be supported in the existing system, or if it could be a Snowflake. How do they utilize the resources we have, and the guidelines we have available to meet in the middle a little bit more, or to bring the case to us if the component can be an enrichment to the system, and how that could really move the system forward. In the contribution model we define certain criteria to help us with that, really to evaluate how useful a component could be to the overall system, how it met the business objectives of Zendesk, and the marketing initiatives, and really posed the question to audiences that were coming with contribution enrichments, how can this be reusable? How can this be scalable for us as we move forward, and how does it move systems holistically?

‍

Kristina:- That's also been something that's really been useful for us when we're actually in our review meetings with our stakeholders. I know that a lot of designers can relate to sometimes your stakeholders have a lot of really big ideas, and the way that things can sort of emulate the way that they need them to, but a lot of times, especially, from our stakeholders, they're usually focused on certain areas of a product, or certain user group. So that means that they're really laser-focused in their particular area, but not necessarily looking at how, for example, if we were going to show, I don't know, update how we do diagrams that show integrations, they may not necessarily be concerned, or as well-versed I should really say about how integrations are playing in other areas of our product, and consequently other areas of our site. So being able to have, like, a centralized place, also gives us a stronger point of view for how we need to represent things through our design, and how we can evolve art direction to make sure that all these spaces are hopeful because the thing about our users is that they're not necessarily viewing the site the way that our structure of our organization is set up. They're viewing it and learning about Zendesk as a whole.

‍

Charli:- Yeah, and you want all of the components that you have to feel consistent across and to be contributing to that. Can you gimme an example of, like, what's the most recent component that got added to the system that it didn't have before?

‍

Meghan:- There's been a few, but the most recent one it's actually a really cool opportunity that we have with our growth and marketing team. They're really honing in on the website, and identifying areas where we can optimize in terms of gathering more qualified leads for our sales teams, particularly in our forms where there's ripe opportunities. So we're collaborating with our product design teams that are working with our marketing growth team to change and evolve existing form fields that allow for the space for a better return in the forms, if you will, more engagement. So we have this component that was a tile button, which is just a simple radio tile button, but we brought in brand imagery into that to draw it out a little more, instead of having it just be like a text field, making it a little bit more of a visual brand statement. And we've seen uptick in our engagement, and qualified leads since then. And the way that process run was really cool in that we see our contributors as conduits for evolving us. They're our champions in so many ways, and so we've really brought them into roundtable governance discussions, and we've opened spaces for playground files in Figma, and collaborative working sessions in office hours. And so we'll rev and iterate on these ideas together to get to a solution that matches the use cases, the requirements, and moves the system in the business forward. And that's very collaborative with our web team as well 'cause we're running Greenhouse together, we're really peers, the web team and the Greenhouse systems group, and so we do a lot of prototyping together, lots of conversations throughout the week that allow us to get the work done in a really cool way.

‍

Charli:- I love the idea of a playground file where you get to just, like, flex the system a little bit, and see how it could change 'cause I think systems can feel overly rigid, and, like, there's no room for creativity. And so having something like that, and knowing that that is the process for getting something added is to play first. And I love that the developers get to play as well, and play in how we could implement it it's really fun.

‍

Meghan:- And that really goes back to having these playground spaces because we want to give people the space to innovate, to be creative. We really depend on that feedback loop with them to be able to move us forward. We're designing a system for them to make their work efficient and usable, and get on their way, if you will. And so how do we make sure that those relationships are built, and how do we really support those teams, allowing them to be their creative selves in every way that they need to be.

‍

Charli:- I love it. What's coming next for Greenhouse then, Meghan? 'Cause like you said this is an ever evolving thing. This isn't a system that gets finished and then we move on. What are you tackling next for it to improve it?

‍

Meghan:- We're definitely leaning in a lot more on the user feedback that we're getting both in combination with qualitative, and quantitative results in our data tracking tools around how customers or prospects or visitors are ingesting Greenhouse, and how the components themselves are performing. And this goes back to the growth and marketization team as well where there's opportunity for us to optimize around the data further, so we can take those learnings, and bring it back to Greenhouse in a way that makes it better. Something that we haven't really talked about is how Greenhouse has inherited a lot of brand elements that were intended for print in the beginning. We've been doing this in pieces, but we really need to go through with a full accessibility audit on areas, and our web team is phenomenal. We have, like, accessibility champions, and localization champions around this, but the Figma library has to catch up a little bit with some of these things, doing a full accessibility audit on color pairings, alt text, right to left alignment, localization best practices is really gonna be important for us to move that forward so that we can have the system meet people where they are. There's a lot of opportunity to optimize further for the web, and we're trying to lean more into device agnostics. We're right now responsive, fluid, but we're learning that our audiences are visiting us at different breakpoints than what we thought. So figuring out how that manifests in the library, and how that can change in our design, and our digital process, too, to make sure we're supporting those audiences that are viewing us at those levels.

‍

Charli:- Well, interesting. Can you tell me more about that? Like what surprised you when you looked at the breakpoints?

‍

Meghan:- The website is being viewed on large monitor screens that a lot of our decision makers that are deciding between Zendesk and other products are multitasking. And so they're seeing our website in larger view ports that we didn't originally think about or intend. There's a lot more devices that are coming on the market. There's this blur between when a tablet ends, and when a laptop begins. There's so much more variation in sizes. How do we create the best experience for everything? Even though we are responsive and fluid, there's really interesting opportunities that we can use to showcase the brand.

‍

Charli:- I cringe every time someone shares their Zoom screen with me, and they're using one of those ultra-wide monitors. I'm like, oh my god, what must my websites that I'm designing look like on these giant screens? Like everything crammed in the middle probably. That's really interesting. I love that you noticed that in the data, and that you're realizing that's something to take action on as well.

‍

Kristina:- And one small addition to that, too, is that I think that even though we've been somewhat aware of, like, the larger screens, and it has impacted the way that, for example, we do photography. Historically a lot of the art direction of photography was a lot more fullwidth, which, of course, means that when you expand your screen, and if you have an image that's anchored, for example, to the right side of the view port, you're gonna have issues where, like, things stretch in weird ways, or, like, things overlap in ways they don't. So we've really also implemented our components in art direction to be much more in pair and medium focus. So digital focus rather than just necessarily having a photo that was shot for a print ad, having something that can actually be shot for a web, and work flexibly there has been really important for how we evolve.

‍

Charli:- We're getting to change everything, don't we? With all these screen sizes, I love it. Well, I wanna talk specifically about a part of your design system. I believe it is block frames. I'm very excited about this because we at the moment at ConvertKit are working on our product imagery and we're trying to, like, create a more systematized thing around it because right now we tend to just go in, and create it in the moment when we need it rather than pulling from a system. So I don't know if, Kristina, you can give us the overview of what block frames is.

‍

Kristina:- Block frames are essentially how we represent our product. So our Zendesk dashboards on marketing properties. I was gonna say the web, but we actually use them in a variety of areas so that might be things like social ads, or internal presentations. Sales decks sometimes have them in there as well. So it's really a presentation of our product at different fidelity levels, which is really useful because if you're talking about specific features you don't necessarily need to always show the whole dashboard versus there's times when you really wanna show the fidelity of everything and really give a holistic view, so we're able to turn down, or turn up what we really wanna say, so the messaging matches the imagery as well as possible.

‍

Charli:- And am I right, Meghan, in saying that that's part of Greenhouse, or because it's used elsewhere is it, like, its own separate little system?

‍

Meghan:- It currently is part of Greenhouse. There's a need for it to be more centralized and on its own because it's both imagery, brand asset imagery, that tells a certain story to message as well as its own library. The block frame library itself, it pulls in other system components from Garden, from Greenhouse, from our materials library as well, and it's outgrown its space in Greenhouse, if you will.

‍

Charli:- It needs to be repotted, if we go with the garden motif that we have going here. What was your approach to product imagery before, and how has it changed with block frames now?

‍

Kristina:- Originally I think our way of creating, I was gonna say our system, there wasn't a system.

‍

Charli:- That was what was wrong with it.

‍

Kristina:- Was much more like how you mentioned that your team is working right now is that we would essentially get new updates from our product teams as well as requests from specific stories we wanted to tell from our product marketing partners. And then also we're looking at some things we'd created in the past, and would individually create each new screen every time, which means that, again, going back to what we were talking about with systems is that we had a decent amount of inconsistency, things that would be subject to, like, human error as well as certain designer's perspectives, or their design quirks would show up in individual work. So it wasn't as people are talking about as consistent, or providing a trusted message across. So that was one of the really, really strong reasons why we had invested in creating a swappable system for block frames. So I'll let Meghan dive more into this, but it really has a variety of fidelity levels. It also has an ability to align with our art direction on certain pages. If you go through zendesk.com you can definitely see we have a monochromatic, colorful aesthetic to each one of our webpages, and we also allow for the product to align to those. So everything is really cohesive from the bottom down, bottom up I should say.

‍

Charli:- Yeah, and Meghan, tell us more about the swappable nature of this product now, how does that work?

‍

Meghan:- Block frame is actually an atomic reusable design system in itself. It's like this beautifully working machine.

‍

Charli:- A system within an system.

‍

Meghan:- Yeah, which is why it's outgrown Greenhouse as well. So we need to give it its own space to flourish. The components themselves are deconstructed elements of a UI. They're representing the products, so you have navigation, rails, messaging, buttons, the typical things of a design system, but in, like, a miniaturized branded way, and they inform and are grouped as patterns that are the reusable image assets that we see across our site. They work within each other in an atomic way, so when you get a pattern from our collection, you're able to reuse it as is, or update the copy, or the color, or imagery, what you need. And it's a simple couple of clicks in to access the flexibility of those component swaps. So let's say you're in a situation where you have a block frame that has a smaller space to work in, and you don't want that text to be illegible, you can block it out or blur it out by just simply double clicking into the component text, and then you have that variant built in. So they're incredibly flexible in how they work together to get out of the way, again, if the user is trying to utilize them for their stakes.

‍

Charli:- I was gonna ask about what your philosophy is in terms of product screenshots looking like real screenshots, like, you could have just gone and take it from the product versus making the UI more abstracted. And what I feel like I'm hearing is that it's kind of up to the space that they need to exist in. Like there's times when you're gonna wanna see the screenshot in its real looking state, and there's times when that's actually gonna add confusion if you've got text that's so small you can't even read it, you should blank it out, and make it a little bit more abstracted.

‍

Kristina:- Yes, precisely. We have a flexible system that allows for different levels of fidelity, and we use them all within the site. So whether that is talking about our agent workspace, which is something that is meant to be viewed as holistically, and we use those as, like, full screen block frames with the full fidelity, or if we wanted to talk about one specific feature, like customer profiles and customer context, we can dive into, like, the one section within the dashboard that focuses on that, and even sometimes add another layer where we might go, and animate it to really show how people interact with it, and what that expression really looks like.

‍

Charli:- Ooh, that's fun. So even adding animation into the system, I love it.

‍

Meghan:- And that's another benefit for the atomic way that we've built the library, as we can then target the individual deconstructed elements of the component, or of the pattern and animate those, and the tools that are put on Figma, and then with our amazing video partners on the creative team.

‍

Charli:- Honestly, everything that I'm hearing from you, this is, like, goals of what my team is working towards over the next year or so, so this has been fantastic.

‍

Meghan:- I think that there's an interesting opportunity, too, to connect the product imagery with what our sales teams are using in those customer conversations. It's still a very important use case for us. How do we curate and prescribe the feature set of the product that can be used as a deck and sale material to empower our sales teams in those conversations. And then another thing I'll mention is the block frame library was actually a really great collaboration with our Garden team as well because those product screens came from our product designers, came from across the aisle, and so figuring out how to collaborate with them to get the most recent work, how to bring that into the library that was a right focus, but it's still an evolving process. As the library has evolved, we're understanding there's a really strong need for contributions around it. There's a new product feature that's launched, how do we then add that new block frame image, and component and pattern into the library so that everyone can use it. Marketing initiatives can feature it, but our digital designers can bring it into a landing page that's showcasing that product feature. Those partnerships and that relationship is really important to keep building and maintaining.

‍

Charli:- Yeah, I like it as an excuse to keep talking across the aisle like you said as well 'cause you gotta make sure that that stays updated. Let's end by talking about what's coming up next. Kristina, what's one of the main, like, challenges either you're facing as design director, or that the digital design team is facing at the moment that you're working through?

‍

Kristina:- I would say that it's certainly never any dull days over here. I would say maybe some of our biggest opportunities would be around alignment, around, like, planning and alignment. We have so many teams that have, I would say, different priorities that they are really, really important to our business goals, but we're a small team and we can only approach so much. I've been working recently trying to make sure that we can be as aligned as possible. So basically how can digital design, and the way we approach the way we do our work impact as many teams across their business goals as possible. So that has also looked like reassessing how we do our project submissions. What does it look like to have roadmaps that go across several teams? What does it mean to bring in other partners, whether that may be freelancers or agencies, and how can they interact with us, and how can we share our guidelines, so I would say that mostly for me right now I've been really working about how we can go as far as we can with the capabilities that we have, as well as focusing on continuing to evolve not just our systems but also our art direction, and areas that we're really interested in as well as how we approach motion, how we approach interaction, and working more closely with some of our department teams as well.

‍

Charli:- I love it. Meghan, what about you? What's the next challenge that you're facing?

‍

Meghan:- Yeah, definitely, I echo that. I think that there's a lot of opportunity for continuing to standardize and systemize, and make sure that we're providing the right tools for our designers on the creative team. We're leaning into partnerships with our identity group, our campaigns group, our events group, and collaborating with them at a really, like, exciting, and successful level on how they're using Greenhouse, and where can we meet them to provide the best experience for them. We're also thinking about the intersection of design and engineering. There's so much work that happens at that point to really see, like, the end product. The end product is, like, the system allows people to be more efficient, and collaborating to have cohesivity in the brand, and transactional experience for customers, but showcasing the work behind the work is definitely an interesting challenge and opportunity. How do you package up the right level of work to leadership so that they can understand at their level, like, at the high-level they need. They don't need to see the detail. Like, that's our job to, like, understand the tasks, but how do we showcase that, and bring visibility to the work.

‍

Charli:- So they understand the impact that you're having, right? And why you might need more resources.

‍

Meghan:- Yeah, exactly. It's just to get more resources and support.

‍

Charli:- Yeah.

‍

Meghan:- Yeah, and Kristina has been an amazing proponent of that too, and we just wanna continue that relationship further.

‍

Charli:- Well, let's end by each of you telling me from your time at Zendesk so far, is there one particular project, or perhaps some impact, some feedback you got, I don't know that you're most proud of that you wanna share?

‍

Kristina:- This is a little bit early on I think in my time at Zendesk, but we had gone through a project that we were calling Big Fat Fab, which is basically a movement of how we switched from having individual products to really talking more about Zendesk's one product that has many capabilities. And so that meant that we had to essentially re-look at every single major product page that we had on the site in a very small amount of time. It was a really intense project, but I think that it really showed the value of what, first of all digital design can do for the company, and how when working in a systemized way with our partners, we can get a lot done. I think we were able to update 12 pages in, like, 11 weeks or something, because we were able to be so aligned, and it was because I think that we were able to really show, yeah, the impact of digital design. It's not just about sort of throwing some things on the website, but it's really deeply functional, and we were able to back that up with data as well. So I think that work was really the start of so many things that we do today.

‍

Charli:- Yeah, like it earned you the opportunities to do everything else because of the success of that project. What about you, Meghan?

‍

Meghan:- A couple that really stand out to me are moving Greenhouse over to Figma. That was operationally a massive, massive effort across design operations, product, creative, marketing, localization, accessibility, so many various teams to get that off and running, and our amazing design ops partners really gave us the space to onboard and teach, and help our creative teams learn Figma. And myself, I was learning Figma at the same time as building Greenhouse in this new tool.

‍

Charli:- Again, building the plane while you're flying it.

‍

Meghan:- Exactly, that's my motto here. You have to be adaptable in that way for sure. And, yeah, really leaning into communication, and collaboration across teams was just like, again, a motto of Figma, like, we're all working in it together. We're all designing in here trying to push this forward together. We did playbooks and guidelines and onboarding materials, and multiple onboarding videos and resources, and things like that to support the team through that learning. And that really was a very cool opportunity for me to be in the design ops world because I was helping to fill process gaps as well. How are we gonna work with our localization partners in Figma? Where are the opportunities that we can make that team work better? How do we integrate ourselves into those existing systems that they have? So Figma really unlocked a lot for us. And then another project just as similar lines is, our entire web team has had this tremendous effort moving over to React, our React code base and Greenhouse with it. So our entire Greenhouse library is in React. And the collaborations that we've had, and the one-on-ones, and the level of alignments that we've had, I wouldn't change that. It's an amazing team to work with. And that alone having stronger parity to the React library, and to our Garden team that's also in the React, bringing our pages out of the Snowflake status, and back into the Greenhouse alignment, yeah, there's no words. It's been a tremendous opportunity to be a part of that.

‍

Charli:- Like I said, goals, that can be the summary of this episode, I love it. Thank you so much for everything that you both shared. Super interesting, and looking forward to seeing more of your great work on zendesk.com. I don't know about you, but I took a ton of notes watching this episode back about block frames in particular. I'll be excited to share my progress on setting up a converted version of that system over on my YouTube channel next year, but I wanna say a huge thanks to Kristina and Meghan for sharing all of their wisdom. The Zendesk site is truly one I often look out for inspiration, so it was really great to get to hear about all the work that goes into it. Now, while this was the last interview of the season, I've still got one more episode to come to, like, wrap it all up, and share an overview of my takeaways from all of the great guests, and the great companies we've featured this season. And I would love to hear your takeaways, what you've learned from this season, anything you've implemented as part of your process after hearing about it on one of these episodes. You'll find links to follow Kristina and Meghan, as well as check out Webflow in the description. So take a look down there, and I'll see you back here next week for the final episode of season three.

‍