nmLogo2

UX/UI User Research Prototyping Web Mobile

UX/UI User Research Prototyping Web Mobile

Client information collection made simpler and friendlier using data scraping and task automation.

Client information collection made simpler and friendlier using data scraping.
banner13

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
🛠 Tools Used
Figma
Figma
🧑‍💻 Roles
User Experience User Research Visual Design Micro Animation
⏲ TImeline
4 Weeks, Fall 2022 

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."

r2Edit1

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_rate5

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 a new tool, Efact finder, that can scrape the web to help speed up the process of recording client data. This new tool only requires users to enter basic information to complete a client profile. With just a name, phone number, and address, all relevant data of a prospective client could be gathered with the help of Efact finder. The scraped data is sourced from publicly available websites such as social media. This tool has potential to greatly increase 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
pit2
pit3
pit4
pit5
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 finical world. James would be doing more of the cold calling to potential clients and trying to get sales, while Kim would be compiling prospective clients for James to reach out to.

Pain Points

pain_points2

Kims User Flow

Kims User Flow

userflow_kim

James User Flow

James User Flow

userflow_james

Journey Mapping

Then, I created a journey map that included our intended users’ pain points. I considered how work would be handed to other users for James and Kim. I considered how unfinished work would be handed to another Associate since sending work to another representative is a vital part of the a user’s day-to-day work.

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.

needs5

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 needs a system to log all of the Leads she has had an eye on. Efact finder could automate some of that work. My job was to design around Efact finder to help speed along that process.

After consulting with the client’s tech team, we found that we could gather most of the information about a Lead with only a name, phone number, and an address. With these information, Efact finder would scrape the web to find all publicly available data relevant to the Lead. Sources of data could include LinkedIn, Glassdoor, and other social media websites. This is a backend system, so we did not need to design an interface for Efact finder. We just needed to design a flow where agents input the information.

process2-2

For the user interface, we needed to simplify the complicated old system to something streamlined and efficient to use.

We took inspiration from TurboTax because of its great design that simplifies a complicated task and leads users to the next step. We conducted a design audit of TurboTax and these are the key themes we wanted to follow.

ttex1

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.

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.

nm_sketch

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.

WF_New Contact – Contact2

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

As we built out the contact-filling flow, we decided to scale back the number of input fields to a minimal number on each page. This served two purposes: first, it lowered the cognitive load on each page; second, from our chats with the development team, we learned there were back-end issues with processing a lot of information at once, and breaking up the questions among multiple pages helped create a smoother experience for the clients, agents, and the system processor.

04 -

Final Solution

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

card_client_services_associate15x

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

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

New Contact – Contact Info Auto-fill

A mobile version was also asked for because some associates prefer to type on their phones, or they may have to update the Lead’s information on the go.

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.

New Contact – Fuzzy Search H
New Contact – Name Filled

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_representative15x

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-half1

Lead Suspect Management

global_mobility-half1

Global Mobility

nect-half1

NECT

renders-half1

Weekly Renders

Get in touch

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