Creating a reassuring homepage
The consumerfinance.gov homepage is the face of the Consumer Financial Protection Bureau (CFPB), and with an administration change came the desire to rework the page to reflect a new vision. My team redesigned the page to speak directly to American consumers and lead them to critical resources.
My contributions
UI/UX design
Designed the page’s layout using the CFPB’s Design System as well as creating custom components—ensuring WCAG compliance. Collaborated with my team to conduct discovery and user research. Worked closely with developers to translate design into code.
Art direction
Determined visuals—from photography to illustration—to create a reassuring, supportive, and empowering page.
1.
Uncover consumer needs
To begin, we gathered insights from prior usability research, analytics, and interviews with CFPB call center representatives to better learn what consumers may be looking for on consumerfinance.gov.
We learned that visitors were most-often seeking to submit a complaint followed by looking for information about financial topics such as prepaid cards, debt collection, and credit reports.
We also learned that many consumers didn’t understand who the CFPB is and what the agency can do for them.
2.
Collaborate with stakeholders
To connect with stakeholders and understand business goals, we brainstormed who the page should serve, what tasks it should help people accomplish, and what experiential and emotional qualities it should have.
Define page goals
We determined that the page should introduce the CFPB, explain the value the agency provides, and get people where they need to go.
Set the page’s tone
We decided that the page should feel reassuring to consumers and express that the CFPB has their back. It should empower consumers and make them feel supported.
I collaborated with my team to plan and synthesize discovery activities.
3.
Design a prototype
To design the page, I conduced a competitive analysis of other government and financial tech homepages, sketched with stakeholders and teammates to generate ideas, and created wireframes. Once we determined a layout, I created a prototype and chose visuals.
I sketched, wireframed, and designed a page prototype for usability testing.
4.
Connect with consumers
To validate the design, we conducted user testing.
First impression testing: We gave participants time to view the design and then asked for their reactions. Participants gave positive feedback about the page’s design and organization. Most understood the page’s purpose, but not all understood that the CFPB is a government agency.
Usability testing: We gave participants a series of tasks to help us assess the navigability and usability of the page design, which revealed that most participants understood the page’s sections and where specific links would take them.
Desirability testing: We showed participants four page introduction visuals along with a list of key words, asking them which words best described each image and which image they preferred. Participants were most able to see themselves in a photo collage option, and they felt it represented the services and products the CFPB offers.
“This page is very encouraging and supportive. It speaks to me one-on-one that hey, I’m here for you and will protect you from financial harm.”
I created visual options for the page’s introduction to test and collaborated with my team to plan and synthesize research.
5.
Refine, launch, and follow up
After making changes reflective of our research findings, we refined and launched the page. Followup revealed heavy engagement with the introduction and key links. And routine usability testing revealed that consumers understood how to submit a complaint with a 100 percent task success rate locating the Submit a complaint link on the homepage.
I worked on a cross-functional team to create the consumerfinange.gov homepage.
View more work
