#btconf Berlin, Germany 06 - 08 Nov 2017

Mina Markham

Mina Markham is a front-end architect, conference speaker and organizer and lover of design systems. She writes code for a living, currently for the Growth Marketing team at Slack.

Previously a senior engineer at Hillary for America, her work on the Pantsuit pattern library has been spotlighted in WIRED, Fast Company, and Communication Arts.

A prolific public speaker, Mina has appeared at events worldwide, including CSS Dev Conf, Fluent, and Future of Web Design. In addition, she’s the co-organizer of Front Porch, a front-end conference which prides itself on showcasing and fostering new speakers.

Mina likes ampersands, Oreos, traveling, cupcakes, and the color pink. When she's not crafting sites or teaching others, she is probably in her kitchen baking something chocolatey. Mina graduated cum laude from Syracuse University with a dual major in Graphic Arts from the S.I. Newhouse School of Public Communications and Women’s Studies. She lives in Oakland, California.

Want to watch this video on Vimeo directly? This way, please.

Styling Hillary – A Design System for all Americans

A comprehensive design system is a critical tool for maintaining a consistent UI during rapid development that spans multiple codebases.

During the 2016 US presidential campaign, Mina spent most of her time building and refining Pantsuit, the design system that powered many of the applications hosted on hillaryclinton.com.

In this talk, Mina will share successes and failures from nearly two years at Hillary for America, including creating CSS architecture and implementing a redesign of the main website.

Transcription

[Music]

Audience: [Applause]

Mina Markham: Hello! I’m really excited to be here. This is my first time not just at this conference, but in Berlin and in Germany, so thank you very much for welcoming me.

I am going to talk to you today about the job that I had around this time last year, which, I don’t know if you’ve heard of this woman, Hillary Clinton.

Audience: [Laughter]

Mina: [Laughter] I was on her campaign, and I want to talk to you about the work that I did for about two years. I call this talk, “Styling Hillary,” but I pretty easily could have called it “Trying (and failing) to save the US with CSS.”

Audience: [Laughter]

Mina: Or my personal favorite to call it is “The longest 18 months of my life OMG!” which is a very accurate statement.

Just a brief word of caution. This talk may contain politics, U.S. politics to be more precise, and it may induce feelings: good feelings, bad feelings. You can tell me later, but you’ll probably feel something.

Another disclaimer is that, given the nature of my work, who I worked for, the scrutiny around it, there are certain topics I can’t talk about in public. So, if you ask me a question and I don’t give you an answer, it’s probably because I can’t tell you. I’m not being cagy; it’s just, you know, reasons.

Hi, my name is Mina. You can find me online. Mina.codes is my website. @MinaMarkham is my Twitter handle.

I currently work at Slack and, of course, come meet my coworkers at the party, at the get-together tonight. But, I do not work on Slack, the product. So, any of your bug reports, feature requests, I am not your girl.

Audience: [Laughter]

Mina: I work on Slack.com, the marketing website that just underwent a really big redesign, realignment, everything. I wrote about it. So, if you want to read more about how we build the new Slack.com, the URL is on the slide behind me. [RebuildingSlack.com]

To start, I’m going to talk to you about the job I had directly before Slack, which was working for Hillary for America, Hillary Clinton’s campaign to be the 45th President of the United States. Spoiler alert: It did not work. [Laughter]

I’m going to make a couple of assumptions about this talk. First is that you have heard of Hillary Clinton. The second is that you have read the blog post I wrote about Pantsuit, which was a design system that I made for her. It goes into some more of the technical details about how I made this particular project and things I won’t get into in the talk. If you want to go a little bit more in-depth, that’s a good thing to read.

Working on a presidential campaign, working on the tech team for a presidential campaign has kind of been described as “An 18-month, nationally televised hackathon,” which is one of the most accurate statements I probably could say. It has all the intensity and chaos of a hackathon, except it never ends and everyone is watching you. [Laughter]

During that time, I did a lot of things on the campaign.

  • The first thing is I broke the homepage of HillaryClinton.com. That was a very bad day for me.
  • I helped launch a site of oppositional content.
  • I built a design system that was used by approximately 60 applications.
  • I led the effort for not accessibility compliance, but inclusive design. Sorry, Robin.
  • I also helped build a new CMS.
  • But, more importantly, I had the time of my life.

