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
Mockup of public landing page
Mockup of account creation screen
Mid-Fidelity User Flows
Some user flows were for only one persona and very straight forward.
Some user flows changed depending on the persona.
09
Prototype
To help illustrate the concept functions, I prototyped some wireframes to help developers quickly understand the user flow and to give stakeholders a glimpse ahead at the work being done.
Center Submission Dashboard
This is the same user flow as the first one featured under Mid-Fidelity User Flows in step 8. An FDA Center Admin will need to be able to see staff workload and if any submission is not currently assigned or close to the federally mandated 30 day deadline.
Recording of dashboard flow
Clickable Figma Prototype
10
End of POC
Due to the very short timeline of the POC and the amount of backend development, user testing was limited to internal and a few key stakeholders only. With the submission of the successful POC that met all requirements, we are expecting development on version 1 to begin shortly, allowing us to spend more time refining and validating designs with user testing, new center and industry interviews, and the further development of new user flows.
This is iteration in action!
POC Video
Our FDA partners requesed a video to introduce all ESG Next Gen will do to share with the Executive Leadership Team (ELT) and the public at large. With only five days until the ELT meeting, I created a rough script outline and lead the discussion of video storytelling and what aspects we wanted to emphasis.
As a team, we edited the script over 24 hours and I then seet to work using recordings of the built prototype in action as well as video sourced from Envato Elements. With such a tight timeline, I recorded the script myself and edited it into the video along with music.
Though I feel there are rough spots and elements I’d change, the video was completed with time to spare before the meeting and was well received internally and with partners.
11
Lessons learned
When I joined Precise, the ESG AoA had already been started. I jumped in and got up to speed pretty quickly. However, that meant the AoA had UX tacted onto it rather than having been designed to include UX from the beginning. Because of this, user interviews were large scale affairs with numerous team members on both sides. Questions covered everything from user pain points to how the process worked now to back end specifics. We pooled our notes from the meetings into spreadsheets, which were utilized throughout the AoA but never condensed as well as they could have been.
The switch from the AoA to creating the proof-of-concept prototype required us to put into motion the recommendations from the AoA. Though my wireframes and the clickable upload submission prototype were a hit with stakeholders, we opted for a low code environment that could not mimic the look and feel of the UX prototype. What we created for the POC works, but we haven’t yet validated it with user testing.
I see a need for some validation of designs with user testing, and update of the rudimentary dashboard, and some rethinking of the menus before we move forward with version 1. However, that is fine! It is what UX is about and we needed to fit the project into certain perameters, especially backend, to show it was possible before being given the greenlight to go forward.
ESG had undergone at least 3 AoAs before ours, so to have it move forward now and get to be a part of the future for this integral part of the government submission process has been incredibly rewarding and exciting.
UPDATE: Once the FDA gave ESG NG the greenlight, it moved from the POC phase and into stage 1 design with some truly lofty goals, which the team continued to meet. I handed off the designs to a junior designer who made a few tweaks to the original UI concept to better meet the Appian workspace. Most of the original workflows stayed as I designed them.
The team continued to meet all the milestones and even won a 2024 Citizen Service Award. After many rounds of internal and external user testing, ESG NG is now set to go live in April of 2025, and will act as the hub for contact with the FDA.