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.

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

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