Because I have 45 minutes, I’m going to talk about a few of those things. I’ll explain to you how I broke the homepage. I will talk about the design system, implementing the redesign and, hopefully, at the end of it, you’ll know what I mean when I say I had the time of my life.

The very first question I get about this is, how on earth do you get a job like this? Well, this journey started, innocuously enough, with an email.

Probably, at this point, there are a few people in the audience who are thinking of an email joke right about now. I have heard of all of them. They are not funny. We are moving on. [Laughter]

The email that I got was pretty vague. It said something along the lines of, “We want you to come work for us to help with this social good cause that can be used by millions and millions of people.” I did what any person, any tech person who gets an unsolicited email like this is that I ignored it. [Laughter]

About a week later, I followed up, and we had a conversation. They told me who it was for, what they were trying to do and, after about a month of going back and forth with interviewing and, five days after she officially announced she was running for president, I got my offer letter. I was the very first engineer that was hired on the campaign, so it was a really kind of big deal to actually start building up this tech team.

When I arrived at the campaign headquarters, the tech team looked like this: less than a dozen people; the CTO, Stephanie Hannon, who is directly in front of me in this photo; a couple of managers, and a couple of front-end and back-end engineers. That’s it; that was our tech team. Around this time last year, Election Day, this is what the tech team looked like: about 70 to 80 people, including engineers, product designers, and product managers.

The story of Pantsuits starts with Kyle Rush, the director of front-end and later the deputy CTO, coming to me and saying, “We need a bootstrap.” What he meant by that was we need a pattern library or a framework of some sort so that our engineers can build applications pretty quickly.

“Okay, wait? What? Pattern library? I thought you made a design system.” I did. I made all of these things. Basically, naming things is hard. [Laughter]

I’m going to give you just a really quick overview of what I mean by certain terms.

  • A pattern library is a library of UI patterns, a library of actual components that are specific parts of the UI.
  • A framework is the front-end code that makes up those UI patterns.
  • A style guide is a documentation for both the framework and the pattern library.
  • A design system is all these things and then some.

This is one of my favorite diagrams of kind of like what a design system can look like for an organization. It includes everything from processes to voice and tone standards to branding standards, visual language, documentation, a style guide, and dev and coding standards. The design system for Pantsuit included a few of those things. It didn’t touch brand guidelines or voice and tone. That was a separate thing. It focused mainly on the UI kit, the framework, and the development standards.

He said that we need a bootstrap, but it also needs a really good name. Yeah, Pantsuit. Why would I call it Pantsuit? I’m actually wearing a pantsuit right now. It seems appropriate.

I called it Pantsuit because Hillary Clinton is very much known for wearing pantsuits, and it felt like just the most appropriate name for it, but I wasn’t really convinced. When I thought about it, I was like, No! I can’t call it that. No, actually, I probably could call it that. No, I really, really shouldn’t call it that. It was a kind of back and forth in my head.

It wasn’t until I talked to the director of front-end, when I told him, “Okay, maybe we should call it Pantsuit,” he was like, “That is brilliant! Of course, we’re calling it that!” Everyone was on board from that moment on.

Why did we need this? What did we decide that? We had 18 months to build everything we were going to build, so why did we decide to make this one of our very first projects?

To understand that, you need to understand what I mean when I say HillaryClinton.com. It was actually comprised of dozens of different applications, dozens of different repos, and was built by approximately seven different agile teams. The homepage of HillaryClinton.com was built by the team that I was on, the CMS or storytelling team, and it handled pretty everything that was content driven or news driven.

Rapid response is what we were called. It handled everything from the homepage to her biography pages, pages for issues, the blog, and -- I’m missing something. Pretty much anything that was driven by content and had a rapidly changing UI to it.

Next was the donate or donations platform. Anything that was /donate or /signup, anything that collected either money or information from potential voters was handled by a separate team, a separate repo, a separate build process.

The same with /calls, our call tool that people could use to call potential voters to help encourage them to get out to vote: different teams, different repo, different process.

College-calculator, the same thing.

Something called literallytrump, where you can search a word and it will tell you actual posts that Donald Trump had said about certain things. Again, a different team, different repo, different process.

My point is that we had all of these multiple code bases, but we all needed to share a single UI.

