Ending the Clutter

This track of work focused on redesigning a toolbar component that had slowly turned into a patchwork of small UI pieces scattered across the screen. Occasional alert banners and inconsistent organization would push elements around. The horde of tiny buttons changed depending on the progress of the application and the access level of the user made the experience feel unpredictable and harder to use. These buttons were not meeting accessibility requirements, and were also not listed in any particular order.

Users reported multiple issues.

1. The majority of the elements in this section were too small: buttons, important identification information, and labeling. Older users and users with low-vision were especially impacted.
2. Up to 15 buttons could be present at once. These were in no particular order, and changed based on both user access and the stage of the application progress.

3. Some identification data points were hard to find and hard to read, while others were repetitive or unnecessary.
4. Elements were not grouped together in one cohesive component in development, so alert banners or flags appeared in the top, middle, or bottom of this section, sometimes all at once.

The toolbar redesign needed to accommodate the unique requirements of 100+ variations within the application. The audit I performed of all the possible permutations users might see was additionally valuable in communicating with the development team.

I interviewed users on-site, in-person at several field offices. I learned how they used this component and what pain points showed up their daily tasks. With real user feedback, I successfully advocated to complete this work.

Finding 1: Users lost confidence when controls moved.

When flags or alerts appeared, action buttons could shift position, and participants described rechecking the UI before clicking because they feared misclicks.

Finding 2: Accessibility was low.

The appearance and location of action buttons varied based on the progress of the application, as well as the user's access level, which created visual hunting and slowed down repeat tasks.

I observed participants using the zoom function in their browser to identify the correct action button as the text size didn't meet accessibility standards.

Finding 3: Unhelpful information hierarchy.

Information that users needed in frequent and repeated tasks was small and hard to find, while unnecessary information took up a majority of screen real-estate.

Solution

1. Migrating this section to our modern design library increased accessibility and eliminated the struggles many users had with legibility.
2. Moving the large and flexible number of actions into a drop-down contained the chaos, and allowed us to alphabetize the actions, making it quicker and easier for users to find what they needed.
3. Utilizing user interviews, I identified a hierarchy of importance on the visible data points, as well as unnecessary information we could remove to simplify. I also performed an audit of the possible button/action permutations to create a sensible design solution.
4. Working with a development team to create one cohesive component, eliminated the possibility that alerts and banners would appear in the middle of the section.

Next Steps

• I presented these findings to our product owners, and we were given permission to start working with a specific development team.
• The wider team proposed rolling out this change to a single application type initially, testing and iterating before rolling out to other applications. Prioritization is based on frequency of daily interactions.
• Once the initial migration of actions from Angular to React is complete, we anticipate completing one product line per month.