The United States Adopted Names Council
Web Application for USAN
USAN, a subsidiary of the AMA, is responsible for the approval of prescription drug names in the United States.
*Please note there are some large image files on this page that might take a while to load.
Scope
Branding, User Interface Design, UX Writing,
Responsive Design
Audience
Branding & Marketing Agencies, USAN staff, and
Prescription Drug Companies
Duration
5 weeks
My role
Product Designer
Team
Other UX designers: J. Pencak; Product Manager: A. Patel, P. Bandaru; Developers: J. Contreas; Key Stakeholders: B. Wheeler, S. Pritchard; Project Manager: A. Tamalonis
Background
USAN, established in 1961, approves the names of prescription drugs. They have six forms applicants can complete in order to get their names approved. Before this project, the process involved forms found on Microsoft Office Word documents, tracked through Microsoft Excel, and communication through Microsoft Outlook. This key stakeholder, exhausted, aimed to streamline this process.
The Challenge
The USAN team began a contract with ServiceNow to provide a new database with reporting features. They lacked a client-facing interface to this database. They enlisted the help of the enterprise product team’s project manager and me. We set out to design the entire front-end of this application for five distinct user roles. The developers worked with Material UI components, so I had to make sure the designs aligned with Material UI too.
The Opportunity
The enterprise design team could design an entire product with our new design system. This was the first project I tackled at the AMA, where I was the solo designer designing an entire product. It was exciting for me. I could help make someone’s job easier by automating pieces of it. I love making people's jobs easier. It’s one thing that drew me to UX.
The Approach
To start this project, I read through the USAN product managers’ requirements, the site map they had created and the user matrix with the requirements for each user role. I looked at different Google apps for inspiration. I figured since I was designing in Material UI, looking at Google apps people use for work every day would help me create a vision for the product in my mind’s eye. Following that, I created wire-frames in mid-fidelity to communicate how I thought the screens would connect and how the layout of the app would work.
Good Navigation
To help users get around the application, we instituted core material navigation components such as a left-sided menu, tabs, accordions and visible CTA buttons. Each screen also contained a basic and minimal top navigation and a footer that contained links to legal notices.
Telling Iconography
These designs incorporated a lot of iconography to help users understand and register what the labels meant. Below, I highlighted how I visually communicated possible user actions and navigation paths using icons.
Complex Forms
The application submission workflow leverages Material UI’s form components, enhanced with - AMA-specific styling. Features not mentioned below include:
A step dedicated to uploading documents that acts like a checklist.
Using a shade of USAN’s signature orange to highlight active form fields.
Conditional logic shows questions only after the user gives certain answers to previous questions.
Responsive Design
I designed the application to work on different screen sizes. So, users could interact with the web app on different devices. But also so users could split their screen and place the application on one side. Below you can see how distinct elements fill their containers at different breakpoints.
The Metrics
This project is currently in development. When it’s finished, I will examine the following to
measure its success.
Completion rate
Application completion time for users
Feedback from internal users
Number of clicks to external help documentation
Number of support calls and emails regarding the portal
Error rates for each user flow
Heatmaps to track users attention
The United States Adopted Names Council
Web Application for USAN
USAN, a subsidiary of the AMA, is responsible for the approval of prescription drug names in the United States.
Scope
Branding, User Interface Design, UX Writing, Responsive Design
Audience
Branding & Marketing Agencies, USAN staff, and Prescription Drug Companies
Duration
5 weeks
My role
Product Designer
Team
Other UX designers: J. Pencak; Product Manager: A. Patel, P. Bandaru; Developers: J. Contreas; Key Stakeholders: B. Wheeler, S. Pritchard; Project Manager: A. Tamalonis
Background
USAN, established in 1961, approves the names of prescription drugs. They have six forms applicants can complete in order to get their names approved. Before this project, the process involved forms found on Microsoft Office Word documents, tracked through Microsoft Excel, and communication through Microsoft Outlook. This key stakeholder, exhausted, aimed to streamline this process.
The Challenge
The USAN team began a contract with ServiceNow to provide a new database with reporting features. They lacked a client-facing interface to this database. They enlisted the help of the enterprise product team’s project manager and me. We set out to design the entire front-end of this application for five distinct user roles. The developers worked with Material UI components, so I had to make sure the designs aligned with Material UI too.
The Opportunity
The enterprise design team could design an entire product with our new design system. This was the first project I tackled at the AMA, where I was the solo designer designing an entire product. It was exciting for me. I could help make someone’s job easier by automating pieces of it. I love making people's jobs easier. It’s one thing that drew me to UX.
The Approach
To start this project, I read through the USAN product managers’ requirements, the site map they had created and the user matrix with the requirements for each user role. I looked at different Google apps for inspiration. I figured since I was designing in Material UI, looking at Google apps people use for work every day would help me create a vision for the product in my mind’s eye. Following that, I created wire-frames in mid-fidelity to communicate how I thought the screens would connect and how the layout of the app would work.
Good Navigation
To help users get around the application, we instituted core material navigation components such as a left-sided menu, tabs, accordions and visible CTA buttons. Each screen also contained a basic and minimal top navigation and a footer that contained links to legal notices.
Telling Iconography
These designs incorporated a lot of iconography to help users understand and register what the labels meant. Below, I highlighted how I visually communicated possible user actions and navigation paths using icons.
Complex Forms
The application submission workflow leverages Material UI’s form components, enhanced with AMA-specific styling. Features not mentioned below include:
A step dedicated to uploading documents that acts like a checklist.
Using a shade of USAN’s signature orange to highlight active form fields.
Conditional logic shows questions only after the user gives certain answers to previous questions.
Responsive Design
I designed the application to work on different screen sizes. So, users could interact with the web app on different devices. But also so users could split their screen and place the application on one side. Below you can see how distinct elements fill their containers at different breakpoints.
Results
This project is currently in development. When it’s finished, I will examine the following to measure its success.
Completion rate
Application completion time for users
Feedback from internal users
Number of clicks to external help documentation
Number of support calls and emails regarding the portal
Error rates for each user flow
Heatmaps to track users attention
The United States Adopted Names Council
Web Application for USAN
USAN, a subsidiary of the AMA, is responsible for the approval of prescription drug names in the United States.
Scope
Branding, User Interface Design, UX Writing,
Responsive Design
Audience
Branding & Marketing Agencies, USAN staff, and
Prescription Drug Companies
Duration
5 weeks
My role
Product Designer
Team
Other UX designers: J. Pencak; Product Manager: A. Patel, P. Bandaru; Developers: J. Contreas; Key Stakeholders: B. Wheeler, S. Pritchard; Project Manager: A. Tamalonis
Background
USAN, established in 1961, approves the names of prescription drugs. They have six forms applicants can complete in order to get their names approved. Before this project, the process involved forms found on Microsoft Office Word documents, tracked through Microsoft Excel, and communication through Microsoft Outlook. This key stakeholder, exhausted, aimed to streamline this process.
The Challenge
The USAN team began a contract with ServiceNow to provide a new database with reporting features. They lacked a client-facing interface to this database. They enlisted the help of the enterprise product team’s project manager and me. We set out to design the entire front-end of this application for five distinct user roles. The developers worked with Material UI components, so I had to make sure the designs aligned with Material UI too.
The Opportunity
The enterprise design team could design an entire product with our new design system. This was the first project I tackled at the AMA, where I was the solo designer designing an entire product. It was exciting for me. I could help make someone’s job easier by automating pieces of it. I love making people's jobs easier. It’s one thing that drew me to UX.
The Approach
To start this project, I read through the USAN product managers’ requirements, the site map they had created and the user matrix with the requirements for each user role. I looked at different Google apps for inspiration. I figured since I was designing in Material UI, looking at Google apps people use for work every day would help me create a vision for the product in my mind’s eye. Following that, I created wire-frames in mid-fidelity to communicate how I thought the screens would connect and how the layout of the app would work.
Good Navigation
To help users get around the application, we instituted core material navigation components such as a left-sided menu, tabs, accordions and visible CTA buttons. Each screen also contained a basic and minimal top navigation and a footer that contained links to legal notices.
Telling Iconography
These designs incorporated a lot of iconography to help users understand and register what the labels meant. Below, I highlighted how I visually communicated possible user actions and navigation paths using icons.
Complex Forms
The application submission workflow leverages Material UI’s form components, enhanced with AMA-specific styling. Features not mentioned below include:
A step dedicated to uploading documents that acts like a checklist.
Using a shade of USAN’s signature orange to highlight active form fields.
Conditional logic shows questions only after the user gives certain answers to previous questions.
Responsive Design
I designed the application to work on different screen sizes. So, users could interact with the web app on different devices. But also so users could split their screen and place the application on one side. Below you can see how distinct elements fill their containers at different breakpoints.
Results
This project is currently in development. When it’s finished, I will examine the following to measure its success.
Completion rate
Application completion time for users
Feedback from internal users
Number of clicks to external help documentation
Number of support calls and emails regarding the portal
Error rates for each user flow
Heatmaps to track users attention