Dami Akinmade
UX researcher & designer

Redesigning the ARB Recall Page

Task: Make page user and mobile-friendly

Project Summary

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

  • Duration: March 2019 - present

  • Role: UI/UX designer and researcher

The Angiotensin II Receptor Blockers (ARBs) recall page is a highly visited page where consumers go to look for information about the ongoing recall of high blood pressure medication. 

Many visitors want to know why the drugs were recalled and also if their prescribed medication are being recalled. The original page is just a list of ongoing updates about the recall and did not readily provide answers to users' questions. 

To address this deficiency, I designed a mini-site for the recall that had easily accessible links to answers users were searching for.

Redesigning the ARB Recall Page

Persona: Jan

  • 80 yrs old

  • Has high blood pressure

  • Learned about the recall on the evening news

  • Wants to know if her medication is affected by the recall

Research

Before redesigning the page, I first collected and analyzed data on how users are currently using the page.

  • Types of Data: Web Metrics, User Comments

  • Data Sources: Google Analytics, Foresee User Surveys

Findings

  • Most visitors used mobile devices to access the site

  • Visitors spent an average of over 3:40 mins on the page

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

  • Users had difficulty finding out if their drug was recalled

Original ARB Recall page: Desktop View

Original ARB Recall page: Desktop View

Findings: Desktop View

  • Information about the reason for the recall and how to determine if your medication has been recalled is not easily accessible

    • Recall lists and the Q&A are below the fold at the bottom of the left nav

    • PDF recall lists are difficult to scan

Original ARB Recall page: Mobile View

Original ARB Recall page: Mobile View

Findings: Mobile View

  • Information in the mobile view of the ARB recall web page was even less accessible

    • Recall lists and the Q&A are all the way at the bottom of this extremely long page

    • PDF recall lists are near impossible to read on a mobile device

The Challenge
The edits needed to be made pretty quickly (in government time) so there was no chance to run tools to visualize how users engaged with the site beforehand.

Also, because interest in a recall decreases with time, it will be challenging to compare some metrics.
Interim Solution

Provide buttons at the top of the interim page that make the important information easily accessible to visitors 

Interim ARB Recall page: Desktop View

Interim ARB Recall page: Desktop View

Interim Solution: Desktop View

Buttons immediately guide users to information they are searching for.

Interim ARB Recall page: Mobile View

Interim ARB Recall page: Mobile View

Interim Solution: Mobile View

With the buttons near the top of the page, users do not have to scroll all the way to the bottom of this super long mobile page to get the information they need.

Post-Launch Metrics for Interim Solution

Compared to the previous week, minor changes to the original page resulted in the following:

11%
Decrease in
Avg. Time on Page
4%
Decrease in
Bounce Rate
10%
Decrease in
% Exit
Final Solution

To provide a truly mobile-friendly experience, I designed and coded an ARB recall mini-site in Drupal with short, mobile friendly pages that help goal-oriented users find information they need and find it quickly.

Sketches

I started the design process by putting pen to paper.

  • The image below shows the information architecture for the mini-site

Prototype

I created a prototype of the ARB recall mini-site and ensured it worked for mobile and desktop.

  • Due to the large amount of information available, I utilized accordions on 3 of pages to hide content and allow users to select what information they want to view

  • A big issue was the difficulty of browsing the PDF recall lists especially on mobile so to address this, I used a filterable table

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

Stakeholder Review Session

I conducted a review session with stakeholders and high-level communications officers (in-person and via Webex) to obtain feedback about the ARB recall mini-site. 

  • Stakeholders were pleased that the redesign addressed current user pain points and gave the go ahead to implement the prototype

View ARB Recall page.

Go live date: 4/27/2019

Lessons learned 

Be very flexible. 

Not all projects allow for extensive research and revisions may need to be done quickly. 

This was a super fast project with regards to government work.  

Though this project would have benefited from usability testing and collection of heat map data, I had to use whatever existing data I had at my disposal and employ UI design best-practices to generate the final design of the web pages.