Empowering USAN's vital mission through transformative technology, fostering secure, real-time collaboration across global pharmaceutical partners and creative agencies to streamline drug nomenclature approval processes and accelerate life-saving therapies to market.
Branding, User Interface Design, UX Writing, Responsive Design
Branding & Marketing Agencies, USAN staff, and Prescription Drug Companies
5 weeks
User Interface Designer
A. Patel, Product Manager
B. Wheeler, Key Stakeholder
S. Pritchard, Key Stakeholder
P. Bandaru, Lead Developer
J. Contreas, Developer
A. Tamalonis, Project Manager
The United States Adopted Names (USAN) program, established in 1961, stands as the nation's authority on generic drug naming. Overseeing thousands of drug names, USAN champions clarity and global alignment in pharmaceutical identification. Their process begins with company submissions and progresses through meticulous staff reviews, council deliberations with FDA and international input, and ultimately WHO approval. This rigorous journey ensures each name meets exacting standards, shaping the language of medicine and fostering clear communication across global healthcare systems.
The pharmaceutical drug naming landscape has evolved significantly in recent years, with stakeholders demanding radical efficiency and transparency in the approval process. Gone are the days of slow, manual workflows and opaque communication channels that hinder the introduction of life-saving therapies. USAN needed to meet these demands head-on and demonstrate their work and impact with clarity and precision. But how could they get prescription drugs to market when their work involved complex regulatory standards, intricate naming conventions, and a vast network of global partners?
USAN must clearly and confidently demonstrate to stakeholders, including pharmaceutical companies, regulatory bodies, and healthcare professionals, the critical role it plays in ensuring clarity and safety in drug naming. By streamlining the approval process and fostering global alignment, USAN enhances the integrity of pharmaceutical communication, making it an indispensable part of the healthcare landscape.
Our team worked closely with USAN stakeholders to architect a role-driven system that mirrors the complexity of drug nomenclature governance. We established five distinct user roles – USAN Administrator, Council Negotiator, Pharma Applicant, Organization Admin, Document Contributor – each with tailored permissions reflecting their unique responsibilities in the approval lifecycle.
The USAN web application’s navigation system uses Material UI’s intuitive components to mirror the precision of drug nomenclature workflows. A fixed sidebar with role-specific menus ensures USAN staff, applicants, and global partners always see relevant actions—from submission tracking to negotiator audits. On Mobile those wayfinding menus turn into accordions so the user can see at a glance what steps are left and expand if they want to get into work.
The interface embodies USAN's core provisions through a thoughtful visual language. We brightened USAN's logo orange for primary elements, balancing it with pastel versions of AMA's blue and purple for a harmonious, modern palette. Typography adheres to AMA's system, using Kepler for headings and Myriad Pro for body text, reflecting the blend of precision and accessibility in USAN's work. Material UI's elevation system adds subtle depth, enhancing usability while maintaining a clean, professional look. This design approach bridges established pharmaceutical practices with contemporary drug development, reinforcing USAN's pivotal role in the industry.
Built on Material UI’s 12-column grid, the app adapts seamlessly from FDA reviewers’ desktops to pharma reps’ tablets. Breakpoints prioritize core functions: approval dashboards condense into swipeable cards on mobile, while negotiation tools expand into multi-pane layouts on larger screens. The pastel purple secondary palette ensures readability across devices, with typography scaling from 16px to 14px for mobile clarity
Common patterns in structure
A modular architecture organizes workflows into reusable Material UI components—submission wizards, trademark checkers, INN alignment tools. Each module follows USAN’s four-stage approval process, visually mapped via progress steppers in AMA blue. The grid system creates breathing room for complex forms while maintaining vertical rhythm through 8px spacing units
The submission workflow leverages Material UI's form controls, enhanced with USAN-specific validators. Error messages appear in standard red, while active fields are highlighted in USAN's signature orange, guiding users through complex inputs. Each section includes clear help text and instructions, ensuring applicants understand nomenclature requirements. A dedicated document upload page serves as a visual checklist, streamlining the submission process. Conditional logic dynamically shows or hides fields based on prior answers. This intelligent form design not only improves data quality but also accelerates the naming process, aligning with USAN's commitment to efficiency in pharmaceutical innovation.
