Proof
The user dashboard serves as the central hub, a place where initiating transactions, deleting and viewing past documents can all be done. However, our current dashboard lacks important information and consistency compared to the rest of our product. To enhance this space, we aim to create a design that creates consistency across the product and caters to our diverse users.
Team: Sam Restivo (Product Manager), Katie Adams (UX Researcher), Cristina Silva (UX Engineer), Matt Russo (Senior Software Engineer)
.png)
Problem
At Proof, our customer base constitutes an impressive 60% of returning users. However, our current platform greets users with a dashboard that, for the past four years, has remained untouched. This has resulted in glaring design disparities from the current user flow. Critical information and functionalities are notably absent, leaving users uninformed about transaction timelines, types, and lacking control over crucial actions. Furthermore, the absence of options to delete or decline a transaction burdens our employees who manually have to handle these tasks on behalf of users, creating unnecessary bottlenecks. How can we seamlessly integrate crucial transaction details and empower users with necessary controls?
.png)
Current desktop user dashboard 🔬
Goals
Business: To increase our revenue through an increase in transaction conversion.
Product: To create a design that considers new user and transaction types such as identity verification or group signatures.
Challenges and limitations
The engineering bandwidth allocated for this project is low, limited to the resources of a single engineer. Consequently, the implementation of the updated design will occur across multiple phases due to the restricted capacity.
Current flow
Initial Brainstorming
After logging in, users are directed to the dashboard, the central hub for continuing ongoing transactions or initiating new ones.
Current dashboard experience 🤨
Current empty state 🫥
.png)
Mobile web dashboard experience 😬
First iteration
Inital designs for the user dashboard 🤨
In this initial phase, our focus is on creating a user-friendly interface that guides users effectively. We've revamped the table's look, added a welcoming message, and introduced a sub-header which alerts users to their pending transactions. Responding to business client requests, we've prioritized documents with due dates and enhanced user control with options in the kebab menu for document deletion and declining to sign. The UX team suggested all unsigned transactions, regardless of the type should have the same background color. The team also suggested incorporating user identity information as is something the company will be expanding on in the coming months.
Second iteration
Second round of the user dashbord 🦦
In this second iteration, the header and user identity cards improve hierarchy and structure. However, the call-to-action buttons feel disconnected from transactional elements, and the absence of an anchoring element for the table creates visual inconsistency. Placing the table within a card could enhance coherence. The UX team sees potential in the upsell opportunity for upgrading to a business account, aligning with our goal to increase business customers.
Third iteration
Third times the charm? 🫡
Updated empty state dashboard 🤩
We felt confident with this design as it shows essential information clearly and concisely. The use of cards creates a space for transactions while maintaining a dedicated section for user identity information. It aligns with our latest design system components, providing a cohesive and contemporary user experience. The revamped empty state features compelling calls-to-action, prompting users decisively to initiate transactions.
Mobile web iterations
.png)
All iterations of the mobile web designs 📲
Designing this mobile web dashboard presented challenges in fitting crucial information within limited space. To address this, we kept the identity information format but made it accessible through a dropdown initiated by clicking on letters at the top right. This maintains familiarity while prioritizing transaction details in the available space. The focus was on optimizing screen real estate to present comprehensive transaction information without overwhelming users.
User testing
Objective: Usability gut check of desired design enhancements to understand the risk/likelihood that our proposed changes could lead to user confusion.
Testing approach: Unmoderated usability tests with 90, US-based participants recruited from Usability Hub’s research panel.
Open design questions:
- Will users be confused by the new streamlined look & feel?
- Will they understand the intent of this page?
- Will users be distracted by the identity information?
Setting the context:
You need to get a PS1583 form notarized and have chosen to use a service you've used before that lets you get it done online. The process is pretty straightforward: log in, upload your document, verify your identity, and join a video call with a notary, who then conducts the notarization.
User interview sketch ✍🏻
Complete-a-task
Participants were prompted to complete one of the tasks below & shown either the desktop or mobile version.
Upload a notarization: You want to upload a document to get it notarized. Click to upload. Desktop (n=15), mobile (n=15)
Resume a notarization: You have a notarization in progress. Click to resume the transaction. Desktop (n=15), mobile (n=15)
Delete a transaction: You never completed a transaction and want to delete it. Click to delete. Desktop (n=15), mobile (n=15)
Key - takeawaysClick success rates were positive
- Avg. across all tests = 69.5%
- Desktop average = 67%
- Mobile average = 72%
Interestingly, a small subset (3 out of 15) of respondents in our tests clicked to decline to sign instead of deleting leading me to believe a more visual cue was necessary. However, we feel confident that overall this is a good initial improvement for our users.
Version 1
In this updated dashboard experience, users gain comprehensive control over their transactions, enabling them to effortlessly view, complete, create, and even delete transactions. The redesigned UI not only establishes uniformity across the entire user journey but also allows for a quick overview of new information without overwhelming the user.
How we got here
Due to the lack of engineering resources for this project, we worked on this through four different phases of implementation.
Phase 1: Adding the header
Phase 2: Adding Proof ID information
Phase 3: Updating table UI
Phase 4: Adding new logic to the table
A new take on the user dashboard
In this updated dashboard experience, users gain comprehensive control over their transactions, enabling them to effortlessly view, complete, create, and even delete transactions. The redesigned UI not only establishes uniformity across the entire user journey but also allows for a quick overview of new information without overwhelming the user.
Retail signers experience
Example of a dashboard if the user was also a notary 📄
Example of a dashboard with completed documents 😎
Initial results
We’ve seen an increase of +2.5% of user conversion 3 months after release and a an increase of +1.7% of completed transactions form the dashboard 3 months after release.
Initial insights
A few months after the release our CSMs reported that business customers are happy with the new user dashboard. However, some signers are uploading a new transaction instead of finishing the transaction that was sent. This feedback led me to observe our signers use the new dashboard experience on FullStory where I found some interesting patterns.
- Our signers are landing on the dashboard after meetings are terminated and are uncertain on how to proceed.
- Our signers are coming to the dashboard to ask support questions after a meeting was terminated or completed.
Using pendo to experiment
We used Pendo to create a tooltip reminder that would show when business signers had a transaction to complete. This was a low lift effort to see if a stronger visual cue was needed. From this we saw an increase of +2.78% in business signers user conversion. We also used Pendo to add a resource center in the dashboard that answered our signers top questions. From this we saw a decrease of -1.67% in support tickets.
.png)
Example of a dashboard with the Pendo guide 👻
.png)
Example of a dashboard with the Pendo resource center 🔍
What's next
Observing users on our dashboard has also shown us the importance of re-thinking our meeting terminations. The plan in the first half of 2025 is to create better routing for our signers so they don't end up in the dashboard confused as to what happened.
Conclusion
The project was engaging and dynamic, offering ample room for extensive iteration and design exploration. Collaborating closely with the engineering team, we devised a phased roadmap which worked based on the engineering capacity we had. While this revamped dashboard is a significant milestone, as our discoveries show
I see it as just the start.
.png)