UX RESEARCH / WEB DESIGN / USER INTERVIEWS

Leveraging a Modern Design System to Redesign NCBI

My team and I supported the National Centers for Biotechnology Information (NCBI) in a long-term project to modernize the design system, redesign existing webpages, and provide continuous design support to internal product teams. This case study highlights my work on a redesign of genetic test pages for NCBI’s Genetic Testing Registry (GTR).

Timeframe: 4 weeks

Role: Interview lead / UX Researcher / UI Designer

Client team: GTR product team of staff scientists and NCBI stakeholders

The Problem

GTR is an NCBI database that clinicians and genetic counselors use to find information about genetic tests available for purchase. The database compiles information about both the tests and the laboratories that create them, and GTR functions as a “one-stop shop” for browsing.

The GTR team reached out for assistance with:

  • Modernizing the dated look & feel of testing pages

  • Improving the scannability of content

  • Validating that the design supports the user experiences of clinicians and genetic counselors using the testing pages

Project Constraints

  • Complex subject matter: I needed to rely on SMEs to gauge the purpose, accuracy, and efficacy of testing page content.

  • Timeframe: Because the redesign had a four-week turnaround, this redesign was done in high-fidelity mockups only.

  • Design assets: The NCBI design library is based on the U.S. Web Design Standards (or USWDS) to best accommodate accessible experiences for all users. GTR data is somewhat complex, so this introduced an added layer of complexity in finding ways to use approved components to house GTR data without affecting the content’s integrity.

Research

I conducted 7 user interviews with clinicians and genetic counselors to understand more about their experience using GTR, their thoughts on the usability, and any specific insights they might have around the accuracy of the information that GTR provides. They provided insightful feedback on both what they liked and what they didn’t:

User Interviews

Pros:

  • Reliable information that matches the lab sites

  • Easy to search for tests based on multiple search criteria

  • Overall a comprehensive resource with links to labs, disease pages, etc. on every page to find related information

Cons:

  • Tabbed sections are tedious; endless scroll is more conventional today

  • Content in the “Overview” summary is hard to consume

  • Not all info is relevant to clinicians and genetic counselors

  • Clicking “Advanced Search Options” reloads the page and isn’t user friendly

“The goal is to find a test, verify that it includes what we’re testing, and then navigate to the lab’s website to order it. GTR is trying to be a resource for everything, but this is what we actually use it for.”

I reviewed the testing page template to understand what kind of content it contained and how the content could be optimized based on what users had told me in the interviews. The template’s layout had a few key opportunities for improvement:

Existing Design

Although some of the design would remain the same, I created a list of key items to redesign based on what interview participants had mentioned:

  • Remove the section tabs and put all sections on a single page

  • Improve the “Overview” section to reflect what matters most to users

  • Shorten content where advised by interviewees

  • Enhance the advanced search functionality so that advanced searching doesn’t require the user to open a new page

Action Plan

Redesign

This redesign was completed in two iterations (the second iteration only included minor updates to text styling). Some specific achievements in this redesign:

  • A more relevant “Overview” block that better aligned with what interviewees told us was the most important

  • On-page jump links from the “Overview” block to the respective sections

  • An “Ordering Information” section right after the “Overview” block, following users’ mental models of first validating that the test satisfies their needs, then navigating to the lab site

  • Expandable text functionality to truncate lengthy text on page load, allowing users to scan content more easily

Retrospective

Following the project, I compiled some thoughts around what could have gone better:

  • More time for iterative design: The condensed timeline was a challenge because it left very little time for iteration. The team were very happy with the end result, but there’s always opportunity to refine things further when there’s sufficient time for discussion, ideation, and testing.

  • User testing validation: Although the client team were SMEs in the product, we didn’t get a chance to conduct thorough user testing of the final design outside of the client team. This would have provided an additional layer of insight into how users react to the updated design and help eliminate any internal assumptions the team had around the effectiveness of the update.