PowerPoint Presentation

Designing for (all of) AmericaHow we built an in-house design team within the federal governmentPresented by Natalia Fitzgerald and Mollie Bates

NF: Hi, Im Natalia Fitzgerald and Im the Art Director at the Consumer Financial Protection Bureau. Im excited to be here today to share how we built an in-house design team within the federal government.

1

Creative Commons

Welcome to government

NF: Ive 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 designers 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.2

We design for all Americans

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, were entrusted with developing products that are easy to navigate, easy to understand, and universally accessible to all Americans.

3

NF:Instead of traditional style guide, we developed an open-source design manual that integrates directly with our UI pattern and code base. 4

NF:Instead of outsourcing design work, weve brought our graphic design specialists in-house. 5

CFPB Minicons | The Noun Project

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.

Were excited about new approach to design and development within the federal government.

6

Unique parameters in government Hiring is difficultOutsourcing design work is standard practiceStrict cyber security requirementsPrivacy rules around user data and testingLegal requirements for digital accessibilityDesigning for all Americans

NF:Building an-house design teams within the federal government isnt easy and its 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. Were also required by law to make digital products accessible to all Americans, including those with disabilities. In government we dont 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.

7

Mollie Bates () - Rewrite notes a little bit.Natalia Fitzgerald () - I''m working on these notes...trying to figure out how to merge what existed before about the "start up" with where we're going with this now. I'd almost like to change the angle a bit to focus on our team. we could call it a "tech start-up" and instead of zero to 1500 we could say zero to 75...or maybe that's not as impressive? I'm just trying to make sure this is focused.Natalia Fitzgerald () - Not sure that we want to refer to accessibility as an obstacle.OverviewUnique parameters in governmentWait, whats the CFPB?Heres what worked for usOur approach in practice

NF:Ive just gone over some of the parameters that exist when building a team within the federal government. Next, well tell you more about the CFPB, including a short history lesson and a brief overview of our core functions. Well then share whats worked for us as weve built and developed our in-house team. Well conclude with a case study to show the results of our work in practice. Were part of a collaborative team of designers and developers but as graphic designers well be approaching our presentation from a graphic design perspective. Weve left time at the end for questions and discussion. 8

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

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.

9

Official White House Photo by Pete Souza

Born out of the financial crisis

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 weve 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 were working to protect you.

10

Regulate, supervise, enforcePrepaid credit card disclosure

MB:So heres 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 theyre following the rules, and enforce the rules if theyre not.

For example, were developing a new rule that includes a form weve 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. 11

rework the image.

Accept consumer complaintsSubmit a complaint

NF:We also accept consumer complaints about financial products and services, such as credit cards and student loans. In our first 3 years, weve received over 650,000 complaints. Weve 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. 12

Monitor financial marketsConsumer Complaint Database

MBWe also monitor financial markets for new risks to consumers.

One way we do this is by analyzing the data from consumers 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.13

Promote financial educationCommunity Financial Education Project

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 CFPBs 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. 14

Research consumer behaviorUnderstanding consumer challenges

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 Bureaus mission. 15

Our approach1. Build the strongest team possible2. Establish core standards 3. Encourage openness and collaboration4. Maximize reach

NF: Now that you have a better idea of what we do and the parameters we work within, wed 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.16

Natalia Fitzgerald () - I'm still trying to find the right words for this (Keys to our success, Secrets to our success, etc.) I think I want to somehow touch on how this has been a huge experiment without a roadmap and that we've tried a lot of different things...but these are the moves that proved the most essential.Build the strongest team possible

1. Build the strongest team possible

MB:1. Build the strongest team possible. We didnt build our team overnight. Weve learned through trial and error the type of team member who fits well at the Bureau and how to structure our teams. 17

How our team grewTeam members

MB:Weve 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.

18

Natalia Fitzgerald () - Maybe we get rid of the word "generalists"? I think it adds another layer that we don't necessarily need.

Team membersHow our team grew

MB:Our growing teamAs 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 ...

19

Team membersHow our team grew

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

Natalia Fitzgerald () - Before moving to the next slide - talk about the 40 point on the graph so the next image makes sense.

Team membersHow our team grew

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 weve been working to smooth our working processes, build things faster and more efficiently, and crystalize our brand standards.

21

Our team todayDisciplineTotalManagementGraphic Design13Applications Lead1UX Design / Usability11Chief of Staff1Front-End Development13Administrative3Back-End Development21Project Management3Multimedia 2Discipline supervisors2Content strategy3Total6310

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.

Weve found that that designers who are pragmatic, team driven problem solvers work best for our team. Theyre patient and flexible with the parameters of government. No hotshots!22

Remote workforce

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

Team structure

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.

24

Collaborating with the Agile methodology

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.

25

Team structure

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

26

2. Establish core standards

NF:Step 2. Establish core standardsAn 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. 27

We work to make financial information more approachable, instill a sense of calm through clear design, and build trust through visual consistency.DESIGN VISION

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.

28

Logo

NF:LogoOur 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.

29

Our logo, a work in progress

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 sheriffs badge. I have no idea who designed these.

In 2012, an official logo was designed to reflect the Bureaus 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 didnt 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.

30

Web and print type hierarchies

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.

31

Color palette

NF:Color paletteThese are our primary and secondary color palettes.

