A Designer Who Saved 150M+ Developers | GitHub, Diana Mounter(Former Head of Design)

1. 0:00 – 2:02

   Intro

   1. DMDiana Mounter0:00

      I think working in tech as a whole is a place where you really need to embrace change. New technologies come out all the time. There's just sometimes some bigger steps and bigger moments like we're having right now. So I think, like, good design is about meeting the moment. As a designer, you more or less have to use the same tools that engineers do. Idea of a great Friday night was building something on my laptop. Some of my friends would think, "What's wrong with you? Why aren't you out, like, partying?" And I was having fun. Something about using GitHub and being in the same place as engineers just sort of sparked this excitement and interest in me. So being comfortable with code, being comfortable with working with new technologies is going to give you a leg up in terms of designing for AI experiences. Remember that a lot of the core skills of a designer remain. They're still needed. So building empathy for the customer experience, being good at storytelling and communicating idea, being creative and knowing how to get from a blank page or an ambiguous problem to something that is a great solution. [gentle music] I'm Diana Mounter. I am head of design at GitHub. GitHub is a tool for building software. It supports the whole software development life cycle. It's where people can collaborate on code, can take a, an idea into a fully fledged project. So I've been at GitHub for almost nine years. In my time there, I have helped build out the design system, which is called Primer, turning that from a kind of a CSS framework into a, a fully fledged ecosystem of components and tooling. I led the team that delivered Dark Mode in 2020, which was something that people really, really wanted at the time. We work on everything from the onboarding to the marketing to the actual product experience.

2. 2:02 – 4:54

   When a Designer Falls for Coding

   1. DMDiana Mounter2:05

      When I was younger, I didn't really know web design and graphic design could be a career. I sort of kinda stumbled across it, and d- by doing an apprenticeship in a design and print shop and realized that that was the perfect sort of type of role for me working on the web and working even with just, like, graphic design. It was both, like, a bit technical as well as, as creative, so kind of the perfect marrying of, of the things that I was interested in. When I was in my early 20s, I decided I wanted to go and explore more of the world. I picked Australia for a couple of reasons. One, I wouldn't have to [laughs] deal so much with the language barrier, apart from obviously some fun, uh, slang words and, um, uh, different accents. It seemed like there were m- potentially some good job opportunities there. Back in the UK, there was a bit of a recession really starting to happen, particularly in the print industry. A lot of people were like, "Print is dead. The web's gonna take over." So part of my reason for choosing Australia was like, "Maybe I'll find a job there. Maybe it'll just be a great experience to see another country and to kind of test myself a bit and see if I could do that on my own." So I bought a one-way ticket and hopped onto a plane and kinda never looked back really. I was really fortunate to end up finding a great job there. A little bit later after, you know, when I was there for seven, eight years, I started to get more interested in tech scene. End up feeling like we weren't moving as fast as I wanted to working in the, the agency that I was working in at, at the time. Idea of a great Friday night was building something on my laptop, and some of my friends would think, "What's wrong with you? Why aren't you out, like, partying?" And I was having fun. And I felt like I wanted to be around more people that were interested in technology. So early on, I was introduced to Git and GitHub while I was at a hackathon competition, and the engineers were using GitHub. And they were like, "Hey, you should sign up for this 'cause you know a bit of front-end development, and then you can be working in the same place that we're working in." And something about using GitHub and being in the same place as engineers just sort of sparked this excitement and interest in me. So I started to put my websites on GitHub. I learned things like Jekyll, which was like a static site generator that GitHub made. I think there's something exciting about being able to make the thing that you have, like the idea of that you have in your head, and like make it and build it and put it out there on the internet and other people can use it. There's something that feels really great about that as compared to just being able to make a picture of something. So that, that just really excited me.

