Website Redesign for Claritin
Created the website to provide relief helping consumers with their allergy needs and reinforcing the brand difference
Background
Claritin is an allergy medicine brand with three major product lines: Claritin — for all allergies, Claritin-D — for nasal congestion and sinus pressure, and Children’s Claritin — for kid’s allergies. We were tasked to redesign the website in order to provide product and allergy information in a friendly way and reinforce Claritin's brand purpose and identity. Thus, consumers think about Claritin for their allergy needs.
Role
UX Design
UI Design
Prototyping
Style Guide
Company
Energy BBDO
Design Team
Crista Conaty (CD)
Cori Johnson (UX)
Redesign Focus
After the discovery phase, we put our focus on products, coupons, and allergy content. The site should be created mobile-focus. We also decided to have the FAQs on the corresponding product details pages for a more seamless experience.
Here are some key learnings from our site survey and site data analysis:
1.
People need more product answers like how it works, when to use, dosage, side effects both before and after purchase in a more user-friendly way.
2.
The site has pop-up ads that really interrupt the site experience.
3.
The top reason people visit the site (mobile) is for the coupons. We should make coupons easy to find and navigate to, and provide higher value if possible.
4.
The second reason people visit the site (mobile) is to learn more about allergies. This shows supportive allergy content is vital. Consumers are seeing allergy brands as a source to look for this information.
Brand “Vista” Challenge
Claritin’s “vista” — the blue sky and the green grass from the packaging — is vital for Claritin and it helps consumers recognize the brand. How to integrate the “vista” into the website and keep it natural and modern was a big challenge for us. One symbolic integration is on the masthead. I used the color proportion to represent the “vista”. As a person scrolls the page, the green bar shows.
Masthead "Vista" Animation
Crista Conaty and I created mood boards as the base inspiration to help us create the site. We combined components from different options.
Mood Board Option 1
Leveraging existing creative assets, 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 allergens, lively patterns, and illustrations to create a soft and lighthearted experience.
Product Finder
To help people find their allergy medicines, we added a product finder. Through a series of questions from who is suffering from allergies (adult - myself, adult - another person, and child), what kind of symptoms the person has to how the person prefers the medication form, they can get their product recommendations or an advised result if Claritin doesn’t provide the suitable product.
The product finder is a modular component that can be placed on the homepage and product landing page.
Pollen Forecast Tool
There are three redesign principles:
1. Provide a 4-day forecast from a 2-day forecast
2. Have a clear information hierarchy
3. Pre-populate location based on closest USA IP address
During the first round of design, it was an expandable module. I updated it to a modal layer to allow it to be called out on the homepage and deeper pages (ex: article details page).
Pollen Level / Navigation Bar Exploration
I explored different pollen levels' styles like a bar graph, straight bar, and ring and took a look at how we can indicate the tool clearer on the navigation bar. We landed on the ring style because it’s attention-attracting with the growing animation and clear on the level numbers.
Landing Pages & Template Design
While working on landing pages, I pushed and explored the visuals. And gradually, I combined the styles and made components, guidelines into our design system and template design.
Allergy vs. Cold
How to tell the difference between allergies and colds is not easy but crucial to help find the right relief for symptoms like sneezing, sniffles, and congestion. On the allergy content, I enhanced the differences by adding an infographic to compare the symptoms of allergies and colds. Since it’s an image, I made sure it’s legible on mobile or smaller devices by increasing the text size and device testing.
The infographic of allergy vs. cold symptoms draws attention and helps compare the symptoms' difference easily.
404 Page Not Found
While only when needed, people will see the 404 Page Not Found page, I added a bit of fun designing this page. I incorporated clouds – the distinctive brand asset – and a landmark icon to symbolize that the location cannot be found.
Results & Learnings
We received positive feedback from our clients and development partners in Claritin Post Review meeting for setting the standards for future Bayer sites and digital product designs. I also gained a lot of knowledge about the pharmaceutical industry and the regulatory legal process.