32

Mollie Bates () - not sure where this is from. please add to ppt.Natalia Fitzgerald () - Will do. It's in an updated ai file that I have...

NF:Color paletteWe 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.

33

Minicon font

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 fontMinicons are small-scale icons that visually reinforce an action, file type, status, or category. 34

Mollie Bates () - NF to do visuals for 29-32

Isocon symbols

NF:Isocons can be used to indicate important actions and transactions, like downloading data or money transfer.35

Illustration style

NF:Illustration libraryOur illustrations are flat, use a limited color palette, and are made using geometric shapes. 36

NF:Our most common approach is to group a collection in a front facing still life composition.

37

Natalia Fitzgerald () - Placeholder slide for illustrations in context of a 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./38

Mollie Bates () - Let's do a gif here too

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.

39

3. Encourage openness and collaboration

MB:The third thing thats 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. 40

We work hard every day to strengthen our commitment to effective communication, collaboration, and transparency.TEAM CULTURE

MB:There are three key elements to the way we work that keep us all in sync: communication, collaboration, and transparency. 41

Mollie () - This could be a big type slide if we make a sentence out of it.

Team structure

MB:

As we showed you earlier, staff are broken into project teams and have the potential to work off on their own. Its 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.

42

MB:Since were 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.

43

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.

44

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

MB:Since the code is open source, anyone can replicate it 46

MB:- and thats just what the the Bureau of Alcohol, Tobacco, Firearms and Explosives recently did when they made their own version with their own regulations.

47

Big idea: TransparencyNote: Placeholder https://atf-eregs.18f.gov/MB:

48

MB:

As a department, our leaders have also embraced transparency, working to post meeting notes and document decisions for those who werent 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.

49

4. Expand and maximize reach

4. Maximizing our reach

NF:Lastly, we work to maximize our reach. Internally, we work to broaden the role of design. Externally, we strive to maximize the Bureaus reach, with the goal of delivering our tools and resources to all Americans.50

Expanding our role

NF:When I joined the CFPB three years ago there wasnt 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 were collaborating with colleagues, producing work that gets noticed, hitting our deadlines, or reviewing and providing feedback on design work.51

Mollie Bates () - Alternate title: Maximize reach in the office

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

52

Natalia Fitzgerald () - Mollie - We could add another slide with the girl dressed up as the CFPB beam to illustrate the last sentence: "As an added bonus, templates have empowered our non-designer colleagues to serve as ambassadors for the CFPB brand." Is that a good photo?Natalia Fitzgerald () - Note to me: Update the PP template so it has the same beam as the report template (our updated PP template should reflect this).Designer templates

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.

53

Tax Time campaign

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.

54

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 weve been able to maximize our reach outside of the Bureau, creating tools and resources for all Americans.

55

NF:In order to reach all Americans weve 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.

56

Mollie Bates () - Alternate title: Maximize reach to all AmericansMollie Bates () - I added this back in from V3. I think the content is really strong and we should spell it out. It would be smart to have a parallel slide for our strategies for maximizing reach inside the bureau.

NF:In order to reach all Americans weve 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.

57

Mollie Bates () - Alternate title: Maximize reach to all AmericansMollie Bates () - I added this back in from V3. I think the content is really strong and we should spell it out. It would be smart to have a parallel slide for our strategies for maximizing reach inside the bureau.

OUR APPROACH IN PRACTICEKnow Before You Owe Mortgage Initiative

Weve 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.58

47% of consumers dont seriously shop around before applying for a mortgage.THE PROBLEM

MB:47% of consumers dont 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.

59

Know Before You Owe

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 mortgage3 extra days to review their disclosures at closingAnd 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.

60

Four forms into two

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

61

Natalia Fitzgerald () - Recap what we accomplished on a top-level.

Printed guide to the mortgage process

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, its only 24 pages long and includes worksheets, checklists, and conversation starters.

62

Know Before You Owe

In order to maximize our reach, we made the booklet in two print sizes, and also a 508-compliant fillable PDF.63

Natalia Fitzgerald () - We haven't explained 508.Disclosure points to website

On top of the printed pieces, there are also several websites that support this initiative. 64

Disclosure points to website

Both disclosures have unique URLs to that lead them to ...65

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, theres 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.

66

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

so the site features four clear steps to help consumers Know the process and take control.

68

each step has related tools, like a worksheet to help you define what type of home you can afford, 69

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

Mollie Bates () - GIF

When youve has reached the end of the mortgage process, our closing checklist can help take you to the finish line. 71

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 72

a microsite with tools and resources for real estate agents ...73

Plus we made social media and blog graphics to raise awareness among consumers.

Were really proud of this launch and think it aligns perfectly with CFPBs origins, mission, and our vision as a design team. 74

The rewards of our efforts

Our work is mission-driven and impactful 75

Weve been able to work on a wide variety of high impact products, ranging from an open source data platform,

76

Mollie Bates () - This will be a gif to focus on maps and graphs.

to a tool for comparing college costs,

77

Mollie Bates () - This will be a gif to focus on comparison tool

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.

78

Mollie Bates () - To be consistent, this could be a gif as well?We welcome your questions or thoughts

THANK YOUnatalia.fitzgerald@cfpb.gov mollie.bates@cfpb.gov

NF: Weve 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!

79