The stakeholders for Pantsuit, it was about seven of them, seven different agile teams with both internally and externally facing applications.

  • The content or storytelling team, the team that I was actually working on.
  • The fundraising team or organizing team, which built things for our field organizers.
  • The voter team, which built things for the end-user or our voters.
  • The engagement team, which built stuff like literallytrump, like fun things to get people excited about the campaign.
  • Our internal teams like data infrastructure and analytics needed to use it to build internal dashboards, to track data, and things like that.
  • My partners with Pantsuit where the visual design team and the product design team who helped me actually build up the visual language. The support I had for Pantsuit where the front-end ops team or the dev-ops team who would help me with either the build process I had or finding an S3 bucket for me to host certain things on.
  • The actual Pantsuit team itself was just me. I was pretty much the only person who worked on this project, not even full time. It wasn’t my only thing I was doing. I was doing this in addition to other things I was doing.

The one thing I learned by being one person attempting to support an entire staff of, like, actually 80 people was that “done” is so much better than “perfect.” I couldn’t let myself get held up on trying to make things perfect and right the very first time. I had to get them out the door.

We were on very tight deadlines that were set externally by people not associated with the campaign like debate days, TV appearances, conference days, or election days, things that were immovable. If we didn’t ship our projects on time, then we might as well not have shipped them at all.

I built the very first version of Pantsuit in about six weeks. That includes completely redoing all of the codebases, going through and doing an inventory of the UI to kind of see where I could find these wins, and documenting and building out a documentation site, which doesn’t seem like a lot of time, but actually seems like a really long time in campaign years. What I learned from doing this is that technical debt really becomes your friend. Along with going with the idea of done is better than perfect, you have to kind of get over your need to be perfect and just get it done.

I ended up doing some things that didn’t really make me really proud. [Laughter] I would do importance and throw things around. Not a lot, but every once in a while. I’m just like, I feel very unclean. I’m sorry about all of this.

The reason I would do this is because, for this particular project, as time went on, the need for maintainability of the code base went down and the need for stability went up. We were working; everything had an end goal, an end date, so I knew, after a certain point, this code base wouldn’t be used anymore. As the time went on, we were getting more and more concerned with making sure we didn’t break anything and less concerned with making sure it was maintainable and scalable.

The lesson here is that if you’re in a high-pressure environment where deadlines are really hard and immovable, and you don’t have any technical debt, then you’re probably not moving fast enough. Basically, you have to learn to do what Elsa does and just let it go. [Laughter]

Audience: [Laughter]

Mina: How did I do this? How did I build not one, but two of these systems in about 18 months? My process looked a little bit like this. First, I would start with defining the components. I would then implement them, test them, iterate them and, if necessary, redefine and kind of start the cycle over again.

The definition cycle starts with me going through the existing code base and doing an audit of all of our CSS styles to see where I could find the wins and where the technical debt existed that I could kind of clean up. From there, I did a UI inventory of all of the different types of patterns I saw, like navigation, button patterns, headings, and things of that nature. I collected all of this data, and I sat down with the director of design and the director of front-end. I showed them my findings.

They were already onboard with this project, so I didn’t have to convince them. But, if I did, this would have been how I would have done it. I was pretty convincing because at some point I looked over at the design director and she is almost in tears. She’s like, “Oh, my God! This is what we have to do? This is how bad everything this?” She was not particularly happy with the current state of the UI.

Then the front-end director told me, “Yeah, definitely go ahead and do this, but make sure, as you’re cleaning all the styles up, don’t change anything. Don’t change anything visually. Just do a code cleanup,” which, as you can see, everything was very inconsistent visually. He told me, “Do clean up of the code, but don’t change anything visually,” so then I started crying. I’m like, “Why?”

Audience: [Laughter]

Mina: [Laughter] “Why can I not fix all of this?” The reason was we were doing A/B testing and optimization on the site, and he wanted a clean start code-base-wise, but he didn’t want any visual changes to skew the results. That was life.

The second time I did Pantsuit was when we did the complete redesign of the website. I was able to start from scratch, which was great. When I did this, I used the designs that I’d got from our designer. I literally printed them out, cut them up, and tried to identify the patterns that way. I like this analog approach better because it was very easy for other people outside the process to see what I was doing, like the product designers and the product managers. Even the people who were outside the tech process were able to kind of get a better idea of what it took to find the repeatable patterns in a layout. Doing the analog approach was definitely a lot more accessible for people outside of the process.

That process looked a little bit like this. I would take a screen. This is the homepage, an example homepage. I would look at it and say, “Okay. Where can I find similar patterns?” If you look at this, you’ll see there is this image with a block of text underneath it that’s kind of repeated in several places, and there’s a button style with little, rounded corners repeated. That’s a couple of different patterns that I can see that I would be able to extract into a modular component.

