Challenge

In mid-2020, there was a lot happening in our personal and cultural lives. And the realities of the financial crisis were all too real for many. Some found themselves in a more precarious position because of job loss or income reduction. And now more than ever Financial Literacy was in short supply. According to figures on MSNBC, “Various industry research found that 2 in 3 families lack any type of emergency savings; 78% of adults live paycheck to paycheck, and 3 in 5 adults do not maintain a monthly budget.What are families to do now and how do they better plan for their financial future?

First Investment & Planning approached us with a communications challenge they were externally and internally looking to solve. For customers, they wanted to be a go-to resource for financial literacy. For internal stakeholders, they wanted to provide a tool that allows them to have sit-down conversations with customers to gauge their current financial situation in a more casual way.


Solution

We started by better understanding what challenges the customers had and where they might be seeking information. This was completed through research and interviews with customers and stakeholders. We leveraged much of the information from the FNBO Customer Experience (CX) team so as to not duplicate efforts.

Customer Experience Mapping

Our first step was to better understand the customer’s current journey. We added in a touchpoint during the moment they would not be inundated by another tool, but receptive to giving their financial situation further thought. We implemented a quiz that allowed the user to casually fill out. And depending on the user’s answers, we then had responses for each set of questions. It provided the user with a semi-customized experience attuned to their specific financial situation. Each question and response was given its own dedicated page and a fun illustration that paired with that life situation. In the end, the user could retake or adjust their quiz answers or export a dynamic PDF to keep.

Customer flow and journey map for a new customer. This is meant to welcome and onboard them to all the wonderful products and services FNBO offers, including the Financial Literacy App.

Customer flow map for those seeking help with Financial Literacy. Early one we recognized the need for different flows that produced different outcomes for each user.

 

Discovery & planning

At this stage, the team began to flesh out rudimentary wireframes and visual concepts that later manifested into the final product. On the art direction side, this project needed to fit nicely within the style guide that was created for the Welcome Kit. It was to be fun and inviting, yet informational and helpful as the theme was around navigating the journey. We also had to consider the website’s existing style guide and content management constraints. The team was clear, however, the customer experience was paramount.

Creative Experience & Execution

The end result was a landing page that on the surface provides enough information for those users seeking high-level information. It talk-through the resources of First Investment & Planning for the user, provided them with stages of gearing up toward retirement, and finally closed with the ability to get in touch with an advisor. Because the ideal outcome was to help enhance and grow their customer base’s financial literacy, we went deeper.

We built a web-based app that began with a quiz. We gathered very basic information, such as their name and age. Then continued deeper by providing the users with a sliding scale of options to help answer deeper financial questions. On the back-end, the application integrated with the client’s CRM, Salesforce. This allowed for later lead follow-up and database management for that user’s specific answers. Those could all be cataloged and used during a sit-down meeting with the user.

Design Solution

We made it possible to quickly get through the quiz by introducing only the necessary questions and leveraging sliders to decrease think time. Additionally, this allowed us to bucket users’ answers into 2 primary categories: working toward and achieved success in each area.

 
 

Desktop Experience

Embedded within the illustrated scene were small pulsing buttons. When the user interacted on each of them they provided additional content, such as an article or video. The topics were tailored for that particular part of the scene. As an example, in Chapter 2, budgeting was the focus—the article was centered around the 50/20/30 budgeting rule.

 
 
 

Illustrations

As a visual communication tool, the illustrations served as a helpful reference guide. They showed visually what we were talking about in each chapter of the copy. Dessi the Art Director on the project beautifully hand-selected and edited each isometric scene for consistency. Subtle animations were added as the user navigated between each section. This was to help cause notice to the illustration, yet subtle enough not to draw attention away from the other content.


fnbo-invest-planning-print-out--mockup-paico-oficial-ZDYN7azwO6c-unsplash.jpg

Summary Output

Each user who visited had the option to download a PDF of their replies and a companion summary of where they are in their journey. This was the added value we sought to add for each customer throughout the entire user journey. The printout made a great review tool for them and their investment & planning advisor on their next visit.

 

Final Thoughts

Although the initial ask was a simple informational graphic, we worked diligently to get to the heart of the need. We asked the difficult questions that ultimately lead us down the path we took. We knew their customers needed something deeper and more meaningful that met them where they were in their journey. We truly believe this was a one-of-a-kind outcome for their team and their customers.


Find the Financial Journey Web App here: FNBO Financial Journey

Work completed with FNBO was done through Bozell during my time as Director of UX/Interactive

Creative Director, Tim Young
Copywriter, John Vogel
Art Director, Dessi Price
Strategy, Web UI UX Design: Justin Henriksen
Project management, Janice Miller
Account management, Annie Narzsi
Front-end development: Plumb.io
Back-end development and implementation: In-house FNBO (Bozell input)