nmLogo2

01 -

Project Overview

This project was commissioned by a wealth management company looking to update their designs. They wanted to encourage employees' usage of the company’s internal system when identifying potential clients. Our goal is to get users to complete a full profile multiple times a day.

🔒 The client will remain unnamed as per NDA agreements
banner14
⏲ TImeline
4 Weeks, Fall 2022 
🛠 Tools Used
Figma
Figma
🧑‍💻 Roles
User Experience User Research Visual Design Micro Animation
User Experience User Research Visual Design Micro Animation

Problems

The tool for client logging is not being used by the employees of the agency, resulting in incomplete client information being recorded all over the system. The tool is outdated, requires full manual inputs for information to be logged, and users have to type while on the phone with potential clients. Redundant information is often required. As a result, agents were barely using the tool; an ecosystem where records are poorly kept was created.

Goals

📈 Improve Retention

"Tackle the issue of agent retention to the system and ensure that proper records are logged of potential clients."

🧭 Easy to Navigate

🧭 Easy to Navigate

"Providing completion status and asking simpler questions to help level set expectations, boost transparency, and reduce cognitive burden."

✨ New Look

"A clean and simple interface makes this otherwise overwhelming process much more manageable."

👨‍💻 Drop and Pick Up

"Allowing agents to pause and resume progress so that users input the most critical information."

02 -

User Research

The data shown demonstrated that agents 1 to 7 years into their careers only logged about 20% of the Leads they talked with. This statistic only barely rose with the expansions of their client base. Our goal is to get users to complete a full profile multiple times a day.

adoption_rate7

Reduction of Information Through Automation

Primarily, the low adoption rates come from the outdated design of the Lead system. The original design was only a list of text boxes that had to be filled manually. Most of the information served no purpose other than to take up agents' time. I needed to transform the tool so that it is more effective for both the agency and the agents.

ogV3

The client developed Efact Finder, a tool that scrapes the web to streamline recording client data. By entering basic information like name, phone number, and address, users can quickly gather all relevant data from public sources such as social media, significantly boosting agents’ productivity.

process1

Then, we needed to get to know our users. We observed the user feedback to understand where the pain points were.

pit1
pit4
pit2
pit5
pit3
pit6

User Personas

To help with the user flow, we created 2 user personas based on our research, a Financial Representative and a Client Services Associate. These two positions represent the primary occupations that would be interacting with our solution. Both have familiarity with backend tech products, yet they have different years of experience in the financial world. 

Pain Points

pain_points2

Kims User Flow

Kims User Flow

Kim finds or is given the basic information about a potential lead and checks to see if that person is already in the system. If not, Kim will create a new profile and prepare to hand it off to the financial representative.



userflow_kim2

James User Flow

James User Flow

James receives the profile from the Client Services Associate and sets up a call with the LEAD. During this call, James completes the LEAD's profile and tries to sell them on the company's services.


userflow_james2

Journey Mapping

I created a journey map highlighting users' pain points, considering how tasks would be handed off between users like James and Kim. This included the process of transferring unfinished work to another Associate, a crucial part of their daily workflow.

journey_mapping

Product Goals

With knowledge of the users’ and clients’ needs, we had a clear idea of what was desired from both. This allowed us to push forward into the creation of the new Lead Suspect Management system.

needs6

03 -

Wireframes

Wireframes

We had to address the pain points of the current design to create a new experience that helps both agents log and hand off their findings and simplify the data entry process.

We had to address the pain points of the current design to create a new experience that helps both agents log and hand off their findings and simplify the data entry process.

Kim needed a system to track all her Leads, and Efact Finder could automate much of this process. My role was to design around Efact Finder to streamline the workflow. After consulting with the client’s tech team, we found that Efact Finder could gather most Lead information using just a name, phone number, and address, scraping public data from sources like LinkedIn and Glassdoor. As it was a backend system, we focused on designing a flow for agents to input the information.
 

process2-2

Visual Inspiration

We aimed to streamline the complicated old user interface, drawing inspiration from TurboTax's design, which simplifies complex tasks and guides users smoothly through each step. A design audit of TurboTax highlighted key themes we wanted to incorporate.

ttex2

Large Type

TurboTax had excellent typography that condensed what the task was on each page into a few words.

Simple Tasks

To help with agents’ process of filling out complicated information, we learned from TurboTax and limited the tasks on screen to 1 or 2 at a time.

Progress Tracking

Making users’ progression clear is a big part of making sure that users know where they are in a flow and that they are approaching a finished state.

Skecthes

nm_sketch
nm_wf2
nm_wf3

With this inspiration, I went in and made a sketch to communicate what our user interface might look like with simple CTAs and a bold approach to typography.

I also sketched a view of the duplicate contact page that helped agents avoid entering duplicate entries by directly comparing the profiles.

Once the profile is complete, there will be a page where agents can fill in any information that Efact Finder could not.

Wireframes

Next, I built wireframes with our users' needs in mind. I began by wireframing a simple name entry page, which would serve as a starting point for building the rest of the product.

01 - Agent Name

Displays the name of the agent filling out the Lead.

02 - Progress Bar

Shows completion status of the logging of the Lead.

03 - Questions

Questions are kept bolded and concise to keep the agent moving, preventing them from getting overwhelmed.