This isn’t the best example because it was a little bit simplistic, so here’s a different example of different pages of different layouts all across the site. I look at this to see, okay, where are some of the more repeatable patterns? After a while of staring at this, you start to see certain patterns emerge where you can start categorizing different UI patterns in that sense.

From there, after I was able to work with our designers who categorized and to define these components, he would then take them and build them out into an actual UI kit that the design team can use. It would include all the different form elements, the different button styles, typography, the different messaging, error messages, and things of that nature. He would take the analog work that we did and then translate that into a sketch file that designers could use.

From there, I would implement these patterns. That involved a lot of dogfooding.

Audience: [Laughter]

Mina: I love this gif because this poor dog is just trying to eat and this rooster is just, like, really in the way.

Audience: [Laughter]

Mina: Anyway, what that means is that I would do a lot of things live in the browser. I would start with the framework inside. I would install the framework into our redesign, like repo. I would in the framework folder inside of the repo inside of the product folder, and I would test things live in the browser. Based on the findings, I would either commit it to the framework and publish it, or we might go back to the UI kit and do some tweaks if it wasn’t quite working live in the browser and in context.

Sometimes a new pattern with start with the designer in the UI kit. I would then move it to the framework and then move it to the product or vice versa. It was kind of weird. It’s not quite as clean as this. It wasn’t quite a circular process. Sometimes it was just a diagonal process. Wherever was the starting point would go, I would have to make sure I populated it in all three of these sections.

By the way, when I was developing HillaryClinton.com on my local machine, it didn’t look like the normal site that everyone else saw. I made mine a little bit more fun. I populated it with lots of Beyonce content because I stared at this thing for 12 to 14 hours a day for 6 months straight. I decided to make it fun.

Audience: [Laughter]

Mina: From there, I did lots of testing and iterating. I made this one page that included all of the different patterns that the Pantsuit system had, and I put all the patterns on one page so that I can test them outside of the page context. I could test them in isolation of the surrounding layout to make sure they still worked on their own. It was also a good way to do, like, a spot-check whenever we would make any changes to the design system just to kind of see that we didn’t cause any inadvertent regressions.

I also did lots of testing to make sure that the site was accessible to people with using screen readers or keyboard only users or low vision or blind users. I used ways to make sure that all of our content made sense semantically so that a screen reader user would not have a subpar experience. I also did lots of testing for keyboard accessibility to make sure that keyboard only users were able to access all the different points that they need to be able to access and that there was also a visual change when they were tabbing through so that they would know where they were at all times.

If you look at this gif, you’ll see that all of the lengths have this really thick, white border that I attached to them. I did this without the input of a design or a product team because I need to make sure that people could see where they were when they were clicking through. The designer was okay with it. He didn’t like it, but he knew the reason behind it. Our chief product officer, he hated it. He hated that thick, white outline. She thought it looked very ugly.

The compromise we made was I made it a much thinner, dotted white outline, which isn’t great for people with low contrast or low vision or colorblind users, but it still was a visual cue if you were tabbing through to know where you were. It was a good compromise. In my opinion, it kind of lessons accessibility just a little bit, but it’s neither here nor there.

How did I do this whole thing by myself? The truth is that I didn’t really do it by myself. There was a lot of collaboration in the process. I ended up forming this thing I called the Pantsuit Council. What that Pantsuit Council consisted of was me and Victor, our lead designer. We were kind of the technical and design leads, respectively, for Pantsuit. Then all of our stakeholders, a representative from each stakeholder team, would meet once a week, sometimes twice a week, to just kind of see the state of the system, state of the UI, as we called it.

I would ask all the product designers what they were working on at the moment and if they thought anything they were doing should be added to the system. Then vice versa, Victor and I would tell people, “Here are the changes we made to the system. Do you see any problems with it, or do you see if it’s going to affect your workflow?” It was a great way to kind of make sure we were always on the same page and kind of a nice way for me to kind of get some feedback from the people who were using this thing that I built to make sure it was still working for them.

The next thing I did to make sure that I was always communicating with my users was, I documented a lot. I documented everything I could. The documentation site was hosted internally only. It included documentation first on how to get started using Pantsuit. When we onboard new designers or new engineers, they had a place to go to learn about this tool and how to use it.

