NBS Modernization – Search

NBS Modernization

Designing an improved Advanced Search UI

Background

NBS is a web-based enterprise software tool that the CDC develops and offers for free to state, local, and territorial public health departments to help them identify and track cases of disease over time. It is a key tool to help health departments make data-informed decisions to limit the severity and spread of disease, and is used to share data with the CDC for national tracking.

I led the USDS team which partnered with the CDC to help modernize NBS using taking an agile and human-centered design approach. In my role I worked on strategy, stakeholder management, and providing direction to teams, while occasionally diving into an individual contributor (IC) role. In this case study, I worked as an IC in order to help get our first modernization feature off the ground quickly.

Challenge

We chose “search” as the first feature in NBS to modernize. We aimed to create a lightweight search tool that maximized user value while minimizing the level of effort needed to implement it. Our goals for Search 1.0 were

  • Feature parity – start by ensuring the new search can do at least everything the legacy search can do
  • Improved UX – streamline the search process by improving the user interface.
  • Identify future improvements – while keeping the scope small to start, we wanted to look for future opportunities and document them for the backlog

My role

  • Product design lead
  • UX researcher

Team

  • 2 designers

Tools

  • Figma

Timeline

  • 4 weeks

My design process

01 Understand

Reviewing the legacy search

I started by performing a heuristic analysis on the legacy search, and found several high level issues that could be improved in a redesign

  • Visually busy, with awkward spacing and alignment
  • Text heavy instructions
  • Many search inputs which are not well organized
  • Search inputs are not visible on the same page as the results
  • Results clustered a lot of information into table cells, making it harder to scan and read

Learning from past research

To understand user needs and pain points with search, I reviewed past user research done by my team as well as user requests documented in the legacy backlog. Some key takeaways from this included:

  • The primary use-cases for performing a search (which I later used to inform the usability test scenarios)
  • Users wanted the search to be “smarter” and account for things like possible misspellings or nicknames
  • Users wanted faster page-load time and/or fewer clicks to get to their results

Looking for inspiration

Lastly, I looked for inspiration, best practices, and lessons-learned from others who have designed advanced searches.

02 Design

Creating a prototype

I used Figma to explore design concepts, eventually honing in on this version, which presents search filter inputs in a left bar and shows the results on the same page. A fellow designer helped to ensure all elements in the legacy search were represented in the new search, as well as refining the layout of the search results cards.

I reviewed designs with other designers for critique/feedback, and with engineers to check for feasibility. Lastly, I linked up the prototype so that it could be used for usability testing.

03 Evaluate

Plan

With the design ready, I created a test plan and script to evaluate the usability of the new search. The primary objectives of the testing were to assess whether users could easily navigate through the new search feature to accomplish their tasks, as well as to gain insights into user behavior, such as which fields they searched by, what information they examined in the search results, and what actions they wanted to take next.

Test

I recruited 8 users from 5 different state health departments to participate in testing. Participants joined remotely via Zoom, and shared their screen as they used the prototype to complete a set of tasks. I moderated the sessions, describing each task to the participant, while a fellow designer took notes.

Synthesis

After tests were completed, I went back through all the notes documents, noting insights around user behavior and grouped them into common themes.

04 Iterate

Updates based on usability test observations

Overall the design tested very well. No participants failed any critical tasks, such as navigating and performing a search. However, we did observe several moments of hesitation or confusion that highlighted opportunities for improvements.

Added contextual labels to the filter tags

Some users thought the filter tags could get confusing, since you couldn’t tell what fields they related to.

Additional CTA options

Updated the call to action to include additional options for things users indicated they are likely to do next.

Made the “clear” button more prominent

When asked how they would start a new search, most users failed to notice the “clear” button.

Updated labels

Several users did not initially understand that “ID type” and “ID number” were related.

Made it obvious why something is blank

Some users were unsure what the “–” meant.

Added additional information to results

When doing a search for cases, users indicated it was important to know whether it was open or closed.

05 Document

Documenting insights

  • Results of the usability test were documented in a read-out presentation and shared with the rest of the team to ensure a common understanding and alignment.
  • Key insights were added to a research database to make it easier to find in the future
  • Recommendations were added to the backlog to be prioritized