CFPB Design Manual & Capital Framework at OSCON
•Als PPTX, PDF herunterladen•
1 gefällt mir•1,324 views
http://www.oscon.com/open-source-2015/public/schedule/detail/42014 Keeping code and design in sync across large teams and multiple projects can be a big challenge. At the Consumer Financial Protection Bureau, a new federal agency, the in-house design and development team has created its own modular front-end framework and style guide. Team members will talk about how this has fostered cross-team collaboration and improved the consistency of their products.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie CFPB Design Manual & Capital Framework at OSCON
Ähnlich wie CFPB Design Manual & Capital Framework at OSCON (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
CFPB Design Manual & Capital Framework at OSCON
- 1. Building a modular front-end framework and style guide for a large organization Scott Cranfill and Mollie Bates OSCON – June 22, 2015
- 2. 2 Overview Problem: How do you keep design and code consistent with a large, remote team working across disciplines and different projects? Our solution, in one sentence: Design and publish your standards in the open, and build a front-end framework that enables developers to easily implement and maintain them.
- 3. CFPB Design Manual: cfpb.github.io/design-manual Capital Framework cfpb.github.io/capital-framework 3
- 5. 5 CFPB’s mission The CFPB is a 21st century agency that helps consumer finance markets work by making rules more effective, by consistently and fairly enforcing those rules, and by empowering consumers to take more control over their economic lives.
- 6. This is the footer
- 7. 7 Our core functions Write rules, supervise companies and enforce federal consumer financial protection laws Restrict unfair, deceptive or abusive acts or practices Take consumer complaints Promote financial education
- 8. 8 Our core functions Research consumer behavior Monitor financial markets for new risks to consumers Enforce laws that outlaw discrimination and other unfair treatment to consumers
- 9. 9 We achieve our mission through Data-driven analysis Innovative use of technology Valuing the best people and great teamwork
- 10. This is the footer
- 11. 11 Technology and Innovation Fellowship 30 fellows hired in January 2013 from all over the country • Quadrupled the size of the Design & Development Team Second class began in January 2015; 15 retained from original class and 23 new fellows added
- 12. 12 Our team today 1 creative director 7 managers/producers 11 graphic designers 9 UX designers 13 front-end developers 20 back-end developers 2 multimedia
- 13. 13 Our team today 1 creative director 7 managers/producers 7 4 graphic designers 8 1 UX designers 11 2 front-end developers 9 11 back-end developers 2 multimedia
- 14. 14 Project teams Teams are mostly remote 1–2 each of UX, graphic design, front-end development, back-end development Plus a product owner and scrum master, Agile methodology Develop in the open whenever possible • cfpb.github.io/source-code-policy
- 15. This is the footer
- 16. This is the footer
- 17. 17 CFPB design principles 1. Public service, public trust 2. Aesthetic integrity 3. Coherent end-to-end user experience 4. Give the user control 5. Design with data 6. Inclusion and accessibility
- 18. This is the footer
- 19. 19
- 20. 20
- 21. This is the footer
- 22. This is the footer
- 23. This is the footer
- 24. This is the footer
- 25. 25
- 26. 26 Coding standards No standard build process Mixture of Less and straight CSS Wild west of JavaScript library usage Coding style anarchy
- 27. 27 Why we needed shared standards Large group of designers and developers working on separate projects, across the country Off-site contractors working on web products, print collateral, and marketing Consistent branding and user experience builds trust with consumers
- 28. This is the footer
- 29. This is the footer
- 30. 30 Design Manual goals Establish an empirical source of the latest standards Ensure that employees and contract agencies understand how to use our brand and UI patterns effectively, and in a way that is consistent with existing work Enable other government agencies to use or learn from our standards
- 31. This is the footer
- 32. This is the footer
- 33. This is the footer
- 34. This is the footer
- 35. This is the footer
- 36. This is the footer
- 37. This is the footer
- 38. This is the footer
- 39. This is the footer
- 40. This is the footer
- 41. This is the footer
- 43. 43
- 44. “A framework, you say?” 44
- 45. 45 What is it? 1. A collection of modular HTML/CSS/JavaScript components 2. A build process that brings them together 3. A recommended workflow that eases the burden of keeping the front end in sync across multiple projects with different developers
- 46. “You’ve heard of Bootstrap, right?” 46
- 49. 49 Why build our own? Browser support Accessibility • Section 508 • WCAG 2.0 Level AA Effort Modularity
- 50. Modularity
- 51. 51 Advantages of a modular structure Ease of updating Use only what you need Encourages contributions
- 52. 52 Workflow for an existing project edit project source edit component source rebuild component push component to remote repo clone install Grunt dependencies install cf or third-party components build project test in browser
- 53. This is the footer
- 54. 54 Workflow for an existing project edit project source edit component source rebuild component push component to remote repo clone install Grunt dependencies install cf or third-party components build project test in browser
- 55. Component update workflow in detail cf-buttons 1.1.0 cf.gov hmda-site future-project
- 56. Component update workflow in detail cf-buttons 1.1.0 cf-buttons 1.1.0
- 57. Component update workflow in detail cf-buttons new-feature future-project
- 58. 58 Modifying dependency version for testing
- 59. Component update workflow in detail cf-buttons 1.1.0 cf-buttons new-feature
- 60. 60 Component update workflow in detail cf.gov hmda-site future-project cf-buttons 1.2.0 cf.gov hmda-site future-project
- 61. This is the footer
- 62. This is the footer
- 63. This is the footer
- 64. 64 Capital Framework/Design Manual integration Design Manual is built on Capital Framework When design standard is updated, to see in the manual, must be updated in the framework Interdependency keeps designers and developers in sync
- 65. This is the footer
- 66. This is the footer
- 67. This is really hard. 67
- 68. This is the footer
- 69. This is the footer
- 70. This is the footer
- 71. This is the footer
- 72. This is the footer
- 73. This is the footer
- 74. This is the footer
- 75. This is the footer
- 76. This is the footer
- 77. This is the footer
- 78. Give it a try! 78
- 79. 79
- 82. This is the footer
- 83. 83 In summary Problem: How do you keep design and code consistent with a large, remote team working across disciplines and different projects? Our solution, in one sentence: Design and publish your standards in the open, and build a front-end framework that enables developers to easily implement and maintain them.
- 84. scott.cranfill@cfpb.gov, @scott_ish mollie.bates@cfpb.gov, @mebates Thank you! Questions? 84
Hinweis der Redaktion
- http://www.consumerfinance.gov/
- http://www.consumerfinance.gov/the-bureau/ We were created by the Dodd Frank Wall Street Reform and Consumer Protection Act – which was signed into law on July 21, 2010. We launched our first website less than 7 months later and officially opened our doors in July 2011 …
- which means that yesterday was our fourth birthday! http://www.consumerfinance.gov/blog/four-years-working-for-you/
- Technology is core to accomplishing our mission. We need to develop and leverage technology to enhance our reach, impact, and effectiveness. We also want to serve as a model for innovation within government.
- http://www.consumerfinance.gov/jobs/technology-innovation-fellows/
- https://cfpb.github.io/
- https://cfpb.github.io/design-manual/guides/design-principles.html
- We had traditional design standards in the form of a printed style guide, which went through several iterations from 2011 to 2013. Though it spoke to some aspects of web design – most notably, basic 508 accessibility guidelines– It did not include interactive web patterns.
- The early design staff also made a smart move to prioritize tools for all of our employees -- in the form of Microsoft Office templates -- so everyone at the Bureau could all be part of disseminating our brand. We continually maintain and update these templates.
- consumerfinance.gov on the day that the first fellows started, January 2013
- http://www.consumerfinance.gov/es/
- http://www.consumerfinance.gov/hmda/
- So, by September 2013, we have a landscape that looks like this – and there are still more examples of divergent designs that were live at that time that could be shown. Actually, all three of these designs are still live! Unifying disparate designs across many projects is a long process, and we still have a lot of work to do.
- We weren’t the first to think of this, of course. Many corporations have digital style guides or web patterns, and we were heavily influenced by the UK’s amazing Government Service Design Manual.
- https://cfpb.github.io/design-manual/
- It includes guides like our design principles,
- traditional style guide elements like logo standards,
- our full color palette,
- and our custom icon set. These standards were ripped straight from our printed style guide, and transferred over with little to no discussion.
- But the manual also now includes user interface elements like links
- and buttons. These did require a lot of discussion,
- and we used GitHub to do it. We discuss new standards and changes to existing standards in issues
- so you can hop on anytime and see our open discussions and process.
- In each issue, you can see us discuss and debate: Best practices for design Alignment to our brand Learnings from past usability testing 508 compliance Ease of implementation for our developers https://github.com/cfpb/design-manual/issues/143
- This isn’t the most efficient way to make decisions, but it is collaborative, inclusive, transparent and works for us. The documentation is open and extensive, so new employees (and the public!) can see how and why decisions were made.
- As the Design Manual was off and running and picking up steam, the front-end development team knew that we needed a way to catalogue all of the recommended code needed to produce the web design patterns being standardized there. So, we decided to build our own in-house framework, which we call “Capital Framework”.
- Here’s what it means to us…
- The framework comprises these three things:
- I kid a little bit, but I’m also serious. Maybe not for the reasons you think, though. It’s not that we’re afraid of using third party software. On the contrary, we love standing on the shoulders of open source software, and as mentioned earlier, we even have an official policy that encourages it!
- The real answer is because it’s ultimately better for our users—both the public, who will be using the products that run on the framework, and our developers, who use the framework itself to develop the products.
- What do we mean by modular? Well, this means we break the framework down into pieces, which we call “components”. Each component has a narrow focus, like defining typographical styles, specifying button types and states, or providing icons. We store each component in its own GitHub repository. Breaking it up like this is helpful because by making the framework a set of modular components, versus one monolithic folder (like other frameworks), it becomes easier to update it in bite-sized chunks, rather than all at once, and it becomes easier to share and distribute updates to each project using the framework. This approach was inspired by the Topcoat project from Adobe (shout out to Garth Brathwaite, who just presented here in another room last session), and is now gaining popularity with new frameworks like Basscss.
- A quick rundown of how npm and Bower dependency management works, for those who might not be familiar. In your project’s source code, you can create these two configuration files, package.json for npm, and bower.json for Bower. In these files, you can list dependencies, which are other packages (also called modules or components) that others have written, or maybe you’ve written yourself. Having them listed in these files will tell npm and Bower to look at their package registries and fetch each of these dependencies at the specified version number.
- So, back to the workflow. Here are the basic steps: Clone the project you’re starting to work on to your local development environment. Run `npm install` to get build dependencies installed. Run `bower install` to get front-end dependencies installed. Run `grunt` to build the project. Test it out in the browser. From there, there are two paths of work, so to speak. First to work on project-specific code, following the top loop, you’d edit the project source, build, test again, rinse and repeat. As you’re working on your project, you might find the need to update a Capital Framework component, which will take us down the lower loop path. To update a component, you’d edit the component’s source, push the new version, update your dependency version in the project and reinstall the component. Rebuild and test to ensure the update didn’t break anything. Editing the component and testing it out is a little more complicated than that, and I’ll give an example of that now.
- We use a mixture of milestones, labels, and checklists in GitHub. Process is documented in the ReadMe
- Non-developers can use Prose.io to update the design manual.
- http://www.consumerfinance.gov/your-story/
- http://www.consumerfinance.gov/owning-a-home
- http://www.consumerfinance.gov/eregulations
- http://www.consumerfinance.gov/complaints
- http://www.consumerfinance.gov/complaintdatabase/
- http://beta.consumerfinance.gov/
- We continue to evaluate technologies and consider whether to incorporate them into CF. Gulp? cssnext? ES6? And at a higher level of government, a project partially inspired by our work is taking shape...
- https://pages.18f.gov/govt-wide-patternlibrary/
- https://github.com/18F/govt-wide-patternlibrary
- https://cfpb.github.io/capital-framework/
- Also, we could use your help! If you give it a try, please let us know what you think can be added or improved. Or do it yourself :) We love to receive issues and pull requests from the public.
- Like this one, from our former CFPB colleague and Capital Framework co-creator Mike Morici.