WEB APP

Pointing Users In The Right Direction: Error Handling

Refining the experience for Procurify’s Order Request import function for users that encounter errors in their day-to-day workflow.

laptop with an interface of error handling

Overview

Role
UX & UI Designer (User Research, Visual Design & Testing)

Date
July 2019

Platform
Web

One of the most frustrating things in software you can encounter is bad error handling. Not telling you how to address any errors is essentially a service saying “not my problem”.

In my time at Procurify, I worked with a team to help inform and provide confidence for users when dealing with encountered errors. The work was done specifically for the Order Request module but would also be applicable to other parts of the app.

Identifying the Problem

The issue was brought to the attention of my team when our user funnel data revealed a majority of our users were dropping off early in the import process in the module. With this problem in mind, we wanted to dive deeper into what sort of problems were causing this.

After speaking with members of our Customer Success and Support team, we learned that the importing function across the app also generated high volumes of support tickets, and a lot of time was needed to help troubleshoot for customers.

One of the key insights from our discussions was that the error messages that users were presented were difficult to understand and did not provide any direction for users to resolve their errors.

Previous Import Error Screen

Mapping The Experience

With our issue and key insight identified, we mapped out our user flow and the pain points that were encountered. This helped highlighted opportunities for us to step in and provide users with the right information to resolve issues. The map also helped us arrive at the realization that we could possibly remove unnecessary steps in the workflow to complete the process faster.

Previous Order Import workflow

Ideation and Solutioning

With a clear idea of the problem, I was ready to begin the ideation phase to come up with solutions. I collaborated with my team to gather different ideas and approaches on how we could solve the issue. There were numerous ideas on how we could help assist our users in this workflow. An example suggested was the ability for users to quickly search for account codes instead of having to manually find them.

To keep the solution focused on the problem, I made sure to only incorporate ideas that directly aligned with the goal of providing error feedback and speeding up the import process. As we also wanted to keep the scope minimal, I finalized the solution to focus on fixing the error messages and streamlining the workflow.

When rewriting the error messages, I looked at feedback from our Customer Success team members and narrowed it down to the main issues:

  • The language used was too technical and was not familiar to the majority of our users
  • Users were not given proper instruction on how to resolve their errors
  • Users were not informed on what the requirements were before importing

With these gaps in mind, I worked with my Project Manager to rewrite each possible error a user could encounter to be more informative and easily understood.

Example of revised error message

Our solution initially mirrored the same workflow steps as the current state, but we realized that we would be able to remove a step in the workflow. This was where users reviewed data before importing to see what it would look like in Procurify’s system.

We opted to remove this preview step because we wanted to learn if our customers found value in this step or if they would prefer to skip it and complete their data import quicker.

There was some initial pushback on removing this step from the team, as it was perceived to be important for users to preview their data before importing so they would not make mistakes. However, we were able to find a balance in the solution to include a reset button that would undo an import, which we hypothesized would help rectify any import mistakes.

Updated Workflow

Getting Feedback

Whilst development was in progress, I wanted to validate if our new changes aligned with our goals. This was done by reviewing them with our support team members to see if the new design was an improvement and the messages aligned with what they commonly tell customers when they encounter similar problems. After a few quick edits, we were finalized and ready to show it to customers.

Final Result

The result of our improvements resulted in the first time success rate of an order import from 60% to 90%. This improved success rate also meant a reduction in support tickets associated with order imports. Tickets that took hours to resolve were now resolved in minutes, much to the joy of our Support team.

The newly designed interface and error copy also helped demonstrate best practice for all other import modules throughout the product.

The successful upload workflow

The upload workflow with errors listed

Takeaways

Working closely with the development team really helped me better understand how our app is built. This in turn provided useful perspective when coming up with solutions that would not only solve the problem, but make implementation easier.

This project also helped build empathy for our Customer Support team and learn about typical issues they need to help customers with. The work helped highlighted how design decisions made early in the process can lead to difficulties for customer facing teams if not considered properly

Other Projects