Original ARB Recall page: Desktop View
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.
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
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
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
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 Solution: Desktop View
Buttons immediately guide users to information they are searching for.
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
Avg. Time on Page
4%
Decrease in
Bounce Rate
Bounce Rate
10%
Decrease in
% Exit
% 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
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.