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.
www.kogimobile.com
Kogi Mobile works with Startups and Small businesses to deliver on their Mobile App dreams.
Kogi Mobile help startups with rapid app design, app development and app launch by using Agile and Lean methodologies.
Kogi Mobile develops Native iOS | Android apps as well as mobile websites and full stack beck-ends.
contact@kogimobile.com
The way Branding Experience, Product-line Experience, User Experience and Customer Experience are related to each other. The broader view of a User Experience Professional's roles and responsibilities in a Product Life-cycle.
All images have been used under CC.
Designing for (all of) America at the CFPB, AIGA conference presentationMollie Bates
The Consumer Financial Protection Bureau, a federal agency, recognizes that consumer financial problems can often stem from unclear communication. It prioritizes clean design, modern technology, and data-driven analysis. Design-thinking and user-centered design practices are shaping the way the agency interacts with consumers and the financial industry. Members of their 70-person strong in-house design and development team will share the processes and systems they have applied as built the team and moved away from traditional government contracting models.
At the 2012 Face of Finance Conference, at Bentley University, in Waltham, MA, Audrey Chen (Consumer Financial Protection Bureau) presented "Design and the CFPB".
www.kogimobile.com
Kogi Mobile works with Startups and Small businesses to deliver on their Mobile App dreams.
Kogi Mobile help startups with rapid app design, app development and app launch by using Agile and Lean methodologies.
Kogi Mobile develops Native iOS | Android apps as well as mobile websites and full stack beck-ends.
contact@kogimobile.com
The way Branding Experience, Product-line Experience, User Experience and Customer Experience are related to each other. The broader view of a User Experience Professional's roles and responsibilities in a Product Life-cycle.
All images have been used under CC.
Designing for (all of) America at the CFPB, AIGA conference presentationMollie Bates
The Consumer Financial Protection Bureau, a federal agency, recognizes that consumer financial problems can often stem from unclear communication. It prioritizes clean design, modern technology, and data-driven analysis. Design-thinking and user-centered design practices are shaping the way the agency interacts with consumers and the financial industry. Members of their 70-person strong in-house design and development team will share the processes and systems they have applied as built the team and moved away from traditional government contracting models.
At the 2012 Face of Finance Conference, at Bentley University, in Waltham, MA, Audrey Chen (Consumer Financial Protection Bureau) presented "Design and the CFPB".
A One Stop Solution Platform for various Services Helping Tools.pptxSHIVAMGIRI35
Presentation on web application project named helping.tools
research paper published in the IJRASET journal. "A One Stop Solution Platform for various Services: Helping Tools" and it was authored by Chaitanya Shimpi, Shivam Giri, Saifali Awati, Rucha Bhosale, and Prof. Vidya Waykule.
Identification of required software, Analysis of the software requirements, Detailed specification of the software requirements, Software design, Programming, Testing, Maintenance
INTERFACE by apidays 2023 - Governance Doesn't Have to be a Dirty Word, Jason...apidays
INTERFACE by apidays 2023
APIs for a “Smart” economy. Embedding AI to deliver Smart APIs and turn into an exponential organization
June 28 & 29, 2023
Governance Doesn't Have to be a Dirty Word
Jason Harmon, CTO at Stoplight
------
Check out our conferences at https://www.apidays.global/
Do you want to sponsor or talk at one of our conferences?
https://apidays.typeform.com/to/ILJeAaV8
Learn more on APIscene, the global media made by the community for the community:
https://www.apiscene.io
Explore the API ecosystem with the API Landscape:
https://apilandscape.apiscene.io/
CodeValue Architecture Next 2018 - Executive track dilemmas and solutions in...Erez PEDRO
Moderen Software projects are challenging to develop. Eran Stiller, Ronen Rubinfeld, and Erez Pedro from CodeValue show a method for conducting multidisciplinary product discovery.
Buddy, partnered with industry leaders such as Amazon, Docker, Github, Microsoft, and Google, is a winning development automation platform that serves a rapidly growing market valued to become $345 billion by 2022. Over 7,000 developers use Buddy every day across 120+ countries. Featured customers: INC. Magazine, CGI.com & ING Bank. Our vision is to become the backbone on which talented people can build world-altering apps & services. Our goal is to take the load off millions of developers by offloading everything that can be automated – giving them back the time for being creative.
Application Migration: How to Start, Scale and SucceedVMware Tanzu
Undergoing the application migration journey can be cumbersome and challenging, especially when you have a complex application portfolio that consists of both legacy and newer apps on outdated systems. You are hindered by managing and operating manual processes to address security concerns, regulatory change and policy compliance.
You know embarking on the cloud journey is inevitable and deciding where to start is overwhelming. Let us show you how.
Join Matt Russell to hear how Pivotal helps large organizations plan and execute their application transformation initiatives by using a set of proven techniques and approaches that help you get started quickly and scale continuously.
We use simple tools and start small to redefine current systems, and achieve cloud-native speed and resiliency. Let us show you how Pivotal can help you navigate your journey while instilling confidence along the way.
Presenter : Matt Russell, Senior Director, Application Transformation at Pivotal
DELIVER QUALITY SOFTWARE PRODUCTS BY FOLLOWING SIMPLE STEPSTechahead Software
Outsourcing is cost-effective, and offshore software outsourcing, in particular, helps reduce development costs, which leads to a reduced market price and more competitiveness.
Draftkings: Launching w/ Confidence at Scale, FutureStack17 NYCNew Relic
Learn how Draftkings' culture helps drive performance.
Be sure to subscribe and follow New Relic at:
https://twitter.com/NewRelic
https://www.facebook.com/NewRelic
https://www.youtube.com/NewRelicInc
Discover the importance of MVP development in creating user-centric products. Learn how focusing on minimal viable products empowers businesses to validate ideas, gather valuable user feedback, and iterate towards successful and impactful solutions. Explore the key benefits of adopting an MVP approach for product development and gain insights into effective strategies for delivering exceptional user experiences.
Reduce Time to Value: Focus First on Configuration Management DebtChris Sterling
The value of software is only potential value until it is in users’ hands. There can be many roadblocks to software getting into those hands. These roadblocks tend to revolve around elaborate deployment pipelines stemming from Configuration Management Debt:
* Over-burdened release engineering and operations teams
* High coupling with centrally managed architecture element/component
* Source control practices that impact delivery velocity
* Too many variations/versions of the software supported in production
* Poor integration processes across architecture components and scaled team delivery
* Too many hand-offs between teams in order to release software to users
* Code changes feel too risky and takes too long to validate before releasing into production
* Poor documentation practices
In organizations that have effective configuration management practices it is common to see deployment pipelines that have a smaller number of hand-offs between teams, architectures that tend to be more malleable, and efficient validation processes. By focusing on reducing Configuration Management Debt it is simpler to identify aspects of the integration and release management process that need to be tackled in order to get working software in the hands of users sooner while reducing the bottlenecks in the organizational processes and practices.
In this session we will discuss specific approaches and examples on how reducing Configuration Management Debt leads to reducing other forms of software debt including:
* Smaller number of hand-offs: Platform Experience Debt
* Malleable architectures: Design Debt
* Efficient validation processes: Quality Debt
* More testable software: Technical Debt
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
More Related Content
Similar to CFPB Design Manual & Capital Framework at OSCON
A One Stop Solution Platform for various Services Helping Tools.pptxSHIVAMGIRI35
Presentation on web application project named helping.tools
research paper published in the IJRASET journal. "A One Stop Solution Platform for various Services: Helping Tools" and it was authored by Chaitanya Shimpi, Shivam Giri, Saifali Awati, Rucha Bhosale, and Prof. Vidya Waykule.
Identification of required software, Analysis of the software requirements, Detailed specification of the software requirements, Software design, Programming, Testing, Maintenance
INTERFACE by apidays 2023 - Governance Doesn't Have to be a Dirty Word, Jason...apidays
INTERFACE by apidays 2023
APIs for a “Smart” economy. Embedding AI to deliver Smart APIs and turn into an exponential organization
June 28 & 29, 2023
Governance Doesn't Have to be a Dirty Word
Jason Harmon, CTO at Stoplight
------
Check out our conferences at https://www.apidays.global/
Do you want to sponsor or talk at one of our conferences?
https://apidays.typeform.com/to/ILJeAaV8
Learn more on APIscene, the global media made by the community for the community:
https://www.apiscene.io
Explore the API ecosystem with the API Landscape:
https://apilandscape.apiscene.io/
CodeValue Architecture Next 2018 - Executive track dilemmas and solutions in...Erez PEDRO
Moderen Software projects are challenging to develop. Eran Stiller, Ronen Rubinfeld, and Erez Pedro from CodeValue show a method for conducting multidisciplinary product discovery.
Buddy, partnered with industry leaders such as Amazon, Docker, Github, Microsoft, and Google, is a winning development automation platform that serves a rapidly growing market valued to become $345 billion by 2022. Over 7,000 developers use Buddy every day across 120+ countries. Featured customers: INC. Magazine, CGI.com & ING Bank. Our vision is to become the backbone on which talented people can build world-altering apps & services. Our goal is to take the load off millions of developers by offloading everything that can be automated – giving them back the time for being creative.
Application Migration: How to Start, Scale and SucceedVMware Tanzu
Undergoing the application migration journey can be cumbersome and challenging, especially when you have a complex application portfolio that consists of both legacy and newer apps on outdated systems. You are hindered by managing and operating manual processes to address security concerns, regulatory change and policy compliance.
You know embarking on the cloud journey is inevitable and deciding where to start is overwhelming. Let us show you how.
Join Matt Russell to hear how Pivotal helps large organizations plan and execute their application transformation initiatives by using a set of proven techniques and approaches that help you get started quickly and scale continuously.
We use simple tools and start small to redefine current systems, and achieve cloud-native speed and resiliency. Let us show you how Pivotal can help you navigate your journey while instilling confidence along the way.
Presenter : Matt Russell, Senior Director, Application Transformation at Pivotal
DELIVER QUALITY SOFTWARE PRODUCTS BY FOLLOWING SIMPLE STEPSTechahead Software
Outsourcing is cost-effective, and offshore software outsourcing, in particular, helps reduce development costs, which leads to a reduced market price and more competitiveness.
Draftkings: Launching w/ Confidence at Scale, FutureStack17 NYCNew Relic
Learn how Draftkings' culture helps drive performance.
Be sure to subscribe and follow New Relic at:
https://twitter.com/NewRelic
https://www.facebook.com/NewRelic
https://www.youtube.com/NewRelicInc
Discover the importance of MVP development in creating user-centric products. Learn how focusing on minimal viable products empowers businesses to validate ideas, gather valuable user feedback, and iterate towards successful and impactful solutions. Explore the key benefits of adopting an MVP approach for product development and gain insights into effective strategies for delivering exceptional user experiences.
Reduce Time to Value: Focus First on Configuration Management DebtChris Sterling
The value of software is only potential value until it is in users’ hands. There can be many roadblocks to software getting into those hands. These roadblocks tend to revolve around elaborate deployment pipelines stemming from Configuration Management Debt:
* Over-burdened release engineering and operations teams
* High coupling with centrally managed architecture element/component
* Source control practices that impact delivery velocity
* Too many variations/versions of the software supported in production
* Poor integration processes across architecture components and scaled team delivery
* Too many hand-offs between teams in order to release software to users
* Code changes feel too risky and takes too long to validate before releasing into production
* Poor documentation practices
In organizations that have effective configuration management practices it is common to see deployment pipelines that have a smaller number of hand-offs between teams, architectures that tend to be more malleable, and efficient validation processes. By focusing on reducing Configuration Management Debt it is simpler to identify aspects of the integration and release management process that need to be tackled in order to get working software in the hands of users sooner while reducing the bottlenecks in the organizational processes and practices.
In this session we will discuss specific approaches and examples on how reducing Configuration Management Debt leads to reducing other forms of software debt including:
* Smaller number of hand-offs: Platform Experience Debt
* Malleable architectures: Design Debt
* Efficient validation processes: Quality Debt
* More testable software: Technical Debt
Similar to CFPB Design Manual & Capital Framework at OSCON (20)
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfJay Das
With the advent of artificial intelligence or AI tools, project management processes are undergoing a transformative shift. By using tools like ChatGPT, and Bard organizations can empower their leaders and managers to plan, execute, and monitor projects more effectively.
A Comprehensive Look at Generative AI in Retail App Testing.pdfkalichargn70th171
Traditional software testing methods are being challenged in retail, where customer expectations and technological advancements continually shape the landscape. Enter generative AI—a transformative subset of artificial intelligence technologies poised to revolutionize software testing.
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns
Unlocking Business Potential: Tailored Technology Solutions by Prosigns
Discover how Prosigns, a leading technology solutions provider, partners with businesses to drive innovation and success. Our presentation showcases our comprehensive range of services, including custom software development, web and mobile app development, AI & ML solutions, blockchain integration, DevOps services, and Microsoft Dynamics 365 support.
Custom Software Development: Prosigns specializes in creating bespoke software solutions that cater to your unique business needs. Our team of experts works closely with you to understand your requirements and deliver tailor-made software that enhances efficiency and drives growth.
Web and Mobile App Development: From responsive websites to intuitive mobile applications, Prosigns develops cutting-edge solutions that engage users and deliver seamless experiences across devices.
AI & ML Solutions: Harnessing the power of Artificial Intelligence and Machine Learning, Prosigns provides smart solutions that automate processes, provide valuable insights, and drive informed decision-making.
Blockchain Integration: Prosigns offers comprehensive blockchain solutions, including development, integration, and consulting services, enabling businesses to leverage blockchain technology for enhanced security, transparency, and efficiency.
DevOps Services: Prosigns' DevOps services streamline development and operations processes, ensuring faster and more reliable software delivery through automation and continuous integration.
Microsoft Dynamics 365 Support: Prosigns provides comprehensive support and maintenance services for Microsoft Dynamics 365, ensuring your system is always up-to-date, secure, and running smoothly.
Learn how our collaborative approach and dedication to excellence help businesses achieve their goals and stay ahead in today's digital landscape. From concept to deployment, Prosigns is your trusted partner for transforming ideas into reality and unlocking the full potential of your business.
Join us on a journey of innovation and growth. Let's partner for success with Prosigns.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
Enterprise Resource Planning System includes various modules that reduce any business's workload. Additionally, it organizes the workflows, which drives towards enhancing productivity. Here are a detailed explanation of the ERP modules. Going through the points will help you understand how the software is changing the work dynamics.
To know more details here: https://blogs.nyggs.com/nyggs/enterprise-resource-planning-erp-system-modules/
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
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.
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.
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
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
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
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
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
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
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
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
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.
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.
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.