Powering Design With User Feedback

MLH exists to help Massachusetts residents find information to solve common legal issues, like securing public benefits or fighting an eviction. To ensure every aspect of the site was grounded in the audiences’ needs, MLH wanted to incorporate feedback during the discovery and design phases from real people who fit MLH’s primary and secondary audience profiles.  

By performing a thorough discovery process — including working group interviews, visitor interviews, cohort site analysis, and wireframe and prototype testing — Oomph was able  to create a successful site design dedicated to the needs of visitors.

Helping the Audience by Understanding Them 

MLH shares insights on heavy topics ranging from housing and homelessness to money, debt, and immigration. The site contains sensitive information that could change their visitors’ lives; by connecting them to domestic violence help or resources to get their children back, for example. When Oomph first jumped into the project, our main goal was to step into the shoes of their user groups to better understand their needs when they seek legal information.

The main audience of MLH is Massachusetts residents who are primarily low-income and may not speak English as a first language. They use the site to become informed about legal issues they’re facing quickly and efficiently. As one visitor stated:

To meet this need, the MLH team provides information in plain English at a fourth to sixth-grade reading level, rather than using complicated lawyer jargon, which makes it accessible to a wider group of people. Additionally, many resources have been professionally translated into other languages, such as Spanish.

The secondary audience that visits the site is those who help the primary audience, such as social service providers, legal aid lawyers, and legal librarians. Oomph had to walk a fine line by getting feedback from the secondary audience to help inform information about the primary audience; however, our main goal was to ensure that low-income and non-English-speaking people could find the answers they needed.

Gaining the Audience’s Trust with Thoughtful Design Details

We learned that many visitors found the MLH website by searching Google with their questions. Many primary audience members would visit the site on their mobile phones, perhaps even listening to its content with their text-to-speech tool. Knowing that, we had to design an accessible experience on any phone, tablet, or desktop device. This increased the importance of a mobile-first design so the pages loaded quickly, the information was clear, and the experience made sense for mobile browsing.

A Modernized Design

The site’s look was outdated, making some visitors feel that it either lacked credibility or didn’t contain the latest legal rules and laws (even though it’s been actively maintained and added to for the past 15+ years!). For the Oomph team, the final designs had to walk a fine line between being authoritative, trustworthy, and comforting. To achieve this, we retained the blue color palette but created slightly softer tones to help create a calming aesthetic.

Our team also limited the amount of photography on the site but ensured that any photos we used represented the diverse groups MLH serves. Icons became a tool to guide the visitor through different topics; regardless of the visitor’s language, the icon could help them understand what information may be within that particular topic.

MLH has also accumulated a lot of content over the years. To help organize its search and topic organization feature, we incorporated content filters according to the information type: articles, how-tos, e-books, and videos. Each category has its own icon, and each icon is represented by a color. This helps unify the search based on the type of content the visitor is seeking.

Color Contrast and Accessibility

From the start, MLH made it very clear that their new designs should comply with both 508 and WCAG 2.1 guidelines — ideally conforming to the highest level of contrast, level AAA. As Oomph created the color palette, we were careful to use only high-contrast colors and document how to use them in a system to ensure that the palette satisfied accessibility guidelines. 

Supporting the Content With Tools

MLH had several existing tools to assist in digesting content. During our discovery phase, we validated the need for these tools and upgraded them. For example, on the content pages, there are options to print, share, listen to the content, and even switch the language as the visitor lands on the page.

Within the main navigation menu, the design included a “Quick Exit” button. This supports visitors who need to abandon the page when, for example, a domestic violence survivor’s abuser re-entered the room.

We cultivated a passion for this feature through our research and have written an article detailing our best practices for implementing a quick exit button. Additionally, we have created a Drupal Module for this feature so that more people can implement this important tool for sites with sensitive content.

Findability of Content Through the Main Menu Navigation

On a larger scale, the primary and secondary navigation menus needed an upgrade. As it stood, the main categories were wall-to-wall across the desktop, and it was hard to determine where a visitor needed to go. The secondary navigation menu read like a table of contents in a chapter book and didn’t allow the visitor to return to other categories. 

We solved for this by creating a survey to test a proposed navigation structure and revised the information architecture (IA). This included a new top menu that supported every step of our primary audience’s journey. We also created a level of navigation that directed visitors to the information they were looking for, no matter how they entered the site. 

Search

For search, we used a multi-filter approach which allows visitors to search both by topic and by content type. This filtering allowed them to find questions that might belong to multiple categories, and to narrow down content to the types they are willing to review.

Proactive vs. Reactive Enhancements

Analytics and user interview results showed that most visitors start their journey on either the homepage or pages that are three or more levels down the navigation. Many also reach the site via a specific Google search. While it is likely they found what they needed, they may not be aware of other information that can help them. To mitigate the risk of bouncing away from the website, we created a “Viewers also reviewed…” component on answer pages that showcased related content more naturally.

Repeating Help Footer

