Leading consumers to critical info
The Consumer Financial Protection Bureau (CFPB) has many financial education resources, but they were buried within the site’s information architecture. My team conducted extensive research to create a new architecture and surface key money topics in the site’s main navigation. As we prepared to launch the new navigation, we turned to designing landing pages to introduce the money topics and route consumers to critical information.
After deciding to surface money topics in the site’s main navigation, my team shifted our focus to create landing pages before releasing a new mega menu design.
My contributions
UI/UX design
I designed a page structure to be applied across twelve money topic landing pages, ensuring use of the CFPB Design System and WCAG compliance. I collaborated with my team to conduct discovery and user research and worked closely with developers to translate design into code.
Art direction
I led the development of custom photography including concepting, creating mockups, gathering props, creating a photoshoot schedule, art directing the photoshoot, and handling post-production editing.
1.
Define audiences and determine goals
We articulated the audiences and goals for the pages, prioritizing consumers overwhelmed and struggling to resolve financial issues. We wanted the pages to quickly route these consumers to helpful resources.
To keep our audiences top of mind and consider potential mental models, I created persona cards reflecting insights from prior user research conducted by IDEO for the CFPB.
To surface insights from prior research about consumer mental models, I created persona cards to reference throughout our design process.
2.
Strategize content and page structure
To determine the structure of the new landing page type, we workshopped with stakeholders to brainstorm core content that fit business and user goals.
We also conducted an audit of existing money topic content on the site and identified categories across the content, such as common issues and how-to guidance. We used these categories to form a page structure.
I collaborated with my team to conduct discovery activities and determine a page content structure.
3.
Design and test a prototype
Once we determined a content structure, I sketched, wireframed, and designed page prototypes, which we then usability tested. Participants understood most of the categories on the page but found some to be confusing. And although most participants didn’t click links in the sidebar, they appreciated the variety of information it provided, particularly “About us” and the CFPB’s phone number, which elicited trust.
I sketched, wireframed, and designed landing page prototypes. We tested two layouts, with the above design testing better than the other.
4.
Determine page tone and create visuals
I facilitated brainstorms and sketch sessions to determine visual messaging and tone for the pages, deciding the pages should help consumers feel calm, organized, and able to take action. I created photo concepts, gathered props, recruited CPB staff to serve as models, created a photoshoot plan, art directed a photoshoot, and edited the photos for final placement on the pages.
I led the development of custom photography from concept to photoshoot art direction to post-production editing.
5.
Launch and follow up
As we finished content curation and photography, we launched the pages. Followup usability testing revealed similar insights to our original testing—that participants understood the page organization, were able to scan and find information they needed, and had positive reviews of the CFPB’s phone number and “About us” information in the sidebar.
Some of the landing pages—debt collection, prepaid cards, and credit reports & scores—are consistently top-trafficked pages on consumerfinance.gov.
I created high-fidelity landing page designs.
View more work
