! 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/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

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.