Designing a layout for CDER pathway pages

Project Summary

• Client: Center for Drug Evaluation and Research (CDER) at the Food and Drug Administration (FDA)

• Duration: August 2017 - present

• Role: UI/UX designer and researcher

CDER pathway pages are varied in layout and this makes it difficult for users to determine when they have moved on to another center's web pages. To create visual consistency between CDER pathway pages, I designed a layout using customizable content boxes in the wireframe provided by the agency.

Research

In the first step of the design process, I evaluated the existing pathways pages by analyzing data to determine how users navigated these pages.

• Types of Data: Metrics, Heat Maps, Scroll Maps, User Comments

• Data Sources: Google Analytics, Crazy Egg, Foresee User Survey

Findings

• Pathway pages were inconsistent in style so users were unaware when they navigated to another FDA center

• Navigation was an issue due to current information architecture

• Many links do not have short descriptions or have difficult to understand short descriptions that used terminology that differed from users’ search queries

• Some pathway pages are cluttered and text-heavy

Solution

• Design a consistent pathway page layout that will be amenable to a variety of topics and will provide visual cues for orientation during navigation

Wireframe

Using customizable content boxes from the wireframe provided by the agency, I created a layout that would not just be consistent in look, but will also be functional for various types of content.

• Title of the pathway page is accompanied by a short description that will be search engine optimized

• Each page has call-to-action section (with photo or video) at the top

• This section will hold evergreen or time-sensitive content page owners want highlighted to grab users' attention

• Below this section, the double popular content block act as topic buckets and can be duplicated

• A total of 4-6 topic buckets are recommended for each pathway page. This is especially beneficial for mobile users

• The topic buckets have titles and short descriptions which will be search engine optimized

• Each page ends with a contact content block

• Tools: Adobe Creative Cloud, Snagit

Mock-ups

Next, I used results from the pathway page analyses to create topic buckets to assist users in finding the information they need easily by navigating instead of relying on search.

• Updated the current information architecture to logically organize content on each pathway page

• Revised short descriptions to meet character limits, make them user-friendly and optimize it for search engines

• Tools: Microsoft Office Suite, Adobe Creative Cloud, Snagit

Stakeholder Review Sessions

I conducted 10 review sessions with stakeholders, subject matter experts, and high-level communications officers (in-person and via Webex) to obtain feedback about the topic buckets, their location, and the short descriptions on each landing page.

Overview of Test Case

The Find Information about a Drug pathway page is one of the most visited pages from the CDER home page. The page was used to test the new design for CDER pathway pages.

Research for Test Case

I evaluated the existing Find Information about a Drug pathway page by analyzing data to determine how users navigated this page.

• Types of Data: Metrics, Heat Maps, Scroll Maps, User Comments

• Data Sources: Google Analytics, Crazy Egg, Foresee User Surveys

Prototype of Test Case

Using the newly designed Pathway page wireframe and research results from the page analysis, I created a prototype.

• Topic buckets were created and organized based on research results

• Tools: Axure, HTML, Adobe Creative Cloud, Snagit

Stakeholder Review of Test Case Prototype

I met with the page owners to review the proposed text for the short descriptions, image selections and organization of the topic buckets.

Usability Test of Test Case Prototype

I conducted 2 usability test sessions with 6 participants to get feedback on the design and functionality of the new pathway page.

Iterative Design of Test Case Prototype

Incorporating feedback from the usability test, I wrote the code for the page and shared it with the web production team to edit and prepare for posting to the web.

• View Find Information about a Drug pathway page

• Tools: Microsoft Office Suite, Adobe Creative Cloud, Brackets, HTML, CSS

Post-launch Metrics for Test Case

Data collected one month after launch

• Tools: Google Analytics, Google Data Studio

Lessons learned 

It is important to track metrics post-design to not only see if the redesign was successful but to also see where you need to tweak so you are always meeting user needs.

Drupal Version of Test Case

FDA migrated its content management system to Drupal early 2019. The prototype was originally designed for Drupal so I rebuilt this page in the new CMS.

• View Drupal Version of Find Information about a Drug pathway page

• Tools: Drupal, Microsoft Office Suite, Adobe Creative Cloud, Brackets, HTML, CSS