I also documented the grid system that I built, the different components that existed. I documented also the SAS logic that went behind some of the components I built. Just in case they couldn’t find something that they needed, they knew how they could start building their own component. I documented some of the brand guidelines, which really meant I documented all the color values and color variables that existed, how to use them, and in which context to use them in. Lastly, I created these starter templates that included some kind of barebones layout for the header and the footer, and things like that, to give people a nice, clean starting point to jumpstart their new project.

This had a result that I wasn’t quite anticipating. I got a lot of engineers telling me that they went to this Pantsuit documentation not just to learn how to use something, but also as a source of inspiration. If they were kind of stuck on a problem, they would start looking at that to see what already existed. It would help them to start building out a new thing that didn’t exist, which I thought was a really cool function that I wasn’t quite anticipating.

Lastly, one way that I made sure that I was communicating with people was I automated what I could. What that meant for me was I used Slack a lot. It makes sense because now I work at Slack.

I did a Pantsuit bot, which, whenever I published a new version of the system, it would automatically ping our channel in Slack, letting people know there’s a new version of Pantsuit that exists. Here’s the version number. Here are the release notes for that version number, and here’s the link to the documentation so that you can find out more about how to use this particular part of it. That way I didn’t have to constantly ring the bell to tell everybody, “Hey, there’s a new component,” or whatever. It happened automatically for me.

How I did that was I used a Slack WebHook to send a JSON payload to that WebHook. Whenever I hit NPM publish, it would automatically then ping that JSON payload to the Slack client and that message would pop up. I said that I was using NPM publish. There were three different ways that people could consume the Pantsuit system.

  • One was a CDN, which, when I would push a commit to our repo, it would compile the CSS and push that to an S3 bucket. It would version all of the different CSS files. That way people who didn’t have a front-end build system like our back-end team or our internal only analytics team, they could just grab the compiled CSS and use it at will.
  • Most people used it via NPM module. They would install it into their own project and then compile it with their front-end build process.
  • The donations team actually just downloaded the raw SAS files and took the SAS parts that they needed and left the rest out.

What I learned from here is that you don’t have to try to focus on one way to consume your system. Everyone has a different process of working in that environment. My job was just to make sure that they had access to the system as they need it, so I started supporting various different ways to consume it just to make sure that I kind of got out of people’s way.

The result from that is that a lot of people really loved using Pantsuit because it made their jobs much, much easier, and they could very easily deploy new changes without having to go through a lot of effort. That made me happy because it meant that I was doing my job right.

The outcome of all of this was a lot of people really liked the work that I did, and not just inside the campaign. When I published the medium blog post talking about Pantsuit, all of a sudden people outside of the campaign, and people outside of tech even, started talking about it. I really think it’s because I called it Pantsuit. I think if I called it something else, people wouldn’t care as much. But, I guess naming things is important.

I got a lot of interest from, like, Wired Magazine and Fast Company, and people interviewing me, talking about design system, which I thought was really strange and really wonderful. What I really cared about was what the people inside of the campaign thought, what the engineers thought because they had to use this thing day in and day out. It was overwhelmingly a positive response because they said that it made setting up a new application, in the crazy deadline-driven world we had, so much easier to go ahead and start, set it up, and not have to worry about whether or not their UI matched the Hillary brand. Again, it made me feel like I did my job properly.

It also didn’t hurt that Hillary Clinton herself tended to like the things that we were doing. Every once in a while we would get a ping from one of your aids saying, “Hey, she just saw the new website. She really enjoys it. Kudos to everyone involved.”

Sometimes she would tell reporters, “Oh, my God! I love my college calculator,” the thing I actually built, which was like, okay, she’s talking about this random tech project I did to a reporter saying how much she enjoys it. She enjoyed it so much that sometimes she would have the team project the website on a monitor behind her at rallies, which is a very strange thing to do.

Audience: [Laughter]

Mina: But, it just made me feel really, really happy and proud. I’m like, “Oh, my God! She really, really likes it.” Yeah, that just made me feel like, okay, I am doing my job in a way that is appreciated by people all around.

When you’re working on a site or a project that is highly visible, as the Hillary Clinton campaign, you get the good attention, but you also can get the bad attention. One thing that I learned from Hillary herself is that you need to learn how to take criticism seriously, but not personally. I got a lot of criticism. Sometimes it wasn’t directed at me personally, but sometimes it was.

The very first thing I told you is that I broke the homepage of HillaryClinton.com. I did that my second week on the job. This was the day, the day in my mind that will live in infamy. It was June 13, 2015.

