Presented at FITC Toronto 2017 by Mina Markham, Slack Details at http://fitc.ca/presentation/styling-hillary/ Overview A comprehensive design system is a critical tool for maintaining a consistent UI during rapid development that spans multiple codebases. During the 2016 U.S. Election, 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. Objective To learn how to translate static comps into a modular design system. Target Audience Developers and designers interested modular CSS and pattern libraries. Five Things Audience Members Will Learn Identifying and extracting UI components The importance of consuming your own products Documentation is everything Sometimes done is better than perfect Naming things is important

1. Styling
Hillary

2. Trying (and failing) to save
the Republic with CSS
a.k.a.

3. The longest 18 months
of my life OMG!
a.k.a.

4. ⚠ CAUTION
MAYCONTAIN
POLITICS

5. Hi, I’m Mina "
# mina.codes @minamarkham

8. Assumptions
$ Heard of Hillary Clinton
# Read Medium post:
http://mina.so/pantsuit-post

9. An 18-month, nationally
televised hackathon

10. % 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

11. % 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

12. [ insert email joke here ]

15. June 2015

16. Election Day

17. Kyle Rush, Deputy CTO
We need a Bootstrap…“

18. Design System?
Pattern Library?
Styleguide?

19. Naming things is hard.

20. Pattern Library:
Library of UI patterns

21. Framework:
The front-end code

22. Style Guide:
The documentation

23. Design System:
All of the above

24. https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5

25. https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5

26. Kyle Rush, Deputy CTO
…and it needs a good name.“

27. Pantsuit?

29. Why did we need it?

30. hillaryclinton.com

31. hillaryclinton.com

32. hillaryclinton.com/donate

33. hillaryclinton.com/calls

34. hillaryclinton.com/literallytrump

35. hillaryclinton.com/briefing

36. Multiple codebases.
One UI.

37. 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

38. Team: 6

39. Done is better
than perfect.

40. If we don’t ship on time,
the ship will have sailed.
Stephanie Hannon, CTO
“

41. Pantsuit 1.0
≈ 6 weeks

42. Technical debt is
your “friend”

44. As time progressed, maintainability
went down and stability went up.
25
50
75
100

45. If you don’t have
technical debt, you’re
not moving fast enough.

47. How did you do it?

53. (Re)Define
Implement
Iterate
Test

54. Define

58. Implement

59. Do it live!

60. Framework
Product
UI Kit

63. Test & Iterate

66. How did you do it
byyourself?

67. Collaboration

68. ⭐
8
8$
8
8
8
6
FRONT-END
OPS
88
OPS
8$
88

69. Documentation

77. 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
“

78. Automation

79. ❤

82. post-publish.js

83. PANTSUIT
• Backend Teams
• Internal dashboards
• Documentation
• Most common
• Front-end boilerplate
• Donations
CDN NPM MANUAL
npm publishgit push download
v2.1.0

84. “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

85. What was the outcome?

87. 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
“

91. Source: https://twitter.com/MinaMarkham/status/806244330826592256

93. Source: https://www.reddit.com/r/The_Donald/comments/53quh5/meet_mina_markham_the_designer_of_hillarys_ui/

96. WASTELAND
REDDIT IS A

97. Source: https://twitter.com/MinaMarkham/status/805934566695464960

98. Source: https://twitter.com/uzumaki42/status/806215721252507649

100. WASTELAND
REDDITTWITTER IS A

103. WASTELAND
REDDITTWITTER IS A
FACEBOOK

104. WASTELAND
REDDITTWITTER IS A
FACEBOOK
THE INTERNET

105. Source: https://twitter.com/lizzaretsky/status/855042702278307840

106. Source: https://twitter.com/MinaMarkham/status/855452958393114624

107. Source: https://twitter.com/stephantaylor/status/741151893460819968

108. Source: https://twitter.com/MinaMarkham/status/741291821884661760

110. #FakeNews

116. Open Source

117. Open Source

120. Was it worth it?

137. Thankyou
# mina.codes @minamarkham

138. Resources + Credits
9 Emoji provided free by Emoji One
: Campaign photos by Barbara Kinney
and Samuel Fisch
; Fonts: Niveau Grotesk, PT Mono &
EloquentJFPro, provided byTypekit
< Sharp Unity by Sharp Type
= Washington Wasteland image from Fallout 3