Hillary for America started with a tweet, made history, and ended in heartbreak.
I was the first engineer hired, and for 18 months, was the design systems and accessibility lead for the 2016 Democratic Nominee for President of the United States.
Project Offline
Client
In-House
When
June 2015 - November 2016
Role(s)
- Development
- Design
Collaborators
- Victor Ng, Lead Designer
⚓️ TL;DR
I don't think Mina's value to the campaign could be overstated. She worked on or supported more projects and across teams than anyone else.
Working on Secretary Clinton’s historic 2016 campaign was one of the greatest privileges of my life. Though it didn't turn out they way I (and many others) would have liked, I'm extremely proud of the work I did.
⚓️ Pantsuit
Pantsuit was Hillary Clinton's design system and was used in dozens of applications by more than 100 engineers and designers.
I was charged with establishing a reusable system that could be used to quickly spin-up new projects based on the campaigns needs. In doing so, I quickly took on roles from product management, UX/UI design, and frontend engineering.
When I joined Hillary for America, the tech team was non-existent. The website was built by a team of contractors working under a tight deadline. Because of that, a ton of code debt and design inconsistency had already been built into her online presence. This made it difficult to create new projects with any cohesion. While it's an understandable position to be for a campaign in its infancy, it soon had to be addressed.
As the sole engineer on this project, I:
- Led standardization of CSS architecture and standards across products and agile teams
- Collaborated with visual and product design teams to ensure UI consistency
- Created all new UI elements from scratch in HTML and CSS/Sass
- Refactored old UI elements for modularity and to comply with coding standards
- Wrote a living style guide with reusable code that was both understandable and accessible for engineers
➳ You can read more about Pantsuit here.
Pantsuit was hands down the best tool we had at our disposal on the campaign.
Pantsuit may be just one project, but it supported the entire tech team, and we'd have been in a bad place without it. It wasn't just a nice to have, it was a necessity.
Really impressive work. She really didn't have the chance to bounce ideas off anyone, which made the accomplishment even more impressive.
The most important project at the campaign -> “Pantsuit: The Hillary Clinton UI pattern library” by @MinaMarkham https://t.co/2xIaIUKdEk
— Cheston ⛔️ (@Cheston) August 31, 2016
The Pantsuit writeup makes such a strong point that its more efficient to think code through in the beginning: https://t.co/khr5OqgFb2
— Rachel Schallom Lobdell (@rschallom) September 1, 2016
.@MinaMarkham is a goddamn american hero and she named hilz's design system PANTSUIT. https://t.co/1Qi8n3ezPS
— caroline sinders (@carolinesinders) August 31, 2016
A fascinating look at the Clinton campaign’s web design system, with a hat-tip to @lullabot’s accessibility audit! https://t.co/OarmwUJJpZ
— Lullabot (@lullabot) September 1, 2016
OH MY GOD @HillaryClinton WEB TEAM RELEASED THEIR PATTERN LIBRARY AND IT'S CALLED PANTSUIT. https://t.co/DDrpxuFhvo Awesome, @MinaMarkham!
— Brad Frost (@brad_frost) August 31, 2016
Absolutely love @MinaMarkham’s deep dive into “Pantsuit,” the pattern library used by @HFA: https://t.co/rRQ3d5KUbc
— Responsive Design (@RWD) August 31, 2016
Meet Pantsuit, @HillaryClinton's online design system created by @MinaMarkham https://t.co/zFfF3yfesG pic.twitter.com/Fpbdz1ApF4
— Michael Bierut (@michaelbierut) September 3, 2016
the work of the brilliant @MinaMarkham, the very first engineer to accept an offer to join #hfatech https://t.co/8BJs0dNALy
— twephanie (@twephanie) August 31, 2016
.@HillaryClinton's UI is codenamed "Pantsuit"—life is wonderful https://t.co/iLM1zj6xB9
— Co.Design (@FastCoDesign) August 31, 2016
Hillary's campaign has become so entangled with the pantsuit that her design team named their style guide after it: https://t.co/DoB9GW31Y3
— WIRED (@WIRED) September 2, 2016
⚓️ Accessibility
I served as accessibility lead for hillaryclinton.com. In this capacity, I researched and complied recommendations to ensure adherence to the Web Content Accessibility Guidelines 2.0.
Pantsuit was crucial in ensuring accessibility across our digital products. This included standardizing colors and sizes that offered appropriate contrast for people with low vision, providing keyboard-only page navigation, and tagging content for accurate screen reading.
In addition, I enlisted a team of volunteers and supporters with various disabilities to conduct usability studies for our apps. This provided much needed insights into areas for improvement.
⚓️ Storytelling
As a member of the CMS/Storytelling team, I helped create content-driven products and interactive experiences to educate the public on Secretary Clinton's vision for America.
In this role, I:
- Implemented initial templates and UI for the re-launch of hillaryclinton.com
- Developed internal content management features to allow content creators flexibility and creativity
- Built various microsites aimed at voter persuasion and understanding the impact of campaign policy
Microsites
The Briefing: a dedicated site for oppositional and rapid response content.
College Calculator: allowed users to calculate how much money you will save under Hillary Clinton’s college plan.
With Her Because: featured POTUS, FLOTUS and VPOTUS making the case for Hillary Clinton
Together for America: showcased Republican and Independent leaders who have stepped forward to support Hillary Clinton
⚓️ Press
- The Key to Clinton’s Identity Online? It’s Pantsuit for WIRED
- Hillary’s Campaign Named Its UI "Pantsuit," Perfectly for Fast Co.Design
- Making Web Accessibility Great Again: Auditing the US Presidential Candidates Websites for Accessibility for Lullabot
- Clinton’s college calculator puts a fine point on her higher education plan for Washington Post
- Calculating Savings Under Clinton's College Plan for US News
- Clinton's College Cost Calculator for Inside Higher Ed