Original Drug Disposal home page: Desktop View
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: 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
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
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
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.
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.