top of page

NATIONAL INSTITUTES OF HEALTH

NATIONAL INSTITUTE OF DIABETES AND DIGESTIVE AND KIDNEY DISEASES (NIDDK)

OVERVIEW

PROBLEM

NIDDK Intramural scientists need to recruit fellows and researchers for collaboration, and showcase how they use public funds to create new knowledge.

SOLUTION
 

Create more flexible, functional, and responsive designs for the NIDDK Intramural biography, training, and lab/branch pages.

THE PLAN

7
6
5
4
3
2
1

Competitor

Analysis

User

Research

Content Auditing

Information Architecture

Wireframing & Prototyping

Usability Testing

Refining the Design

PROJECT DETAILS

  • CLIENT: National Institutes of Health (National Institute of Diabetes, Digestive, and Kidney Diseases)

  • ROLE: I served as the Experience Designer on a 14 member team (alongside project managers, developers, Q&A, and a designer).

  • DURATION: 7 months

  • SCOPE: NIDDK's website is the Institute's public face and arguably the single most important communication channel to the research community and the public. The migration required the redesign, content update, and technical reconfiguration of almost 900 web pages and touched more than 300 NIDDK employees.

RESULTS
 

  • 896 pages of website content were redesigned and migrated to a mobile-friendly platform in half the timeframe and at half the cost of the prior migration.

  • Website annual visits grew during the migration from about 25 million to more than 30 million.

  • The website scored 83/100 on the American Customer Satisfaction Index for the second half of 2018, above the industry standard of 75/100 set for government websites. The website was also in the top three for mobile user satisfaction

Landscape Analysis.png

TAKEAWAYS: During this process I discovered NIDDK could differentiate itself from other NIH institutes by offering users:
 

  • A cleaner user interface - so users could quickly see who was in the lab, what the most current research was, and if there were open positions

  • Staff contact information  - so users could easily contact lab members to get more information about the lab

  • Links to LinkedIn and ResearchGate profiles - so users could quickly get background info on lab members and their research interests

  • A scannable publications list - so users could quickly and easily view a lab's research publications 

  • An image gallery - so users could easily search through and download a lab's photos, videos, and illutrations

1
COMPETITOR ANALYSIS
​GOAL: Identify the UX concepts and opportunities that exist in the research science/lab website space.
COMPETITOR RESEARCH
Researching competitors with websites similar to the one I was looking to design, gave me insight into the functionality and content that users in the research/lab landscape might expect. By assessing the strengths and weaknesses of competitors, I determined what features worked well, what features could be improved, and where there were opportunities for innovation.

UX ANALYSIS & HEURISTIC EVALUATION

After creating a list of competitor websites in the health/lab space, I evaluated the sites based on their usability, usefulness, and content. I also documented how competitors used different types of imagery to enhance health messaging, and analyzed the similarities and differences in navigational language. With these higher-level findings I was able to provide actionable points on how to position the NIDDK website in the market and how to outperform competitors.

1
NIH_Focus_Group_Notes.jpg

TAKEAWAYS: After conducting user research I found the major requirements I needed for my MVP were ways to:

  • Locate a research community in a field of interest

  • Review scientific publications relevant to a field of interest

  • Gauge experience level, focus, qualifications of lab members

  • Locate clinical trials related to a field of interest

  • Follow incremental updates about activity in a lab

  • Locate and use tools and services for personal research

  • Contact the Principle Investigator (PI) of a lab

2
USER RESEARCH


GOAL: Identify the needs and demographics of potential users.

 

USER GOALS 

