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.
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.
- 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
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.
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.
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 Module Design:
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:
While we reconstructed the site contents and page hierarchy, the toolkit module allowed us to call out different tools based on associated contents.
Toolkit Module on Landing Page & Article Details Page:
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.
- 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