3. 4:54 – 7:17

   Becoming Head of Design for the Product I Love Most

   1. DMDiana Mounter4:55

      What if I work on a product that made such a big impact in my life that I use every day? And Marc Otto sent me an email and said, "Hey, would you be interested in GitHub?" Marc Otto was a bit of a celebrity to me because he had created Bootstrap, and if you were interested in design systems, you kind of knew about Bootstrap. My immediate reaction wasn't like, "Oh, yeah, definitely I wanna work here." I would like to chat to this person that I think has done some great work. And in talking with Marc and some other design leaders at GitHub, I realized that this was such a good fit for me. And then I thought about what I had been doing in my career and realized that so many signs were kind of pointing towards GitHub. And aside from the actual product, I had an obsession with, uh, GitHub's mascot, which is the Octocat, [laughs] and used to, like, spend late nights just illustrating different variations of the Octocat just for fun because I just loved the brand so much. So I said, said yes and, um, and ticked it wrong. We happen to have a brand that a lot of developers love. Kind of a happy accident. Uh, the Octocat, which is our mascot, was picked from a, a stock illustration website and put on our 404 page, and people kinda fell in love with it. We hired our first brand designer I think in 2011, and they designed this amazing 404 page that really tapped into the developer mindset. It had a Star Wars theme and said, "This isn't the page you're looking for," um, with an Octocat that looked like a Jedi. That just tapped into nerd culture, and it met the moment well. So I think, like, good design is about meeting the moment. I think it's, uh, about great experiences. What makes a great experience can be quite different for different types of users. But yeah, I think it's about meeting that moment, making a great experience, deciding how you value the role of design in your company and whether it is gonna be that differentiator for you in having a successful product. As a designer, you more or less have to use the same tools that engineers do. So being comfortable with code, being comfortable with working with new technologies is going to give you a leg up in terms of designing for AI experiences.

4. 7:17 – 8:20

   EO Partner Highlight

   1. EHEO Studio Host7:19

      As a founder, you already know ideas are the easy part. It's the execution, actually building the product, that slows everything down. That's where Lovable comes in. It's not just an AI tool, it's your on-demand engineering team. Simply describe your idea. Lovable then builds a full front-end, back-end, and database so you can launch real production-ready software without writing code. It's already powering over 100,000 new products a day, helping 2.5 million builders turn ideas into software just by describing what they want. No devs, no delays, no excuses. They're launching in weeks, not months. And guess what? These teams are still tiny. In fact, Team EO is also using Lovable to build our upcoming EO School platform, and we're loving it. If you're a non-technical founder or just want to build without bottlenecks, try Lovable today for free. Use the promo code EO20YT to get 20% off your first purchase of the Lovable Pro plan.

   2. DMDiana Mounter8:19

      [instrumental music]

5. 8:20 – 12:07

   How GitHub's Dark Mode Was Born

   1. DMDiana Mounter8:21

      The most memorable project for me was with shipping Dark Mode. It was memorable because of many reasons. One, it had been something that customers had been asking for for quite a long time. You kind of felt a little bit of pressure about that. You're like, "Oh my gosh, we gotta get this right." The other thing was that unlike some of our other features, we had to keep it behind closed doors. There's many features where we try to loop in at least a, a few customers to get feedback before we ship a thing. And in this case, we wanted to do a big reveal. It was our big annual conference. This was in 2020. And so we also had to find other ways to get that right without getting direct feedback from customers. That was a little bit difficult because people have a lot of nuanced preferences, even in something like Dark Mode theme on a website. And so what we did is we looked for signals from how people had already made their own themes. There was, like, Google plugins and other repos on GitHub that let people customize their user styles and override the GitHub styles to have, like, a, a dark theme. We noticed that the... One was that variation, so some people like very close to pure black dark theme, and some people liked more of a, a lower contrast dimmed theme. And so what we tried to do with the ship is ship something that we thought would look great because we knew this was gonna be, like, getting a lot of attention, and we also wanted it to be, you know, user-friendly for the variations of types of Dark Mode that people like. And so what we went with is what we ended up calling like a default Dark Mode that was fairly dark, but finding that balance between not being so high-contrast that it was too much for some people and kind of finding that middle ground. It was a really challenging project in terms of trying to find what was right for our customers and felt right for the product experience without getting that direct feedback, so it meant taking a bit of a bet on which sort of style or theme we would go with. And it also meant being prepared to fast-follow. So we built the system in a way that we knew we could add other things, like kind of once you add one you can kind of add multiple. It was a bit of a scary moment to launch that, and we'll be like, "Do people like it?" Years, uh, after that, the default dark theme was still the most popular theme. I think that is a signal that we, we kinda got that right. Seeing something like 20% of people using that dimmed theme, we knew it was the right thing to do, that that affects, like, a lot of people still, and it was right to be able to offer that other, other variation. So I think focusing on outcomes, not output, is the key thing. And so when you're beginning a project, you should be clear on what are the outcomes you're hoping to seek. For me, delivering good results is that we've delivered a great end user experience, that it's solving problems for the customer, it's making something better about how they work, um, it's enabling them to do something that they maybe couldn't before. And I think another signal is that you feel proud of what you've shipped. You feel like not only does it solve a problem, but that it also looks good and feels good to use, that it represents our brand well. Those are the signals I look for is, like, rather than just shipping a thing, did it actually solve a problem for someone? Did it actually make a difference and improve the customer experience? And does it feel like it represents, um, GitHub well? Does it represent our brand well?