Audience: [Laughter]

Mina: Yes, I remember the day. Or, as I would call it, “The Day I Almost Quit.” [Laughter]

She was doing this really big speech on Roosevelt Island. She had this big H stage, and she was launching her platform, telling people, “This is what I’m going to do when I am president.” I’m back at HQ, as I showed you here. I’m back at HQ working on the new site. We were launching a new homepage. I’m sitting there waiting, watching her talk because we have to deploy it when she starts talking. I’m watching her speech. Then it gets to the point when I need to deploy it.

We deploy the site, and it is broken, visibly broken. The menu on top just doesn’t work. There’s a huge hole where the content should be because the content didn’t load. Everything was terrible.

Then I’m panicking, trying to figure out, okay, what did I do? What did I do? How do I undo it? This is my second week, so I didn’t really know how the process worked. At some point, I’m still listening to her speech trying to debug all this, and then she’s like, “Go to HillaryClinton.com.”

Audience: [Laughter]

Mina: No! No! Don’t go to HillaryClinton.com! [Laughter]

Audience: [Laughter]

Mina: Then, of course, here come the tweets. People were saying, “Oh, there’s a huge hole, and it’s been bug-ridden all day,” and, “It’s clearly in the middle of a reboot. What are they doing?” This guy took particular pleasure in pointing out everything I did wrong.

Audience: [Laughter]

Mina: It was like, okay, they’re looking for digital jobs, but maybe they should fix the website first. This was criticism that was valid because, yes, it was broken, but I started taking it kind of personally because I was the one who did it. He didn’t know this. He wasn’t talking to or about me, but it felt like he was.

If this was the only thing I had to deal with, I would have had a much, much happier time than I did in talking to people on the Internet. When you’re a woman or a person of color on the Internet that’s fairly visible and, particularly when you work for someone as divisive as Hillary Clinton can be, you tend to attract a lot of--for lack of a better word--shit from people on the Internet. After the Pantsuit blog post, I started getting lots of people who were contacting me for good and bad reasons. I didn’t know, for all of the hate that I was getting, if it was because I was a woman or because I was a black person, or because I worked for Hillary Clinton. I didn’t know which part of it was triggering people, but they really didn’t like me for some reason.

I tried to adopt this “Haters Gonna Hate” mentality about it, but it was really hard to do that when people were calling me out directly and personally. There was this campaign on Reddit to figure out a way to hack me, to hack my accounts because they thought that if they got into my accounts, if they hacked into my stuff, then maybe they could bring down Hillary’s website. I didn’t say these people were particularly smart because that was not going to work, which would have ruined my life for no reason, but they were trying.

I got alerted to this by one of our security people. He’s like, “I don’t want to alarm you, but if you see anything funny happening, let me know.” Luckily, nothing ever actually did happen. I don’t know if he shut it down or if they lost interest, but it never really happened. It was still a very scary thing I had to deal with.

Also, people were starting to criticize whether or not I was actually good at my job or if I actually did my job. There was this one comment that was showing the ASCII art and a hiring Easter egg I put in the codebase saying, “If you’re looking at this, you should think about working for us.” Someone used that as an example of, “She couldn’t possibly have written that. They clearly outsourced all of this.”

Is ASCII art really hard or did I miss something? Why would they assume that I couldn’t handle doing something like this? Really, what is wrong with people? [Laughter]

I guess my point is that Reddit is a wasteland.

Audience: [Laughter]

Mina: But it didn’t really stop there. Twitter also wasn’t all that great to me. After the campaign was over, I posted. I updated my LinkedIn saying, “I helped fight fascism in the U.S. You should hire me.” I did it mostly as a joke, and I tweeted it out just because I thought it was funny. I got a lot of people being, like, “No one is going to hire a failed libtard,” which, really, why would that be the first thing you say to me about that?

But, it’s particularly funny because all the other replies in this thread were full of people trying to hire me. It’s just like, if you actually looked at the replies, this thread that you were replying to, you would see how wrong you were. Really, what--?

Audience: [Laughter]

Mina: What is wrong with people?

All right, so this next Tweet that I got, I’m not going to comment on it. You can just read it at your own leisure, but these are some of the meaner things that got said to me.

[Pause]

Mina: Yeah. People are great, aren’t they? My point is that Twitter, also a wasteland.

Audience: [Laughter]

