Styling Hilary: 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.

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!