Powering internal teams at DigiCert with a new web-app
The new, one-page web application design reduces the time to complete primary tasks by over 50%. Across a workforce of almost 300 global employees, this time-savings could save $3.52M (USD) a year.
Summary
Role
Lead UX designer
Problem
DigiCert needed a new system for internal employees to validate certificate requests from customers around the world. The existing system, a decade old and with no history of usability testing, had been developed and maintained by engineers only. It did little to help the hundreds of employees who interacted with the system daily to avoid costly errors. Additionally, it was time-intensive to learn and master.
Outcomes
The new design can half the amount of time it takes to complete major tasks, which is projected to save $3.52 million (USD) per year, while improving industry compliance.
All opinions are my own and do not reflect the views or position of DigiCert. To respect the project’s industry importance, additional details and visuals have been withheld. I’d be happy to discuss in a conversation.
Getting started
Preliminary research
To understand how validation agents actually get work done, and how the validation department operates in general, I conducted interviews, performed in-person contextual inquiry with three agents, and analyzed qualitative feedback from agents about issues in the current system and their wishlist for a new system.
Design sprint
I planned, facilitated, and participated in my organization’s first-ever design sprint. Ultimately, we decided to prioritize built-in compliance to industry standards above all other issues. The biggest threat to our business is distrust, and the best way to prevent that is to improve industry regulation compliance.
But where to start? We looked at our map and realized most compliance errors or gray areas came from a type of work called organization validation.
Here, an agent had to collect information from verified third-party sources to validate customer-submitted info (data like organization name, address, registration status, etc) and then use the validated information to ensure the request for a certificate was authentic. The sprint team chose this as our starting place because of the potential to make the most progress towards our goal of reducing compliance errors while increasing usability.
Design
Version 1.0
In the old system, agents needed to reference and capture screenshots from thousands of different sources. Each screenshot had to be saved on the desktop, marked up using another system to highlight areas of the document that were relevant, saved again, and then manually uploaded into the legacy system. By the end of the five-day design sprint, another designer and I had rapidly built an interactive prototype to test ideas that saved the agent from going to a new tab.
BEFORE: In these screenshots from the old systems, agents had to open an order, click on pending tasks, go to a new tab to an approved source, save a screenshot of the source, upload the screenshot, and then apply the upload to a pending validation requirement.
We tested a concept that allowed agents to access online sources without leaving the validation system (browser-in-browser). This could speed up validation and improve compliance since the system would know where every validation source originated. Once the document was found using browser-in-browser, the other new idea allowed agents to mark up, match, verify, and edit documents in automated or nearly automated ways by selecting and right-clicking on content directly. The system could “read” those selected portions of the documents, match them against known information, and flag or complete validations in one click. I called this right-click magic.
Initial prototype whipped up in 24 hours for testing in the design sprint, this scrappy prototype was refined enough to test the big ideas of browser-in-browser and right-click magic.
Version 2.0
The feedback from agents from the design sprint prototype was enthusiastic, so I moved forward iterating the rest of the new design. Refining the right-click magic became one of the most challenging parts of the design to make intuitive and sophisticated.
I had a breakthrough when I was able to recognize patterns to simplify the number of interactions an agent might take while working with any of the thousands of sources. I designed three main categories of interactions possible on a validation requirement and then designed a reusable, predictable format for the variety of states within each category.
A sample of the matrix I created of categories and the states within them. This was an early version, and I refined these based on usability testing and feedback. For example, in the final version, no information is conveyed by color alone for improved accessibility.
The next major version of the design refined the visuals and included a mark-up mode so a user would be able to move from navigating in browser-in-browser mode and start applying a document to verification tasks. This didn’t test well, and we were able to eventually eliminate the need for formally entering mark-up mode before being able to highlight.
Version 3: Adding in a supporting cast of features
The feedback was consistently positive and improving, but in almost every session agents expressed concern about not yet seeing a number of other features they were accustomed to having in the original system. One feature included integration with two APIs that could massively speed up validation by detecting address formatting errors, making address format suggestions, and verifying addresses with approved sources automatically. To do this, the API results would have to appear at key points in the validation flow, giving the right information at the right time.
User flow identifying when to appropriately introduce a variety of possible API results to an agent
An example of a modal that I designed to offer a time-saving option to an agent for validating addresses. Agents preferred to see details, so I created a side-by-side view with colors, underline, and icons to highlight the impacted address details quickly without overwhelming the modal.
Agents could accept the API’s results, or apply their own judgment to override suggestions through an escalate feature that pushed an order up to a manager for review.
Example of the escalate feature being activated from a validation requirement.
Version 4: Pivot to the plugin
As we neared a big milestone, however, ongoing technical issues with browser-in-browser forced us to consider alternate solutions. If we couldn’t bring the necessary web pages into the system, we could bring the system to the web pages.
An agent would need to open a new tab to access a source, but could use the plugin to see order information without flipping back and forth between tabs or requiring them to save sensitive information to thier own machines. I was relieved that this solution still tested well, was easy to understand, and rated as more user-friendly than the old system’s process.
Designs and interaction notes for various states of the plug-in
GIF of an agent using the plug-in to capture an image from a source, upload it into the new system and apply the image to a pending validation requirement by highlighting and right-clicking on the data on the image.
Testing
The best part about building an internal tool is the access to the end-users! This frequent access and testing were invaluable to informing the design. Each new feature was tested with actual agents by myself or through my collaboration UX researcher. I logged over 60 hours with agents throughout a year of development and testing on this project. A couple surprising findings about the agents in general stood out above the rest:
Screenshot from a remote usability test with a European agent evaluating the address modals to make sure the address formatting worked in different geographies.
Overestimating technical expertise
The challenge of learning a new system is real, and when it comes to one’s job, it can be threatening.
In subsequent testing with the plugin, I realized that the level of technical proficiency we observed in certain agents was often limited to the work they did frequently. The process of guiding an agent through downloading and installing a plugin showed that validation expertise did not equal broad technical expertise.
I realized I needed to incorporate additional guidance and helpful aids throughout the new design.
Competing with a decade of mastery
In testing, I learned quickly that despite being better on every usability metric, the new designs could not immediately compete with a decade’s worth of mastery. The old system had many quirks and flaws that had become invisible for many experienced users.
If asked how to perform a task in the new system, experienced agents often responded with the speed of muscle memory by explaining how they would complete the task in the legacy system instead of exploring the new interface in front of them. I had to change my approach in usability testing to get past knee-jerk reactions to the new design that made it difficult for agents to evaluate simply because it was new.
Impact
The new, one-page web application design can reduce the time to complete primary tasks by over 50%. This time savings, across a workforce of almost 300 global employees, is projected to save $3.52M (USD) a year.
The new system achieved a massive reduction in compliance risk by completely eliminating a major source of error: manual entry fields.
While focused on compliance, the feedback from agents revealed that the new design impacts company culture by increasing feedback opportunities between managers and staff and improves visibility into employee performance in a more equitable way.
Positive feedback from agents as parts of the system were released.
Learnings
A focus on everything is a focus on nothing. Of all the areas we could make improvements in, we chose to center the entire design of the new system around improving compliance. This meant we could simplify our priorities for the near-term roadmap, know how to measure success, and have a lifeline to draw upon when we needed to make a long-debated decision. The other areas of improvement were not discarded, but slated for post-MVP attention. This was an invaluable North Star for a project with so much potential.
UX design doesn’t own the market for good design ideas. Actively finding ways to solicit feedback and ideas, early and often, from the many people the project would impact helped us have better requirements in the design phases and smoother engineering hand-offs. For this project, it included a dedicated internal Slack channel in which any validation agent could share ideas. In the product team, we had near-daily UX Designers/UI Developers/Product Owner meetings to walk through designs and technical reviews and explore ideas together, despite being scattered across timezones in North America and Europe.