U.S. Bank: CFO Insights Report

New reusable components, CMS documentation, and increasing leads through more on-site engagement.  

Check out the live page here

A collage of four images from US Bank's CFO insights report page, showing data visualization, content, and an interactive map of the United States.

Overview

What is the CFO insights report?

The CFO insights report is a yearly survey conducted across the United States that highlights and discusses the challenges and opportunities facing finance leaders. Readers can provide their business email to download and read the report while the page gives an enticing and interactive preview of the report.

The opportunity

The CFO insights report web page built by a third party and located on a different domain then U.S. Bank's main website. It existed as a multipage experience that was difficult to navigate, had low traffic, and had a small amount leads generated from it.

How might we create a more unified journey on U.S. Bank's main website so that users have a consistent U.S. Bank experience with easier navigation, higher engagement, and ideally a higher amount of leads?   

The solution

I led efforts to design a simplified one-page scrolling experience to tell a better story of the report. There are clear calls to action and multiple places a user can chose to take the next steps and download the report. With the idea of creating better engagement, our team set out to create resuable new data visualization components that had the ability to animate and bring a more modern look and feel to the page.

The challenge

Working with a 3rd party to migrate their existing work into our environment and allowing them to create some aspects of the experience were interesting challenges, but I was able to provide them with all the resources and feedback they needed to make it as seamless as possible.

Creating net new data visualization components for the content management system required many design critiques, approvals, and learning how to best write documentation. The component also had four different variations to showcase data in different ways. It was challenging to ensure each one followed all brand guidelines and passed all accessibility concerns while also making it reusable for different teams, but it is very rewarding to see that other teams have begun adopting these components for their use cases!

There was also a branding change during the midst of this work, so we had to create versions of our components and wireframes that fit the old corporate styles as well as the new branding styles.

The Team

  • My Role: Lead design efforts on the new pages and new components
  • 2 developers / engineers
  • Product manager
  • SEO and content experts
  • Internal stakeholders
  • 3rd party firm for some aspects of the page

Key Insights

  • Creating a reusable template that could be internally updated every year did simplify the process and allow for greater traffic across corporate and commercial pages.
  • The amount of downloads, leads, and site engagement all increased from our efforts.
  • User testing feedback with finance leaders was overall very positive, and it provided us with actionable insights on how to make experience even better.

Discovery

Note: Due to the security policy, I cannot provide screenshots or examples of all my work for this project.

Define

How might we statement examples

Problem statement

Sample insights:

How might we create a more unified journey on U.S. Bank's main website so that users have a consistent U.S. Bank experience with easier navigation, higher engagement, and ideally a higher amount of leads?   

Understand

Competitive analysis

We examined 10 different competitors and how they present insights and reports. 5 were direct competitors and 5 were indirect for gathering a variety of insights. We compared and contrasted similarities and differences.

Direct competitors included J.P. Morgan, Wells Fargo, PNC,  Bank of America, and HSBC. Indirect comptetitors included Gartner, CNBC, RichmondFed, Grant Thornton, and EY.

Some key insights were as follow:

A screenshot of the competitor analysis, showing sticky notes in a table corresponding to the competitor.
Sneak peek of the competitor analysis.
A screenshot of some sticky notes grouped together, showing an example of some insights generated from the competitor analysis.
Examples of a few insights generated from the competitor analysis.

Stakeholder interviews

We talked with 5 stakeholders and determined the following insights:

Generate

Collaborative design

There were many weekly sessions that took place with the 3rd party to ensure we aligned on the design approach. I had to simplify their ideation multiple times for layouts and the interactive map. I consulted with accessibility consultants on our end and held many meetings with other designers and developers to ensure a successful design.

Through several design sprints, I also took many of my initial mockups for the layout of the CFO insights page and the new data visualization components to several design critiques, office hour sessions, peer reviews, and alignment sessions.  

An example of several flows with arrows showing the steps a user might take to accomplish a task.
Example of some flows that came from collaborative sessions.
An example screenshot showing the layout of a webpage with sticky notes of feedback on the sides.
Example of collaborative ideation on the layout.

Another example of generating ideation is how we created the sitemap. We collaborated internally and with our external 3rd party to land on a sitemap structure that could encompass all the different flows and goals a user could take. This includes the related article pages.

An example of a sitemap used for the CFO insights project.
Ideation on the CFO insights sitemap

Align

Design hypothesis

Our hypothesis was as follows:

"We expect that migrating the CFO Insights experience into U.S. Bank's website as a one-pager with engaging visualizations and clear CTAs will allow users to find and download the report, thus increasing conversions, leads, and decreasing bounce rate because the page will be enticing enough to learn more.

Some example KPIs that we measured with positive results included:
- Increased time on page, higher click rate, more leads, and decreased bounce rate.

Design

Note: Due to the security policy, I cannot provide detailed screenshots or examples of all my work for this project.

Low -> mid -> high fidelity mockups

Through many collaborative sessions internally, we created the first iterations of lofi mockups. Through stakeholder reviews, internal design critiques, and peer reviews, we iterated through 5 main versions. See below for an example of our team leaving comments on 3 different iterations of Version 1.

An example of 3 lofi mockup iterations of the CFO insights page.
Lofi mockup examples with comments showing collaboration.

The interactive map visualization was also updated through many discussions with the 3rd party and internally with various teams and accessibility consultants. After many iterations on the interactive map, data visualization components, and the actual web pages themselves, we landed on our mvp that we could hand off to our developers.