Mina: [Laughter] But, it didn’t really stop there either. January of this year, Cosmopolitan Magazine ended up talking to me and a bunch of other women on the campaign, asking us what our life was like and what we were thinking as we were going into the inauguration. It was a fairly, like, fluffy piece of us saying we’re looking for jobs or writing a book, or we are joining the “resistance,” and all of these different things.

Even then someone was like, “Why don’t these women just--to use his term--get out of the fucking way? They really didn’t want us to exist anymore. It’s like, thank you so much, random man. Your opinion is noted. Nobody asked you.

So, there. Facebook--

Audience: [Laughter]

Mina: --is also a wasteland. But, really just the Internet is a wasteland.

Now, what I learned from all of this is that part of these attacks are meant to crush your spirit. They’re meant to make me feel small and inadequate and to make me go away. But again, keeping in mind of Hillary’s struggle, she refused to go away, and that in turn infuriated people even more. This is why I keep getting up here and telling this story because I’m not going to go away either. Sorry to disappoint you, but I’m still here talking. [Laughter]

Audience: [Applause]

Mina: The outside world tended to make working for Hillary feel kind of bad, but inside of the campaign, the people that I was talking to and working with every day, and Hillary herself, made it feel great. One thing I want people to know, if you take away literally nothing else, is that I never felt more loved, respected, or cared for in a job than I did working for Hillary Clinton for 18 months.

When I get people in my mention saying things like, “Does she only hire novices?” “Where are your credentials?” and, you know, “Who are you, and why are you doing all this?” I try to do what former First Lady Michelle Obama says, and I try to go high when they go low, but sometimes I really can’t help myself.

Audience: [Laughter and applause]

Mina: One last thing I had to deal with that I didn’t anticipate was the prevalence of fake news and misinformation. You wouldn’t think that it would affect a CSS, like a design system engineer, but it did in a lot of surprising ways. One thing that people tended to write about is our tech stack, write about the technology we’re using in the campaign. It was so shocking how much and how many times they got it all completely wrong. This article was saying that we used Greenhouse, which is a recruiting software, as the CMS to power the site, which no we didn’t. I don’t even know how that’s possible.

Audience: [Laughter]

Mina: But the fact is that someone decided for whatever reason that was how we were doing it and publish it up, and people started to believe it. No, that’s not right at all. If that was the end of it, that wouldn’t have been so bad. But, after a while, it started to get a little bit more insidious.

About a week before the election started, there was this string of, like, a social media campaign encouraging people to vote for Hillary online or via text message, via hashtag, or via Twitter or Facebook, which I don’t know how much all of you know about the American electoral system and political system, but that’s a lie. You can’t vote online. You can’t vote via Twitter. You can’t vote via hashtag. None of this was even remotely true. They were just trying to suppress the vote and keep people from actually voting for her by convincing them that they did.

They were doing so using our brand. These are two examples of an actual social media post that we made encouraging people to text the campaign for information, or to enter a contest or something of that nature. But, people started trying to mimic that style to tell people, “You should vote online,” or, “Text ‘Hillary’ to this number to vote for her,” which again was not true.

This brings me to my last point about Pantsuit, which is why I never open sourced it. That’s the exact reason why is that people would attempt to use it against us. They already were trying to to a certain extent. They were trying to download our fonts and our brand colors in order to create these official looking, fake advertisements and fake social media posts.

I was alerted to this because someone higher up in the campaign came to me. He’s like, “Can you hide our font online or can you make these so people can’t download it?” I was like, “Well, I can’t, at least not without making it so none of our websites can do it either.” It wasn’t an easy thing for me to do without breaking the dozens of applications that already existed. He was like, “Okay, well, just so you know, there’s going to be this campaign, this movement to get people to suppress the vote using our brand and using our typography.”

This website here, which looks very, very similar to the official HillaryClinton.com, but was not created by us, was encouraging people to vote online and collecting information from people as if they were voting. Now, what they did with the information, I have no idea. But, this was just with someone who had enough knowledge to link to our CSS file and mimic the UI patterns that existed. I can’t imagine how much damage might have been done if I actually gave them the raw tools to do it.

One of the questions that I always get about my time there was, “Was it worth it?” Particularly given the outcome, given the fact that we lost, was all of this worth it? When you work on something as intense and life-consuming as a presidential campaign, you start to have everything else fall away.

There was this running joke amongst us where people were saying, “I’ve had friends get married and have babies in the time I’ve been here,” or, “I’ve had friends get married and divorced in the time I’ve been here.” My response is, “Wait. You all still have friends? Mine stopped talking to me a long time ago!”

