Background & Goals
Claritin is an allergy medicine brand with three major product lines: Claritin, Claritin-D, and Claritin for Kids. In order to improve overall UX issues and bring back Claritin’s markets, we started the redesign.
Interaction, UI/visual design
Team Collaboration: creative director, UX designer, copywriter, project manager, account team, and development team
Design Process: research, sketching, mood board, design exploration, UI/visual design, prototyping, template design, icon/imagery creation, style guide/annotation, and QA testing
Approach & Process
Research: Defining Redesign Focus
Through site survey, site data analytics, competitor research and the original site to discover the problems and opportunities.
What users said in the survey:
"Your website is plagued with pop-up ads for your product. When I go to pick up allergy meds tomorrow, I will be deliberately avoiding anything made by Claritin now, because I wasn't able to view the information I was looking for thanks to intrusive ads."
“I was looking for a recommendation on how long to take Claritin (one week, 10 days, etc.) for an itchy rash - didn't find that recommendation.”
“I would like to see more of a variety of Claritin coupons…”
How to enhance product information and help customers find their products?
How to help customers better learn the allergy contents?
How to better promote coupons and communicate different coupon values?
Keep in mind:
Stay true to Claritin brand tone
Be mobile-first and responsive
MOOD BOARD exploration
Mood Board Inputs:
Claritin branding refresh
Competitor site's research
Modern site and UI components inspiration
Brainstorming & Exploration:
Here are the website mood board options Crista Conaty and I created. We combined components from different options and used this as base inspiration to create the site.
Mood Board Option 1:
Mood Board Option 2:
Challenge 1: How to enhance product information and help customers find their product?
In the brainstorming session, I listed different ideas and factors that can help finding and differentiating products. We would also need to enhance the product information on the product details page.
Clear category description to differentiate Claritin, Claritin-D, and Claritin for Kids
Icons to visually help with product duration or forms
Product filter or tabs to help selection
Interactive question-based product finder
While reinforcing the product information, we decided to add a question-based product finder to help customers easily find the right product for their needs. The goal for the homepage is to establish brand by providing popular allergy tips, products, and latest campaigns and to promote coupons.
Challenge 2: Brand “vista” challenge
Claritin’s “vista” - the blue sky and the green grass - is very vital for Claritin. How to integrate the “vista” into the website and keep it natural and modern was a big challenge for us. I also considered how we could apply the “vista” feeling to any elements more smoothly throughout the site.
We collaborated with the TV team. We used the brand-new 3D “vista” with a soft grass animation as the homepage hero.
Masthead Animation Testing: Giving a hint of “ vista”, a thin green bar appears under the blue masthead when a user scrolls.
We used lifestyle “vista” photography as the hero image to make it friendly. We also explored a “vista” style footer to provide the brand language throughout the site.
For mobile, the animated "vista" turns to a static image. For the other option, to ensure the image content isn't cut off, we placed the headline and the CTA button under the hero image.
Pollen Forecast Tool
Site Data Analytics:
Based on the site data, we noticed that pollen forecast tool gained higher page views. Under metric "Top single page views", it was only below Claritin product page, coupon page, and Claritin-D product page. It would be a helpful feature to make the tool more friendlier to the users.
No clear response after typing the zip code
Only 2-day forecast
The original pollen forecast tool on Claritin.com only provided a two-day forecast. People already can search for four days of forecast through online sources like weather.com and pollen.com. In order to provide direct information and make the tool more useful, we decided to have a four-day forecast for the tool.
Zip code state
Add "top allergens"
Iteration: Expandable Module -> Modal Layer
We updated the pollen forecast tool to a modal layer and it allowed us to call out the tool on the homepage and deeper pages (ex: article details page).
Product Finder Tool
There was no tool to help people quickly identify the right allergy medicine for their needs on the original site. We created an interactive product finder tool to solve this problem.
Questions - Who is suffering with allergies:
Question - What kind of symptoms the person has:
Question - How the person prefers the medication treatment:
Responsive / Page Design
This site is still on-going for future campaign and product line updates with the build-up framework. We received a very positive feedback from clients and our development partners during the Claritin.com Post Review meeting that we've set the standard for future Bayer site and digital products.