Leading consumers to critical info
The Consumer Financial Protection Bureau (CFPB) offers an abundance of financial education resources, which were previously buried within the site’s information architecture. My team conducted extensive research to create a new architecture for consumer content that resulted in surfacing key money topics in the site’s main navigation.
As we prepared to launch the new architecture and navigation, we set out to design landing pages to introduce the money topics and route consumers to critical information.
My role
Design: I designed a page structure and visual approach to be applied across twelve money topic landing pages on the site, ensuring use of the CFPB Design System and WCAG compliance. I conceptualized and art directed photography. I collaborated with teammates on discovery and user research tasks and worked closely with developers to translate design into code. And I designed additional artifacts as needed, such as persona cards.
After determining a new information architecture for consumer content, we shifted gears to create money topic landing pages before releasing a new mega menu design.
1.
Define audiences and determine goals
To begin, we articulated the landing pages’ primary audience and goals. We wanted the pages to prioritize content for consumers who may be overwhelmed and struggling to resolve a financial issue, such as not knowing how to responding to a debt collector. For a consumer who is facing a problem but isn’t sure where to turn, we wanted the landing pages to quickly route them to helpful resources.
To keep our audience and page goals top of mind, I created persona cards based on prior user research conducted by the CFPB. The cards aimed to help us understand consumer mental models, and we referred to them throughout the project.
To surface insights from prior CFPB research about consumer mental models, I created persona cards to reference throughout our design process.
2.
Strategize content and page structure
To determine the content structure of the new landing page type, we held a workshop with stakeholders to brainstorm core content that fit business and user goals for the pages.
We then conducted an audit of existing money topic content on the site. When looking at existing money topic content, we were able to identify repeat content types, such as common issues and how to guidance. We used these content types to create categories of information and form a base page structure to be used across the landing pages.
I assisted with discovery and content tasks, such as helping to plan and participate in a core content workshop and auditing existing financial education content on consumerfinance.gov.
3.
Design and test a prototype
Once we determined a content structure, we designed the debt collection landing page. We gathered analytics to see what existing debt collection content was highly trafficked and what key terms people were searching for. We worked with CFPB subject matter experts to further determine and prioritize content. And I sketched, wireframed, and designed a page prototype.
I sketched, wireframed, and designed landing page prototypes. We tested two layouts, with the design above testing the best.
We then usability tested the prototype to see if participants understood and could easily navigate the page structure and content categories.
Participants understood most of the categories but found some to be confusing. Although many participants did not click links in the sidebar, they appreciated the variety of information in the sidebar, particularly the “About us” text and having the CFPB’s phone number available, which elicited trust.
4.
Determine page tone and create visuals
While designing the landing page layout, we also brainstormed how the page should feel. Until this project, the CFPB primarily used illustrations for visuals. Because the money topic landing pages needed to speak to a broad range of consumers, including people overwhelmed by a financial issue, we felt the CFPB illustration style did not fit our intended page tone, leading us to pursue photography.
I facilitated brainstorms and sketch sessions to determine tone and messaging for the photos. We decided that the photos should help consumers feel calm, organized, and able to take action. I brought the concepts to life by gathering props, recruiting CFPB staff to serve as models, purchasing backdrops, creating a photoshoot schedule, and working with our multimedia team to shoot the photos.
I led the development of custom photography through all stages—from concept creation 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 the page to find information they needed, and had positive reviews for the CFPB’s phone number and “About us” information in the sidebar.
I created high-fidelity landing page designs.
