logo

Jordan Schnarr | UX/UI Designer

MENU CLOSE

ZYRTEC® AllergyCast® Mobile App

Application Design Design Tokens UX Design Figma

Overview

The ZYRTEC® AllergyCast® mobile app is a user-friendly tool designed to help allergy sufferers monitor and manage their symptoms by delivering personalized daily forecasts based on local pollen counts, air quality, and weather data, culminating in an allergy impact score that predicts symptom severity.

As the primary UX designer who began working on the app in 2021, I've guided several design iterations over the years, each enhancing the overall user experience, visual appeal, and intuitive look and feel to make it more engaging and effective for daily use.

2025 Updates

In 2025, the ZYRTEC® brand aimed to unify the visual identity of the ZYRTEC® AllergyCast® mobile app and its website, ensuring a seamless and cohesive look and feel across both platforms. As the UX designer, I applied the latest ZYRTEC® brand guidelines to the app’s styles, aligning typography, color schemes, and UI elements to create a consistent user experience.

To streamline this process, I tokenized the application styles using Figma variables, creating a centralized system for managing design tokens like colors, fonts, and spacing. This approach not only simplified my work as a designer, allowing for rapid adaptation of the new styles, but also optimized the handoff to developers, making implementation more efficient. In all my years working on the app since 2021, this use of Figma variables enabled the fastest development cycle yet, significantly accelerating the delivery of the updated, cohesive design.

Zyrtec AllergyCast App Screens from 2025

Token Documentation

I documented all design tokens for each component, aligning with the structured approach of the Kenvue design system. Over 30 Figma components were created, tailored for all mobile app device sizes to ensure a consistent and responsive user experience. This comprehensive documentation significantly enhanced work speeds and addressed over 95% of developer questions, streamlining the design-to-development handoff and accelerating the implementation of the unified, brand-aligned app design.

Zyrtec AllergyCast App Screens Token Documenation

Addition of Dark Theme

I introduced a new feature in 2025, support for light and dark themes, a first for the app. By leveraging Figma variables, I streamlined the creation of these themes, ensuring consistency across all components. The tokenized design handoff simplified implementation for developers, enabling the app to seamlessly offer light theme, dark theme, or automatic alignment with device appearance settings, enhancing user experience and accessibility.

Zyrtec AllergyCast App Screens Token Documenation

2024

In 2024, the mobile app underwent updates, incorporating a new theme based on Zyrtec’s end-of-year 2023 brand guidelines. A distinctive dark green color was introduced for hero slot components, complemented by a gradient leaf element that highlighted Zyrtec’s unique brand assets. Additionally, a points program was launched, allowing users to earn points towards Kenvue’s rewards program by completing tasks. However, the rewards program was retired by the end of 2024, leading to the removal of the points feature from the app.

Zyrtec AllergyCast App Screens Token Documenation

2023 & Prior

Prior to 2021, the app was designed by the talented Alex Gross. When I joined the project in 2021 as the UX designer, user testing was underway, revealing that users desired a weekly pollen forecast and were dissatisfied with the app’s overt promotion of Zyrtec products. In response, I introduced allergy forecast drawers to the dashboard in 2022, enhancing the app’s usability. Later that year, we rebranded the products tab as “Coupons,” offering a sign-up coupon that significantly boosted user registrations.

Between late 2022 and early 2023, we integrated a pollen heat map, powered by BreezoMeter (now Google), allowing users to visualize pollen levels directly on a map, further improving the app’s functionality and user experience.

Token diagram