UX/UI +  Prototyping + Animation

Lead Suspect Management

Lead Suspect Management

Client information collection made simpler and friendlier using data scraping.

banner7

01 -

Project Overview

This project was commissioned by a wealth management company from Milwaukee, Wisconsin. They wanted to encourage employees' usage of the company’s internal system when identifying potential clients.

Tools Used
Figma
Roles
User Experience, Visual Design, Micro Animation
Timeline
4 Weeks, Fall 2022

Gains

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.

02 -

UX and Visual Design

The client asked for 3 main features...

01 - New Look

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

02 - Easy to Navigate

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

03 - Drop and Pick Up

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

For the first feature, we looked at Intuit Turbo Tax for inspiration. We minimized the number and complexity of tasks a user has to complete at a time.

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.

Next, we re-worded each question to reduce misunderstanding and frustration. We also emphasized on what the user should focus on for each page.

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.
New Contact – Name Filled
WF_New Contact – Contact2

Architecture

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 - Prompts and 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.

Lastly, the landing page provides a list of Leads, or prospective and suspective clients, for the agents to reach out to.

From the landing page, agents can select Leads based on their Lead Score, which reflects a client’s profile’s level of completion. Agents can, then, complete profiles at their own convenience.

Potential Leads
Update Contact App – Refreshed View
New Contact – Contact Autofill
New Contact – Contact Filled

03 -

Reduction of Information Through Automation

One of the most crucial issues to be dealt with was the tremendous amount of information agents had to process before they could enter a Lead into the database.

process1

To fix this issue, we used automated web scraping to collect data from approved social media sites such as LinkedIn, Facebook, and Google Profiles. With the automation, a Lead’s profile can be mostly, or even completely, filled in with only basic information.

process2

The basic information an agent enters generates a list of candidates that might be the Lead the agent is looking for. When the information cannot be found automatically, there is an option for the agent to manually fill out the remaining profile.

New Contact – Fuzzy Search H
New Contact – Fuzzy Search Matched Contact

With the majority of information being obtained from social media, the process to log Leads is greatly accelerated and becomes less burdensome for agents.

(Mobile) New Contact – Fuzzy Search
(Mobile) New Contact – Fuzzy Search-1
(Mobile) New Contact – Fuzzy Search-2

04 -

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 started by studying the file layout in UI animations done by Airbnb.

Screen Shot 2023-01-26 at 2.40.46 PM

Then, 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.

(Mobile) New Contact – Fuzzy Search no Match
New Contact – Fuzzy Search

05 -

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

stats2

"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 UI 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 👇

mstfHalf

Global Mobility

leadHalf

Lead Suspect Management 

metaHalf

Metaverse Initiative

nectHalf

NECT

forbesHalf2

Forbes Best States For Business

Lets Chat!

Lets Chat!

johnkeefedesign@gmail.com

johnkeefedesign@gmail.com

© 2023 John Keefe
 

li