04 - Text Boxes

Text boxes are larger to make scanning simple.

05 - Continue

Calls To Action (CTA) are in a consistent location at the bottom so that quick muscle memory takes over and speeds up the Lead logging process.

WF_New Contact – Contact2

We minimized input fields per page in the contact-filling flow to reduce cognitive load and address back-end processing challenges. This adjustment, informed by discussions with the development team, helped distribute data more evenly, resulting in a smoother experience for clients, agents, and the system.

WF_New Contact – Contact2

01 -  LEAD Profiles

Displays the profiles that have already been created and can be added to.

02 -  Create New Profile

If the LEAD profile does not exist, agents can create a new one.

wf_New Contact – Fuzzy Search

01 -  Profile Information

Blocks display the information the agents still need to fill in to complete the profile.

wf_Update Contact – More
r2Edit1

04 -

Final Solution

With our research and feedback on the wireframes, we moved onto our final deliverables.

card_client_services_associate2_15x

For the Client Services Associate, they would start by selecting the “Create New Contact.” This adds a new profile in the Leads Suspect Management system and moves Kim onto the flow to fill out basic information.

Adding the Lead’s basic information, i.e., name, contact information, and address, into the Leads Suspect Management system allows the system to search the web for the Lead’s complete profile.

New Contact – Name Filled
autocomplete1

Autofill was added to speed up the process of entering basic information.

mobileShowOff9x2

If an associate enters the information of someone who is already in the Leads Suspect Management system, they can see if that Lead already exists. If that is the case, then the associate hands their profile over to the Financial Representative.

If an associate enters the information of someone who is already in the Leads Suspect Management system, they can see if that Lead already exists. If that is the case, then the associate hands their profile over to the Financial Representative.

New Contact – Fuzzy Search H

If the Lead is not in the system, then the associate will create a profile for them. With the power of Efact finder the Leads Suspect Management system will add as much information that it can find on the web. Afterwards, it is up to the Financial Representative to cold-call the Lead and make the sale.

If the Lead is not in the system, then the associate will create a profile for them. With the power of Efact finder the Leads Suspect Management system will add as much information that it can find on the web. Afterwards, it is up to the Financial Representative to cold-call the Lead and make the sale.

New Contact – Complete
Update Contact App – Refreshed View
card_financial_representative2_15x

James, the Financial Representative, starts by picking up where the Client Services Associate left off with the profile creation. He clicks on the “Update Existing Contacts” link.

Dashboard – Home login 4

Once James clicks on “Update Existing Contacts,” he looks through the list of Leads in the contacts list. James scrolls though the list and picks the one he was instructed to update by the Client Services Associate.

Update Contact – Full List
Update Contact – Results_Card View

James cold-calls the Lead in the hopes of asking them to help him complete their profile.

Update Contact App – Refreshed View

Filling out the additional data brings the user back to the TurboTax-inspired design where James enters in the additional information.

Update Contact App – Employment 7

Once a new section is completed, the Lead score is updated. Users can keep working on the updating process until the score reaches 100, at which point, all fields are completed.

Update Contact App – Employment Complete1
Update Contact App – Employment Complete2

Now that the profile has been completed and saved, it is up to the Lead and the agency to discuss arrangements of the deal and how they want their money to be managed.

05 -

Animating Lead Interactions

Animating Lead Interactions

One of the most important skills I got from this engagement was the ability to use Figma’s micro-animation system. We wanted our solution to stand out and complement our visual design statement (as mentioned in Overview - Goals).

I went on YouTube to learn to make a progression bar animation so that the user can get a stronger sense of achievement when they clear each step.

Next, I wanted to give the user a dopamine rush when they finish filling in a section. I added confetti to create a sense of celebration.

Icons were animated to spark up flat designs, making them friendlier to users.

When a section is completed, a rolling counter and confetti appear.

06 -

Conclusion

Conclusion

The client was more than satisfied with our work and put the pitch into production right away. They loved our new design for their system and reported the improvements to their workflow.

Micro Interactions

I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.

⏲️ Time to complete Lead profile

stats4

🧑‍💼 Average Adoption Rate by Agents

stats3

Gains

This project taught me how to use and conduct user research with actual users while communicating with the client. It was an excellent opportunity to analyze who was using a product and how to tailor the experience for them.

Through this project, I learned about both the backend technical details of financial management systems and how to empathize with users in the wealth management industry who have their unique needs and feelings.

I also learned to use the Figma prototyping tool better, adding more clarity to any future prototypes I make. As a former animator, I enjoyed applying my animation skills in completely new contexts.

"John was a pleasure to work with. His technical skills and experience in design and applications brought life to our project. He was able to add special touches to our prototype through his designs and animations, which really thrilled the client."

Chadwick Shao: Creative Director at EY

"John took initiative to include animations to delight our clients and improve the appeal of the guided onboarding experience. Our clients were impressed with this effort and it really took our work to the next level."

Jakob Gorgens: Manager at EY

Check out more 👇

Check out more 👇

lead_suspect_management-half2-2

Lead Suspect Management

global_mobility-half2

Global Mobility

lipo-half1

Life Insurance Policy Optimization

renders-half1

Weekly Renders

Get in touch

© 2024 John Keefe – +(1) 603 320 9772 – johnkeefedesign@gmail.com