UX/UI + Prototyping + Animation
Lead Suspect Management
Lead Suspect Management
Client information collection made simpler and friendlier using data scraping.
00 - Skip To
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.
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.
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.
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.
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.
With the majority of information being obtained from social media, the process to log Leads is greatly accelerated and becomes less burdensome for agents.
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.
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.
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
"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 
Global Mobility
Lead Suspect Management
Metaverse Initiative
NECT
Forbes Best States For Business
Lets Chat!
Lets Chat!
johnkeefedesign@gmail.com
johnkeefedesign@gmail.com
© 2023 John Keefe
