What’s the Yellow Card Scheme?
The Yellow Card Scheme is the UK system run by the MHRA (Medicines and Healthcare products Regulatory Agency) for collecting and monitoring information on suspected adverse reactions to all medicines including vaccines, blood factors and immunoglobulins, herbal medicines and homeopathic remedies, and all medical devices available on the UK market.
Project Brief
The pandemic in 2020, particularly the impact of Covid-19 worldwide, affected thousands of patients. In the UK, there were reports of adverse effects due to the illness and corresponding vaccines. The Yellow Card scheme, providing services for patients experiencing adverse effects since 2017, saw a surge in patient reports in 2020. The platform became overwhelmed with the volume of patients reporting side effects. The team needed to work rapidly to address patient demands and generate reports based on the gathered data.
Project Overview
Our responsibility was to update UI components in a fast-paced environment for the iOS app, ensuring the seamless integration of the latest features.
Project Outcome
The primary goal of swiftly updating the design system was to meet the growing demand from patients utilising the Yellow Card Scheme to report their symptoms, predominantly related to Covid and vaccine-related cases.
Requirements
Project Type: Mobile app (IOS)
Team: I was part of a team with one other designer.
Tools: Figma, Adobe suit, Storybook
Duration: 9 weeks
Design System and components
“I had the pleasssure to work with the GOV.UK Design System”
The GOV.UK Design System is considered a reference in UX for several reasons: accessibility focus, user-centric design, consistency across services, efficiency in development, open source collaboration, adaptability and iteration and government digital transformation leadership; which plays a crucial role in setting standards for user-centered design and digital service delivery.
Storing components
Gov.uk design system is stored in Storybook, this powerful facilitates the development and testing of UI components. It allows designers and developers to create isolated, interactive components within a controlled environment.
WCAG.2.1
“Following WCAG guidelines strictly.”
The Gov.uk Design System typically adheres to WCAG 2.1 guidelines, which include principles such as: Perceivable, Operable, Understandable and Robust. For the most up-to-date information on accessibility guidelines within the Gov.uk Design System, it's recommended to refer directly to their documentation.
Although web and app design systems both follow the same principles, they differ in styles. The Yellow Card app scheme follows specific guidelines tailored to its platform, ensuring consistency and usability across all its components.
Challenges
“Some of the app components didn’t align with the UI web component principles.”
I conducted a review of the app's design system, identifying inconsistencies, and proposed solutions to ensure consistency and cohesion across all platforms. Daily collaboration with the development team to implement these changes effectively was essential.
The previous set of icons was inconsistent; some of them were bulky, others were sharp, and some were outlined while others were filled. We agreed to use a set of rounded, thin, and outlined icons for the final product.
We found inconsistencies in some buttons, although there weren't many. These got adjusted so that all top and bottom padding for buttons, forms, and tabs were consistent
We agreed that all actions should give clear feedback to the user, not only by incorporating success icons but also by making them prominent, labeling every action, and providing exits when necessary.
—A dedicated working group evaluates all new patterns and components, while the design system team ensures written content aligns consistently with their style guide and across various pages.
Results and impact
“The MHRA keeps a close eye on COVID-19 vaccine safety, including reports from the Yellow Card scheme, to make sure everyone feels confident about getting vaccinated”
The Yellow Card Scheme reports its results through various channels, including official publications, databases, and regulatory updates. One of the primary sources for accessing Yellow Card Scheme data is the Medicines and Healthcare products Regulatory Agency (MHRA) website.
MHRA's updated Yellow Card reporting focuses on COVID-19 vaccines from the Autumn 2022 booster campaign.
—Yellow Card Scheme Impact (The results presented are based on internal data analysis conducted by YCS organization)
Improved Vaccine Safety Monitoring:
The app detects 20% more adverse events compared to traditional surveillance methods, enhancing vaccine safety monitoring efforts.
Early Detection of Side Effects:
75% of reported side effects are submitted within 24 hours of vaccine administration, allowing for timely monitoring and intervention.
Timely Intervention and Response:
The average time taken to identify and respond to serious adverse events reported through the app is reduced by 50%, leading to quicker intervention measures.
Enhanced Public Trust and Transparency:
90% of users express trust in the vaccine safety monitoring process due to their participation in reporting through the app, resulting in improved public trust and transparency.
Public Health Research:
70% of research studies or publications on COVID-19 vaccine safety utilize data collected through the app for public health research, demonstrating the app's value in advancing public health knowledge and understanding.
Contribution to Global Vaccine Surveillance Efforts:
60% of user-reported data collected through the app is shared with international health organizations for global vaccine safety monitoring initiatives, contributing to global vaccine surveillance efforts.
Conclusion
What’s next?
Moving forward, the Yellow Card Scheme team aims to enhance their platform based on user feedback to provide a more tailored and transparent reporting experience. Future upgrades will introduce features such as:
Technology to track report progress through the MHRA review process and allow for report updates.
Improved access to real-time safety communications and control over alerts.
Management of healthcare product information via a product watch list.
Data visualization for a more user-friendly experience.
Search functionality for easy retrieval of previous reports for frequent reporters.