Dami Akinmade
UX researcher & designer

Redesigning the CDER home page

Task: Organize content • Create visual interest

Project Summary

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

  • Duration: August 2017 - August 2018

  • Role: UI/UX designer and researcher

The agency has a planned migration to a new content management system. CDER's existing home page was redesigned, using customizable content boxes in the wireframe provided by the agency, to address users' needs.

Research

In the first step of the redesign process, I evaluated the existing website by analyzing data to determine how users navigated the website.

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

Original CDER home page: Desktop View

Original CDER home page: Desktop View

Original CDER home page: Mobile View

Original CDER home page: Mobile View

Findings

  • Users preferred search over navigation

  • Navigation was an issue due to current information architecture

  • Commonly used links such as audience-specific information were located at the bottom of the home page

  • Short descriptions on home page used terminology that differed from users’ search queries

  • Home page was cluttered and text-heavy

Solutions

  • Update the current information architecture to logically organize content

  • Revise short descriptions to make them user-friendly and optimize it for search engines

  • Put the most used links in easily accessible locations on the home page

Mock-ups

I created mock-ups of the home page using customizable content boxes in the wireframe provided by the agency.

  • 8 low fidelity mock-ups (2 desktop views shown below)

  • Tools: Adobe Creative Suite, Snagit

Stakeholder Review Sessions

I had 2 review sessions with stakeholders, subject matter experts, and high-level communications officers to obtain feedback about the layout and location of items on the home page.

Feedback from a review session
Feedback from a review session

Prototype

I incorporated the feedback from the stakeholder review sessions into a prototype of the home page.

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

Redesigned CDER home page: Desktop View

Redesigned CDER home page: Desktop View

Redesigned CDER home page: Mobile View

Redesigned CDER home page: Mobile View

8
Iterations
2
Presentations & Review Sessions
Go live date: 4/27/2019

View CDER homepage.

Lessons learned 

Working on a big government website, especially that of a regulatory agency, is very challenging. 

You should be ready to hear “No, that can’t be done” a lot but you should still try to advocate for your design decisions the very best you can. 

For this, let the metrics do the speaking!

"You're a rock star!"

"This is great!"
Actual Stakeholder Comments