6. 12:07 – 15:08

   Constraints Spark Creativity: Insights from Shaping Primer

   1. DMDiana Mounter12:07

      Primer, which is GitHub's design system. Design system is essentially codifying patterns that can be used to design UI. It also acts as a language that is shared by designers and developers. And so having both a language and a shared understanding is really valuable and often improves that working relationship as well as improving the end result. And looking at their CSS and their front-end code, I remember thinking, "Huh, this could be improved." What was in Primer wasn't representing the full product, and so I just started poking around, starting to suggest some improvements to the CSS. And I found that there was quite a few other people at GitHub that also wanted to work on Primer and improve the front-end code. And so we started this kind of grassroots team. So we just started to look for opportunities for improvement, divvy up the work, and keep moving things forward. What we tried to do was find things that would have the highest impact, which would be around, like, what would address the biggest pain points. Because the thing is, is when you are introducing changes to something like a design system or, or introducing one for the first time, what you're doing is, is kind of creating these rules that people have to follow, and people will not always react to that in the most positive way. People have... There are many different ways that you can design a single component, and there's many different ways that you could write the code for that, and people have different preferences and opinions. And so what you wanna do is try and win some friends and make it easier for them to use the design system than not to. If the design and engineering teams are spending less time on recreating the same interaction pattern, they can spend more time on bigger problems and the overall experience. A lot of people question and struggle with how to work with design systems and enable creativity, and sometimes you get people pushing back and rebelling against the system because they think that it's stopping them being creative. I think it's actually constraints can lead to creativity. So if you are starting to create an illustration, for example, and we want to convey something that feels exciting and kind of communicates this is where the world builds software, right? There are a lot of things to think about in, in what that illustration needs to be. You don't necessarily need to start from scratch on picking those colors. Like, if you're an artist, you have your, your paints ready at hand, right, to work with. You can still find ways for creativity to come out of those constraints. Sometimes those changes in the system, those updates in the system can inspire other product designers to think a little bit differently about how they're designing that particular user experience.

7. 15:08 – 16:55

   Don't Be a Designer Who Only Designs

   1. DMDiana Mounter15:09

      [gentle music] If you're a designer or getting into design in the age of AI, you wanna be curious. Embrace the technology. Uh, I think working in tech as a whole is a place where you really need to embrace change. New technologies come out all the time. There's just sometimes some bigger steps, some bigger moments like we're having right now, and you should embrace that. That's part of the fun of working in tech, is that there's something new to learn, some new possibility for solving a problem, some new way to create a solution, and right now it's generative AI. So designers getting, you know, thinking, "Oh my gosh, what does this mean for me?" I think, one, remember that a lot of the core skills of a designer remain. They're still needed. So building empathy for the customer experience, being good at storytelling and communicating idea, and being creative and knowing how to get from a blank page or an ambiguous problem to something that is a great solution. That I think is gonna be, be pretty important, especially right now. We're really at the forefront of evolving this technology. It's pretty hard to really design a great experience without getting really close to it, because you need to try and, like, navigate people through that complexity, trying not to let the complexity that's behind the scenes kind of fall out onto the user interface. So it'll be in- interesting to see how the tooling influences the role of design in the future. [gentle music]

Episode duration: 16:56