Audience: [Laughter]

Mina: Not because of anything I did. Just because I became slightly unreliable in returning people’s emails, phone calls, texts, and anything. But, when I think about that time, the 18 months I spent at that place in Brooklyn, I think about a lot of things, and they’re mostly good.

I think about Winnie, who was our unofficial official campaign mascot/therapy dog. She ended up being at the campaign every day along with her human, who is pictured there. She became kind of a celebrity in her own right. This photo that I’m showing you was from Time Magazine. It’s not about me; it’s about Winnie. I just happen to be in this photo. [Laughter]

I also remember a lot of booze, a lot, a lot of booze. This was taken when our Supreme Court had passed marriage equality in the U.S., and we were celebrating with champagne.

But, also, just a lot of junk food, a lot of Oreos, a lot of pizza.

Audience: [Gasps]

Mina: That’s not even all of it - a lot of pizza, free chicken. I started baking because I wanted to do something more fun, so I made an American flag cake for the 4th of July. I made a cake for Halloween that was filled with candy corn. I even made a fried chicken cake.

Audience: [Laughter]

Mina: I made this cake for one of my coworkers who was getting married. He loved fried chicken, so I made a fried chicken wedding cake for him. It was fun. People are going ask, so I’ll tell you. The cake is cornbread. The frosting is mashed potatoes sprinkled with gravy and fried chicken on top. [Laughter]

Audience: [Laughter]

Mina: Yeah.

Audience: [Applause]

Mina: But, I remember lots of once-in-a-lifetime experiences like meeting former presidents. President Bill Clinton came by more than once to see how we were all doing and get to know us. He’s a very friendly, charismatic guy.

I remember seeing the URL of the site I’d built on the side of a plane, which will probably never happen to me again.

And, I remember probably the coolest thing I’ve ever done, which was demoing HillaryClinton.com to Hillary Clinton herself. She came to see what the tech team was working on, and I was chosen to show her the new website before it launched. She came over and actually sat. You can see she’s sitting on my desk, which was something I wasn’t expecting. She sat down on my desk and just listened very intently to me. As I was babbling I don’t know what I said to her, but at the end of it -- [Laughter]

Audience: [Laughter]

Mina: --she turned to me. She said, “I don’t really understand a lot of what you do, but I thank you so much for doing it.” [Laughter]

Audience: [Laughter]

Mina: I remember, after the election was over, coming out of the office the next day and seeing a bunch of little kids. They had written, all over the sidewalk, messages of, you know, “Thank you, Hillary,” and, “Thank you to her staff members,” and messages of hope and encouragement in a time when we really, really needed it. I remember walking out of the office and actually bursting into tears when I saw the entire sidewalk was just covered with all these messages. I remember the people of New York erecting this subway Post-It monument, again with messages of thank you, resistance, and hope.

And I remember the last time I saw Hillary Clinton, which was about three days after Election Day, which had to have been one of the worst days of her life, and she spent her entire time consoling us, her staffers and her volunteers, and telling us that we shouldn’t give up; take some time, take care of yourself, but then get right back out there and keep fighting the good fight. That day, she gave us a rose and a thank you letter, both of which are framed and on my desk back home.

Really, the point is, I remember lots of joy, lots of laughter, and lots of fun, and really just a lot of really big enthusiasm.

Hillary Clinton Staffers: I believe that she--!

Hillary Clinton Staffers: I believe that she will--!

Hillary Clinton Staffers: I believe that she will--!

Hillary Clinton Staffers: I believe that she will win!

Hillary Clinton Staffers: I believe that she will win! I believe that she win! I believe that she will win! I believe that she win! I believe that she will win! I believe that she win! I believe that she will win! I believe that she win!

Mina: Lots of people like to write about the so-called lack of enthusiasm for the campaign, but that didn’t seem like a lack of enthusiasm to me.

When I think about that time, I think about this time last year, and people ask me, “Where were you when all this was going down? Where were you during the election of 2016? What were you doing?”

I can say, “You know what? I was right there. I was right there in the middle of it trying to use my skills to change the world, to make the world a better place.” But, no, like seriously, I was right there. If you can look at the picture behind me, I’m right there up and to the left -- or the right. Yeah.

I guess my point is, if you ask me was it all worth it, I could say a very enthusiastic, “Hill Yes!” Thank you.

Audience: [Applause]

Speakers