Example of a mid fidelity mockup for the CFO insights project with an interactive map.
Sneak peak of the interactive map on a mid-fidelity mockup. Click to expand.
Example of a high fidelity mockup for the CFO insights project with an interactive map.
Sneak peak of the interactive map on a high-fidelity mockup. Click to expand.

I also worked with the devs by annotating our mockups and writing documentation for the data visualization components to be implemented into our CMS. I also hopped on many calls with them to periodically check their work and tested the elements in our testing environment. After many bugs were resolved, we slowly released updates on the CFO insights page to include functioning data visual components!

Example of some of the documentation written for the data viz components.
A sneak peak of my documentation for the data visualization components.

Checkout the current version of the CFO Insights microsite.

View live microsite

Enhancements

Note: Due to the security policy, I cannot provide detailed screenshots or examples of all my work for this project.

Usability testing and implementation

After our initial version was released, our team set out to do usability testing via 8 in-depth user interviews. I assisted our researcher with creating the testing plan and our 25 questions we set out to answer. Overall, there were positive impressions of our layout, content and user experience, with room for improvement and optimization. We did an affinity diagram to generate actionable insights that we could take back to the stakeholders and

Some enhancements included layout changes based on user preferences and their priorities. Users also wanted to be able to find the CFO insights microsite easier, so we implemented more ways to get to it via the navigation and other pages. Other enhancements were more long term and included providing more industry breakdowns and more clickable links to learn more about certain topics.

An example of the affinity diagram after user testing.
Sneak peek of our affinity diagram we used to generate user insights and enhancements.
image of a mid fidelity mockup of the anomaly detection ui

Hifi Prototype

After testing, I created a high fidelity prototype that showcased the key features and several future features that would be implemented at a later state. I did one more round of usability testing with 3 users and incorporated their feedback.

image of a mid fidelity mockup of the anomaly detection ui

Enhancements

Note: Due to the security policy, I cannot provide detailed screenshots or examples of all my work for this project.

Usability testing and implementation

After our initial version was released, our team set out to do usability testing via 8 in-depth user interviews. I assisted our researcher with creating the testing plan and our 25 questions we set out to answer. Overall, there were positive impressions of our layout, content and user experience, with room for improvement and optimization. We did an affinity diagram to generate actionable insights that we could take back to the stakeholders and

Some enhancements included layout changes based on user preferences and their priorities. Users also wanted to be able to find the CFO insights microsite easier, so we implemented more ways to get to it via the navigation and other pages. Other enhancements were more long term and included providing more industry breakdowns and more clickable links to learn more about certain topics.

An example of the affinity diagram after user testing.
Sneak peek of our affinity diagram we used to generate user insights and enhancements.

Conclusion

I learned a lot and really enjoyed working with my team on this project. It was multi-faceted with many moving parts and was a bit stressful at times, but working with our researcher, devs, stakeholders, and the 3rd party was a feat of collaboration. In the end, we saw more traffic, leads generated, engagement, time on site, and less bounce rate from the original microsite.

I am quite pleased with how the final product turned out. It is also very rewarding to see the components I worked on be reusable and other teams implement them. We have also begun to see the webpage template be reused by other parts of the bank for similar reports.  


Icon of circle with an arrow facing upwards in it. Clicking on causes the page to scroll back up to the top.

Phase 1

View a List of Top Anomalies

Perhaps the largest phase because every project needs to start with User Research (aka the Empathize and Define stages)

An image of the 5 steps of UX process, with different colored circles. There is empathize, define, ideate, prototype, and test, with arrows connecting each bubble to another.

I will be BRIEFLY go through some of the deliverables coming out of the research and definition phase!

CompetitorAnalysis

I went found many existing tools online and captured what they did well and not so well. I also went through some of the old dashboards created before my time at Kaizen. See below for a collage of tools I analyzed.

A collage of anomaly detection tools interfacesA collage of anomaly detection tools interfaces

User Persona

It's also important to define the potential users and what their main needs are. See below for our main target user, who is essentially going to be someone who reports to a business owner and brings their investigation to executives. This was created from a compilation of insights from many existing clients who have documented interests in an Anomaly Detection capabilities.

An image of a persona named Bill, an operations manager

Ideation

In person whiteboarding sessions are a great tool for bouncing ideas together. It allows for collaboration on preliminary ideas, key features, sketches, and the formation of a lofi mockup.

A picture taken of a whiteboard that has ideas for the anomaly detection tool

Key Features

A collage of sticky notes with different key features. They can be found in the next paragraph

There were several other features that came along for the ride, but these were the ones required for MVP:

Lofi Mockup

Behold! Version 3 of a lofi mockup that all subsequent iterations were based on.

An image of a low fidelity mockup with lists and metrics

Testing And Iterating

There were MANY iterations of this. I mainly tested internally by conducting several rounds of feedback sessions until things became more polished and could put this in front leadership and clients.

One of the main challenges of this phase was creating a UI framework that seemed familiar and made intuitive sense. After a few brainstorming sketches that didn't quite crack the code, inspiration struck while checking my Gmail account one night! I emulated a similar structure on being able to mark lines as read or unread, with the ability to remove.

image of a mid fidelity mockup of the anomaly detection ui

Hifi Prototype

After testing, I created a high fidelity prototype that showcased the key features and several future features that would be implemented at a later state. I did one more round of usability testing with 3 users and incorporated their feedback.

image of a mid fidelity mockup of the anomaly detection ui