CASE STUDY
01 – OVERVIEW
How I built a React COA portal to cut ALK support tickets 90% and end compliance delays
Streamlining Compliance Access with Thoughtful UX/UI Design ALK Certificate of Analysis (COA) Lookup Portal
As Sr. UX & Product Designer, I was responsible for delivering a digital lookup and submission repository tool as part of ALK’s Sterile Vials website redesign. Allowing buyers to quickly search Certificates of Analysis (COAs) and enabling ALK representatives to have an Admin section and easily upload, edit and search COA certificates—improving user experience and reducing workload.
Company
ALK Life Science Solutions™ manufactures sterile empty vials that meet strict USP and FDA standards. This digital solution helps the company maintain quality and compliance by making certificate management easy and efficient for clients and representatives.
Role
Senior UX Designer Lead
Duration
5/6 Weeks
Disciplines
UX & UI Design
Services
User Stories
User Research
User Flows & Journey Map
Personas
Information Architecture
Wire framing
Responsive Design
Prototyping
Dev Collaboration
Usability Testing & QA
Tools
Miro
XD & Figma
ReactJS (Time-To-Market)
Adobe Creative Suite
Excel, PowerPoint
Strategic Adoption and Accelerating
User Experience
This project involved researching framework solutions that accelerate development cycles and addressing them through the strategic adoption of ReactJS to build a high-impact, interactive portal; by leveraging component-based architecture and specialized libraries like dnd-kit, we optimized Time-To-Market and strengthened user engagement through seamless, intuitive drag-and-drop features.
Challenge
What if accessing vital quality documents was as seamless as checking real-time lab results?
ALK’s clients—pharmaceutical, laboratory, and healthcare professionals—needed instant access to Certificates of Analysis (COAs) for compliance and quality assurance. The legacy process relied on email requests, causing delays and frustration for both users and ALK’s QA team.
The Outcome
Modernized COA access, reduced support workload, and enhanced customer trust with a public-facing, bilingual COA PDF repository.
Solution
Design and implementation of an Admin Time-To-Market Certificate of Analysis (COA) PDF repository and a public-facing search platform with search functionality, replacing the current email-based COA request process.
Modernize the COA access process.
Reduce support workload for
ALK’s QA team.
Enhance customer trust
by providing instant, self-serve
access to COAs.
Support bilingual (English/French)
compliance for Canadian
and international customers.
Design Transformation
ALK’s COA portal transformed compliance chaos into seamless access, delivering a React-powered solution that streamlined instant document retrieval for pharmaceutical clients while giving admin teams robust content controls. Informed by cross-functional alignment and user story mapping, we turned legacy email delays into a compliant, scalable platform ready for growth.
UX Approach
Informed by cross-functional workshops and user story mapping, designs were refined through iterative testing before final delivery.
02 – RESEARCH
User Insights
Listening Attentively & Discovering
Determine and help identify with ALK’s stakeholders and end users to understand the nuances of their challenges. This empathetic approach ensured the solution would address real needs rather than assumptions.
Review Site Metrics and User Stories
To bring the vision to life, I led a cross-functional UX/UI workshop that aligned stakeholders around shared goals and mapped detailed user stories. Defining requirements “As a user”…, to capture functional needs from a user’s perspective.
User flows
After I defined the core user flows—spanning user and admin search and subscriber file uploads—that would shape the platform’s foundation. I recommended leveraging ReactJS for its flexibility and speed in building responsive interfaces, enabling rapid iteration and scalability. The result was a user-centered design built on clarity, efficiency, and seamless interaction.
User Flow - Search
Admin Flow - Search & Upload
03 – DESIGN
Design Strategy
Research insights directly informed a focused, intuitive experience balancing user needs with ALK’s operational and regulatory constraints. I translated flows into a sitemap and wayfinding model that made COA lookup simple for external users while keeping robust controls for admins.
Sitemap and Wayfinding
Insights and Features
Framed design decisions around specific user and admin needs, then paired them with concrete solutions:
User/Admin Need
Design Solution
Low-Fidelity Wireframes
Delivering a polished, efficient tool with modern technology.
Various low-fidelity screens were created to explore layout options and interaction patterns before moving into the brand-aligned visual system. The ALK repository platform was designed to simplify the upload and management of key production files, improving efficiency and reducing friction for internal teams.
Built with ReactJS, the interface combines visual clarity with intuitive functionality to guide users through each interaction—from drag-and-drop uploads to final document management.
The UX emphasizes the following:
- Speed
- Validation
- Transparency while maintaining accessibility
- Scalability across the application
- Sign in access for the admin dashboard
High-Fidelity Wireframes
Through continuous collaboration and feedback cycles, wireframes and prototypes for both the User Search and Admin sections of the platform were created to ensure alignment with ALK’s operational needs and user expectations.
User Portal - Iterative Refinement
Admin Portal - Refinement
Admin platform features were refined to support display view options and aligned with users’ primary visual default line item detail preferences.
Key Features
The COA Lookup tool offers a seamless, self-service way to quickly find, view, and manage Certificates of Analysis with just a few clicks.
User Features
-
User lands on the COA Lookup page via the footer.
-
Reads instructions (bilingual, side-by-side).
-
Enters lot number (and optionally selects cap color “Blue” or “Silver”).
-
Views search results: List of matching COA PDFs.
Admin Features
- Admin logs in to the backend portal.
- Drag and drop new PDF files, enter metadata (lot number, cap color).
- Edits or deletes outdated PDFs as needed.
- Selects multiple items for bulk download
Usability Testing
After QA and client feedback from the first testing iteration, updates and edits were made to the hi-fidelity screens to further align them, and the backlog was updated to align with the functional requirements documentation.
Detail Page Display Improvements
User Portal - Detail Display Page
Admin Portal - Detail Display Page
User Portal - Split View
Admin Portal - Split View
Admin File Upload (Signed-In)
Upload Process & Status Message
Success Upload Verification
Upload Error Notifications
04 – RESULTS
Delivery
Designing a dual-access portal—serving both external visitors who needed instant COA access and internal ALK representatives managing sensitive documentation—required a careful balance of control and simplicity. The core challenge was to enforce regulatory rigor and admin oversight while keeping the visitor experience fast, clear, and low-friction. That tension became a guiding principle: build strong guardrails for admins without making users feel the weight of the system.
Outcomes & Impact
Overall, the platform reduced support tickets by over 90% and significantly strengthened client trust—evidence that thoughtful UX decisions can unlock measurable operational and business value.
Instant access:
Clients now retrieve Certificates of Analysis in real time, without waiting for email replies.
Efficiency gains:
ALK’s QA team spends far less time fulfilling repetitive document requests and more time on high-value quality initiatives.
Bilingual support:
The portal supports multiple languages, helping ensure compliance, accessibility, and inclusivity across markets.
Positive adoption:
Both clients and internal staff describe the tool as clear, fast, and easy to use, which encouraged strong organic adoption.
Reflection
This project taught me that in regulated environments, trust is the ultimate UX metric. When compliance feels invisible, and access feels instant, people can focus on their real work—whether that’s quality assurance or breakthrough research.
Partnering with ALK offered the chance to modernize a legacy, email-driven process into a scalable platform that can grow with their organization. Navigating ALK’s dual-access tension sharpened my ability to advocate user-first clarity across technical teams. The advantages were clear: clients eliminated document delays, QA teams reclaimed strategic focus for high-value work, and ALK gained a scalable platform ready for global expansion.
This journey reinforced the value of agile teamwork, proactive planning, and innovation under pressure. Leading this transformation, I demonstrated how UX strategy can drive real-world results—even when working behind the scenes. I’m really proud of what I’ve achieved and excited to carry that same energy and experience into whatever comes next.