Creating a reassuring homepage
Consumerfinance.gov has 1.6 million monthly active users, and its homepage is the face of the agency, the Consumer Financial Protection Bureau (CFPB)
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 role
Design: I designed the page’s layout and visuals. I applied the CFPB Design System as well as created custom components, ensuring WCAG compliance. I met regularly with and consulted stakeholders. Working on a cross-disciplinary team, I collaborated with teammates on discovery and user research tasks and worked closely with developers to translate design into code.
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 the complaint submission feature followed by information about financial topics including 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 it should feel reassuring to consumers and express that the CFPB has their back. It should empower consumers and make them feel supported.
I assisted with discovery activity planning and synthesis.
3.
Design a prototype
To design the page, I conduced a competitor analysis of other government agency 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 visuals, frequently referencing the page goals and emotional qualities articulated during our brainstorm activities.
I designed a prototype for usability testing.
4.
Connect with consumers
To receive feedback, we conducted user testing.
First impression testing: We gave participants time to view our design prototype and the asked for their reactions. In general, 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. We asked them to choose which words they felt best described each image as well as which image they preferred and why. Participants were most able to see themselves in a photo collage option, and they felt this visual did a good job representing 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 to test and assisted with research planning and synthesis.
5.
Refine, launch, and follow up
After making changes reflective of our research findings, we refined and launched the page.
Followup on the page revealed heavy engagement with the page’s 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 designed the homepage, including determining the layout, creating custom components, and selecting graphics.
