Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fitc

154 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Fitc

  1. 1. Styling Hillary
  2. 2. Trying (and failing) to save the Republic with CSS a.k.a.
  3. 3. The longest 18 months of my life OMG! a.k.a.
  4. 4. ⚠ CAUTION MAYCONTAIN POLITICS
  5. 5. Hi, I’m Mina " # mina.codes @minamarkham
  6. 6. Assumptions $ Heard of Hillary Clinton # Read Medium post: http://mina.so/pantsuit-post
  7. 7. An 18-month, nationally televised hackathon
  8. 8. % 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
  9. 9. % 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
  10. 10. [ insert email joke here ]
  11. 11. June 2015
  12. 12. Election Day
  13. 13. Kyle Rush, Deputy CTO We need a Bootstrap…“
  14. 14. Design System? Pattern Library? Styleguide?
  15. 15. Naming things is hard.
  16. 16. Pattern Library: Library of UI patterns
  17. 17. Framework: The front-end code
  18. 18. Style Guide: The documentation
  19. 19. Design System: All of the above
  20. 20. https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5
  21. 21. https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5
  22. 22. Kyle Rush, Deputy CTO …and it needs a good name.“
  23. 23. Pantsuit?
  24. 24. Why did we need it?
  25. 25. hillaryclinton.com
  26. 26. hillaryclinton.com
  27. 27. hillaryclinton.com/donate
  28. 28. hillaryclinton.com/calls
  29. 29. hillaryclinton.com/literallytrump
  30. 30. hillaryclinton.com/briefing
  31. 31. Multiple codebases. One UI.
  32. 32. 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
  33. 33. Team: 6
  34. 34. Done is better than perfect.
  35. 35. If we don’t ship on time, the ship will have sailed. Stephanie Hannon, CTO “
  36. 36. Pantsuit 1.0 ≈ 6 weeks
  37. 37. Technical debt is your “friend”
  38. 38. As time progressed, maintainability went down and stability went up. 25 50 75 100
  39. 39. If you don’t have technical debt, you’re not moving fast enough.
  40. 40. How did you do it?
  41. 41. (Re)Define Implement Iterate Test
  42. 42. Define
  43. 43. Implement
  44. 44. Do it live!
  45. 45. Framework Product UI Kit
  46. 46. Test & Iterate
  47. 47. How did you do it byyourself?
  48. 48. Collaboration
  49. 49. ⭐ 8 8$ 8 8 8 6 FRONT-END OPS 88 OPS 8$ 88
  50. 50. Documentation
  51. 51. 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 “
  52. 52. Automation
  53. 53.
  54. 54. post-publish.js
  55. 55. PANTSUIT • Backend Teams • Internal dashboards • Documentation • Most common • Front-end boilerplate • Donations CDN NPM MANUAL npm publishgit push download v2.1.0
  56. 56. “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
  57. 57. What was the outcome?
  58. 58. 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 “
  59. 59. Source: https://twitter.com/MinaMarkham/status/806244330826592256
  60. 60. Source: https://www.reddit.com/r/The_Donald/comments/53quh5/meet_mina_markham_the_designer_of_hillarys_ui/
  61. 61. WASTELAND REDDIT IS A
  62. 62. Source: https://twitter.com/MinaMarkham/status/805934566695464960
  63. 63. Source: https://twitter.com/uzumaki42/status/806215721252507649
  64. 64. WASTELAND REDDITTWITTER IS A
  65. 65. WASTELAND REDDITTWITTER IS A FACEBOOK
  66. 66. WASTELAND REDDITTWITTER IS A FACEBOOK THE INTERNET
  67. 67. Source: https://twitter.com/lizzaretsky/status/855042702278307840
  68. 68. Source: https://twitter.com/MinaMarkham/status/855452958393114624
  69. 69. Source: https://twitter.com/stephantaylor/status/741151893460819968
  70. 70. Source: https://twitter.com/MinaMarkham/status/741291821884661760
  71. 71. #FakeNews
  72. 72. Open Source
  73. 73. Open Source
  74. 74. Was it worth it?
  75. 75. Thankyou # mina.codes @minamarkham
  76. 76. 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

×