Dami Akinmade
UX researcher & designer

Redesigning the Drug Disposal Page

Task: Make page mobile-friendly • Provide actionable content • Create visual interest

Project Summary

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

  • Duration: December 2018 - present

  • Role: UI/UX designer and researcher

The drug disposal page is one of CDER's top viewed page. Despite this fact, a drop in unique pageviews was observed in 2018. I performed an analysis to determine the potential cause and provide solutions to turn this metric around for 2019.

Research

In order to determine the issues with this page, I evaluated the existing web page by analyzing data and conducting usability tests to determine how users navigated the website.

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

Original Drug Disposal home page: Desktop View

Original Drug Disposal home page: Desktop View

Original Drug Disposal home page: Mobile View

Original Drug Disposal home page: Mobile View

Findings

  • Most visitors used mobile devices to access the site

  • Decrease in unique pageviews compared to previous year

  • Text used terminology that differed from users’ search queries

  • Users were not viewing a lot of the content below the fold

  • Users found the page to be text-heavy and too long to scroll

  • Users had difficulty finding drug disposal sites near them

2
Usability Test Sessions
6
Participants
0
Participants Found Drug Take Back Locations

Solution

  • Implement a mobile-friendly site design

  • Use plain language and optimize page text for search engine queries

  • Make short descriptions user-friendly

  • Incorporate multimedia satisfy users' preferences for getting information

  • Lead users to action by providing clear next steps

The Challenge
When working on existing government content, you can't make a lot of drastic changes to the content as everything needs to go through clearance and that can take a while.

The less the content is altered, the easier and quicker it is to get the project cleared.

Sketches

I started the design process by putting pen to paper.

  • I knew in order to make the page mobile-friendly, the single long page had to be broken up into shorter pages

  • This being a government website, I had to convert the original sub-sections into pages

  • The image below shows the information architecture for this topic

Sketch of proposed Drug Disposal pages
Sketch of proposed Drug Disposal pages

Sketches (cont'd)

  • I created a main summary page where users can get 90% of the information they need

  • This page also had the same information in 3 formats:

    • video

    • text

    • infographic

  • The text section and left navigation on the summary page linked to each sub-section

    • Drug Take Back

    • Flush

    • Trash

    • Q&A

Prototype

I created a prototype of the drug disposal pages and ensured they worked for mobile and desktop.

  • Used plain language similar to users’ search queries

  • Made multiple pages so task-oriented users are able to take action on next steps

  • Made the pages short so users do not neglect content towards the bottom of the page

  • Emphasized drug disposal sites search

  • Included useful short descriptions on each page

  • Incorporated multimedia satisfy users' preferences for getting information

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

Usability Test

I conducted 2 usability test sessions with 5 participants to get feedback on the design and functionality of the updated drug disposal pages.

2
Usability Test Sessions
5
Participants
3
Participants Found Drug Take Back Locations
3
Iterations
The updated page is much, much better!

I learned a lot from the video!
Paraphrased comments from Usability Test Participants

Stakeholder Review

I presented the proposed page changes as well as the supporting research data to senior leadership. 

  • They were pleased with the prototype and gave the go-ahead to finalize the updates.

View Drug Disposal page.

Go live date: 7/17/2019

Lessons learned

In many cases, it is best to have a very high-fidelity prototype for senior leadership and usability test participants who tend to see things from the bird's eye view and do not deal with the nitty-gritty.


An incomplete prototype would have led to irrelevant questions from usability test participants and the lack of research data will make it harder to persuade senior leadership to adopt the proposed changes.

"Well done"
Actual Comment from Senior Leadership