Above the footer, we created a “safety net” to help visitors who have browsed the site for a long time but have not found what they are looking for. If they reached the end of the page, this footer would direct them to more content that may hold their answers.

Previously Viewed

We added a “Previously Viewed” section at the bottom of content pages to remind visitors of the content they have already reviewed. This reduces the burden on the visitor when they ask themselves, “I think I’ve seen that already, but I can’t remember where I saw it.”

A Modern, Helpful Website Design

Through prototype testing with our first design mock-up with real visitors, the participants individually determined that the new site’s design and content organization was easy to navigate, gave them a trustworthy impression, and looked appealing. Today, the MLH website is live with a fresh Oomph design. We hope the structure and design will continue to not only keep visitors on the site longer but also help those visitors find the legal answers that they need.

Have a project that requires a human-first, empathetic approach? Consider talking to Oomph about incorporating user feedback into a user experience-focused design project for your next website refresh.

Simplifying Complexity without Losing Power

The biggest challenge as Oomph acclimated to the tax-collection world was rapidly learning enough about the complex regulations and requirements of municipalities in the industry to provide sound advice and recommendations. We started by examining their systems — the workflow of documenting and planning new product features and adding them to the roadmap, of designing the UX of those features, and of leveraging their in-house design system to build and support those features. 

RSI’s main product, GOVERNMENT PREMIER, are highly customizable and configurable. Every single screen has options that would display depending on the authenticated user’s role and privileges and the tenant’s own back-office processes. User stories included many requirements based on permissions and configuration. This added challenges when imagining potential interface solutions that need to accommodate growth in multiple directions. 

Oomph’s purposefully used our outside perspective to ask many questions about GOVERNMENT PREMIER’s processes. We took our years of experience designing interfaces for a wide range of consumers and applied them here. In this typically slow-to-evolve space, a user-focused experience coupled with GOVERNMENT PREMIER’s technical expertise would revolutionize tax collection as a friendlier, more intuitive, and highly customizable experience.

Maintaining Consistency in a Rapidly Evolving Product

Our findings and recommendations indicated previous UX teams did not create a rulebook that governed their decisions, and so, the system lacked consistency. Quality Assurance reviews would suffer from this lack of governance as well. Therefore, the first thing we did was to establish rules to design by: 

• Use Storybook as a source of truth, and expand atomic elements with larger patterns (called molecules in Atomic-design-speak).
• Enforce a global design token system for colors, typography, stateful user feedback, and spacing.
• Use Material UI (MUI) from Google as our foundation. This was a previous decision that was not fully enforced, which led elements to become over-engineered or duplicated. This became known as the “Build on the shoulders of giants” rule.
• Destructive actions (like Delete or Cancel) are placed to the left of creative actions, like “Save” or “Next.”
• Every screen has one primary focus. Complex screens need a focal point for the task and user’s need to feel confident they are using the interface correctly. When long forms are required, break them down into smaller chunks. Users can save their progress and concentrate on smaller groups of tasks. Color should be used to focus users on the most important actions, and to alert them when data errors need to be addressed. 

Ultimately, these rules are flexible and have served well as a starting point. Any new screen can adhere to these rules, and when we find cases where these rules are preventing users from completing their tasks or are frequently confusing users, we revisit them to make updates or clarifications. Oomph has continued to consult on new screen design and UX workflows after more than a year of working together.

Setting a New North Star to Align Our Compasses

To continue to move the product forward without increasing UX and technical debt, the teams needed a well-defined shared understanding for the user experience. Internal teams were moving forward, but not always in the same direction. Within the first month, our teams agreed upon a playbook and then continued to expand it during our engagement. We met twice weekly with product owners across the company and became a sought-after resource when teams were planning new features.

During our time together, we have celebrated these outcomes:

• Oomph consolidated the color palette from 55 colors to just 24 without losing any necessary distinctions. All colors are contrast conformant with WCAG 2.2 Level AA as a baseline.
• Colors, typographic sizes, spacing values, form elements, buttons, icons, and shadows have all been converted to design tokens.
• Figma has been used as the design system record, while Storybook has been strengthened and updated to smartly leverage Material UI. The success of Storybook is largely due to its inclusion as a GOVERNMENT PREMIER project dependency — it has to be used and the latest version is often pinned as the product evolves.
• An internal Design Manager at RSI was established as someone to lead the engineering team and maintain quality oversight as it pertains to the design system.
• Oomph completed designs for 15 features for GOVERNMENT PREMIER, many of which involve designs for three or more screens or modals. Oomph also designed workflows for over a dozen Online Services workflows with a heavier emphasis on mobile-responsive solutions.

As Oomph moves into our second year collaborating with the GOVERNMENT PREMIER teams, we plan to fully investigate user personas on both the admin and taxpayer side of the platform, add more context and governance to the project designs, and provide quality assurance feedback on the working application. We value our partnership with this unique team of experts and look forward to continuing the tax software revolution.