Project Background
Design Problem
Users were being bombarded with error messages both in the side navigation and on the LocalSync page.
This led to high volume of Customer Service contact, which resulted in $1,449 of credits issued to 6 customers for sync errors between the months of May and June 2019.
Known Constraints
It was determined to be technically difficult to account for all the API errors that return from our multiple integration partners. Most times the messaging was vague and technical, with error codes that were difficult to trace without engineering input.
It was also difficult to recreate the errors that occurred, since there were no validations in any of the fields that BentoBox would send to integrations.
Audit
Since there were no documented flows for LocalSync, I did a quick teardown of the feature to understand where the users might encounter errors. I was also able to observe a usage capture of customer who went through the set up process alone.
Once the user successfully signs up for LocalSync, they would arrive at a main page that would look something like this:
Being faced with a screen full of errors despite having taken no action, the user would then try to fix the said "errors" by clicking into each location, only to be faced with abstract errors that had no defined order of urgency.
Many of these "Sync Errors" were in fact not sync errors at all, since the only two statuses a location could be were "Sync Error" or "Synced." Any state other than successful sync would be marked as an error.
From these observations, I came up with the following goals for this project:
Goals
- Differentiate true errors from statuses.
- Develop rules to distinguish messaging by urgency.
- Inform users on what actions they need to take on each statuses.
- Reduce information fatigue from over-exposure to unintelligible messaging.
New Statuses
I started by separating out the previously "Sync Error" status into sync error, pending sync, and no integrations statuses. These two were the most common "Errors" users would encounter.
Pending sync will show when there is new data and is waiting to be sent to integrations. There is no error to be shown, since the information has not been sent yet and no errors have returned.
No integrations occurs frequently because users are not required to connect any integrations to locations to complete sign up.
Warning vs. Error
Top banner alerts at the top were also broken up into two statuses.
Yellow highlights things that might impede sync, while Red is used for things that have impeded sync.
Guided Messaging & Flow
Top banner copy was changed to be more descriptive and actionable. A location that does not have integrations will open to the "connect" tab in the details view.
I was able to learn from Fullstory captures that users would often try and click on the error state pills. By adding more information on hover and click we could direct users towards action without cluttering up the main UI.
Reduce Occurrence of Errors
Finally, the side navigation's alert icon was redefined to show only if there are locations with "Sync Error" statuses. Pending sync and no integrations will not affect this icon. The icon was a constant source of fatigue for users, so reducing the occurrence of it would improve overall usability.
Looking Forward
While this UI update addresses some missing links in the user experience, the technical constraints still limits BentoBox from giving users more actionable directions to fix their actual sync errors.
I hope to monitor most commonly occurring errors in the months after deploy, as well as look into properly validating data we send to integrations to reduce the number of errors further.
