Consumerfinance.gov redesign

The redesign project involved the complete overhaul of consumerfinance.gov including the Agile development of a new website with a user-centered information architecture, the development of a brand new suite of design patterns, an easy to use content management system, page templates, illustrations, photographs, and content. I also worked to improve the accessibility of the site and to make the entire site responsive and seamless on any device. Once the work approached an end I then documented our design patterns and shared them in the open creating a living document for peripheral team members and the general public to use.

Roles included: visual design, UX design, illustration, interaction design, art direction, and documentation.


Out with the old…

The old site (screenshot to the right on larger screens or below on mobile) was difficult at times to navigate and wasn’t consistent. Lots of important information was buried in places that could not be reached. The old site also was not responsive so mobile users, which make up a pretty substantial amount of the sites users, couldn’t do basic things. The site was also difficult to update and there was a big learning curve for some of the simplest tasks. I also updated the look and feel of the site in an effort to make it more inviting and aligned with research on how to do so.



…In with the new

Homepage redesign includes: simplified navigation, cleaner layout, a space for featured and or timely content, links to core areas of the site, a section entitled “Standing up for you” that highlights some of the many ways the CFPB helps consumers, and a collection of latest news from across the site.




Responsive design (below): It took months refining responsive design standards to ensure that images, type, different modules, tools and resources would all work seamlessly on any device. Below is a screenshot showing off the brand new mobile navigation.




A more visual blog, at last (below): As a design and content strategists on the redesign I took into account feedback received over the months of working on the project around the stiffness of the subject of financial regulation and education. That’s why I made every effort to find the right balance of visual interest and a serious, trustworthy tone. Users are also able to filter blog posts that interest them and easily share them with friends.




Rulemaking and the 404 error page (below): These two pages are shown together as another representation of how the Bureau managed to have separate tones depending on the situation within one site. The Rulemaking page is directly related to the Bureau’s bread and butter. It keeps track of all regulations the Bureau has made final and those that are under development and allows users to filter through them. On the other hand, the 404 page I designed incorporates a little fun. I made the illustration of the outlet because of the shape of the holes in it. If you look closely you’ll notice they appear to be surprised faces at the fact that the user has arrived on a 404 error page.




Policy & Compliance (below): The Policy and Compliance overview page houses navigation and links to the core functions of the Bureau including the aforementioned Rulemaking page, the Compliance and Guidance page along with other links that direct financial service providers and other entities on how to comply with CFPB rules. This is also a prime example of the responsive design standards in action. You’ll notice the same content appears in a streamlined way across the desktop, tablet, and mobile device mockups.




Interactive Bureau Org Chart (below): One of the things the old site lacked was an interactive org chart. The only way a user could see a list of leadership from across the Bureau was to download a static jpg or PDF of the org chart. Now, with this interactive org chart that I worked on, users can peruse the organizational structure of the Bureau on a deeper level and also read more information about each individuals role, and where applicable, see a photo of them. The mockup on the left below shows the Org chart at a glance while the mockup on the right shows a more detailed page for Consumer Education and Engagement, a Division within the Bureau charged with educating consumers on life’s big financial decisions.




Contact AJ

Want to discuss your next project, take a look at my work experience, or just say hi? Send me an email or connect with me on social media.