18F Design Presents: Mollie Bates and Natalia Fitzgerald

>>All right. Thank you, Ori. Thanks, everyone, for joining us. We’re really happy to have
Mollie and Natalia from CFPB. One of the first, if not the first, agency
to actually develop an in-house team of digital designers using actual good
modern software development practices [inaudible] design. Molly Bates is a designer, and Natalia
Fitzgerald, I think you’re Art Director at CFPB? Very lucky to have them here talking
about how they built their team of designers and their practices at CFPB. So we’re very excited to have
you and please take it away.>>Thank you [inaudible].>>I’m Mollie Bates and I’m
a graphic designer at CFPB. I’ve been there about two-and-a-half
years, and we have a confession. We are practicing on you guys. We are doing this talk at the AIG
National Conference in about two weeks, so we really would love your feedback. We have some paper forms for people in the
room and anyone not [inaudible] if you want to just jot down feedback and e-mail it to us. We have our e-mail addresses at the end. We would really appreciate your feedback.>>Hi. I’m Natalia Fitzgerald. I’m an art director at the CFPB. I’ve managed the agency for three years and
we’re excited to be here to talk to you guys about how we developed an in-house
[inaudible] agency within the [inaudible]. It’s a powerful tool that can serve to
transform the consumer financial marketplace. Effective design can serve to clarify confusing
[inaudible], demystify complex concepts, and empower consumers with knowledge to
help inform their financial decisions. Unclear design can serve to further confuse,
make the complicated even more complicated, and make consumers feel unprepared
with the data, and overwhelmed. Fortunately, the key founders of the bureau
recognized that just as unclear design and technology had played a key role
in financial problems you’re facing, effective design could play a
key role in the solutions, too. As a result, the importance of this place on
building an in-house design team that would work to support [inaudible] and core functions.>>So here is our mission. The Consumer Financial Protection
Bureau is a 21st century agency that helps consumer finance markets work by
making rules more effective, by consistently and fairly enforcing these rules,
and by empowering consumers to take more control over their economic lives. So that’s our officially approved mission. But to give you guys a little
bit more history, in June, 2009, President Obama proposed a new agency to
focus directly on consumers and their finances in light of the failures of the — that
were exposed by the financial crisis. Then, in July of 2010, Congress passed
the Dodd-Frank Wall Street Reform and Consumer Protection Act. This Act created the CFPB to serve
as a single point of accountability for enforcing consumer Federal financial
protection laws and protecting consumers. Up until then, this responsibility was
spread out among several different agencies. But today it’s our job. When we’re talking about consumer financial
products we’re talking about things like mortgages, credit cards, student
loans, auto loans, and other products like payday loans and prepaid cards. Actually anything with an interest rate. So here’s how this translates
into what we do on a daily basis. We focus on seven core functions which are
listed here, and [inaudible] explain each of these we’ve collected examples of
design work that we’ve done that relates to each function and that
sort of exemplifies it. So, the first one is that we
write rules, supervise companies, and enforce Federal consumer
financial protection laws. So an example of the work we’ve
done, and this is exposure — [ Music ] This replaces four mortgage
disclosure forms with two new ones, the loan estimate and the closing disclosure. These new forms are easier to
understand and easier to use, and have been user-tested all over the country. The rule also requires that you get three
business days to review your closing disclosure and ask questions before
you close on your mortgage. These forms were designed very early in
our existence, almost four years ago now, but this rule goes into effect
in less than two weeks. So if you apply for a mortgage this fall
you’ll probably receive a loan estimate. We’ve also built a suite of tools to support
consumers throughout the mortgage process, and we’ll tell you a bit more about that later. Our next core function is that we restrict
unfair, deceptive, or abusive acts or practices, and a project we’re working on that exemplifies
that is the prepaid credit card disclosure. It’s another disclosure like
the mortgage disclosure. We do think that consumers should be able
to make direct comparisons among products and that no provider should be
able to use deceptive practices. So we’re developing a new rule
with a model form to disclose fees on prepaid credit cards in the store. This is a growing financial product that lets
people have access to online shopping and ATMs without a bank account or a line of credit. We want our model form to clearly
present the cards’ most important fees so you can easily compare and pick
the best prepaid card for you. The next function is that we accept,
review, and route consumer complaints, and then open that complaint
data up to the public. This is our submitted complaint portal
where consumers can submit complaints about a financial product or service. Consumers can submit a complaint via this
online form which we designed on the phone or in the mail in a paper
form that we also designed. The CFUV then routes the complaint to the
company and works to get you a response. We’ve received over 650,000
complaints in just a few years, and we’ve helped consumers secure hundreds of
thousands of responses from companies as well as millions of dollars of monetary relief.>>Our fourth core function is that we promote
financial education, and this is big part of what we do when we design for
— a big part of the work we do. This project example is community
financial education process. We partnered with the libraries with the goal of
making reliable unbiased financial information and tools more readily available to consumers. People now trust in the libraries and in their
librarians, and so our goal is to leverage that trust and to make public
libraries a top-of-the-mind resource for consumers seeking information
about their financial decisions. As part of this integrated campaign we
created a motion graphics video, web graphics, informational handouts, share graphics,
posters, bookmarks, screensavers, and a — — and a webpage. I forgot to say that. Our fifth core function is that we
research consumer behavior and we’re finding that this video here — are
you going to play it?>>Yeah.>>This is a research — the
results of a research project about understanding consumer
financial challenges. The CFPB hired a group of analysts and
researchers to investigate challenges that consumers face when they’re
making a financial decision. The goal of the investigation was to observe and study what actions consumers
took and why they took them. They wanted to pinpoint the most
important challenges and look at potentially what had caused these challenges. From the list of challenges they selected
the ones that are based on consumer behaviors or decisions, widespread, possible
to change, and possible to measure. Then they had us create this video
in order to publicize their findings. We also developed a landing page
to house a full set of resources. But the core function number six is
that we monitor financial markets. Here you’re seeing the landing page
for the consumer complaint database. The consumer complaint database
contains the financial complaint data that we receive via our submit-a-complaint
tool, on the phone, or in the mail. Internally, we analyze the complaint data
in order to target supervision efforts and identify potential problems in the
marketplace before they become larger problems. The public can also view a scrubbed
set of the data via our website. Our seventh core function is that we enforce
laws that outlaw discrimination and other types of unfair treatments of consumers. Here we’re showing a shared graphic. We really don’t do a kind of enforcement
design work because this is largely handled by the lawyers of an organization. But when enforcement actions do happen
we are tasked with creating imagery to publicize them via social
media, blog posts, on our website. So now that you’re familiar with
our core functions we’d like to talk about what we’ve learned from
building our in-house design team. Although some of our experiences
are specific to our set of circumstances there are also
global lessons that can be applied to other organizations working to
develop their own in-house teams. Building an in-house team is good for business, and most government agencies there’s
a lot of contracting of design work. Design-a-team is a commodity for purchase
rather than a valuable investment potential. When we procure design talent from the outside
rather than investing in the agency staff, money is spent on a single
end-product with a fixed value. With an in-house team mission-driven creative
individuals can work collaboratively while improving their skills, becoming
fluent in what — and [inaudible] style while
gaining a true understanding of the mission and the goals of the agency. As an asset, in-house designers
appreciate over time. As the in-house design staff
matures and systems are put into place, the agency reaps the benefit. We have learned a lot from building our
in-house design team from the ground up. We have identified these four steps
in developing an in-house design team which we will go through individually.>>So we didn’t build this team overnight. It’s been iterative and it’s
taken a lot of hard work. We learned through trial and
error how to structure our teams, and which types of team members really fit
well as designers or developers at the Bureau. We’ve experienced periods of rapid growth
and some change over the past four years. If you go all the way back
— whoops, sorry guys. If you go back to 2010, right
after Dodd-Frank was passed, design and technology generalists
were added to the team that early. Some of them may be in the room. It was back when the Agency was
still part of the Treasury Department and there were less than 50 employees. These generalists did a ton of work and
it was more like a start-up environment. They launched two iterations
of consumerfinance.gov. They developed our brand
foundations with the Agency IDO, and they launched our online complaint
portal which was a huge [inaudible], so they have lots of fascinating stories. You should grab them and buy them
a drink sometime to hear them. In our second phase, we opened
for this officially in July, 2011, one year after Dodd-Frank passed. We had less than a dozen design
and development staff then. A little bit later in that year we
brought on our Creative Director, Audrey Chen, who’s still leading the team. By July, 2012, we were celebrating our first
birthday and really starting to expand the team. So the team was a mix of contractors
and full-time Federal employees. But that summer is when Natalia joined the
team as the first specialist graphic designer. The team was working on launching
products like paying-for-college, and they were also really busy planning
to have a tech surge in the staff by hiring 30 Technology and Innovation
Fellows to help the Bureau — to [inaudible] up the Bureau’s technology needs. So that sort of represents the third period
going into January, 2013, December, 2012, when they added 30 Technology
and Innovation Fellows. That is when I joined the team. The Fellows were hired from all around
the country to work on a two-year term, and they had the freedom to work, and they currently have the freedom
to work from their home offices. This influx of staff, it like
tripled the staff and it meant that the group had a lot more capacity to take
on more work, but also introduced its fair share of growing pains, of which the entire
Bureau was going at this point. They were growing really quickly. The team launched its Spanish language version
of the website, a micro-site for the release of our mortgage data which was just
released again today for the past year. An update to the paying-for-college
tool, the eRegulations platform which Jen Ehlers played a
big part on, and John Yuda. Owning home. We also pushed our brand to sort of new heights with the substantially expanded graphic
design team sort of pushing the illustration and icon files which we’ll show you soon. So two years after that, we’re kind
of reaching our steady state of staff. This is about where we’re going
to be for the foreseeable future. We added 23 new Fellows in January. Of course we lost a few along the way as well. In the past six months with the new
Fellows we’ve been working on smoothing out our working processes, building
things faster and more efficiently, and really crystallizing our brand standards. We’ve launched a second iteration of Owning a
Home, and we’re working on a home page redesign, and we’ve also built several internal
tools for analyzing financial data. So here’s our team today. The Agency is pretty small. It only has about 1600 employees. So with a Design and Development Team of
about 70, that represents a pretty good chunk, especially when you compare it to other
government agencies that have tens of thousands of employees and just a couple of designers. This is a mix of full-time Federal
employees, the termed Fellows like me, and some long-term in-house contractors. As we mentioned, our team is unique in
that about half of us work remotely. So a big chunk of the designers and developers
work from their homes all around the country and are probably calling in today, so hello. We’re pretty specialized. So we now — that we have such a big staff,
we have graphic designers, UX designers, back-end developers, front-end
developers, multimedia specialists, and we just built a little content
strategy group that is growing as well. So we want to talk to you a little
bit about how we structure teams and sort of structure our department. We have a group of people that are assigned
to project teams and those teams are sort of evenly distributed among
the different disciplines. This is a sort of symbolic representation. There may be more than one person,
one graphic designer, on each team, but there’s six project teams so like one
of those teams is the Owning a Home team. Those teams stay together as their projects
change, so Owning a Home just released and they’re going to be moving
on to a new project very soon. The other big chunk — oh — and these project
teams also each have a prize owner from one of our wonderful colleagues around the Bureau,
subject matter expert in the [inaudible] donor. Then one of the team members
serves as a Scrum Master. The other big team we have is design-off, which
is really our in-house Creative Services Team. This group has [inaudible] has six
graphic designers and two each of UX, multimedia, and front-end developers. The design-off team has about
30 projects active at one time, and has completed over 200
projects so far this year. So this can range from anything from a simple
handout to a video to a full website launch. Then our other big team is a developer
of heavy software delivery team which is basically the dead
opposite side of our house, and they keep our servers up
and our websites launched. So here’s our team in January. We are really proud of the team we built
and we think we’ve started to really hone in on the type of people that are really
successful working in design and development in government, specifically
for graphic designers. We find that the best fit at
CFPB, the people are pragmatic, they’re smart problem-solvers,
and self-motivated. They’re very collaborative and team-driven. They are also empathetic and diplomatic
which also means very patient and flexible. You guys know what’s in government,
you have to be very patient and we — our best designers are true diplomats of design. Everyone at CFPB is really driven by
our mission, so they are working at CFPB because they really believe in
what we do and how we do it. So within each of these buckets we
want to also share a little bit of work that we think exemplifies the concepts, so for
building our team we wanted to show you how — a way that we sort of bring the team
members on and immerse them in our culture and the way we work, and
bring them onto the team. So when we started our new Fellows in
January, they came to D.C. for four weeks to immerse themselves into
the Bureau and our team. One of the things we like to do during
immersion is two-week short projects. So this short project was
related to a mail insert that went into some Americans’ tax returns which
was encouraging consumers to engage with CFPB’s tell-your-story tool. This campaign needed its own site
[inaudible] this group, and had a custom URL, and introduces CFPB and then
lead them to our other tools. So the small project team built
this campaign page in two weeks with quick-and-dirty hallway user
testing, and really efficient and quick application of CFPB’s fine standards. The page explains what we’d want from a story,
and then also leads consumers to other offerings like our complaint portal or our financial
encyclopedia if they have a question in case telling a story is not
actually what they want to do. These stories lead us to another campaign
that we have called “Everyone has a Story.” These are short videos of real consumers that
are talking about how the CFPB has helped them. We draw these stories from the
tell-your-story feature and from our complaints. We love these videos because they’re really
direct and consumer focused and personal and kind of get to the heart of what
we’re doing and why we’re doing it. So, small projects really are a great way to
get the team energized, building something fast and working together and learning our norms. So the second key to building
a successful in-house team is to embrace and cultivate team culture. With such a large remote team
we have strong cultural norms that encourage cross-disciplinary
problem-solving. So I’ll come back to this slide here. As we showed you earlier, the teams
are broken into separate project teams and have the potential to go and sort
of work in their own little bubble. But we work really hard to break these barriers
and to work across the different projects and across the different
disciplines because when we design in silos we are all solving
the same problems individually. But when we can sort of share
out and collaborate it’s easier to see the broader landscape
and solve the problems together. So we think the keys to our culture
are that we iterate, collaborate, communicate, and are super transparent. So we, in terms of iteration, we do get
to work side-by-side with our developers and user experienced designers everyday along
with our wonderful subject matter experts and colleagues throughout the Bureau. These project teams do use the agile methodology
to develop software with two-week spin cycles, standard ceremonies like Scrum, Sprint
Review, and Sprint Retrospective. As you may know, the agile methodology really
doesn’t cater specifically to designers, so we’ve worked to kind of smooth that out
and figure out how to work a little bit ahead of the Sprint and kind of meld with our
developers and UX designers so that we can kind of all be on the same page
going into each Sprint. But we don’t always succeed. We do try to work iteratively
and improve tools over time. This is our paying-for-college tool,
and it has undergone many versions since its first launch several years ago. One of the small projects that
I just mentioned, from January, was a overhaul of the repay-student-debt
tool which is what you see right here. So based on some usability testing the team
redesigned the tool to just serve users that [inaudible] it before had kind of like
this question with like a lot of information, and then the answer, and then the — after it’s
kind of put the answer right with the question and then have the additional information off to
the right if they need to know what’s going on. Then, if this whole decision tree, UCB,
kind of hidden behind each question, so you don’t really know where you come from
and where you are going, so the team improved it to show the answers they previously
made and give them the opportunity to change the answer if they wanted to. So in just two weeks we were able to do a quick
iteration on this tool to improve it for users. So after iteration is communication. Teams are largely remote and so we
collaborate on GitHub, Google Hangout, and in our permanent chat rooms
like this one in [inaudible]. This is some chatting from yesterday
about publishing new articles. This is a grab from one of our weekly
critique groups that was meeting yesterday. You can see some of my teammates there. So we now are meeting in pods of UX and
designers that are across all the project teams. So there’s three different critique groups
and they meet for an hour once a week to talk about their projects, and that way
they kind of get to know the project, but they’re kind of all over
the different projects. But the groups are small enough that
they can give effective feedback. Previously we met as a big
group and as we continued to grow this got like less and less effective. So we really value seeing faces and
sharing screens and we’re always trying to find a replacement for like the
hang-it-on-a-wall type of critique that we really can’t do as there are no staff. The other thing we do to collaborate
is we use GitHub issues to design and discuss things asynchronously and openly. We use the GitHub issues to start projects
and iterate through the whole process. We’re always dropping in
screenshots and iterating across projects and between team members. This is a sample discussion about our standards
for our website’s [inaudible] illustrations. So, lots of different people coming
in and showing how measurements work, and different alternatives to this design. The other way we collaborate is by
getting together and hanging out. We get together every quarter for a
week-long re-group here in D.C. There’s a lot of work involved, but there’s also a lot of fun. This is our complete Graphic Design
Team in January enjoying Union Market. We also value radical transparency. This is our open-source policy, and we do
try to develop in the open whenever we can. We also design in the open on GitHub. All of our design standards are discussed
in the open on our public GitHub. The issues are there for
you to snoop on and join in. As a department, our leaders have also
embraced transparency, and they’ve been working to post meeting notes and document decisions
for those who weren’t in the meeting. They use our internal GitHub to do that. We also like to share our work with the
public, and we go into detail on our process with articles on our website, CFPB Open Tech. So to give you a little case study about
embracing and cultivating our team culture, we want to show you our most recent release which is our know-before-you-go
mortgage initiative campaign and the latest release of Owning a Home. So last week we launched this campaign to tell
consumers about the new mortgage disclosures and all the tools we’ve released
to help them shop for a mortgage. So this was what I was just
telling you about earlier. Two new disclosure forms. The launch included the work of
the Owning a Home project team, work from one of the small
projects that we did in January, and like half-a-dozen finance projects. Many people had their hands on various
pieces over a really long period of time, so we had to constantly collaborate,
communicate, iterate, and be transparent as we worked towards this launch. This campaign included this landing page and
a video, photographs, social media graphics, a micro-site for Realtors, real estate
professionals, excuse me, and the newest release of our suite of tools called Owning a Home. This is Owning a Home, the latest version,
and through user research we discovered that consumers are really looking for
guideposts on the mortgage process. That’s what the latest release does. It features four clear sets to help consumers
know the process and really take control. It also includes an interactive tool to help people dive deeper
into the new disclosure forms. This was created as part of the two-week
projects in January, which is really exciting because some new team members made
this option tool really quickly. Then it was further improved upon by the
Owning a Home team over the past six months, after a couple of rounds of usability testing. This was the second release of Owning a Home. The earlier release was in January and included
a tool to help consumers explore interest rates in their area, and they found their credit
score, and it pulls real data in from when there is at the end of
each business day so you can see like what rates people are offering around you. The team has made iterations on this page and
others over the past year, so we really think that this really is — represents sort of the
best of our design and development culture. We have three articles about this
release up on our CFPB Open Tech Site, so if you want to hear more,
please check it out there.>>Success rate to establishing
an in-house design department is to establish more standards, and
this is very important in terms of maximizing efficiency and consistency. So first off, what is a brand? A brand is a visual representation
of the values of an organization and encapsulates the ideal personality
and tone of the organization. Working from agreed-upon brand standards,
taking all developed from the same baseline. This increases consistency and efficiency and
[inaudible] across teams and projects as well as throughout the larger organization. Okay. Our original [inaudible], our original
plan including our logo, core palate, Type A’s and type cards [inaudible] for
print and [inaudible] as we continue to create large [inaudible] for a more robust
set of brand elements and design standards. We extended our brand expression to include
flat illustrations, a full icon library. We called them minicons, and an updated
type [inaudible] for web and print, updated color palate, and brand
considerations for photography and video. We are always working to evolve our standards. We are expanding our color palate as we speak. I have aside from that. This is the GitHub issue where we are
discussing the expansion of our color palate where we will be adding more tints to allow us to become almost totally flat
in terms of our illustrations. So to address the fact that our brand
green is not rather late approved. So we are creating an RGB version of our
green that will be a test for on the Web so that we can stop hiding [inaudible]. So this will be released at the end of
the month along with a lot of updates to our design manual and standards.>>You [inaudible] center.>>This is an example of — a very basic
example, but an example nonetheless of what happens when you go from
a Word document to our brand. It kind of speaks for itself, but we’ve got a
clearer hierarchy, we’ve got ample white space, we have our logo, correct logo, digestible
line lights, just best practices, and we can create these in
about 10 minutes maximum –>>Yeah.>>– in our template. So in order to house all our assets for the
graphic designers, we have stored them all on our Google Drive in our Brand Folder and
there designers can find everything from fonts and color palates to illustration
and icon libraries, and there’s also templates
for web and print projects. So that allows us to really work fast and not
redefine them everytime we start a project. We’ve also created a brand of
templates for non-design staff. We did this a long time ago,
at the very beginning. Well, not the very beginning, but like one
year in because I think we were being asked to design a lot of reports in
terms of graphic designers. Private designers don’t really
want to design work reports. It’s not really a good use of designers’ time. So we wanted to make our staff a little
more autonomous and give them the tools to create branded materials on their own. So we have a library of core templates
and that frees up the staff to work on the mission-oriented work,
which is really why we’re here. In order to share this out, we have our
design toolkit which is on our intranet, and here people can download color
palate, logos, our minicon font, and they can also learn a little bit about
the CFPB brand which is always helpful. There’s some [inaudible] reports and
presentations and all different kinds of things that people can work on. We also built a tool for our
designers which is open source. It’s our Design Manual . It includes our design principles, our visual
identity which is all our branded work in terms of color, type, logos, that kind of thing. It also includes our UI toolkit which contains
patterns for reusable user interface elements. These patterns help us to create a
consistent user experience throughout all of our web products. We’ve also developed a front-end framework. It’s called Capital Framework and it’s a set
of modular html, css, and JavaScript patterns that can be used collectively and individually. It’s been written to work across a
large number of devices and browsers and it follows a modern mobile
[inaudible] approach. So it’s adaptable to a wide
range of screen sizes and carefully follows best
practices for accessibility. So here I just wanted to give you a little
overview of like top line good tips. Keep the most usable solutions
and shed the rest. Clear the [inaudible] of like design that it
takes a long time to get rid of [inaudible]. So we constantly have to be editing ourselves
down and just keeping essential best practices, best solutions, which allows us to work
faster and, yeah, have a superior product. Also we have to work to standardize the process. It’s not exciting work but project intake, design and review an approval
process, have it update our manual. All this kind of stuff has to be established. Also embrace parameters. A lot of people get kind of — sometimes
a little stifled by the brand and — but it kind of puts you in a box, but it
also gives you an opportunity to really work on the work that — solving
the problems that count. So we’re not every time working on creating a
new way of doing our button or link styling. We are actually doing the work that matters. So it’s good to establish that foundation and
to feel empowered by it rather than stifled. So our example here for establishing
core standards is the evolution of our logo which is kind of fun. We started with the one on the top left in 2011. I have no idea who designed it. Someone in the room might. But it’s the first logo that I can find.>>Not guilty.>>Then we go on to our second
logo which is 2011 to 2012. This was developed in partnership with
IDO and features the gradient theme which is lighting the way to shed
light on the financial marketplace and make things more transparent. This logo was actually pretty
radical for government. It’s got lower case letters. It’s NF Serif. It’s [inaudible] font base and
it doesn’t look like government. It’s not a seal and it’s not
what we’ve come to expect. So in 2013 we kind of got a little uncomfortable
with the fact that there was a gradient in the middle of the logo and
we had a no-gradient policy. We were finding all our illustration
work and going more for that esthetics, and so we thought we can’t be
hypocrites when it comes to our own logo because everything comes off as insincere. Not our own logo. It has a gradient.>>Not to mention the production difficulties with having a gradient in
the middle of your logo.>>Right. Or staff wanting to use
gradients in playing with the logo. So we updated it to make it flat. This was a great development. This year we started to realize
that we had [inaudible] numbers, but we had over 100 versions of our logo
when you count Spanish, English, horizontal, vertical, different color modes,
all the different logo versions. We had that many. This just seemed insane from
a management perspective. We also were trying — we were realizing that our logo wasn’t really
very friendly in terms of 508. The contrast of the Consumer Financial
Protection Bureau wasn’t adequate, and also we wanted the words to be bigger, so
they’re going the full height of the C now. We decided to scrap a lot of our other
logos and just make this our logo rather than having lots of versions of our logo. So this one is about to launch. I think that illustrates well how we have edited
down, how we simplified, and how we changed to address new problems, or to solve for
things like 508, and reaching audiences. So the last step is that we would
like to expand and maximize reach. In this section I want to talk about reach as
it applied to reaching the most people in terms of our audiences, and also being the most
productive that we can be, taking on projects with the ultimate goal of
bringing all design in-house. So in order to do this we have
to create opportunities for work. So some of the best practices for this are to
keep your eyes and ears open, talk to everybody, build relationships with your colleagues,
take on even the smallest projects because sometimes those blow
up into gigantic projects. Always be an advocate for design. We work in an agency of mainly non-designers,
and so we are constantly advocating and serving as the gospel of design communicators
[laughter]. I have this line. So we also learned a lot about working with
our designers, colleagues, and partners. In-house design is a new idea for government,
so we definitely have to market design. We have to practice design diplomacy so in
[inaudible] we want to throw up our arms and have a fit or kind of be
like you don’t understand. How can you not understand? We kind of have to remember that everyone
doesn’t see the world the way we do, and be calm and teach about design, and teach how design
benefits the specific person we’re talking to. That’s really a good sell. We also have to serve as
resource for design expertise. Coach and guide our external vendors. We have a lot of external vendors
that work on CFPB branded work. That is a very, very challenging
task, managing their work, and managing them trying to do our brand. But it’s important work because
at this time we still can’t take on all the design work, so
we have to do what we can. So in terms of expanding and maximizing our
reach we also want to do design for all users, so this means we create low-tech and
high-tech solutions, so it’s not just all web. We also design print and just try to think
of different ways to reach more people. We champion accessibility. This year we are working a lot harder on that. We got a — finally an expert in-house recently
and the pressure seems to be building to start to push forward and make the changes. We provide the content in multiple
languages and we write in plain language so that things are easy to
understand and to digest. We test and retest for functionality and we
prioritize design fundamentals over trends. So it’s really about the basics of design so that we can really communicate
clearly and thoughtfully.>>So to illustrate this expansion
and maximization of reach, I wanted to talk about our
CFPB tax time campaign. I’m going to play this video in the background. It’s a motion graphics video
that we made for the campaign. The CFPB tax time campaign is an annual effort
aimed at helping consumers prepare for tax time, and encouraging them to save
all or part of their tax refund. To accomplish this goal we partnered with the Volunteer Income Tax
Assistance Centers across the country. The Office of Financial Education within the
Bureau first watched the campaign in 2011. At the time the design team was slim and
overstretched, and as a result the design work for this project was largely contracted out. I was here to see that. It was no good. But as the years have passed, we’ve
pushed for increased design involvement and each year we’ve been able to
take over another piece of the work. So in order to take over work we have to
prove that we have the capacity to take it on. We have to prove that we’re great,
and we have to deliver on time. We always have to deliver on time,
so that nobody thinks we can’t. So this past year in 2014 we were finally able
to take over all the graphic design as well as a good share of the content
development and copywriting. This is thanks to our proven track
record of creating great work as well as an increased capacity due to staff increase. As part of our integrated campaign for
2014 we created a motion graphics video that we’re watching here. This video –>>I’m sorry.>>One of the goals of this video was to — I
think there’s some stuff getting cut off there, but we wanted to show all the text
that was being spoken on the screen, so that even without audio you
could take in the full message. This is good for people with hearing
disabilities, but it’s also great for the tax centers where we weren’t
sure if sound would come through. In order to reach consumers before they
arrived at the tax assistance centers, we provided digital assets so the
centers could post it on their websites. These included preparation checklists
available for download and graphics for them to put on their websites. We also designed materials to be displayed within the tax centers once
the consumers arrived. These are posters that we designed. We also designed informational handouts
and a worksheet that they would fill out when they came to the tax center.>>Cool. So, thank you for listening. We hoped you learned a thing or two
about us and CFPB and the past hour. We hope you learned about what CFPB does,
what we do, and what our mission is, and how design supports the
Bureau’s mission and core functions. We also hope you learned about
— learned some good lessons about how we built our in-house team and
what we think has made it successful. Maybe you can take those back to your agency
or your clients or if you’re watching on screen and work for a non-profit or a corporation. So we believe that the four steps
that have made us successful are that we built a diverse team
of creative’s over time. We’ve embraced and cultivated a team
culture that values communication, collaboration, iteration, and transparency. We’ve established our core standards, continue
to build them while also trimming them down, sort of that push and pull, stretching
and compressing of our standards. Then we also worked to expand our reach
within the Bureau so that we get to do lots of great work and help our colleagues, and
also our reach among the American people, so we can reach as many people
as possible and help them with their financial goals and problems. We hope you have lots of questions
for us, so please let us know. If you have feedback, we have papers here,
and please do e-mail us if you have feedback. We’d love to take your questions. Any questions? Come up with a question.>>This is a case study that [inaudible].>>That you do. [ Inaudible Speaker ]>>Or maybe.>>You showed those case studies and earlier
on you showed the small like four-person unit. Would something like the tax-time
preparation, would that be one smaller unit that would work on that whole project? Would it be multiple units
working on different aspects of it? How would those two things connect?>>To the tax-time [inaudible] team which
is like the in-house creative agency. We didn’t do any websites or software for
that project, so that’s usually a clue that design office has been
involved, and not a project team, because the project teams are usually
developing web applications and software, and the design opps team is usually
doing that collateral and the in-house — and serving the in-house needs
that aren’t software-based.>>Okay.>>Yeah.>>Very simple, simple life, so.>>Yeah, we’ve been doing some like
the know-before-you-go campaign piece. The design team has been doing some of
those simpler pages, but not anything sort of web-appy like the calculations.>>Like the data.>>Okay.>>Yeah. That’s usually the project teams.>>Okay.>>Hopefully, this is still on. You guys have been designing in
the open for a long time now. Have you guys had anybody
outside of your team comment on and give feedback on the GitHub issues? Or has it –>>I think only former staff members
[laughter], which we absolutely love when our favorite former staff
members jump in to give thoughts. We would love to have more public
involvement, but it’s kind of a weird ask. It’s kind of a hard thing to publicize. Like, hey, give us your opinion. I think going out and talking to
the public in places like this or AIJA in two weeks could
encourage people to do it, but, yeah, it hasn’t been a super-active
discussion with the public at this point.>>Have they forgot the designers though? It could be pretty appealing to jump in and — because back at the [inaudible] have
feedback and make them want to change?>>Yeah. I mean, as we develop our standards
— I mean, I’d love to hear more voices. I think as the U.S. web design standard
develops, if designers get hip to that, I think that might be really fascinating
to jump into that conversation, just because of the broad impact of it.>>I was wondering — I was thinking about
your project teams, how they’re set up, and kind of comparing them
[inaudible] them to AT&F. We, I mean, we– at AT&F we have project
teams but it doesn’t, in my experience, they don’t really like kind of stick
together and like go on to another project. I thought that was kind of interesting. Could you talk about — was that like a pretty
conscious decision that you guys made based off of some experience or, I guess,
wondering like how’s that working out?>>I think we’ll take [inaudible].>>Yeah. So –>>I can take it.>>Oh, you can take it.>>Yeah.>>Okay.>>Well we’ve kind of been experimenting
over the years in terms of how this works, so in the very beginning when the first
Fellows class started we had project teams for about six months. So about six months. But then I think it expanded
into like almost a year. Sometimes we’ll switch people
around if there’s not a good fit. But, really, we kind of reset
every like eight months, kind of not exact, because we keep changing it. But –>>Yeah.>>– we reached that, and
we do shift around the teams. But sometimes if there’s a smaller project, and then a smaller project,
maybe one team will take both. So it’s kind of like a reset
at certain times of the year. But it’s really hard to think that we’ve been
up so that all the projects end at the same time and new projects start at the same time. That was supposed to happen around September
1st, and that kind of hasn’t happened. So it’s actually been good that the
project teams have stayed pretty consistent because they’ve been able to sort of
stick in some other work for them. But it is totally a work in progress. Keeping the teams together is
a newer thing we’re trying, and I think right now is we’re transitioning
the September 1 transition to new projects. That’s where we’re trying
out to see if that works.>>Some project teams have worked
on one project for nine months. Other project teams have worked on two or
three, so it kind of — it really varies a lot. We’re still definitely still working it out.>>But definitely when we have new Fellows
staffers come in, everything’s shaken up.>>Yeah.>>So we’re — there’s like one
project that kept going, but –>>Yes.>>I guess I’m — yeah. Why do you guys have the Fellows program?>>To kind of rotate people in
and out for the private sector. It’s kind of like the innovation
Fellows are — how did that come about?>>It was to quickly hire a large
amount of people all at once.>>Also –>>Short answer.>>– with the opportunity to attract
talent from all over the country. Fellows can work remote, so we don’t have to
just depend on what we can find here locally in D.C. We can hire from throughout the country. We can review portfolios which is
something that we can’t do otherwise. It’s a very slow process for hiring, and so
it really allowed us to build the team quickly and overnight gain like 30 employees.>>Yeah. The like pattern of 30 people every two
years is not really sustainable because we — I would say, lost some people
about a year-and-a-half in. We lost a lot of people, and
then we had to re-staff up. So it’s really too volatile to continue
that, and I think the long-term goal is to increase the number of Federal employees
and decrease the number of Fellows to more like a more sustainable number that are more
like people coming in to inject new ideas and energy, and less of like half of our staff.>>Yeah. The initial Fellow staff was way more
than — so it was kind of a strange experience.>>Yeah.>>Because then new people were more
than the existing — more in quantity. So, culturally, that’s a little strange. Yeah. We’re still experimenting
with what works best. But bringing in long-term staff is definitely a
goal, but it requires — it takes a long time.>>Have you had any particular challenges
since you guys have been there that like stick out to you more than other
things, or it’s kind of –>>[Inaudible] in general. Challenges –>>Oh, sorry. Just, in general.>>We can explain –>>In like building the design team. Let’s say around that.>>I guess there were a lot
of kind of splinters –>>Lots of things, yeah.>>Yeah. Process. Getting at the process for review, for
[inaudible], pushing things through.>>I think one of the biggest things
we’ve struggled with is just like working out that project team cross-sharing
thing, because I think a lot of us came from previous jobs where you were a
designer under a assistant art director, under an art director, and there was
like a clear yes man in the hierarchy. In our structure it’s a lot
more flat and collaborative. It’s sort of like extremely
collaborative and consensus-based. So that has just been difficult to navigate,
but also really rewarding because everybody gets to be involved and gets to have a say. You don’t have that sort of domineering yes man.>>Yeah, it’s interesting. We kind of — people complain about it, but
it’s also not having people [inaudible] –>>Yeah.>>– and our manager breathing down our necks. But I think it’s — design [inaudible]
democracy doesn’t always work that well. I remember once in a design [inaudible]
meeting, one of our designers said, “Well, why don’t we just vote on it?” That was a funny day for me because I was — it was kind of like the extreme of maybe
not the right thing to beginning voting. Yeah, design by committee. So, yeah, I think that’s been very challenging
because we have a lot of different systems, staff on top of each other, and for a very
long time we were completely flat except for our creative director. Completely flat. Now, as you could see in
those slides about our staff, we’re developing the HR administrative type
of people: supervisors and the people that go up all the government bureaucratic
fund stuff that designers and developers would rather avoid. So we’re building that up now. This year has been a big year for
growing that category [inaudible]. For some things most people
are hired very quickly. I’m not sure why.>>Wow. We are going to be hiring a UX lead
in the next few weeks, or posting that job, so he is probably [inaudible] we’ll be
looking for a UX lead for a very long time, and really hoping to nail it this time. So, please get in touch with us or share
with your networks when that job is up for — all of our colleagues have been Tweeting
about it and so there’s a great article on CFPB Open Tech about what we’re looking for. So hiring the leads has been a challenge and
will continue to be a challenge, I think.>>So I saw that you guys do a lot of — I
know what you guys do a lot of UV testing. I’m trying to pretend I’m
[inaudible] audience in the future. Can you tell me about the process of how you get
access to users, how to you do user interviews when your users are situated
throughout the country? I imagine you’re working with a lot of groups,
for instance, that might not even speak English. How do you go about actually
speaking to those individuals?>>So we are specialists,
so we’re graphic designers. So that’s a great question for all U.S.
designers, but we’ll do our best to answer that. So we build user testing into
our major projects at sort of — we’re working towards getting towards
a cadence where the projects have sort of a regular schedule of testing. We recently hired John Rubin from JSA to run our
user research program, and he’s really starting to try to standardize that
process and how we do it, so we’re not reinventing the wheel everytime —
similar to all the design work we’ve been doing. Just kind of standardizing and repeating things. But we have to get our user
research approved through PRA, so we do a lot of — right yes, hallway testing. We do a lot of hallway testing in
CFPB with the players whenever we can. There might be about — okay, never mind. We get bigger research studies
approved through our PRA office, and they’re often contracted
through contractors. So we work with — fourth [inaudible]
now, do a lot of our user testing. It’s really been all over the map in –>>[Inaudible] the information experts, too –>>The people we’ve worked with, yeah. So — and it could be — they could
be working to make a focus group. They could be working to do
qualitative usability testing like on the prepaid card disclosure we did
like qualitative interviews with people around the country, and the contractors
are really helping us set that up in terms of like getting the people in the
room, and getting the surveys done. Or it could be quantitative in
mortgage disclosures were tested in a quantitative like 900-person
usability test. So we really are kind of running
all over the map with that, but working more towards standardizing
and streamlining that process through our user research program.>>One more question on the
[inaudible] design front. I saw that you guys recently switched
to a really cool looking flat design. A lot of people would — might argue
that that’s a hot trend of the moment. What are your thoughts of —
are you concerned about that? Do you think that — do you see the
visual brand of the CFPB evolving as, for instance, design trends evolve?>>I think it’s not. I see the flat design aesthetic as a core
reflection of our like mission and values. It’s flat. It doesn’t have any fake steps to it. It’s straightforward. It’s also more — it more of a
practical solution as well for printing because when we use transparencies and all these
other things we produce unexpected results. So we’re always striving
to be very straightforward, very honest, and we see flat design as that. So we’ve thought about it in terms of our brand. I don’t think dark shadows and
like [inaudible] and all that kind of stuff really makes sense for our brand. But we definitely have thought about
the angles with which we look at things. Front, it’s flat-facing. It’s not — there’s no trying to show
anything that doesn’t really exist there.>>Perspective.>>Perspective. So we’re just trying to create something that –>>It gives our illustrations
a really distinct style. It also is really nice because our web design
is — it helps make our web design super simple. I came in with more a print background and
I was able to just sort of like jump in and become a web designer because by stripping
away all that stuff, like you can really focus on composition and hierarchy and typography
which I think are really important to our brand and the way we work just to keep it super
simple and straightforward so consumers — I give them the information they
need in the most clear and plain way without any sort of gimmicks or tricks.>>Now I can’t see it as
growing in a different direction. But I don’t know what that direction
would be because we don’t know — we don’t know what the future’s going to — I mean, I’m sure [inaudible]
was really popular in the ’90s.>>It really needs to be trendy though. We’re like a government agency. We don’t to need like keep up — our
look right now looks very trendy. That’s true. But, hopefully, we don’t need to keep up with
whatever — wherever else the trend goes. Like if it goes like wired where like
what’s the crazy one that has — anyway. It’s just like towards this more like crazy tacky thing that’s
happening in some websites, like –>>Oh, you mean like the [inaudible]?>>No. Like [inaudible] the publication, but –>>[Inaudible] whatever.>>Like getting into more of like — I think we
get a publication that has like crazy websites. But more like they’re sort of moving
towards like more, more, more, and I don’t think we’ll ever move that way.>>No, [inaudible].>>I like that.>>Well, I mean, really our brand is based on very clear type hierarchy,
the use of white space. Just our respect for our users and we’re
not — it’s just clean and easy to take down and that can put people at ease and — because the stuff we’re talking about
is not like fun reading material. It’s material that causes stress and anguish
and so we want to make people feel comfortable and whatever the — it’s not
necessarily but Molly was just talking about it doesn’t sound like — yeah, I get that.>>You’re [inaudible].>>Anybody else? Any last questions?>>Do we have questions on the phone? Are they able to ask us anything?>>Their tweets are –>>Ask any questions online.>>Okay.>>All right.>>Come on.>>Ask any questions [inaudible].>>Laura Richter?>>Yeah.>>Don Brooks.>>Okay. So you mentioned reaching out
to users in times of stress or anguish. Can you talk about how you consider
the emotional state of your users in your design and in your brand?>>We do journey mapping whenever we’re
starting projects, trying to figure out when — how people are feeling and
how we can reach them — of various stress or anguish or women
are using a certain financial product. Where are they in this stage? How they feel. How can we only be at that —
early-on, Victor, you can speak to this. There was like a — charts from IDO that
had people in different quadrants based on where they were and what they were —
so you can probably speak to that, too. I don’t know. We’re kind of referencing that stuff less and
less these days, just because — I don’t know. I think things are going to be super simple no
matter where we are, and the product can — yea.>>Yeah. The experiences are pretty universal. A lot of know what it feels
like to be in debt and — like I have relatives that have gone bankrupt
or it’s not like an impossible thing for us to put ourselves in the shoes of the people that
we’re speaking to, and either we are a good test because we don’t know — we’re not
financial experts the way the other people in the Bureau are. We are there to present these complex
topics and make them understandable. But so we’re kind of — we’re like the user.>>But we do — like one thing we did with our
new Fellows in January was we had one session where we — [inaudible] something like
privacy implications so it was all like piped in with a certain super [inaudible]
private way that we listened to some audio of people calling our Complaint
Line and talking about their problem or some of the user interviews of people talking
through their financial issue and like the sort of journey that those users
go on when they’re trying — first of all, they’re just really happy
to be telling someone the full story, and kind of like just spitting it all out
and sharing, and having someone listen. Well, then, this happened and then I called
back, and then they wouldn’t call me back, and then I called again, and — that
kind of pattern, that frustration. So it’s really good to hear that and
hear people’s voices talking about that. So we do try to kind of build
that into our orientation when we’re bringing new designers
and developers in. But we can probably do it a lot more. I think our — when a new project starts, just
because we haven’t started that net new project in a long time, like, in terms of the
financial products, but they do — they have done like a lot of user
research, qualitative user research, in that way to get those voices heard
very early on in the discovery phases.>>All right. If no one has anything else –>>Can we just reiterate our –>>Okay.>>– plea for feedback because we’re
giving this to the IJA in two weeks? So it will probably be a not government
audience, but a graphic design and more specifically an in-house track, so if you have any feedback,
please do send it our way.>>So, do you have specific things
that you’d like feedback on?>>Well, our sheet here has the
start and stop continuum model in the spirit of great retrospective. But if you thought an example was
confusing or you wanted to hear more about something, or anything about our delivery. I mean, we’re really able to take it all really,
but that’s to improve over the next week.>>Or if something just fell flat and
you think it’s totally uninteresting. We’ve got [inaudible] that we can talk about.>>Yeah.>>Or how you felt about the
structure, whether it made sense. Whether you think the information is valuable. Yeah. There’s that first time for venting it, so I mean not counting our private
presentations to each other.>>I want to thank you guys. That’s — [ Applause ]>>Nice return.>>Oh, thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *