Improving Alert Messaging in a Custom Sales Application
Ardent Mills is a leading flour milling company in the US with over 40 mills in operation. Buying wheat and selling the flour produced from it is a critical part of their business. The overall goal of this project was to improve the company’s internal sales application and create consistency with other internal products.
Client
Ardent Mills
Timeline
~1 year for design phase
~6 months for first dev phase
The Problem
An outdated application creating headaches
Salespeople at Ardent Mills have been stuck with an outdated application for years. The application was not using Ardent Mill’s custom design system, depriving users of the best UX practices. Users constantly encountered confusing alert messages, which they often complained about. To make matters worse, the underlying code was inefficient, making future improvements difficult. All these issues combined to make their jobs more challenging.
Project Goal
Align with the design system first
To tackle these challenges, we embarked on a journey to build a solid foundation. By updating to our design system, we replaced hard-coded elements with the globally coded, reusable ones. It increased the efficiency of our code, improved maintenance and scalability. All these changes set the stage for easier development of features coming down the pipeline.
On top of all these benefits, this transformation created a consistent design language and user experience across our internal products. We naturally elevated the UX standards of the application with simple changes, like updating the button copy and simplifying button types, which resulted in clearer navigation. This is especially handy for new users learning this complex application.
My role
Improve alert messaging
While alerts were not part of the original scope of the project, we saw an opportunity to evaluate alert messaging while aligning the alert components. My main undertaking was to take a deep dive into the program’s alerts, analyzing and making them more user-friendly. I wrote the stories for the new solutions, preparing for development efforts to be tackled once the main project goal was achieved.
Discovery
Working with limited resources and budget
From the get-go, we knew development resources were tight. With this in mind, we focused on updating elements to align with our design system. Improvements in flow were reserved for the most crucial aspects. We prioritized the development stories based on estimated impact, fully aware that not all stories would make it to development.
Learning the sales application
Navigating the process of buying wheat and selling flour is no small feat, and the application used to manage it is equally complex. I took a multifaceted approach to learn this application. Conversations with the product owner and manager illuminated the ins and outs of wheat sales and user goals. Additionally, I leveraged screen recordings of user sessions to observe their behavior. I used these learnings to meticulously work through each task flow to ensure I could complete them successfully.
Documenting triggers and behavior
Once I had a grasp of the application, I dove right in to find and document every alert—and there were a lot. I evaluated each task flow to understand the triggers behind each alert. When I encountered one, I captured it and notated its behavior. This process helped me see the alerts from a global perspective and spot patterns and inconsistencies.
Analysis
Not every alert was helpful…
Crafting alerts that assist users in solving issues is key. It became evident in analyzing the wording, behavior, and delivery of each alert, that they didn’t always hit the nail on the head. The alerts were frequently confusing, delivered at the wrong moment, or missing altogether.
Alerts were unnecessarily disruptive
A major observation was that the application favored disruptive alerts. Users were often interrupted by floating modals, which had to be dealt with before being allowed to return their task. My goals were clear; reduce disruptions, improve copy & timing, and add missing alerts.
Final Designs
Keeping it simple when possible
When designing the updated alerts, I aimed to stay true to the current designs when it made sense. Often, simply updating the component and tweaking the wording of the message did the trick.
More complex scenarios
Some scenarios demanded more substantial revision. Changing the component type, altering the logic behind the trigger event, or modifying the alert flow required more significant development effort. In total, I addressed around 178 alert messages, with about 40% being complex scenarios.
Take the image below. Here, the user has to navigate through several steps only to discover they couldn’t perform the “Undo Contract” process.
Scenarios like this provided great opportunity to reduce user frustration and streamline the alert flow. In the redesigned flow, if the Undo Contract function is unavailable, the button is inactive. A tooltip appears over the button providing more information about the error. This way, users who come to this page in order to perform the Undo Contract task will know right away if this action is available or not.
Impact
Improved metrics
Tracking metrics are invaluable in assessing design impact. With 25% of our designs now implemented, we observed a signification reduction in the percentage of quick backs. This suggests that users are finding the navigation clearer. This is fantastic news especially since the stories we prioritized were related to navigation.
As the alert stories will be developed towards the end of the project, their impact remains to be seen. We’re optimistic that we will witness a decline in rage clicks and dead clicks, as well as an improvement in satisfaction and usability metrics gathered from surveys.
Improved design system
This project pushed us to update our design system. We added 15 new components and refreshed the old ones to have an atomic design structure. This in turn gave us the chance to revamp our documentation. We fleshed out comprehensive guidelines for components and established clear rules regarding copy in alert components. These updates have created a consistent knowledge base among cross-functional teams, reducing the reliance on designers for smaller projects.
Post Project Survey
Updates well-received but there’s still work to do
After wrapping up the initial phase of the project, I rolled out a survey to see where things stood. The survey covered user satisfaction, usability, and open-ended feedback. We received 39 responses over the course of two weeks. We learned that the updates were generally well received, but users were vocal that errors continue to be a big frustration.
“I think the new layouts and design enhancements are great!”
“There have been so many error messages in Vault that it has been challenging to do my day-to-day tasks in the system.”
Next Steps
Make the case for continued improvement
The design updates are a start on the road to building a more stable and reliable foundation in the application. Before and after metrics showed positive change, while qualitative feedback pointed directly towards areas that need improvements. Both these data points are invaluable evidence as we advocate for development of the next phases of this project.
Some other projects
Empowering users for more efficient software testing
Enhancing independent language learning through stories.
Creating a seamless appointment booking experience.