Styling Hillary
A presentation at Respond 2017 in in Sydney NSW, Australia by Mina Markham
Styling Hillary
Trying (and failing) to save the Republic with CSS a.k.a.
The longest 18 months of my life OMG! a.k.a.
⚠ ️
CAUTION MAY CONTAIN POLITICS
mina.codes @ minamarkham Hi, I’m Mina $
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 , ️ Ran tech talk series
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 , ️ Ran tech talk series
Had the time of my life
[ insert email joke here ]
June 2015
Election Day
We need a Bootstrap … “ Kyle Rush, Deputy CTO
Design System? Pattern Library? Styleguide?
Naming things is hard.
Pattern Library:
Library of UI patterns
Framework:
The front-end code
Style Guide:
The documentation
Design System: All of the above (and more)
mina.so/ds-anatomy
mina.so/ds-anatomy
…and it needs a good name . “ Kyle Rush, Deputy CTO
Pantsuit?
Why did we need it?
hillaryclinton.com
hillaryclinton.com
hillaryclinton.com/donate
hillaryclinton.com/calls
hillaryclinton.com/literallytrump
hillaryclinton.com/briefing
Multiple codebases. One UI.
Partners
Visual Design . Product Design Stakeholders
Content / Storytelling / Fundraising 0 Organizing ✅ Voter 2 Engagement 3 ️ Data Infrastructure ( Analytics Support
4 ️ Front-End Ops 5 Dev Ops
Te a m : 6
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
5 4 ️ ✅ / 0 2 + ⭐ 8 8 9 8 8 8 6 8 8 8 9 8 8
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 “ “
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
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 ?
: Landon Nordeman/TIME
: Barbara Kinney/Hillary for America
: Samuel Fisch/Hillary for America
: Barbara Kinney/Hillary for America
: Sara Kerens
: Samuel Fisch/Hillary for America
: Barbara Kinney/Hillary for America
Thank you
mina.codes @ minamarkham
Resources + Credits
; Emoji provided free by Emoji One
<
Campaign photos by Barbara Kinney
and Samuel Fisch
️
Fonts: Niveau Grotesk, PT Mono &
EloquentJFPro, provided by Typekit
️ Washington Wasteland image from Fallout 3 ? ️ Icons by The Noun Project
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.
