Gina Lin
SAMT_thumb_1700x1400 pixel.jpg

Smart Allergy Mom Toolkit Redesign

Designing a website with allergy tools and tips for parents new to allergies

title_1600x1100.jpg

Background & Goals

Smart Allergy Mom Toolkit is a family site of Claritin.com providing helpful information and tools for parents to learn more about their child’s allergies. When parents suspect their child has allergies, they often want to learn how to help with their kids’ allergies and prepare to talk to a pediatrician.

Original Design:

Original Design.jpg

The site provides two major tools —"symptom tracker" and "pediatrician questions" — for parents to document kid's allergy symptoms and to bring with them when visiting their pediatrician. However, it was hard for parents to access the tools especially across different devices. 

The main goals for the redesign were:

  • Make the main tools easily accessible to parents and works across different devices
  • Streamline the design with Claritin.com redesign
  • Enhance Claritin brand: Parents ask their pediatrician about Claritin because we've helped through the process

Furthermore, we had a very short working timeline, which was around 7-9 weeks. We had to take into consideration how to adjust the approach to realistically fit within the timeline.

 

Role

  • Interaction, visual design
  • Team Collaboration: creative director, copywriter, project manager, account team, and development team
  • Design Process: research, design exploration, sketching wireframes, crafting experience, prototyping, template design, image/icons creation, style guide/annotation, QA testing
 

Approach & Process
 

Brand Refresh

We kept the Claritin blue as the main color tone. Inspired by the children’s Claritin products and Claritin children’s logo, I added purple and yellow as the accent color for the Smart Allergy Mom Toolkit. A clean, modern script font was introduced for the major headline to reflect the bright brand and their current logo. It also gave a soft and warm feeling to show that the Smart Allergy Mom Toolkit is here to help.

brand_refresh_1600x500_02.jpg

Typeface Exploration:

 

After some quick sketching, I comped the homepage mockups to first see how the color and script typeface translated and how the page’s structure/hierarchy worked. Here are the two options.

1st-homepage-option1.jpg
1st-homepage-option2a.jpg
 
 

making the tools easily accessible to parents and work across different devices

After discussing with our client, we understood that for them, the Smart Allergy Mom Toolkit site is a center for allergy tools and Children’s allergy tips for parents.

Where and how the tools were called out on the original site:

toolkit callouts.jpg
 

Toolkit Module Design:

toolkit module.jpg

Benefits of designing a toolkit module:

  • Feature different tools (“symptom tracker”, “pediatrician questions”, and “e-book”) on different screens in a consistent style

  • Be visually prominent

 

Toolkit Module on Homepage:

samt-homepage.jpg
 

While we reconstructed the site contents and page hierarchy, the toolkit module allowed us to call out different tools based on associated contents.

wireframe-sketch-2.jpg

Toolkit Module on Landing Page & Article Details Page:

 Feature "symptom tracker" and "e-book" on "learn" landing page (Left/mobile top).  Feature "pediatrician questions" and "symptom tracker" on article details page (right/mobile bottom).

Feature "symptom tracker" and "e-book" on "learn" landing page (Left/mobile top).  Feature "pediatrician questions" and "symptom tracker" on article details page (right/mobile bottom).

samt-be-prepare-to-see-your-doctor.jpg
 

Editable pdf:
The original “symptom tracker” and “pediatrician questions” tool were two pdfs. Parents could print, use, and bring them to their pediatrician visit.

Considering the time constraint, it was not realistic to make an app for the “symptom tracker” at that moment. We researched alternative solutions like allowing people to open their text editor and use the “symptom tracker” as text format. We also tested how people use pdfs on their mobile devices. We decided to have editable pdfs as we couldn’t confirm that the function of text format would fully work across all devices and systems.

 The “pediatrician questions” provided initial questions for parents when they saw their pediatrician. The “symptom tracker” helped parents track their kids’ daily symptoms to find out what may be causing their allergies.

The “pediatrician questions” provided initial questions for parents when they saw their pediatrician. The “symptom tracker” helped parents track their kids’ daily symptoms to find out what may be causing their allergies.

Design Focus:

  • Be print-friendly: reduce the imagery and color
  • Provide more information by external links: Include links to the Smart Allergy Mom Toolkit and the global Bayer site
  • Be clearly-recognizable on symptoms: add symptom icons on the “symptom tracker”
  • Be more customizable on “pediatrician questions” : revise the content structure and add editable box area