Transcriptly

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

EO16:57Added Aug 31, 2026

Diana Mounter is the Former Head of Design at GitHub, where she spent nearly nine years shaping one of the most beloved tools in software development. From t...

Watch on YouTube →
Contributed by 刘嘉琪

Transcript

Transcript format

  1. Intro

  2. 00:00I think working in tech as a whole is a
  3. 00:02place where you really need to embrace
  4. 00:04change. New technologies come out all
  5. 00:06the time. There's just sometimes some
  6. 00:08bigger steps and bigger moments like
  7. 00:10we're having right now. So I think good
  8. 00:13design is about meeting the moment as a
  9. 00:16designer. You more or less have to use
  10. 00:18the same tools that engineers do. Idea
  11. 00:21of a great Friday night was building
  12. 00:23something on my laptop. Some of my
  13. 00:25friends would think, "What's wrong with
  14. 00:26you? Why aren't you out like partying?"
  15. 00:28and I was having fun. Something about
  16. 00:30using GitHub and being in the same place
  17. 00:32as engineers just sort of sparked this
  18. 00:35excitement and interest in me. So being
  19. 00:37comfortable with code, being comfortable
  20. 00:40with working with new technologies is
  21. 00:42going to give you a leg up in terms of
  22. 00:45designing for AI experiences. Remember
  23. 00:48that a lot of the core skills of a
  24. 00:50designer remain. They're still needed.
  25. 00:53So building empathy for the customer
  26. 00:56experience, being good at storytelling
  27. 00:59and communicating idea, being creative
  28. 01:02and knowing how to get from a blank page
  29. 01:04or an ambiguous problem to something
  30. 01:07that is a great solution.
  31. 01:12I'm Diana. I am head of design at
  32. 01:14GitHub. GitHub is a tool for building
  33. 01:18software. It supports the whole software
  34. 01:21development life cycle. It's where
  35. 01:23people can collaborate on code, can take
  36. 01:26a an idea into a fullyfledged project.
  37. 01:31So I've been at GitHub for almost 9
  38. 01:33years. In my time there, I have helped
  39. 01:35build out the design system which is
  40. 01:37called Primer, turning that from a kind
  41. 01:40of a CSS framework into a a fullyfledged
  42. 01:43ecosystem of components and tooling. I
  43. 01:47led the team that delivered dark mode in
  44. 01:502020 which was something that people
  45. 01:52really really wanted at the time. We
  46. 01:55work on everything from the onboarding
  47. 01:58to the marketing to the actual product
  48. 02:00experience.

  49. When a Designer Falls for Coding

  50. 02:05When I was younger, I didn't really know
  51. 02:08web design and graphic design could be a
  52. 02:10career. I sort of kind of stumbled
  53. 02:12across it um by doing an apprenticeship
  54. 02:14in a design and print shop and realized
  55. 02:18that that was the perfect sort of type
  56. 02:20of role for me working on the web and
  57. 02:23working even with just like graphic
  58. 02:25design. It was both like a bit technical
  59. 02:27as well as as creative. So kind of the
  60. 02:30perfect marrying of of the things that I
  61. 02:32was interested in.
  62. 02:34When I was in my early 20s, I decided I
  63. 02:38wanted to go and explore more of the
  64. 02:40world. I picked Australia for a couple
  65. 02:42of reasons. One, I wouldn't have to deal
  66. 02:45so much with the language barrier, apart
  67. 02:47from obviously some fun uh slang words
  68. 02:50and um uh different accents. It seemed
  69. 02:52like there were potentially some good
  70. 02:54job opportunities there. Back in the UK,
  71. 02:57there was a bit of a recession really
  72. 02:59starting to happen, particularly in the
  73. 03:01print industry. A lot of people were
  74. 03:03like, "Print is dead. The web's going to
  75. 03:05take over." So, part of my reason for
  76. 03:08choosing Australia was like, maybe I'll
  77. 03:10find a job there. Maybe it'll just be a
  78. 03:13great experience to see another country
  79. 03:15and to kind of test myself a bit and see
  80. 03:18if I could do that on my own. So, I
  81. 03:20bought a one-way ticket and hopped onto
  82. 03:23a plane and kind of never looked back
  83. 03:25really. I was really fortunate to end up
  84. 03:28finding a great job there. A little bit
  85. 03:31later after you know when I was there
  86. 03:32for 7 8 years I started to get more
  87. 03:36interested in texting end up feeling
  88. 03:39like we weren't moving as fast as I
  89. 03:41wanted to working in the the agency that
  90. 03:43I was working in at the time idea of a
  91. 03:46great Friday night was building
  92. 03:48something on my laptop and some of my
  93. 03:50friends would think what's wrong with
  94. 03:52you why aren't you out like partying and
  95. 03:53I was having fun and I felt like I
  96. 03:55wanted to be around more people that
  97. 03:57were interested in technology
  98. 04:00So early on I was introduced to Git and
  99. 04:03GitHub while I was at a hackathon
  100. 04:05competition and the engineers were using
  101. 04:08GitHub and they were like hey you should
  102. 04:10sign up for this cuz you know a bit of
  103. 04:12front-end development and then you can
  104. 04:13be working in the same place that we're
  105. 04:15working in and something about using
  106. 04:18GitHub and being in the same place as
  107. 04:20engineers just sort of sparked this
  108. 04:22excitement and interest in me. So I
  109. 04:25started to put my websites on GitHub. I
  110. 04:28learned things like Jackal, which was
  111. 04:30like a static site generator that GitHub
  112. 04:33made. I think there's something exciting
  113. 04:34about being able to make the thing that
  114. 04:36you have, like the idea of that you have
  115. 04:38in your head and like make it and build
  116. 04:40it and put it out there on the internet
  117. 04:42and other people can use it. There's
  118. 04:44something that feels really great about
  119. 04:45that as compared to just being able to
  120. 04:47make a picture of something. So that
  121. 04:50that just really excited me.

  122. Becoming Head of Design for the Product I Love Most

  123. 04:55what if I work on a product that made
  124. 04:58such a big impact in my life that I use
  125. 05:01every day? And Mark Otto sent me an
  126. 05:03email and said, "Hey, would you be
  127. 05:05interested in GitHub?" Mark Otto was a
  128. 05:08bit of a celebrity to me because he had
  129. 05:10created Bootstrap and if you were
  130. 05:13interested in design systems, you kind
  131. 05:14of knew about Bootstrap. My immediate
  132. 05:16reaction wasn't like, "Oh yeah,
  133. 05:18definitely I want to work here. I would
  134. 05:20like to chat to this person that I think
  135. 05:21has done some great work. And in talking
  136. 05:24with Mark and some other design leaders
  137. 05:26at GitHub, I realized that this was such
  138. 05:30a good fit for me. And then I thought
  139. 05:31about what I had been doing in my career
  140. 05:34and realized that so many signs were
  141. 05:37kind of pointing towards GitHub. And
  142. 05:39aside from the actual product, I had an
  143. 05:42obsession with GitHub's mascot, which is
  144. 05:45the octicat.
  145. 05:47used to like spend late nights just
  146. 05:49illustrating different variations of the
  147. 05:52Opticat just for fun because I just
  148. 05:54loved the brand so much. So I said said
  149. 05:56yes and um and took the wrong. We
  150. 05:59happened to have a brand that a lot of
  151. 06:01developers love. Kind of a happy
  152. 06:03accident. Uh the Octicat, which is our
  153. 06:06mascot, was picked from a a stock
  154. 06:09illustration website and put on our 404
  155. 06:12page and people kind of fell in love
  156. 06:14with it. We hired our first brand
  157. 06:17designer, I think in 2011, and they
  158. 06:19designed this amazing 404 page that
  159. 06:22really tapped into the developer
  160. 06:24mindset. It had a Star Wars theme and
  161. 06:27said, "This isn't the page you're
  162. 06:28looking for." Um, with an octacat that
  163. 06:31looked like a Jedi that just tapped into
  164. 06:33nerd culture and it met the moment well.
  165. 06:36So, I think like good design is about
  166. 06:38meeting the moment. I think it's uh
  167. 06:40about great experiences. what makes a
  168. 06:43great experience can be quite different
  169. 06:45for different types of users. But yeah,
  170. 06:47I think it's about meeting that moment,
  171. 06:49making a great experience, deciding how
  172. 06:52you value the role of design in your
  173. 06:54company and whether it is going to be
  174. 06:56that differentiator for you in having a
  175. 06:59successful product. As a designer, you
  176. 07:01more or less have to use the same tools
  177. 07:03that engineers do. So being comfortable
  178. 07:06with code, being comfortable with
  179. 07:08working with new technologies is going
  180. 07:11to give you a leg up in terms of
  181. 07:13designing for AI experiences.

  182. EO Partner Highlight

  183. 07:18As a founder, you already know ideas are
  184. 07:21the easy part. It's the execution,
  185. 07:24actually building the product, that
  186. 07:25slows everything down. That's where
  187. 07:27Lovable comes in. It's not just an AI
  188. 07:30tool. It's your ondemand engineering
  189. 07:32team. Simply describe your idea. Lovable
  190. 07:35then builds a full frontend, back end,
  191. 07:37and database, so you can launch real
  192. 07:39production ready software without
  193. 07:41writing code. It's already powering over
  194. 07:43a 100,000 new products a day, helping
  195. 07:452.5 million builders turn ideas into
  196. 07:48software just by describing what they
  197. 07:50want. No devs, no delays, no excuses.
  198. 07:54They're launching in weeks, not months.
  199. 07:56And guess what? These teams are still
  200. 07:58tiny. In fact, team EO is also using
  201. 08:01Lovable to build our upcoming EO school
  202. 08:03platform, and we're loving it. If you're
  203. 08:05a non-technical founder or just want to
  204. 08:07build without bottlenecks, try Lovable
  205. 08:09today for free. Use the promo code
  206. 08:12EO2YPT to get 20% off your first
  207. 08:15purchase of the Lovable Pro plan.

  208. How GitHub's Dark Mode Was Born

  209. 08:21The most memorable project for me was
  210. 08:24with shipping dark mode.
  211. 08:26It was memorable because of many
  212. 08:29reasons. One, it had been something that
  213. 08:32customers had been asking for for quite
  214. 08:34a long time. You kind of felt a little
  215. 08:36bit of pressure about that. You're like,
  216. 08:37"Oh my gosh, we got to get this right."
  217. 08:40The other thing was that unlike some of
  218. 08:43our other features, we had to keep it
  219. 08:45behind closed doors. There's many
  220. 08:47features where we try to loop in at
  221. 08:49least a a few customers to get feedback
  222. 08:52before we ship a thing. And in this
  223. 08:55case, we wanted to do a big reveal. It
  224. 08:57was our big annual conference. This was
  225. 08:59in 2020. And so, we also had to find
  226. 09:03other ways to get that right without
  227. 09:05getting direct feedback from customers.
  228. 09:08That was a little bit difficult because
  229. 09:10people have a lot of nuanced preferences
  230. 09:12even in something like dark mo theme on
  231. 09:15a website. And so what we did is we
  232. 09:18looked for signals from how people had
  233. 09:22already made their own themes. There was
  234. 09:24like Google plugins and other repos on
  235. 09:28GitHub that let people customize their
  236. 09:31user styles and override the GitHub
  237. 09:33styles to have like a a dark theme. We
  238. 09:35noticed that the one was that variation.
  239. 09:38So some people like very close to pure
  240. 09:40black dark theme and some people liked
  241. 09:42more of a a lower contrast dimmed theme.
  242. 09:46And so what we tried to do with the ship
  243. 09:48is ship something that we thought would
  244. 09:50look great because we knew this was
  245. 09:52going to be like getting a lot of
  246. 09:54attention. And we also wanted it to be,
  247. 09:56you know, user friendly for the
  248. 09:58variations of types of dark mode that
  249. 10:01people like. And so what we went with is
  250. 10:03what we ended up calling like a default
  251. 10:05dark mode that was fairly dark but
  252. 10:07finding that balance between not being
  253. 10:10so high contrast that it was too much
  254. 10:13for some people and kind of finding that
  255. 10:15middle ground. It was a really
  256. 10:16challenging project in terms of trying
  257. 10:19to find what was right for our customers
  258. 10:22and felt right for the product
  259. 10:24experience without getting that direct
  260. 10:26feedback. So it meant taking a bit of a
  261. 10:28bet on which sort of style of theme we
  262. 10:30would go with and it also meant being
  263. 10:32prepared to fast follow. So we built the
  264. 10:35system in a way that we knew we could
  265. 10:37add other things like kind of once you
  266. 10:39add one you can kind of add multiple. It
  267. 10:42was a bit of a scary moment to launch
  268. 10:44that and we'll be like do people like
  269. 10:46it? Years after that the default dark
  270. 10:49theme was still the most popular theme.
  271. 10:52I think that is a signal that we we kind
  272. 10:54of got that right. seeing something like
  273. 10:5720% of people using that dimmed thing,
  274. 11:00we knew it was the right thing to do
  275. 11:01that that affects like a lot of people
  276. 11:04still and it was right to be able to
  277. 11:06offer that other other variation. So I
  278. 11:08think focusing on outcomes not output is
  279. 11:12the key thing and so when you're
  280. 11:14beginning a project you should be clear
  281. 11:16on what are the outcomes you're hoping
  282. 11:18to seek. For me, delivering good results
  283. 11:21is that we've delivered a great enduser
  284. 11:24experience, that it's solving problems
  285. 11:26for the customer. It's making something
  286. 11:29better about how they work. Um, it's
  287. 11:31enabling them to do something that they
  288. 11:33maybe couldn't before. And I think
  289. 11:35another signal is that you feel proud of
  290. 11:38what you've shipped. You feel like not
  291. 11:41only does it solve a problem, but that
  292. 11:43it also looks good and feels good to
  293. 11:46use, that it represents our brand well.
  294. 11:48Those are the signals I look for is like
  295. 11:50rather than just shipping a thing, did
  296. 11:53it actually solve a problem for someone,
  297. 11:55did it actually make a difference and
  298. 11:57improve the customer experience and does
  299. 11:59it feel like it represents um GitHub
  300. 12:02well? Does it represent our brand? Well,

  301. Constraints Spark Creativity: Insights from Shaping Primer

  302. 12:07primer, which is GitHub's design system,
  303. 12:10design system is essentially codifying
  304. 12:13patterns that can be used to design UI.
  305. 12:16It also acts as a language that is
  306. 12:20shared by designers and developers. And
  307. 12:22so having both a language and a shared
  308. 12:25understanding is really valuable and
  309. 12:28often improves that working relationship
  310. 12:31as well as improving the end result. And
  311. 12:34looking at their CSS and their front-end
  312. 12:36code, I remember thinking, huh, this
  313. 12:39could be improved. What was in primer
  314. 12:41wasn't representing the full product.
  315. 12:44And so I just started poking around
  316. 12:47starting to suggest some improvements to
  317. 12:50the CSS and I found that there was quite
  318. 12:53a few other people at GitHub that also
  319. 12:55wanted to work on primer and improve the
  320. 12:58front-end code. And so we started this
  321. 13:01kind of grassroots team. So we just
  322. 13:03started to look for opportunities for
  323. 13:05improvement, divvy up the work and keep
  324. 13:07moving things forward. What we tried to
  325. 13:09do was find things that would have the
  326. 13:11highest impact which would be around
  327. 13:13like what would address the biggest pain
  328. 13:15points because the thing is is when you
  329. 13:17are introducing changes to something
  330. 13:20like a design system or or introducing
  331. 13:22one for the first time what you're doing
  332. 13:24is is kind of creating these rules that
  333. 13:27people have to follow and people will
  334. 13:30not always react to that in the most
  335. 13:32positive way. people have there are many
  336. 13:35different ways that you can design a
  337. 13:36single component and there's many
  338. 13:38different ways that you could write the
  339. 13:39code for that and people have different
  340. 13:42preferences and opinions and so what you
  341. 13:45want to do is try and win some friends
  342. 13:47and make it easier for them to use the
  343. 13:50design system than not to. If the design
  344. 13:53and engineering teams are spending less
  345. 13:56time on recreating the same interaction
  346. 13:58pattern, they can spend more time on
  347. 14:00bigger problems and the overall
  348. 14:02experience.
  349. 14:04A lot of people question and struggle
  350. 14:06with how to work with design systems and
  351. 14:09enable creativity. And sometimes you get
  352. 14:12people pushing back and rebelling
  353. 14:14against the system because they think
  354. 14:16that it's stopping them being creative.
  355. 14:18I think it's actually constraints can
  356. 14:21lead to creativity. So if you are
  357. 14:24starting to create an illustration for
  358. 14:26example and we want to convey something
  359. 14:30that feels exciting and kind of
  360. 14:32communicates this is where the world
  361. 14:34build software right there are a lot of
  362. 14:36things to think about in in what that
  363. 14:39illustration needs to be. You don't
  364. 14:41necessarily need to start from scratch
  365. 14:43on picking those colors like if you're
  366. 14:45an artist you have your your paints
  367. 14:48ready at hand right to work with. you
  368. 14:50can still find ways for creativity to
  369. 14:52come out of those constraints. Sometimes
  370. 14:55those changes in the system, those
  371. 14:57updates in the system can inspire other
  372. 15:00product designers to think a little bit
  373. 15:02differently about how they're designing
  374. 15:04that particular user experience.
  375. 15:07[Music]

  376. Don't Be a Designer Who Only Designs

  377. 15:10If you're a designer or getting into
  378. 15:13design in the age of AI, you want to be
  379. 15:16curious, embrace the technology. Uh, I
  380. 15:19think working in tech as a whole is a
  381. 15:21place where you really need to embrace
  382. 15:23change. New technologies come out all
  383. 15:25the time. There's just sometimes some
  384. 15:27bigger steps and bigger moments like
  385. 15:29we're having right now. And you should
  386. 15:31embrace that. That's part of the fun of
  387. 15:33working in tech is that there's
  388. 15:36something new to learn, some new
  389. 15:38possibility for solving a problem, some
  390. 15:41new way to create a solution. And right
  391. 15:43now it's generative AI. So designers
  392. 15:46getting, you know, thinking, "Oh my
  393. 15:48gosh, what does this mean for me?" I
  394. 15:50think one, remember that a lot of the
  395. 15:53core skills of a designer remain.
  396. 15:55They're still needed. So building
  397. 15:57empathy for the customer experience,
  398. 16:00being good at storytelling and
  399. 16:02communicating idea and being creative
  400. 16:05and knowing how to get from a blank page
  401. 16:08or an ambiguous problem to something
  402. 16:10that is a great solution. That I think
  403. 16:13is going to be be pretty important.
  404. 16:15Especially right now, we're really at
  405. 16:17the forefront of evolving this
  406. 16:19technology. It's pretty hard to really
  407. 16:21design a great experience without
  408. 16:23getting really close to it because you
  409. 16:25need to try and like navigate people
  410. 16:27through that complexity, trying not to
  411. 16:29let the complexity that's behind the
  412. 16:31scenes kind of fall out onto the user
  413. 16:34interface. So, it'll be interesting to
  414. 16:36see how the tooling influences the role
  415. 16:40of design in the future.
  416. 16:48[Music]