Gina Lin
claritin_thumb_1700x1400.jpg

Claritin.com Redesign

Creating an experience to inform customers on allergies and allergy medication

claritin_title_1600x1100.jpg

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.

 

Role

  • 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. 

research flow 2.jpg
 

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."

user icon.jpg

“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.”

user icon.jpg

“I would like to see more of a variety of Claritin coupons…”

 

Redesign Focus: 

  • 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:

brainstorming exploration.jpg
 

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:

 Using Claritin’s current creative assets as a foundation, we used blocks of blue, white colors and lines inspired from the package to create a clean and welcoming experience.

Using Claritin’s current creative assets as a foundation, we used blocks of blue, white colors and lines inspired from the package to create a clean and welcoming experience.

Mood Board Option 2:

 Inspired by allergy triggers, we integrated with allergens, lively pattern, and illustration to create a soft and playful experience while keeping it clean and modern.

Inspired by allergy triggers, we integrated with allergens, lively pattern, and illustration to create a soft and playful experience while keeping it clean and modern.

 
 

Homepage

Original Design:

original hoepage breakdown.jpg
 

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.

product finder brainstorming.png
  • 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

  • Comparison chart

  • Interactive question-based product finder

Sketch:

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.

homepage sketch.jpg
 

Challenge 2: Brand “vista” challenge

Claritin Vista.jpg

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.

 

Final Homepage: 
We collaborated with the TV team. We used the brand-new 3D “vista” with a soft grass animation as the homepage hero.

claritin_homepage.jpg

Masthead Animation Testing:  Giving a hint of “ vista”, a thin green bar appears under the blue masthead when a user scrolls.

Homepage Option: 
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.

claritin_homepage_option2.jpg

Mobile Design:
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.  

claritin-phone-homepage-options.jpg
 
 

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.

site data metrics 2.jpg

Original Design:

Original pollen forecast.jpg

Issues:

  • 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.

 

Card Design:

  • 4-Day forecast

  • Zip code state

  • Add "top allergens"

pollen-expand-02.jpg

Design Option:

pollen-expand-01.jpg

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).

pollen-forecast-prototype-03.gif
 
 

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.

Closed:

 

Questions - Who is suffering with allergies:

Question - What kind of symptoms the person has:

child q3.png

Question - How the person prefers the medication treatment:

child q4.png

Result scenarios:

 
 

Responsive / Page Design

claritin_phone_screens.jpg
 
page designs collection.jpg
 

Influence

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.