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.
Working on Pantsuit was kinda like an 18 month nationally televised hackathon. During that period Mina did an extraordinary amount of things, but most of all had the time of her life.
How do you get that job anyway?! It started with a vague and mysterious email which Mina ignored, but they followed up and she got the job. The tech team ended up being pretty big, by election day there were about 80 people.
Brief: We need a Bootstrap. And it needs a good name.
Naming things is hard! They built…
- pattern library – the library of UI patterns
- framework – the frontend code that codified the patterns
- style guide – how to put the patterns together
- design system is all of the above and more
Pantsuit? Mina thought no no it’s funny but she couldn’t possibly really name it Pantsuit… but people loved the name.
When time is short, why spend the time to build a system?
hillaryclinton.com was an umbrella for multiple projects handled by different teams; with different code bases. But they needed to share a single UI so people didn’t know that when they were using it.
There were many stakeholders, but the “Pantsuit team” was just Mina. Luckily there was a lot of buy-in very quickly.
It was immediately obvious that done is better than perfect. Pantsuit 1.0 was built in about 6 weeks. Technical debt becomes your “friend”. You have to just accept it to get things out quickly. There was no real need for maintainability, stability was much more important. At the end of the campaign the code was going to go away. Mina learned to let it go.
Before starting Pantsuit she started with analysis of the existing CSS (the number of selectors, colours, etc), did a UI audit (the various buttons, etc)… and used this to help brief the stakeholders. There wasn’t a big need to secure buy-in but that’s how Mina would do it… even though it seemed to kind of break her design director to see it all!
She used cut up printouts as part of this process, in part because the analogue artefacts seemed to help the more visual thinkers on the team. This was organised into groups of elements that were then turned into abstracted UI kit designs, with generic versions that could be used widely. There was a lot of dogfooding and “pixel engineering” sessions designing in-browser.
The changes would sometimes originate in the UI Kit, sometimes in the Framework, sometimes right in the site.
The last part of the process was testing and iterating. She had a page called The Closet which had one of every single element, just to see how they looked outside of context. Then there were in-context tests. Used WAVE to test accessibility; plus manual testing of things like keyboard accessibility.
How did she do it herself? She didn’t really do it alone! She collaborated with various people, particularly as the project went on and more people wanted input. There was a “Pantsuit Council” that brought people together, with Mina overseeing it to provide consistency.
Documention was the next piece. It was really important for people to be able to consume Pantsuit easily. It included details on how to consume the assets (download, NPM, CDN); how to contribute to the code; starter kits to design and build things with it. It became a source of inspiration for people working on the apps.
Mina automated as much as possible. There was a Slackbot to tell people when a new version of Pantsuit was released. Everything was versioned and notifications were based on pushing git tags with new versions.
What was the outcome?
When you work on a project for a very famous person, a lot people start talking about you!
What was really important was the feedback from her team mates. They felt Pantsuit helped them build things as fast and efficiently as possible. But it was particularly nice to get positive feedback from Hillary herself.
Unfortunately Mina also got a lot of extremely nasty attention from horrible people on the internet. Mina tried to go with “haters gonna hate” but some of these people were planning direct attacks. Main moral of the story is that Reddit is a wasteland. Mina posted a joke on her LinkedIn that she had spent the past year fighting fascism. It was a joke but this went on to show that Twitter is a wasteland. Ultimately every part of the internet eventually showed itself to be a wasteland.
There were attack ads that tried to emulate the style of Pantsuit. This is one of the reasons Pantsuit was not open sourced. Even without the source and full details being easily available, people were able to reproduce the style with a high level of fidelity. You can’t truly hide web code.
The main take away Mina truly wants to give though is that in truth she felt loved, trusted and respected while working on the campaign.
Working on a campaign is tiring and hard. People tend to lose contact with friends while it’s going on. There are a lot of long hours and booze. There were a lot of Oreos, lots of junk food, lots of cakes baked.
She met former presidents.
She saw the web URL on the side of the campaign plane.
She showed hillaryclinton.com to Hillary herself.
Even after it was over, with the result people hadn’t hoped for… they found the local children had chalked messages of thanks outside their office. She remembers messages of support on walls in NYC. The last time Mina saw Hillary, Hillary spent all her time consoling the staff who had run the campaign and giving messages of hope.
Was it worth it? HILL YES!
(bouncy digital music) – Hello, how’s everybody doing? Good? Alright, last talk of the conference.
I will hopefully keep this engaging and fun for you. I am gonna talk to you today about my time working for Hillary Clinton.
Now, the title of this talk is Styling Hillary, but I actually could have very easily have given it a different title, such as Trying (and failing) to Save the Republic with CSS, or my personal favourite, The Longest 18 Months of My Life OMG! A quick word of caution: this talk may contain politics. I actually try to avoid talking about politics in public whenever possible, but given the nature of my job, it tends to creep up on me.
Second disclaimer: I love questions, and I want you to ask me them, but again, given the sensitivity of some of the things I did I may not be able to give you answers.
That’s not to discourage you from asking me questions, just know if I don’t answer it, there’s a reason for that. So hello, my name’s Mina.
You can reach me and my website’s there, my Twitter handle is my name, Mina Markham, pretty easy to find me.
As John said, I currently work at Slack, and I love it. But I am going to talk to you today about the 18 months I spent working at Hillary for America, which is Secretary Hillary CLinton’s presidential campaign. Now, during this talk, I’m gonna make a couple of assumptions.
The first one is that you’ve heard of Hillary Clinton. Has anyone here not heard of Hillary Clinton? Okay. (laughs) And the second one is that you have read or perused the blog post I wrote about Pantsuit, the design system I built there.
That goes into a lot of detail about certain aspects, so I’m not gonna touch on it in this talk.
So if you haven’t read it, go ahead and give it a read. I think it’s pretty good, if I say so myself. Working on a tech team for a presidential campaign can be classified as an 18-month long, nationally-televised hackathon.
Kinda do everything very fast-paced, and everything’s very much MVP, just kinda like shipping is paramount.
Now, during my time there, I did a lot of things. I broke the homepage of hillaryclinton.com during one of her biggest speeches.
That was a horrifying story that I’ll tell you privately if you wanna hear about it.
I also helped launch a site for oppositional content, mainly focused on the Orange One.
I built a design system for dozens of applications, I helped lead the effort for accessibility compliance, I helped redesign and implement a redesign of hillaryclinton.com, and more importantly, I had the time of my life. Now, given my short time with you I’m only gonna focus on a couple of those things, mainly the design system that I helped build, the implementation of the redesign, and I hope by the end you will understand why I had the time of my life. You’re probably wondering how on Earth did I get this job? Well, the whole thing started with an email. Okay, I know there’s probably a few people in the audience who are thinking of a joke.
I’ve heard them all, they’re not funny, we’re gonna move on.
The email I got was pretty vague, saying something along the lines of, “Do you wanna come join us “to work for this social good thing, “and if you talk to me on the phone “I’ll tell you more about it.” I ignored the email because that was really weird and vague. Luckily, after she followed up and I actually did talk on the phone I was able to figure out what it is they were asking me to do, and after about a month of various interviews and vetting I was offered the job about five days after she officially announced that she was running. I didn’t actually get to the campaign and took office until about a month later, cuz I had just started a job at IBM in Austin, so I had to quit my job, break my lease on my apartment, sell my car, effectively blow up my life to go do this incredible journey.
When I got to the campaign the tech team was about four or five people. I was actually the first engineer that they hired, but again, because I had to move across country I was about fourth in the office.
Here’s the tech team as it existed in June of 2015, the very first picture we all took, and on election day here is the tech team.
This actually isn’t all of us, some of us were out in the various states doing field work, but the HQ staff, this was it on election day. So the story of Pantsuit starts with Kyle Rush, the then-director of Frontend coming to me and saying, “We need a Bootstrap.” Now, what he meant by that was we needed a pattern library or a CSS framework to help us build things more efficiently.
“Okay, well what pattern library? “I thought you said you built the design system.” I did, I built both of those things.
Naming things is hard, so I’m gonna go over a couple of terms that I often use just to let you know exactly what I mean by certain things. First is a pattern library, which is effectively a UI kit or a sketch kit for designers to use to actually build out individual patterns.
A framework is the front-end code, CSS code that is built from those patterns.
The style guide is a documentation on how to use both of those things, and a design system is basically all of the above and then some.
This is probably my favourite diagram for what a design system is.
It kinda gives you an idea of all the various things that a design system can encompass.
Things like branding guidelines, voice and tone, content strategy, design assets. The Pantsuit design system only included a handful of those things.
It included everything from the dev standards, the documentation, the UI kit, some visual design language, and the style guide. It did not include anything to do with voice and tone, or content that was handled by a completely separate team on the campaign. So Kyle said to me, “We need a bootstrap, “but it also needs a really good name.” And in hindsight, the name Pantsuit actually seems like the perfect idea, but I will tell you that I was thoroughly unconvinced when I came up with it.
This is about what I looked like when the idea hit me. It’s like, “Oh that’s a good idea.
“No, no I really can’t do that.
“Wait no, that’s a good idea.
“No, I probably really shouldn’t call it that.” It wasn’t until I’d honestly gotten to a room full of men who I gave this idea to where they told me that it was brilliant that I actually believed it.
Given the limited time and resources available, why did we decide to spend our time building this thing? Well, the tech team was responsible for hillaryclinton.com and everything under that umbrella.
hillaryclinton.com actually was a collection of dozens, if not hundreds, of micro-sites and web apps all served under one domain.
And the purpose of our organisation, which I’ll tell you about a little bit later, but the purpose of why we structured it that way was so that each individual team could move on their own pace and move independently of each other and that we could just rip out code as quickly as possible without having to hold each other up.
So hillaryclinton.com, the main site, the homepage of it was handled by the team that I was embedded upon, the content team, or the storytelling team. We handled all the pages that were purely driven by content. That included the homepage, the bio page, policy pages, the blog, pages that were about specific states.
Anything that was very heavily influenced by content and needed rapid iteration and rapid response, that was handled by my team.
Anything under /donate or /forms or sign up, that was handled by our fundraising team, and again, separate team, different process, different workflow.
They handled pretty much anything that was directly involved in gathering information to get donations from people.
Stuff like /calls was handled by a different team, the voter team, who handled everything that was meant for the end voter to use, something like iwillvote.com which actually is still up and running.
Something like literallytrump, which was a fact-checker that allowed you to put in any kind of term you want, search for a term, and it would return actual quotes with sourcing for what, again, the Orange One had said about that particular thing.
And lastly, something like The Briefing, which was a content-driven site, but a completely separate code base.
I give these examples to basically say that we had all of these code bases and all of these different workflows and individual teams that operated independent of each other, but we needed them all to have one consistent UI so that the end voter, the end person looking at the site would not know that they were going from app to app to app. So Pantsuit had a lot of stakeholders.
The tech team had about eight different Agile teams and about six of them were direct stakeholders of Pantsuit. That would be the content team, the one that I was embedded in, the fundraising team, organising team, voter team, engagement team, and also more internal teams like the data infrastructure team and the analytics team who used them to build internal dashboards to sort of monitor and analyse data.
My various partners building Pantsuit would be the design team, both the visual designers who were embedded on a completely separate team, the digital team, and the product designers who were actually a part of the tech team.
And the port that I got for various infrastructure needs were both the front-end ops, who did all the build systems and helped build the system that compiled all the SAS and the CSS and the dev ops who put up a S3 bucket so that I had a place to serve both my documentation, but also the compiled in-version CSS.
But the Pantsuit team itself was just me.
I acted as sort of the gatekeeper.
What did she say? It was like the unicorn overlord of design systems, that would’ve been me on Pantsuit.
I pretty much worked alone on most of it, and I tried my best to not be a blockade or a bottleneck for my teammates.
I’ll tell you how I avoided that particular process a little bit later.
But given that I was one person trying to serve about 80 people with this one particular product, I learned one valuable lesson above everything else, which is that done is so much better than perfect. Given the pace of working on a presidential campaign, and given the deadlines that we had, our deadlines were not defined by us, by product managers or by the engineers or by tech team, they were defined by the government, by when the election date was, or when a convention date was.
They were very much defined by things that were outside of our control, and they were completely immutable.
So if we didn’t ship anything on time, we might as well not have worked on it at all. So shipping on time and shipping fast became paramount. Evidence of that is the first version of Pantsuit that I built, I had to build it in about six weeks, which really was still way too much time that I spent on this thing.
Now, six weeks in the grand scheme of things is not a lot of time at all, but in campaign time, that was like three months or something.
I built this by, actually I’ll tell you how I built it later, but what I learned in building something this fast was that technical debt becomes your friend. I couldn’t worry a lot about making sure that everything was perfectly the way I wanted, that the code was perfectly structured and maintained, because if I spent more than the allotted time I was given, then I might as well have not done anything at all cuz it would be useless to the people I was trying to help. So I ended up doing some things that didn’t always make me feel good about myself, and kinda made me feel a little dirty every once in a while, like this horrendous example that I felt unclean doing. That’s not to say that we became careless with code or I became careless with code, it was more that I ruthlessly prioritised things that needed to get done.
So I prioritised the ship date over everything else. Working on something like a presidential campaign that has a very definite end date, you understand that after a while, the need for maintainability goes down where the need for stability of your code goes up. We couldn’t have anything breaking or malfunctioning or any weird regressions around election day, so we prioritised making sure things were more stable towards the end than making sure things were maintainable because frankly, after election day the code base was going to disappear anyway.
Overall, I would say the lesson I learned from all this is that if you don’t have any technical debt, you’re probably not moving fast enough, if shipping fast is what your goal is.
I really just had to learn to let things go after a while and just keep it moving and go on.
How on Earth did I do something like this this fast? The first version of Pantsuit was actually a 1:1 UI parity of the existing site.
I was given the task of completely rewriting all of our CSS code base, but visually changing nothing. The reason for that was that we were gonna start doing a lot of AB testing on the site and they wanted a clean code base to start from, but didn’t want the initial test to be influenced by any inadvertent UI changes I had made.
So I had to make sure that I completely rewrote everything, but I didn’t visually change anything.
So the first thing I did was I examined the existing code base to see where the biggest debt lied and where the biggest opportunity for re-factoring existed. I did that by going to CSS Stats and StyleStats to look at the compiled CSS file to see what was there. I used that in conjunction with a visual or UI inventory where I literally went through every single page of the site and I screenshotted examples of various different types of components I saw, things like the various different types of navigation structures, the various different kind of buttons, or “button soup” I believe someone said earlier. The various different kinds of headings that existed and the typography that existed.
I did this to give me an idea of how much work needed to be done.
Thankfully, I didn’t have to get a lot of buy-in from the higher-ups, cuz this project was presented to me from the director of front-end, but I did have a sit-down meeting with the director of front-end and the director of design, where I showed them these findings and I also did a performance audit of it, and I showed them all these findings of it and said, “Here is the current state of the world, “the state of the UI, so to speak, “and here’s my plan to attack it.” And I feel like if I didn’t already have the buy-in before that meeting, I would’ve definitely gotten it after that meeting. I presented a lot of quantitative evidence as to why what I was working on was necessary. For the second version of Pantsuit, given that I was able to work with the designer on a redesign, I took a more analogue approach.
I took his mock-ups that he gave me and I printed them out and literally cut them up into pieces that helped me identify where some of the patterns and objects lied. And I like doing this analogue process because for one it gets me away from the computer, but two, it helps people who are less technically-inclined to sort of see how a design, or how a screen, can start becoming a system by letting them play around with the pieces and sort of start to identify patterns on their own. The process I took for implementing the second version of Pantsuit in conjunction with the redesign looked a little bit like this: I started by defining the components or redefining if necessary.
I implemented them inside of the product, I tested them both inside the product and out of the product, and I iterated on them as necessary.
Now, the first step was defining, and that would look something like this: I took this example of the homepage, and I started looking at it to see, “Okay, where do I find patterns “that seem to repeat themselves?” And I identified a few patterns here.
This is probably not the best example, it doesn’t give you a lot of detail, so let’s try a different example.
These are various different types of interfaces that I had on the redesigned site, and I would stare at this and see, “Okay, where do I see the repeating patterns?” And after a while, patterns would start to emerge for me, and I would start to categorise the different components and the different UI patterns that I would see, and from there I would give that to the designer, and he would turn that into a sketch file or a UI kit that the designers could then use.
The implementation part of it looked a little bit like this: The term dogfooding comes to mind, where I was very much consuming and building on my product at the same time as the redesign.
It was a very incestuous process, if you will. Really just meant that I did a lot of things in a browser, I did a lot of things live, and right next to the UI designer.
It would look a little bit like this: Sometimes I would start with the framework, I would build the components inside the framework themselves, import that file into the product, which in this case was a redesigned site, look at it, and then if necessary make tweaks, and then the tweaks would make their way back into the UI kit and then back into the framework.
Or sometimes the designer would come to me with a change, it would start in the UI kit, I would then put it into the product to test it, and then put it back into the framework.
It was a circular, kind of incestuous type dirty process of things would start in one place and eventually populate into all the other areas it needed to get to.
Oh by the way, when I was developing hillaryclinton.com on my personal machine, it didn’t necessarily look like this, per se, it really looked more like that.
I decided that if I was gonna stare at this site all day every day for months on end I’d make it fun for myself, and so I put everything to do with Beyonce on every page. It really made my day a lot better.
The last part of this cycle would be the testing and iterating part of it. One thing I did was I created a separate page in the documentation where I isolated all of the components, and I put them all on one page, a kitchen sink or a closet, as I called it, so I could see how they operated in isolation from everything else.
I was already doing lots of live testing in the context of the product itself, but I wanted to make sure things also worked outside of that particular use case and outside of that particular context, so I created a separate page so I can test them all individually, outside of the context they were living in. Another thing I did was, of course, I did a lot of accessibility testing.
This site was literally meant for every available American, so I wanted to make sure that every American could use it as best as possible.
So a lot of my process included manual and automated accessibility testing, like this tool from WAVE that I was using to help me identify any structural problems I was seeing. But also I did manual testing where I did keyboard accessibility testing to make sure that not only could you access everything you needed to via keyboard, but also you were able to see where your focus was as you were using the keyboard.
If you look at this gif, you’ll see that the focus state has a thick, white outline around the elements. This was actually the first version of the accessibility testing that I did.
I did it without talking to the designer or the product person, I just knew I needed there to be a visible state for focusing.
So I added one, and I added one that seemed pretty obvious to me to meet the requirement, and the designer didn’t love it, but he understood why it was necessary, so didn’t really challenge me on it.
The product officer hated it, and really wanted me to change it.
So the final version of it was a little more subtle. In my opinion, it was a little too subtle for low-vision users, it kinda had a lighter, white-dotted outline, but that was sort of the give-and-take that would happen through this testing and iteration process where I would implement what requirement that I thought needed to be there, and then I would have to iterate on it after I got lots of feedback from various different people. So how did I do this whole thing by myself? Well the reality is, I didn’t really do all of it by myself. I asked for a lot of collaboration whenever possible. Those sessions that I had with the UI designer, we ended up calling those pixel-engineering sessions, mainly because the idea of a pixel-pushing session gave me a very visceral reaction, and I hated that term. So we started calling it pixel-engineering sessions, mostly to appease my ego, but also because I felt that it was more accurate of what I was doing. Out of those sessions, something that I called the Pantsuit Council was formed, whereas a group of people who had a vested interest in the design system ended up getting together and meeting once a week, once a week or twice a week, depending on how often I was updating it, to talk about what was necessary for the project, and what they wanted to see, any feedback that they had. And that group of people looked a little bit like this. There was me, again, the unicorn overlord, gatekeeper of all things Pantsuit, but also representatives from the major stakeholders, like the content management team, the organising team, the fundraising team, and those representatives were either designers, or engineers, or sometimes, ideally, both of those people represented in this meeting, and we would sit down and talk about what they were working on, and how they were using Pantsuit, and whether or not it served the needs that they had. If it didn’t, I would ask them anything, what I needed to do, what they wanted to see added to it.
If they were working on something they found particularly cool and they thought other people could use it, we would then debate whether or not that particular feature they were working on should be added to the larger library, and if there were any kind of functional or infrastructure changes needed to happen, dev ops and front-end ops were invited to that meeting as needed.
Another way I tried to mitigate the fact that I was one person trying to serve many and I didn’t wanna be a bottleneck, was I documented everything I could think of. The documentation site, which unfortunately is not open-source, and I’ll tell you why it’s not open-source later, it looked a little bit like this.
Every release of Pantsuit had a version number, so I would first tell them what version that this documentation was referencing.
I would tell them how to consume the various, the various different types of ways to consume Pantsuit, whether it be CDN, a manual process, or as NPM module, I documented the various different ways you can use the grid system, the various different types of grids that existed, the various different types of components that existed. These were all live examples, they were all responsive, so you can see exactly how they would live in the browser. Also I documented all of the SAS logic that I used to create some of these things in case something, they needed something that didn’t exist, they can see how I created certain parts of it and use that to help them build what they needed to get done.
I also documented all the visual brand guidelines for the designers to use, the various colour palettes and typographic settings and things like that.
And lastly I was noticing that there were certain types of layouts that were being used more often than not.
So I ended up putting up a page of quick starter-kit templates for people to get started really quickly just to save them even that much little time. And what I noticed at the end of this was that the documentation, it served its purpose as a how-to guide, but it also ended up being a source of inspiration for the engineers.
I was noticing that people started going to look at the way I was doing things in the examples and the documentation to help them figure out how to plan out their interface, which was a use case and a scenario that never occurred to me until then.
And the last thing that I did to help mitigate that it was just me and I didn’t wanna bottleneck anyone was, I automated what I could.
We love Slack, I love Slack, really I do cuz I work there now, and I used Slack to help me with a little bit of this. What I did was I created a Slack bot that would announce whenever I published a new version of Pantsuit, and it would announce not only that a version was published, but what the version number was, with a link to the release notes, and it would link to the documentation so that people could easily see what the new stuff was and decide whether or not they wanted their team to upgrade to the latest version.
You’ll notice that Pantsuit was actually an opt-in thing, it wasn’t like I push a change, everybody gets it simultaneously.
That was conscious decision, because of the way our team was structured we had people who were doing their own release cycles, their own release dates, their own workflows, and so I didn’t want to insert myself into that process without knowing everything else they were working on. So we left it up to the leaders of these individual teams to decide when and if they updated to the latest version of Pantsuit.
So this was the best way that I could think of to alert people without being too intrusive. And I set that up by doing an integration setting on our Slack team where I told it which channel to post to and I got the json url where I then would put this file, the post-publish file, in our repo, and whenever I would publish a new file, it would then ping that url with the json payload that you will see here, and that would then trigger the Slack bot to show up in the app.
I mentioned that there was three different ways that you could consume Pantsuit.
They were a CDN, which was triggered by just me publishing on a particular branch and that would push the complied end-version CSS up to a folder on S3.
Every version was available via S3 because I would never know which version which team was on at any given moment.
It also hosted the documentation on an S3 server. And the people who used this version, mostly were the team that didn’t have a front-end build process.
So teams that were mainly composed of back-end engineers or who were doing more internal applications, they would use the compiled CSS files.
The NPM module was actually the most popular way people consumed it, and that meant that they just included it in their package .json and then imported the main Pantsuit file into their own individual apps SAS file, and then would build on top of that.
The last way, and the way that I actually envisioned people using it was the manual process where they would download the SAS file, pick and choose the individual model they needed, and leave the rest.
I preferred that way because no one ever needs the entirety of the library, they usually only need the grid system and maybe some buttons and things like that. So I didn’t want the library itself to be a heavy payload on the apps, and it had performance implications of whether or not, like, how big that file was. But for various different reasons, mainly for the ease of use, people ended up using the NPM module version most of all. Now, the outcome of having Pantsuit used in those very different ways meant that it was very easy for all of these styles to be cached and served across various different types of applications pretty easily and without a lot of effort on the engineer’s part. What was the outcome of all of this? A very strange thing happens when you work on something like this for someone as well-known as Hillary Clinton, is that a lot of people start talking about you. And it’s usually a good thing.
I saw a lot of people talking about (mumbles) Twitter account, Wired magazine interviewed me, Fast Company, things like that.
A lot of people saying really cool things about it, and you’d get invited to come down to Australia to talk about it.
It’s a pretty cool thing.
But what I really cared about was what the engineers who had to use it every day thought. And the feedback I got was it helped them do their job much quicker and more efficiently than any other tool that they had. And that is what I cared about.
My job was to make their jobs easier, and as long as I accomplished that goal, everything else was just kinda icing on the cake. Sometimes it was really good icing on the cake, cuz occasionally I would get a message from someone who works with Secretary Clinton saying how much she enjoys and likes the view of the new site, and y’know, you get something like that and your ego kind like, yeah.
I usually couldn’t respond to anyone after I got a message like that.
Like I said, when you work for someone like Hillary Clinton, you get talked about a lot, and people notice you. But it isn’t always a good thing.
Sometimes the people who start noticing you are people you wish didn’t know you existed. I don’t know if it was a woman thing or a Clinton thing or a black thing, but the level of vitriol that I started to see once I became a more visible person associated with the campaign was something that I did not anticipate.
And I tried to adopt a more haters-gonna-hate attitude about this and not let it affect my work, but it’s really hard to ignore when people are talking directly about you specifically and about, “Maybe we should try to hack her “because she might be a good way “to get into Hillary’s system.
“We can bring the site down “if we bring her stuff down as well.” I ended up getting alerted to this particular thread by our security engineer.
He was monitoring for any references to any of our names and my name popped up, and so he asked me to keep an eye out and be vigilant in case anything weird happened with any of my accounts, or my bank accounts, or really anything to do with me. That was a little scary, I won’t lie, and it’s really, really something that I didn’t think I would have to deal with just for doing my job, but every once in a while I would see something that just made me feel like these people aren’t very smart. Sometimes they would say something like, “I don’t think that she coded this thing,” and I don’t know why.
Again, I’m assuming it’s because I’m a woman, but I find it ironic that the exact example that they used to say “There’s no way she possibly could have coded that,” was the exact thing I ended up coding on the site. So occasionally I just had to shake my head and was like, “You know what, these people are idiots.” And my point is that Reddit is a wasteland. But it doesn’t stop there.
Even after the campaign was over, after the election, whenever I would do anything that got any kind of visibility like this tweet that I thought was pretty funny, I said that I updated my LinkedIn with “I help fight fascism in the US and you should hire me.” And even then I got a lot of random responses from people who just felt the need to tell me exactly what they thought of me. The ironic thing about this particular comment was that at that exact moment, both my mentions and inbox were full of people trying to hire me.
So like, really? (laughs) So yeah, Twitter, also a wasteland.
But even when I do something that’s not really controversial just kinda fun, Cosmopolitan magazine interviewed me and a bunch of my other staffers about what our lives were like back in January, and about what we were doing and what kind of things we were looking forward to, and it was used by one other conference to help promote my appearance there, and even then people felt the need to tell me how I shouldn’t be visible and how I should just disappear because I offend them by existing or something. It’s exhausting.
It’s really, really exhausting, and Facebook also a wasteland, but really it’s just the internet is a wasteland. Now, while the outside world would try to make me and my co-workers feel bad, and working for Hillary Clinton feel like a bad thing, I just wanna say, if you take nothing else away from this talk, I want you to know that my experience there was one of the best experiences of my life. I’d never felt more loved, more respected, more trusted and appreciated than I did working in that room with those people. So when I start to see people throw things at me like this, where they assume that I’m a novice or whatever, I try to do as our former first lady, Michelle Obama says, and when they go low, we go high.
But y’know, sometimes I just can’t really control myself. That’s like my favourite gif ever.
I’m just gonna stare at it for a second.
Alright, the last thing I wanna talk to you about is a little bit about this concept of fake news and how it affected the work that I did.
Sometimes people like to write articles about the work that we were doing, about the tech team, about the campaign in general, and it would be astonishing how much they got it just completely wrong.
Like this article that suggested that we used GreenHouse, our recruiting software, as a CMS. I don’t even know how that would be possible. Just no, no, very very wrong.
But sometimes, a lot of the time, the fake news was not just bizarre and incorrect, it was actually pretty insidious.
Around the week before the election happened, there was this social media campaign about encouraging Hillary supporters to text their vote for Hillary, or vote via social media.
I don’t know how much you all know about American elections and American politics, but you can’t actually vote via text or social media. They were lying to people in an attempt to suppress their vote and to get them to think that they voted when they really didn’t.
The did this by attempting to copy some legitimate ads that we did, these were some ads that we did on social media to encourage people to text us for things like contests or information about rallies in their area. And people did a bunch of really poor imitations of those particular ads that started circulating around the internet. Luckily, they got shut down pretty quickly, but that brings me to my last point about Pantsuit which is why I never open-sourced it.
I was actually going to open-source it when I wrote the Pantsuit blog post, but right towards the end I was told I couldn’t do it because people would use it against us, and people were already trying to do that, they were trying to download our official fonts and use our official colours to create things like those fake advertisements and things that are a little bit more dangerous like this vote for Hillary online site that looks very similar, basically identical to the real thing, and this is just by stealing our CSS file and having enough knowledge to be dangerous with some markup.
So I can’t imagine what might’ve happened if I actually open-sourced Pantsuit and gave them the tools and instructions on how to build a Hillary-branded web application. I get asked this question a lot.
Given how everything ended, and given everything that I went through, “Was it worth it? “Would you do it again?” Working on a campaign takes a lot out of you physically, mentally, emotionally, you start to lose touch with your friends and family. There was a running joke where anybody would mention having a friend off of the campaign, we’d be like, “You still have friends?” And I remember a lot from my time on the campaign, but there are a couple of things that stand out in my mind more than anything else.
I remember Winnie, our office therapy dog and unofficial mascot. She was the dog of one of our security engineers who showed up at the office one day and we all loved her so much we let her come back every single day for the entirety of the campaign.
She lifted our spirits, she was such a chill dog, and I really miss her very, very much.
She became kinda famous in her own right, had magazine articles written about her, she was in the official app that we had as a cute little illustration extra.
Winnie became a celebrity, it was kinda cool. I remember a lot of booze.
This particular set-up happened after our Supreme Court ruled in favour of marriage equality.
The office shut down for a day and we got a bunch of champagne and we cheered at the direction that our country was going. I remember a lot of Oreos, and really just a lot of food that was around. I made cakes, this was a cake I made on the Fourth of July cuz I thought it was fun.
I made pies, and more pies, and more cakes. I really, really liked baking cakes for people. Even a fried chicken cake.
A quick aside about the fried chicken cake: I made that for a co-worker of mine who was getting married.
He loved fried chicken, so I decided it would be kinda fun if I made a fried chicken wedding cake for him. I remember meeting former presidents.
Former president Bill Clinton.
I remember seeing the url of a site that I made on the side of a plane.
I remember probably the most surreal moment of my life was when I demoed the newly-redesigned hillaryclinton.com to Hillary Clinton herself.
During that interaction, for one, she’s sitting on my desk, which I thought was really cool, but also she was very engaged, and when I was explaining things to her, and at the end of it she said something along the lines of, “I don’t really understand a lot of what you do, “but I thank you so much for doing it.” And even after it was over, I remember leaving the office the next day and seeing a bunch of kids out on the sidewalk drawing messages of thank you and encouragements and support for all of the staff members who were inside. Someone sent out a Slack message saying, “Everyone come outside right now.” And I came outside and I found this scene of the sidewalk covered with all of these messages and these little kids, mainly little girls, writing around messages saying “Thank you” and “We love you” and it was definitely needed the day after the election.
I remember the people of New York putting up some, I guess subway monument in messages of both gratitude and thank you and resistance in one of the subway stations.
And I remember the last time I saw Hillary Clinton which was about three days after what, arguably, was the worst night of her life, and she spent her entire time consoling us, her staff, and her volunteers, and telling us that things would be okay and that we should keep fighting.
And she told us a wonderful story about what she thinks about when it’s time to overcome something.
And she gave us all a letter and roses which are both framed on my desk back in California, a thank-you letter and a rose that I dried and framed. Yeah, she gave us those things and took care of us as opposed to thinking about her own feelings. So when I think about my time on the campaign, I think about mostly joy and laughter and friendship and a lifelong bond I’ll have with these several hundred people who took this huge risk and tried to accomplish something amazing.
So when people ask me, “Where were you during election 2016? “What was that time like, and what were you doing?” I can say that I was right there in the middle of everything.
No seriously, I was right there in the middle of it. So when people ask me, “Was the whole thing worth it?” I simply pause and say, “Hill yes!” Thank you.
(applause) (bouncy digital music)