​Before conducting any stakeholder interviews my team had to determine what they wanted to learn from the interviews. Together we developed research goals to help identify what we needed to know about the Principle Investigators (PI's) in NIDDK's Intramural labs, and what types of insights were most relevant to helping us improve their websites. We set out to:

  • Identify the needs, behaviors, and thought processes of NIDDK Intramural scientists

  • Identify their pain points with the current Intramural lab webpages

  • Identify the features and updates they liked or disliked from research/lab websites they used

FOCUS GROUPS

The client helped my team recruit NIDDK Intramural scientists as participants. For four months, I attended bimonthly stakeholder meetings with 5-7 NIDDK scientists to capture their concerns about the goals and features they wanted for their lab websites. I extracted quotes and insights and organized them into categories so I could identify pain points and the page features staff members liked or disliked. From this I could then being to sketch out wireframes for the Intramural biography and lab/branch pages.

2
NIH_Audit_1.png
NIH_Audit_2.png
3
CONTENT AUDITING
GOAL: Analyze content from the existing website to inform the new information architecture for the site.
CONTENT AUDIT
Before I could start making recommendations about reorganizing content, I needed to create a snapshot of all the NIDDK Intramural content on the website. I conducted a content audit to evaluate the state of the content, and from this analysis I was able to map out the types and location of content as well as the number of assets present.
 
This documentation allowed me to visualize and breakdown the redesign/migration process into phases, prioritize content, validate scope, and see where customization would be needed. With this deeper understanding I could move forward with simplifying and consolidating content, and recommending ways to reorganize the content into sections that would make more sense for users.

TAKEAWAYS: One of the most unexpected parts of the content audit was discovering the number of external microsites that various lab staff had created which were not reflected in the IA of the main website. This additional content expanded the initial scope of the redesign/migration project, and added several high LOE custom pages to the design queue.

NIH_IA_2.png
NIH_IA_1.png
5
4
4
INFORMATION ARCHITECTURE
GOAL: Organize content in a way that allows users to understand where they are and how to find what they're looking for on the website.
SITE MAP
To provide a big picture view of how the Lab/Branch Intramural content would be structured during the different phases of the redesign/migration process I created a future-state site map for each of the nine lab sections and ten branches (406 webpages total). These organizational maps outlined the hierarchy of each section and how the different pages would be laid out and connected.​​
With the sitemap I was able to help the client more easily see the levels of hierarchy, number of pages, and depth of the Intramural Lab/Branch sections of the website. We were then able to discuss which pages we would leave as-is, which would be enhanced or customized, and which would be consolidated or removed.

TAKEAWAYS: Being able to visually see all the different pages of the website in one snapshot make it much easier to find content gaps and areas where we would need to remove or create new pages to ensure consistency across the various Lab/Branch sections on the website.

5
NIH_Wireframes.png
NIH_Prototype_1.png
NIH_Prototype_2.png
 WIREFRAMING & PROTOTYPING
GOAL: Effectively communicate the app's functionality and analyze how users navigate through user flow.
 
SKETCHES
I started out using pen and paper to create sketches of the key features of the Intramural content pages. This process was quick and allowed me to focus on high-level functionality. 
LOW/MID-FIDELITY PROTOTYPES
Once the basic functionality was established, I translated my designs from sketches into basic greyscale visuals using Sketch. These designs better illustrated the specifics and placement of UI elements, conveying form and function instead of only high-level aspects of the user experience. The designs included more detail and provided a preview of how the real UI elements would look and be placed. 
 
INTERACTIVE PROTOTYPE
After creating static, visual representations of the different interfaces for the Intramural content pages, it was time to add interactivity between the different screens. I passed off my wireframes to the developers who created three high-fidelity digital prototypes for usability testing. These prototypes showed how the polished app would look and demonstrated the core functions and specific interactions of the website within a browser.

TAKEAWAYS: One of the most eye-opening parts of designing a federal website was the variety of government mandates and regulations my team needed to comply with. For example, I really liked that we had to ensure all designs were accessible (i.e. 508 compliant). However, it did make it more challenging when extra disclaimers and programmatic/governance information needed to be fit into designs.

Usability_Test_4.png
Usability_Test_3.png
Usability_Test_2.png
Usability_Test_1.png
Usability_Test_Results_2.png
Usability_Test_Results_1.png

TAKEAWAYS: From usability testing I found that users:

Did not see or use the tablet/mobile menu. 

  • Solution: Re-evaluate, update, and re-test the design and placement of the tablet/mobile menu.
     

Thought the description for one lab member belonged to another lab member because of missing profile images and descriptions.

  • Solution: Ask labs to provide a photo and description for each lab member. 

Confused about the difference between “Biography Pages’ vs ‘Lab Menu’ labels on the tablet/mobile menu. 

  • Solution: Re-evaluate, update, and re-test the navigational terms used in the mobile menu. Potentially conduct a card sorting test.
     

Confused about the difference between the ‘Select Publications’ and ‘Additional Publications’ subheaders on the publications page of bios 

  • Solution: Create new subheaders that better define the difference between the two groupings of publications. Potentially conduct a card sorting test.

Varied in terms of what navigational label they thought should be used for calling out Intramural content.

  • Solution: Survey additional users to see if a particular preference starts to emerge.

6
7
8
USABILITY TESTING
GOAL: Evaluate the ability of NIH Fellows to complete specific tasks while using the digital prototype.
 
TEST PLAN & SCRIPT
Since the ultimate goal of design research is to build something useful for real people, I needed to evaluate the usability and utility of the digital prototypes. The client and I worked together to develop a test plan and script, laying out the core features to test, and defining the evaluation criteria. In the test script I laid out the core features I wanted to test, and created a list of scenario tasks in addition to the direct tasks to provide more context. Ultimately we set out to:
 
  • Assess how usable the training section and bios are for new users
  • Observe how real NIH Fellows interact with the site for the first time and to see if they’re able to complete basic tasks that are related to Intramural bio, lab, and training pages
  • Test assumptions about what types of information are most relevant for NIH Fellows
METHODOLOGY
Instead of recruiting participants in advance I opted to use Guerrilla usability testing due to a tight timeline and budget. My team was still in the early stages of prototyping so in-person interviews would allow me to provide guidance in case of missing functionality and permit me to observe body language and ask follow up questions so I could dig deeper into the "why" behind a participant's behavior. With the help of a two teammates, we were able to recruit eight NIH Fellows during the NIH Research Festival. I then evaluated their ability to complete specific tasks while using the prototypes. 

SESSIONS

During each test session I asked participants to complete tasks using the interactive prototype on an iPad, and also asked about their experiences using the prototype. My teammates and I observed and recorded the speed, efficiency, and ease, with which participants completed the tasks. I opted to use a tablet to simulate a desktop experience and recorded notes by hand. The test participants varied by gender, country of origin, career stage, research type, and the how they had found their current research position. Through these behavioral observations I was able to pinpoint usability problems and gain insight into participants' satisfaction with the prototype.

ANALYSIS & REPORTING

Before I could make any further design decisions I needed to interpret and sort the feedback I had received from my usability tests. I typed up my notes and grouped key issues and insights together to identify patterns. With this information I could then identify the top errors that I needed to fix in the next iteration of my prototype. 

 

Overall, test participants thought the Intramural bio page, lab page, and training and employment pages were clean, easy to read, and contained relevant information. They liked how easy it was to find the contact information and LinkedIn profiles for Principle Investigators and Fellows. One surprising insight was that seven out of eight test participants passed over and did not use the tablet/mobile menu initially. The menu did not appear to be prominent enough on tablet, so users resorted to using the back button or other means to locate the information they were looking for.

NIH_Lab_Screens.png
7
REFINING THE DESIGN
GOAL: Polish the design of the prototype so it can be released for further testing.
Overall, test participants thought the bio page, lab section page, and training and employment pages were clean, easy to read, and contained relevant information. They also liked how quickly they could find contact information for PIs and Fellows. Test participants did not see or use the mobile Lab Menu, disliked when lab members were missing profile images and descriptions, and some were confused by the subheaders on the Publications page. The usability problems that were uncovered during testing were prioritized and addressed during the next iteration of the prototypes. Below you'll find a handful of 'before and after' snapshots for a few of the different page designs: 

Bio Page

NIH_BIo_Refine.png

Original

Wireframe

Lab Page

NIH_Labs_Refine.png

New

Publications Page

NIH_Pubs_Refine.png

Branch Page

NIH_Branch_Refine.png

Intramural Research Landing Page

NIH_Landing_Refine.png

HAVE A QUESTION?

bottom of page