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
Project
Professional
Timeline
~1 year for design phase
Development phase in progress
Tools Used
Figma, Azure Dev Ops
The Problem
An outdated application creating headaches
Salespeople at Ardent Mills had been working with an outdated application for years. Much of the UX did not meet current best practices and there was an excess of confusing alert messages. On top of that, the underlying code was inefficient, preventing future improvements. These elements combined to hinder users from doing their job as efficiently and as pain-free as possible.
Project Goal
Overall improvement by aligning with the design system
To address these issues, this project focused on building a solid foundation. The interface was completely overhauled to aligned it with the best practices outlined by our custom design system. Doing this would allow for future improvements by replacing hard coded elements with globally coded ones.
My role
Improve alert messaging
As one of three designers on this project, I helped with many aspects of the project. My main contribution was to analyze and improve the alert messaging as well as write and review the development stories for the new alert designs.
Discovery
Working with limited resources and budget
From the get-go, we knew we had limited funding for development resources. Because of this, the design team focused on updating all UI elements to align with our design system. Any improvements in flow were reserved for the most crucial aspects. We prioritized the development stories based on estimated impact knowing that not all stories would actually reach development.
Learning the sales application
Buying wheat and selling flour is a complex process and the application used to manage those sales is equally complicated. I used a combination of approaches to help me learn this application. I talked with the product owner and manager about the business of wheat sales to understand user goals. I also worked through each task flow so I could successfully complete them. In addition, I watched screen recordings of user sessions to understand their behavior.
Documenting the alerts and their behavior
After learning the application, I set out to find and document every alert. I evaluated each task flow to understand how and why each alert was triggered. When I found an alert, I captured it and notated its behavior. This process helped me understand the alerts from a global perspective, as well as spot patterns and inconsistencies.
Analysis
Not every alert was helpful…
Providing alerts that help the user solve issues is key. In analyzing the wording, behavior, and delivery of each alert, it was clear that they didn’t always serve their purpose. Often alert messaging was confusing, the alerts were non-existent, or they were not delivered at the right time in a flow.
A major observation I made was that the application favored disruptive alerts. Users were forced to interact with floating modals or other interactive components before they could return to their task. Reducing disruption while still providing the necessary information was a key goal.
Final Designs
Simple solutions when possible
When designing the updated alerts, I tried to keep the designs as close as possible to the current design as long as it made sense. In many cases, updating to the newest version of the component and tweaking the wording of the message was enough.
More complex scenarios
Some scenarios called for more significant revision. Changing the component type, changing the logic behind the trigger event, or altering the alert flow required more significant development effort. Altogether there were around 178 alert messages that were addressed. About 40% were complex scenarios.
Take the image below. Here, the user has to go through several steps just to discover they couldn’t perform the “Undo Contract” process.
Scenarios like this provided great opportunity to reduce user frustration and simplify the alert flow. In the redesigned flow, if the Undo Contract function is unavailable, the button is inactive. A tooltip appears over the button with more information about the error. If the user came to this page in order to perform the Undo Contract task, they will know immediately if this action is available or not.
Impact
Improved metrics
Tracking metrics are incredibly useful in assessing design impact. Since the alert designs will be developed at the end of the project, their impact is not yet known. We can, however, see the impact of our efforts to align the application to our design system.
At this point, 25% of our designs have been implemented. Due to these updates, we can see the percentage of quick backs was greatly reduced. This leads us to believe users can better understand the navigation. This is great news since the stories we prioritized were related to navigation.
Design system documentation and rules
This project required us to update and create new components which in turn allowed us to overhaul our documentation. We fleshed out guidelines for components and established rules regarding copy, especially in alert components.
Takeaways
Design is a balancing act
Being a design-led project, I was able to be a part of the overall process—from the project funding proposal to the development handoff, review, and implementation of our designs. In building my knowledge of the sales application, I learned how to leverage user recording sessions and metrics in Clarity.
The main takeaway for me was practicing balance. Each of my designs required a knowledge of user goals, good UX practices, and technical restrictions. There were usually multiple solutions for each alert, but I had to decide which best balanced these things.
Some other projects
Empowering users for more efficient software testing
Enhancing independent language learning through stories.
Creating a seamless appointment booking experience.