Styling Hillary
A presentation at Front-End Design Conference in in St. Petersburg, FL, USA by Mina Markham
! mina.codes @ minamarkham Hi, I’m Mina " Front-End Design Conference
St. Pete
$
April 26, 2018
%
slack.com
mina.so/slack-post
Styling Hillary A design system for all Americans
Trying (and failing) to save the world with CSS a.k.a.
The longest 18 months of my life OMG! & a.k.a.
⚠ ️
CAUTION MAY CONTAIN POLITICS MAY INDUCE FEELS
mina.so/pantsuit-post
An 18-month , nationally televised hackathon
) Broke the homepage of hillaryclinton.com
Launched a site for oppositional content ❤ ️ Built design system used by dozens of apps , Created a dashboard for caucus data ♿ Led effort for accessibility compliance . Implemented redesign of hillaryclinton.com
/ Helped build a custom CMS for new site 0 ️ Ran tech talk series 1 Had the time of my life
)
Broke the homepage of hillaryclinton.com
Launched a site for oppositional content ❤ ️ Built design system used by dozens of apps , Created a dashboard for caucus data ♿ Led effort for accessibility compliance . Implemented redesign of hillaryclinton.com
/ Helped build a custom CMS for new site 0 ️ Ran tech talk series 1 Had the time of my life
How the hell did you get this job ?
[ insert email joke here ]
June 2015
Election Day
We need a Bootstrap … “ Kyle Rush, Deputy CTO
…and it needs a good name . “ Kyle Rush, Deputy CTO
Why did we need it?
hillaryclinton.com
hillaryclinton.com
hillaryclinton.com/donate
hillaryclinton.com/calls
hillaryclinton.com/college-calculator
hillaryclinton.com/literallytrump
Multiple codebases. One UI.
Partners
. Visual Design 2 Product Design Stakeholders
/ Content / Storytelling 3 Fundraising 4 Organizing ✅ Voter 6 Engagement 7 ️ Data Infrastructure , Analytics Support
8 ️ Front-End Ops 9 Dev Ops
Te a m : :
Done is better than perfect .
If we don’t ship on time , the ship will have sailed. Stephanie Hannon, CTO “
Pantsuit 1.0 ≈ 6 weeks
Te c h n i c a l d e b t i s
your “
friend
”
As time progressed, maintainability went down and stability went up. Ve r y O f f i c i a l C h a r t ™ Ve r y O f f i c i a l C h a r t ™
If you don’t have technical debt , you’re not moving fast enough.
How did you do it?
(Re)Define Implement Iterate Test
Define
;
; ;
BUTTONS INPUTS DROPDOWNS CARDS HIGHLIGHTS HEADLINES PULLQUOTES
Implement
Dogfooding
Do it live!
Framework Product UI Kit
Te s t
& Iterate
How did you do it by yourself ?
Collaboration
Pantsuit Council
9 8 ️ ✅ 3 4 6 / ⭐
=
=
= :
=
=
?
Victor Ng WEB DESIGN LEAD / @VICTOMATO
Documentation
The documentation for Pantsuit is a great example of form following
function : it served as a source of inspiration as well as a how-to. BETH ANDRES-BECK , Senior Engineer, Fundraising “
Automation
❤ ️
post-publish.js
PANTSUIT • Backend Teams • Internal dashboards • Documentation • Most common • Front-end boilerplate • Donations CDN NPM MANUAL npm publish git push download v2.1.0
“ Pantsuit made it so we could deploy style changes to our 100+ microsites
instantaneously and cache styles across all sites easily and consistently . Nat Welch, SRE, Dev Ops
What was the outcome?
Pantsuit turned our tech products into a couture collection – each app individually crafted with unifying motifs that tied them together. It was hands down the best tool
we had at our disposal on the campaign ❤ ️ . KYLE LUCOVSKY , Engineer, Voter Team “
I love my college calculator! “ HILLARY CLINTON, Buzzfeed
Take criticism
seriously
,
but
not personally
.
HILLARY CLINTON,
Living History
“
June 13, 2015 The Day I Almost Quit
Go to hillaryclinton.com “
@
Source: https://twitter.com/MinaMarkham/status/806244330826592256
Source: https://www.reddit.com/r/The_Donald/comments/53quh5/meet_mina_markham_the_designer_of_hillarys_ui/
WASTELAND REDDIT IS A
Source: https://twitter.com/MinaMarkham/status/805934566695464960
Source: https://twitter.com/uzumaki42/status/806215721252507649
WASTELAND REDDIT TWITTER IS A
WASTELAND REDDIT TWITTER IS A FACEBOOK
WASTELAND REDDIT TWITTER IS A FACEBOOK THE INTERNET
Part of the personal attacks…
is to
crush your spirit
, to make you
feel inadequate. I refused and
that
infuriated them even more
.
HILLARY CLINTON, April 6, 2017, the Women in the World Summit
“
Source: https://twitter.com/lizzaretsky/status/855042702278307840
Source: https://twitter.com/MinaMarkham/status/855452958393114624
Source: https://twitter.com/stephantaylor/status/741151893460819968
Source: https://twitter.com/MinaMarkham/status/741291821884661760
fakenews
Open Source
Open Source
Was it worth it ?
A Landon Nordeman/TIME
A Barbara Kinney/Hillary for America
A Samuel Fisch/Hillary for America
A Barbara Kinney/Hillary for America
A Sara Kerens
A Samuel Fisch/Hillary for America
A Barbara Kinney/Hillary for America
B Emoji provided free by Emoji One
C
Campaign photos by Barbara Kinney
and Samuel Fisch
D
️
Fonts: Niveau Grotesk, PT Mono &
EloquentJFPro, provided by Typekit
E
️
Washington Wasteland image from Fallout 3
thanks.
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.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
Buzz and feedback
Here’s what was said about this presentation on social media.
