Case Study
01
Project Overview
The Food and Drug Administration (FDA) Electronic Submissions Gateway (ESG) is an Agency-wide solution for accepting electronic regulatory submissions from external partners. The FDA ESG enables the secure submission of premarket and postmarket regulatory information for review.
The FDA ESG is the central transmission point for sending information electronically to the FDA. Within that context, the FDA ESG is a conduit along which submissions travel to reach the proper FDA Center or Office. It is of high importance to both internal government users and external clients seeking regulatory review. Hundreds of users transmit thousands of files every day through the gateway.
However, it has been in operation since 2006 without any major update. The UI and backend are out of date and struggling in an era with large sized transmissions and much better user interfaces.
Problem Statement
Industry users struggle to send submissions through the outdated and user unfriendly WebTrader portal due to confusing UI, slow transmission speeds, and old technology that requires restarting a transmission after a hiccup, etc.
The Goal
Phase 1: Complete an Analysis of Alternatives to determine the feasibility of an upgrade to ESG, what the upgrade will entail, and a timeline.
Phase 2: A proof-of-concept release of ESG Next Gen
The Team
In Phase 1, we had a team of only 8 members. In Phase 2, we had a team of 12 members. For both, members consisted of a BA, a Project Manager, the Chief Tecnical Officer, VP of Health IT, several developers, a Technical Writer, and a UX Designer.
My Role
I worked as the solo UX designer and graphic designer on the project.
Original Prototype
02
User Research
Users were interviewed in the spring of 2022 along with users from each FDA center to better understand how the system was currently being used while capturing pain points. From these interviews, five personas were developed.
Captured Pain Points
“Rarely do submitters include all the required paperwork. There is no easy way to request the additional information. We have to reject the submission and have them start the process over.”
“Tutorials are available on how to install the WebTrader and upload a file. They must upload a test submission to very the process is working for them. When completed, the ESG team confirms the account can by approved. This process can take weeks to months for account approval.”
“Due to the size of submissions and slow upload speeds, most submitters are typically creating submissions on physical media such as hard drives and shipping them directly to our center.”
Personas
Current User Account Creation Process
The workflow of the current process to create an account was outlined in detail to find areas to improve.
Business Requirements
Business requirements for what ESG needed to do were captured and organized so they were not lost in the development process.
ESG Current State
To help show why the current complicated and intertwining pathways to utilize ESG were so difficult for users, I created a diagram to help visualize the process, adding in visual indicators (red dots) of key pain points.
03
Ideate Solutions
With current processes, pain points, and business requirements captured, We turned to ideating to explore possible solutions to improve the process and user experience.
A variety of new color schemes were created using Coolers and we voted on them internally. Once new colors were selected, we created five potential new logos and voted on them for a favorite.
Future State User Flow
A high level outline of the user process creating an account to the dashboard and what they should be able to access.
ESG Future State
A graphic depicting the new and streamlined process of account creation to file upload was created to contrast with the current process, allowing stakeholders to quickly grasp the changes suggested.
Low-Mid Fidelity Dashboards
Current eSubmitter dashboard, which is primarily for industry submitters and not utilized by the FDA.
New dashboards featuring functions each persona could utilize and access were created to contrast with the existing eSubmitter dashboard to demonstrate the improvement in functionality and usability of a new ESG system.
The new dashboards were kept in a fairly low-mid fidelity state using icons, colors, and text but without other user features such as graphs and metrics.
Proposed redesigned dashboards for Industry Admin and FDA Business User personas.
04
Prototype
One of the key pain points was the process to upload a file through WebTrader. We decided to create this process as a clickable prototype as a part of the Analysis of Alternatives, creating a pivotal demonstration of what the future of ESG could look and feel like for stakeholders.
Wireframes
Beginning of wireframes for the prototype of uploading and signing a new submission using the future ESG flow. This is viewable at here.
Prototype
A clickable prototype was created and shared with the internal team. Feedback was integrated into the design before it was shared with stakeholders. Feedback such as adding the save icon and status bar were included in updated designs. The final version is below.
As opposed to the current eSubmitter process of a popup window and multiple file choices.
05
End of AoA
Precise turned in the AoA document mid-August 2022 after only four months of detailed work, including interviewing all affected FDA centers including the current ESG team, analyzing platforms and competitors for both UI and backend features, problem solving cybersecurity, FDA and industry requirements, and a multitude of UX work such as user interviews, personas, ideating, wireframes, and a clickable prototype. To meet responsibilities, the AoA included an aggressive timeline for the government to follow.
Timeline
06
Proof-of-Concept
In December of 2023, Precise was awarded the contract to design a proof-of-concept based on the work we outlined in our Analysis of Alternatives. Most of the foundational work had been completed for the AoA, but we revisited the requirements, pain points, and personas. We decided to add an additional persona to capture a different subset of industry users.
New Personas
Previously created industry persona
New industry persona
Prioritize User Flows
The potential concept user flows implied by the AoA wireframes were written down and prioritized for development in the POC.
Design Approval Process
Additionally, the design approval process was outlined and agreed to so that the steps were clear with all team members and stakeholders.
Brand Guide
Though we had created some wireframes and a prototype for the AoA, we hadn’t gone as far as to suggest a brand guide. Now that we were developing the POC, we created one incorporating the approved elements used by the FDA along with new additions, including a logo. These were sent to stakeholders for approval.
07
POC Ideating
New user flows needed to be mapped out and new screens designed, especially new account creation which was considered a key focus of the POC. The decision to utilize Appian as the environment for the POC required redesign and development of the wireframes proposed in the AoA.
New Detailed User Flows
The processes for some flows such as account creation are complicated with multiple factors to consider. This led to the need to map out the flow before designing screens so that all functions could be included in each screen.
Low Fidelity Wireframes
08
Wireframes
After user flows were mapped out, wireframes were created. Most wireframes were kept at a mid-fidelity level to keep things relatively simple for the POC.
High Fidelity Mockups
