Persona’s Graph product is a way to visualize users connected by common properties. These properties can include anything from names and email addresses to device fingerprints, IP addresses, or birthdates. Graph allows companies to visualize connections and patterns across user data and better detect duplicate accounts and potential fraud, such as account takeovers, promotion abuse, synthetic identity fraud, and identity theft.

Persona’s Graph product is a way to visualize users connected by common properties. These properties can include anything from names and email addresses to device fingerprints, IP addresses, or birthdates. Graph allows companies to visualize connections and patterns across user data and better detect duplicate accounts and potential fraud, such as account takeovers, promotion abuse, synthetic identity fraud, and identity theft.

The current design and execution of this feature introduces many frustrations and usability issues for the end users. I was tasked to identify ways in which we can improve the investigation experience.

User Interviews

Graph is typically used by Persona customer Product Managers, Trust & Safety Leads, Risk Ops and internally at Persona. To begin the research process, I conducted interviews with each user type to better understand their use cases and approaches for investigation. I gathered the following points of concern:

The random hover card placement results in overlapping content and prevents users from interact with other nodes.

The card disappears instantly after the cursor moves away from the node making it extremely challenging to scroll within the card.

The current hover card functionality allows users to see the details of only one node at a time.

Difficult to scan and compare information as hover cards constantly shift across the canvas.

General feedback was collected from customers and internal users.

Market Research

Investigated hover card patterns across various industries (Google Maps, TigerGraph, Sardine, Airbnb, Figma, etc.)

Design, Prototype, Repeat

Over the course of a month, I worked closely with the product team to brainstorm potential directions. This project was unique compared to previous projects as it was extremely interaction heavy. As a result, prototyping mocks on Figma became the most powerful tool to communicate ideas and align stakeholders. These in-depth prototypes enabled our teams and test users to interact with the experience without requiring engineering resources to build it out.

Where we landed

Milestone 1 is the first round of designs that will be implemented into production. With this solution we address the following concerns:

Potential future iterations

Milestone 1 is designed to address the usability concerns with the current hover card implementation. However, through the journey of solving for this problem I learned that above all, investigators highly value the ability to compare multiple cards at once. While we partially solved this in Milestone 1, I was excited to dive into how we can optimize the experience for node comparison with features such as a gallery view and focus mode.

Handing off to engineers

Throughout the project, we collaborated with the engineers to align on feasibility and technical constraints. The ongoing checkpoints resulted in a smooth hand off to our engineers. The project is planned to be completed and pushed to production within Q4 2024!