Designing for (all of) America at the CFPB, AIGA conference presentation
•Als PPTX, PDF herunterladen•
4 gefällt mir•1,180 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (13)
Ähnlich wie Designing for (all of) America at the CFPB, AIGA conference presentation
Ähnlich wie Designing for (all of) America at the CFPB, AIGA conference presentation (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Designing for (all of) America at the CFPB, AIGA conference presentation
- 1. Designing for (all of) America How we built an in-house design team within the federal government Presented by Natalia Fitzgerald and Mollie Bates
- 2. Creative Commons Welcome to government
- 3. We design for all Americans
- 6. CFPB Minicons | The Noun Project
- 7. Unique parameters in government Hiring is difficult Outsourcing design work is standard practice Strict cyber security requirements Privacy rules around user data and testing Legal requirements for digital accessibility Designing for all Americans
- 8. Overview Unique parameters in government Wait, what’s the CFPB? Here’s what worked for us Our approach in practice
- 9. 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. OUR MISSION
- 10. Official White House Photo by Pete Souza Born out of the financial crisis
- 11. Regulate, supervise, enforce Prepaid credit card disclosure
- 12. rework the image.Accept consumer complaints Submit a complaint
- 13. Monitor financial markets Consumer Complaint Database
- 14. Promote financial education Community Financial Education Project
- 16. Our approach 1. Build the strongest team possible 2. Establish core standards 3. Encourage openness and collaboration 4. Maximize reach
- 17. 1. Build the strongest team possible1. Build the strongest team possible
- 18. How our team grewTeammembers
- 19. TeammembersHow our team grew
- 20. TeammembersHow our team grew
- 21. TeammembersHow our team grew
- 22. Our team today Discipline Total Management Graphic Design 13 Applications Lead 1 UX Design / Usability 11 Chief of Staff 1 Front-End Development 13 Administrative 3 Back-End Development 21 Project Management 3 Multimedia 2 Discipline supervisors 2 Content strategy 3 Total 63 10
- 23. Remote workforce
- 24. Team structure
- 25. Collaborating with the Agile methodology
- 26. Team structure
- 27. 2. Establish core standards
- 28. We work to make financial information more approachable, instill a sense of calm through clear design, and build trust through visual consistency. DESIGN VISION
- 29. Logo
- 30. Our logo, a work in progress
- 31. Web and print type hierarchies
- 32. Color palette
- 34. Minicon font
- 35. Isocon symbols
- 40. 3. Encourage openness and collaboration
- 41. We work hard every day to strengthen our commitment to effective communication, collaboration, and transparency. TEAM CULTURE
- 42. Team structure
- 50. 4. Expand and maximize reach4. Maximizing our reach
- 58. O U R A P P R O A C H I N P R A C T I C E Know Before You Owe Mortgage Initiative
- 59. 47% of consumers don’t seriously shop around before applying for a mortgage. THE PROBLEM
- 60. Know Before You Owe
- 61. Four forms into two
- 62. Printed guide to the mortgage process
- 63. Know Before You Owe
- 64. Disclosure points to website
- 65. Disclosure points to website
- 75. The rewards of our efforts
- 79. We welcome your questions or thoughts THANK YOU natalia.fitzgerald@cfpb.gov mollie.bates@cfpb.gov
Hinweis der Redaktion
- NF: Hi, I’m Natalia Fitzgerald and I’m the Art Director at the Consumer Financial Protection Bureau. I’m excited to be here today to share how we built an in-house design team within the federal government.
- NF: I’ve always had reservations about working within the federal government. So, when I received a job offer from the CFPB, I was skeptical. I envisioned a designer’s worst nightmare: PC computers, outdated design software, and lackluster projects. Instead, I found something exciting and unexpected: a mission-driven team of innovators working in a start-up environment to build a new type of government agency from the ground up.
- NF: We see design as a powerful tool that can transform the consumer financial marketplace, bringing clarity and calm where there may otherwise be confusion and frenzy. From building financial tools and resources to designing disclosures and forms, we’re entrusted with developing products that are easy to navigate, easy to understand, and universally accessible to all Americans.
- NF: Instead of traditional style guide, we developed an open-source design manual that integrates directly with our UI pattern and code base.
- NF: Instead of outsourcing design work, we’ve brought our graphic design specialists in-house.
- NF: Instead of using clip art, we created an open source icon font that has been downloaded from the Noun Project over 32,000 times. We’re excited about new approach to design and development within the federal government.
- NF: Building an-house design teams within the federal government isn’t easy and it’s not commonly done. We work within a unique set of parameters that are widely absent from the private sector. For example, we face strict cyber security requirements that hinder the purchase (or even download) of any new technology, from plug-ins and collaborative tools to design software. We’re also required by law to make digital products accessible to all Americans, including those with disabilities. In government we don’t have the luxury of a target audience, we design for all Americans. In the face of these parameters we have learned to practice creative problem solving, flexibility, and patience.
- NF: I’ve just gone over some of the parameters that exist when building a team within the federal government. Next, we’ll tell you more about the CFPB, including a short history lesson and a brief overview of our core functions. We’ll then share what’s worked for us as we’ve built and developed our in-house team. We’ll conclude with a case study to show the results of our work in practice. We’re part of a collaborative team of designers and developers but as graphic designers we’ll be approaching our presentation from a graphic design perspective. We’ve left time at the end for questions and discussion.
- MB: 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.
- MB: In the wake of the financial crisis, President Obama proposed a new financial agency to focus directly on consumers. In July 2010, Congress passed the Dodd-Frank Wall Street Reform and Consumer Protection Act. The Act created the CFPB to serve as a single point of accountability for enforcing federal consumer financial laws and protecting consumers within the financial marketplace. As a very young government agency we’ve had the unique opportunity to build from the ground up, using modern technology and tools from the start. When we talk about consumer financial products, we mean things like mortgages, credit cards, student loans, auto loans. Do any of your have one of those loans? Okay, then you are our consumer, and we’re working to protect you.
- MB: So here’s what we do day to day: at the CFPB, one of our main jobs is to write rules about consumer financial protection, supervise companies to make sure they’re following the rules, and enforce the rules if they’re not. For example, we’re developing a new rule that includes a form we’ve designed to consistently disclose fees on prepaid cards. These cards are a growing financial product that gives people access to online shopping and ATMS without a bank account or line of credit. Consumers should be able to make direct comparisons when choosing financial products, and our new disclosures should help.
- NF: We also accept consumer complaints about financial products and services, such as credit cards and student loans. In our first 3 years, we’ve received over 650,000 complaints. We’ve helped American consumers secure hundreds of thousands of responses from companies as well as millions of dollars in monetary relief. Shown here is our online Submit a complaint portal, which we developed to help streamline the complaint submission process.
- MB We also monitor financial markets for new risks to consumers. One way we do this is by analyzing the data from consumer’s complaints to target our supervision efforts and identify potential problems in the marketplace before they become larger problems. We also publish these complaints publicly on our Consumer Complaint Database, where you can view a scrubbed set of the data, check out how your bank is doing, and read others complaints.
- NF: We also work to promote financial education among the general population as well as specific populations, like older Americans, students, parents, and service members. The goal of the CFPB’s Community Financial Education Project is to make reliable, unbiased financial resources more readily available to consumers. We partnered with public libraries which aims to make libraries a source for CFPB trusted information and educational resources.
- MB We also research consumer behavior For example, the CFPB worked with researchers to investigate the challenges that consumers face when making financial decisions. The goal was to observe challenges and identify the cause of those challenges. To publicize the results of the study, the design team made this video, handouts and a landing page to house the full set of resources. From designing disclosures to developing tools for consumers, our team plays a key role in advancing the Bureau’s mission.
- NF: Now that you have a better idea of what we do and the parameters we work within, we’d like to share the some of the approaches that have worked best for us: First off, push to “Build the strongest team possible.” Second: Establish core standards in order to increase consistency and efficiently. Third, Encouraged openness and collaboration in all areas. Fourth, maximize the reach of your message.
- MB: 1. Build the strongest team possible. We didn’t build our team overnight. We’ve learned through trial and error the type of team member who fits well at the Bureau and how to structure our teams.
- MB: We’ve experienced periods of rapid growth and abrupt change over the past four years. Design and technology generalists were added to the team as early as 2010, before we opened our doors. They had to chip in on everything, and accomplished a lot of work in a start-up environment: they launched two iterations of our website, developed our brand foundations, and started the complaint portal.
- MB: Our growing team As we grew, we started hiring specialists. Natalia was one of the first graphic design specialists to join the team, in summer of 2012. That winter, the first class of 30 Technology & Innovation Fellows came onboard ...
- MB: … bringing the team to 45. This is when I joined the team. The fellowship is a two year program for designers and developers interested in using technology to further our mission. Fellows were hired from around the country and work from their home offices. Hiring a full time employee is difficult and time-intensive in the government, so we used the remote fellowship to pull from a broad pool of diverse talent that could join our team quickly because of the easier-to-hire term positions.
- By January of 2015, we had hired more employees and we brought on 23 new fellows. Without our team now at 73 people out of about 1600 total employees at CFPB, we are a big in-house team. In the last 6 months we’ve been working to smooth our working processes, build things faster and more efficiently, and crystalize our brand standards.
- MB: Our team is made up of full-time federal employees, fixed-term Fellows, and long-term, in-house contractors, who specialize in graphic design, user experience design, front or back end development, multimedia or content strategy. The management team is growing to respond to the demands of the team. We’ve found that that designers who are pragmatic, team driven problem solvers work best for our team. They’re patient and flexible with the parameters of government. No hotshots!
- MB: Our team is spread all over the country. Hiring from the entire United States has helped us assemble a team with a diversity of life experiences and work experiences. Most of our staff had never worked for the government before coming to the CFPB.
- MB: So we have a big team of specialists – how do we get to work? We mix disciplines together to create independent project teams. Each project team has 1-2 each of UX, graphic design, front-end development, back-end developmentfocusing on one project for 6, 12, or even 18 months. These six teams are creating web applications like the Consumer Complaint Database, consumer education tools like Owning a Home and Paying for College, and working on a full redesign of our website.
- The project teams use the Agile methodology - a group of software development methods in which solutions evolve through team collaboration. We develop our web products two weeks at a time, meeting each day for a 15-minute check-in and reviewing and identifying areas for improvement at the end of each two week cycle. The UX and graphic designers work iteratively and slightly ahead of the software development schedule.
- There are two other big groups that work separately from project teams. Design Ops is our in-house creative services team --with a big group of graphic designers, along with UX designers, front end developers, and two multimedia specialists. This team has 30-40 projects active at one time and has completed over 200 projects so far this year. These can range from a simple handout to a video to a website launch. The last group is the developer-heavy Software Delivery team; they make sure our servers are up and our websites are running. We think we’ve built a strong in-house team over the past four years by bringing on a big, diverse group from around the country, then mixing skill sets into cross-functional teams.
- NF: Step 2. Establish core standards An important part of building our in-house design team has been the development of standards for print, web, photography, and video. Standards ensure greater consistency and efficiently across teams and throughout the CFPB. Our project work serves as the primary testing ground and we continue to evolve our standards as we uncover additional needs.
- NF: As a design team, “we work to make financial information more approachable, instill a sense of calm through clear design, and build trust through visual consistency.” What this means for us in practice is a visual style that invites interaction, an information hierarchy that is clear and easy to navigate, a generous use of white-space, and official standards for visual design, user interactions, and code.
- NF: Logo Our logo was designed to symbolize vigilance, transparency, and a consumer focus. The soft beam of light symbolizes our efforts to shed light on the financial landscape and promote transparency in the marketplace.
- NF: Over the years, our logo has gone through a number of iterations. In the very early days of the Bureau, before there were graphic designers on the team, the CFPB needed a logo. I uncovered two logo designs from this era, serif letters on a green circle and a sheriff’s badge. I have no idea who designed these. In 2012, an official logo was designed to reflect the Bureau’s values. This logo featured a sans serif typeface, lowercase letters, and a gradient beam of light. In 2013, we flagged that our existing style guidelines prohibited the use of gradients, and yet the beam in our existing logo was a gradient. We didn’t feel comfortable with our logo being a hypocrite, so, we replaced the gradient with a solid light green beam. This year, we have pushed to increase the accessibility of our web products. As part of this effort, we increased the size of the words “Consumer Financial Protection Bureau” and darkened the gray and green to increase contrast.
- NF: Since our work is largely text-based, typography plays a key role within our visual language. A clear typographic hierarchy, based on size, weight, and spacing is key to the success of our information design.
- NF: Color palette These are our primary and secondary color palettes.
- NF: Color palette We are currently working on an adjustment to the build of our brand green. We are doing this in order to comply with Section 508 type contrast requirements. Section 508 is a federal law that mandates that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities.
- NF: In order to bring life to our message, we have developed an illustration language that includes small icons, isometric illustrations, and flat illustrations. Minicon font Minicons are small-scale icons that visually reinforce an action, file type, status, or category.
- NF: Isocons can be used to indicate important actions and transactions, like downloading data or money transfer.
- NF: Illustration library Our illustrations are flat, use a limited color palette, and are made using geometric shapes.
- NF: Our most common approach is to group a collection in a front facing still life composition.
- NF: After releasing our last printed style guide in 2013, we set out to design and build a standards library that would integrate directly with our UI patterns and code base. This became what is now called the CFPB Design Manual, an open-source reference library that contains our official standards for brand and visual design elements as well as user interaction patterns. We invite you to check out our CFPB Design Manual GitbHub repository and contribute to the discussion./
- NF: Our development team has worked to build a front-end framework called Capital Framework that works to sync with our design and UI standards. Our standards continue to evolve and develop as we identify what works best for the CFPB and the people we serve.
- MB: The third thing that’s helped to strengthen our team is to encourage openness and collaboration. With such a large distributed team we rely on strong cultural norms to help solve our problems.
- MB: There are three key elements to the way we work that keep us all in sync: communication, collaboration, and transparency.
- MB: As we showed you earlier, staff are broken into project teams and have the potential to work off on their own. It’s important to break these barriers and work across projects and disciplines, because when we work in a silo we might solve the same problems individually. When we share our work and collaborate we can solve problems together.
- MB: Since we’re a remote staff, the main tools we use to collaborate are GitHub, Google Hangouts, and persistent chat rooms. This ‘off-topic’ chat acts as our office water cooler.
- MB: Inspired by the common practices of open source developers, our team of designers welcomes a broader audience into our design process. By leveraging GitHub – a platform primarily created for sharing code – we have established an open forum for visual design critique and discussion. Public participation is encouraged and all disciplines are welcomed to contribute helpful suggestions. You can see this in practice in this recent discussion about standards for website hero illustrations. Using GitHub also allows us to communicate asynchronously - so if you miss a meeting or critique, you can follow the conversation and jump in.
- MB: We also practice radical transparency. We have an open-source policy and try to develop our software in the open on GitHub whenever we can. For example, we developed a tool called eRegulations to help make reading government regulations easier.
- MB: Since the code is open source, anyone can replicate it
- MB: - and that’s just what the the Bureau of Alcohol, Tobacco, Firearms and Explosives recently did when they made their own version with their own regulations.
- Big idea: Transparency Note: Placeholder https://atf-eregs.18f.gov/ MB:
- MB: As a department, our leaders have also embraced transparency, working to post meeting notes and document decisions for those who weren’t in the meeting. Finally, we like to share our work with the public, going into detail on our process on our CFPB Open Tech website. Our team is stronger because we practice openness and collaboration each day.
- NF: Lastly, we work to maximize our reach. Internally, we work to broaden the role of design. Externally, we strive to maximize the Bureau’s reach, with the goal of delivering our tools and resources to all Americans.
- NF: When I joined the CFPB three years ago there wasn’t yet an understanding (outside of our team) of how design could serve to strengthen the mission-driven work. Like design agencies in the private sector, we had to promote our team and compete for business. This meant delivering many design presentations to Bureau staff, taking on all projects (no matter how small), offering our design expertise, practicing loads of patience. We continue to serve as advocates for design within the Bureau, whether we’re collaborating with colleagues, producing work that gets noticed, hitting our deadlines, or reviewing and providing feedback on design work.
- NF: Originally, our limited graphic design resources were largely dedicated to designing reports to Congress and building PowerPoint presentations for our colleagues. It was clear that if we wanted to maximize our reach, we would first have to increase our team’s productivity. Our first task was to create a library of general-use templates, which would place the tools for creating basic branded materials in the hands of our non-designer colleagues. We created, and continue to maintain and update, a suite of branded templates like reports, presentations, and data visualizations.
- NF: We also developed a suite of InDesign and Illustrator templates to increase productivity within our graphic design team. As the years have passed, and thanks in large part to templates and well-defined standards, we continue to increase our design involvement in mission driven work.
- NF (I will talk while the video plays silently) The annual CFPB Tax Time campaign originally launched in the fall of 2011, with the goal of helping people prepare for tax time and encourage savings goals. At that time, we did not yet have graphic designers and so the project was outsourced. This past year, we were able to bring the entire campaign in house, including the design, concept development, and copywriting. This is thanks in no small part to our proven track record of developing impressive products, hitting deadlines, and building trust and confidence with our non-designer Bureau colleagues.
- NF: This project illustrates how we have been able to maximize our reach over the years, thanks in part to templates and well-defined standards, as well as our work in building relationships and a good reputation throughout the Bureau. It also shows how we’ve been able to maximize our reach outside of the Bureau, creating tools and resources for all Americans.
- NF: In order to reach all Americans we’ve worked to create tools that are universally accessible, from online consumer tools to print forms and worksheets. We push for content written in plain language, that is clear, concise, and easy to understand. A large portion of our educational materials are designed in English and Spanish. We prioritize design fundamentals over trends to ensures that our work can serve diverse audiences. In working to reach to all Americans we have become stronger designers.
- NF: In order to reach all Americans we’ve worked to create tools that are universally accessible, from online consumer tools to print forms and worksheets. We push for content written in plain language, that is clear, concise, and easy to understand. A large portion of our educational materials are designed in English and Spanish. We prioritize design fundamentals over trends to ensures that our work can serve diverse audiences. In working to reach to all Americans we have become stronger designers.
- We’ve told you how we built our team, established standards, encouraged openness and collaboration, and maximized our reach. Now we want to show you how that all came together in the Know Before You Owe mortgage initiative, which launched this fall.
- MB: 47% of consumers don’t seriously shop around before applying for a mortgage. We think that more informed consumers are more likely to shop. They can save money in the long run and be more secure in their mortgages. Before, the process to apply for multiple loans was complicated and time-intensive.
- But now, the CFPB has made the mortgage process easier, with our new KBYO rule. The initiative includes: New disclosures will help you shop for a mortgage 3 extra days to review their disclosures at closing And a suite of tools to help you be more informed about the biggest financial transaction of your life Technology and design were integrated throughout the rulemaking process. This is a complete system from printed disclosures and information booklets to interactive tools for consumers.
- It all started with the new disclosures, the Loan Estimate and the Closing Disclosure. Each disclosure combines two old forms into one. They clearly highlight the most important elements of the transaction. Mortgage applicants should get more than one Loan Estimate to help them shop around, then compare the Loan Estimate they’ve selected with the Closing Disclosure at the end of the process to see how the loan has changed. The new forms were tested with close to 1000 users in both quantitative and qualitative tests. The rulemaking process takes a long time, so though the work on these disclosures has been going on for years, our work on rest of the materials has mostly happened over the past 18 months.
- This includes a redesign for the Settlement Cost Booklet. Creditors must provide this booklet to home purchase mortgage applicants, potentially reaching millions of Americans each year. This booklet has been around since the 70s, and used to be 78 pages with limited visuals. After our rewrite and redesign, it’s only 24 pages long and includes worksheets, checklists, and conversation starters.
- In order to maximize our reach, we made the booklet in two print sizes, and also a 508-compliant fillable PDF.
- On top of the printed pieces, there are also several websites that support this initiative.
- Both disclosures have unique URLs to that lead them to ...
- … a landing page designed specifically for users who arrive from the disclosure. It provides information that the consumer needs at that exact moment, with clear action steps. At the top right, there’s a link to our loan estimate explainer … an interactive tool that helps people better understand the terms and sections of the disclosure form. You can expand each highlighted field to get tips and definitions about different areas of the form.
- It also links back to our suite of consumer tools called Owning a Home. Through user research we discovered that consumers were looking for guideposts along the way as they shop for a mortgage and finance a home.
- so the site features four clear steps to help consumers “Know the process” and take control.
- each step has related tools, like a worksheet to help you define what type of home you can afford,
- and an interactive tool to help you explore interest rates for your situation, with data pulled in from real lenders at the end of each business day.
- When you’ve has reached the end of the mortgage process, our closing checklist can help take you to the finish line.
- After all this work on the disclosures and resources, everything launched to the public on September 17. This launch included the work of the Owning a Home project team and half a dozen projects by the Design Ops team, so we were working and sharing across our team structure. Many people had their hands on various pieces over a long period of time, so we had to constantly collaborate, communicate and be transparent as we worked towards this launch. The promotion campaign included this landing page with a video, a press kit …
- a microsite with tools and resources for real estate agents ...
- Plus we made social media and blog graphics to raise awareness among consumers. We’re really proud of this launch and think it aligns perfectly with CFPB’s origins, mission, and our vision as a design team.
- Our work is mission-driven and impactful
- We’ve been able to work on a wide variety of high impact products, ranging from an open source data platform,
- to a tool for comparing college costs,
- And videos that tell the stories of real consumers and their experiences navigating the financial marketplace, Our work is impactful and has to the potential to reach millions of people who may be struggling with a financial problem, like credit card debt, or working toward a financial goal like home ownership.
- NF: We’ve enjoyed sharing our story with you, and hope that our lessons in building a design team within the federal government can help to inform your team building efforts wherever you may work. As our story has shown, the work is always in progress, and small, incremental steps can deliver big rewards. Thank you for listening and finally, we hope you have a lot of questions for us!