Analytics Application
Note: Fictional content has been added to all visuals for presentation purposes.
Background / Application Functions
This cloud analytics application provides actionable intelligence for the serialized drug supply chain. Pharmaceutical companies use the data within this application to shift from reactive to proactive serialization operations. This application allows them to:
Accelerate root cause analysis for the speedy resolution of inconsistencies between operations and compliance
Keep products moving through the supply chain by giving their teams proactive insight into serialized operations, therefore increasing the probability that products ship on time, suppliers meet their performance targets, and costly disruptions, as well as lost sales, are avoided
Answer business-critical questions by enabling key functions
Gain actionable insights into complex reporting and choreography in various markets
Keep their business running and growing by achieving operational excellence, ensuring medicine availability, strengthening brand reliability, and allowing the focus to shift to scaling up as well as launching new products
My Role & Process
For this project, I took over the design work from another UX designer, who moved on to another project within the company. In my role I provided UX / UI design support on the following processes within the application:
Auditing
Message processing
Lot commissioning
Serial number reconciliation
Serial number events
My work included the creation/execution of the following:
Application requirement reviews
Functional specifications
Personas
Workflows
User interface designs
Prototyping
Usability studies
My designs were built on the foundational designs created by the previous designer, using our existing design system componentry and patterns. Throughout this project, I conducted frequent design reviews with program management, design operations, and technical communications to ensure that my designs were meeting all requirements and functional specifications. Collaboration between all parties was done over Zoom calls, via Slack messages, over email as well as through the Comments feature within Adobe XD prototypes. Once designs were approved, I made the appropriate updates to the functional specifications, and the designs were handed off to development / QA for implementation.
UX / UI Challenges & Solutions
We had to provide a large amount of serialization data in a digestible and streamlined format.
In order to make the serialization data more digestible, we used simple bar graphs, card carousels, and expandable sections within cards that allow users to display more detailed information. To ensure usability, all application components used design patterns found within Google’s Material Design system.
We had to ensure accessibility on all data visualizations as well as throughout the UI.
In order to adhere to the Web Content Accessibility Guidelines (WCAG) 2.0 Standard, I worked with my colleagues to use accessible colors and appropriate font weights throughout the UI.
We had to allow for the easy analysis of large amounts of serialization data within tables.
Robust sorting and filtering capabilities, as well as visual aids, were provided within the tables to allow users to easily parse through large data sets to find the information they need.
I had to conduct usability studies remotely with participants inside and outside the U.S. due to COVID-19.
I used Zoom to conduct my usability studies as well as to present the data and results from those studies to key stakeholders. I overcame challenges with effective and diligent communication and well-crafted documents and design artifacts.
User Interface Designs
Usability Studies
I was the first designer on this product to conduct a usability study of several of its features. Study sessions were remote, moderated sessions over Zoom where participants were given 6 scenarios to complete and one follow-up question to answer. Participants used a clickable Adobe XD prototype with their screen, faces, and audio being recorded. The following data was collected:
Quantitative
Success rate = Pass criteria met vs. not
Time on task = Average time taken to complete a task
System Usability Scale (SUS) score = Usability score according to the SUS
Qualitative
Comments and questions that the participant makes while working
Answers to goals based on the participants’ comments and actions
After the session, participants were sent a link to a System Usability Scale (SUS) survey. After receiving all 5 responses to the SUS survey, I calculated the SUS survey score for the application. I then compiled the quantitative and qualitative data from the study into a deck that I presented to key stakeholders with design recommendations based on that data.
Reflections & Learnings
This was my first time designing within the analytics space as well as conducting a usability study at this company. Designing these experiences required a close collaborative relationship with program management, design operations and technical communications. I learned a great deal working on this application; from how users use serialization data to how to use our componentry and design system to visually capture this data in a dynamic way within the UI. Conducting my usability study was my favorite part of this project; watching users using my designs to accomplish tasks was so satisfying for me and was a clear way for me to see how successful my designs actually were.