Figure 1: The legacy application, Bonnie, incorporated a wealth of information but was visually dated and relied heavily on long vertical scrolling (partially shown).
When we started our discovery, prototyping, and testing process, we found numerous problems. The interface had a dated style that is not consistent with the aesthetics of more recent applications built for CMS. Several components, such as the living status field, could communicate information more efficiently. The call to action (Cancel/Save) appears in the upper right rather than the footer where it is expected. The layout takes up prime locations with non-critical warnings and has a three-column design that is inefficient in organizing information.
The biggest opportunity, though, stemmed from how the interface incorporated the large amount of domain-specific information. Experienced users needed these data to set up effective tests of clinical quality measures, but the amount of data led to an extremely long scrolling page. Navigating up and down to access the right information at the right time led to lots of wasted time.
How MADiE fixes MAT and Bonnie UX challenges
The UX issues in MAT and Bonnie are common and accumulate naturally in software projects. Preventing or correcting them takes an intentional approach. Using the refreshed design system and contemporary visual styles helps drive consistency with more recent products at CMS.
We also worked to apply UI components more effectively. For example, the living status is now represented with a drop-down that makes both potential statuses visible at a glance. Fields that should not be edited, like first and last name, have their labels and input boxes removed to better indicate their lack of function and to save space. They are also relocated to allow the three-column design to collapse to a simpler and more intuitive two-column. Finally, the Cancel/Save buttons are relocated to the more typical lower-right position.
Although each of these changes is small, they accumulate and provide a big improvement in user satisfaction and efficiency. But the most significant gain came from addressing the usability challenge presented by the systems’ enormous amount of data. The proposed MADiE design (Figure 2) resolved this issue by applying a space-efficient tab interface. This allows users to find all the details they require with a single click—saving a lot of time. The new design also maintains the basic structure and terminology of the original. Users know implicitly where to look for what they need and can find it immediately. As one user put it:
“It's nice when the puzzle pieces are put together for you and presented in the way that makes the most sense so you can see it all together, versus having to scroll a million times over.”
Figure 2: The new version, MADiE, updates visual styles and incorporates a more structured tab container to improve usability while maintaining terminology, information architecture, and layout patterns from the original.
Discovering and validating key changes like these add up to big benefits for users:
"I'm really impressed. It looks like a lot of progress has been made. I really do like it, and I appreciate that you're doing it from a user perspective. That's really evident."
At the same time, the new design preserves many functions that might seem unusual at first glance. “Elements” still follow a rigid alphabetical order. The page is still rife with technical terms that could be switched to plain language. Data is still shown on the left while errors are in the right half of the screen. These choices are grounded in the aspects of the legacy system that are meaningful to the user population and cater to what they expect.
Early investments in UX pay long-term dividends
There are generally two approaches to overhauling legacy UX:
- Continue with the old design that has become convoluted over time as pieces and systems are added until the overarching design no longer serves its users well.
- Upgrade the product with a new and more intuitive design, hoping that users will adapt to the changes.
Effective digital modernization requires blending these two approaches. A good team will follow their users’ lead by:
- Spending time to learn and understand the history of the product and users’ relationship with it, picking up on cues for how the product can be improved.
- Merging what is learned with current UX design patterns.
- Making small changes and testing their outcomes to determine the best path forward.
But thoughtfully integrating UX updates can be a challenging sell for federal agencies. Instead of taking a human-centered design approach, many agencies go straight into development, citing time and cost factors. But in the long run, these agencies likely won’t get the value out of digital modernization that they otherwise would, as 94% of users do not trust outdated websites.
By including the design as part of a broader digital modernization effort rather than rushing past it, agencies can avoid dead-end projects and align agency staff toward a shared goal more efficiently. There is a significant return on the up-front investment of a digital modernization when the process restores a legacy system to relevance and value.
Interested in learning more about current trends in federal IT? Download our 2023 digital modernization report.