Site Refresh for Smart Allergy Mom Toolkit
Expanded Claritin’s design system to create a subsite for parents unfamiliar with allergies
Background
Smart Allergy Mom Toolkit, a subsite of Claritin.com, provides learnings for parents who are unfamiliar with allergies. When parents suspect their kid has allergies, they want to do all they can to learn about kids’ allergies and come prepared to talk to a pediatrician. The goal for Smart Allergy Mom Toolkit is to help along the way, furthermore, parents ask about Claritin when they talk to a doctor.
During the final phase of the Claritin website redesign, we were tasked to refresh Smart Allergy Mom Toolkit to optimize the user experience and make the design be part of the Claritin family.
I led the design for this project. We also faced a short timeline challenge of around 8 weeks that we had to take our approach and timing into consideration.
Role
UX Design
UI Design
Prototyping
Style Guide
Company
Energy BBDO
Discovery
The first pain point is it’s hard for parents to find the allergy tools and find the most related kids’ allergy content. The second pain point is parents need to print the symptom tracker pdf then can use it. After reviewing the business goals and analyzing the existing site, we put our design focus on
1. reconstructing the content hierarchy to enhance the accessibility
2. redesigning major tools: Symptom Tracker and Pediatrician Questions
3. exploring subsite visual look and feel
4. fixing the allergy quizzes’ flow
Wireframing: Toolkit Callout Module Idea
While I was sketching the wireframes to reconstruct the content, I found that allergy tools (especially Symptom Tracker and Pediatrician Questions) were called out repetitively and spread everywhere. A person needed to go through the whole article to get the tools from the links. Also, the link was hidden within the text. It was not prominent.
To help people easily access the tools, I designed a toolkit callout module that allowed us to call out different related tools for different pages in a consistent style and be visually prominent.
Toolkit Callout Module on the Learn Landing Page
Brand Refresh
I kept the Claritin blue as the primary color. Inspired by children’s Claritin products and the logo, I added purple and yellow colors. I used a clean script font for the major headlines to reflect the existing Smart Allergy Mom Toolkit logo. It also provided a soft and warm feeling that Smart Allergy Mom Toolkit is here to help.
I explored the visual look and feel on the homepage for different options and landed on this final one.
Symptom Tracker & Pediatrician Questions
Format Research
The format of the original Symptom Tracker and Pediatrician Questions was a pdf. Parents can print, document, and bring them to their pediatrician visits.
I researched format options for Symptom Tracker but really needed to take the timeline constraint into consideration.
1.
Symptom Tracker app -> unrealistic timeline (X)
2.
Allowing people to open their text editors, and use them as text format. -> couldn’t control the format of text on all devices and systems (X)
3.
Editable PDF -> Although it’s still a pdf, an editable pdf allows a person to use it digitally on their desktop or mobile devices and physically as a printed version. (O)
Design Improvements
Print-friendly:
reduced the imagery and color
Clearness:
added symptom icons on Symptom Tracker
Flexibility and Customization: added a flexible area for personal notes on Pediatrician Questions
Authority:
included external links to Smart Allergy Mom Toolkit, Claritin for Kids, Bayer, and social sharing options
I also developed the editable function and coded the sharing function.
Allergy Quiz
There were two allergy quizzes: Allergies 101 and Allergy Management. The original Allergy Quiz design was like a promotional banner and the result was always “A+”, no matter how many correct answers you got. It wasn’t helpful and engaging.
I revised the result paths and refreshed the visuals with icons. After each question, there is an explanation. At the end of the quiz, if a person gets 1 to 4 questions (total 5) correct, he/she can also link to the related learning article to learn more about the knowledge in full. The person also can share the quiz on Facebook.
Quiz Closed
Result Scenario: 4 out of 5 questions correct
Results & Learnings
The site successfully launched within a very short and challenged timeline (around 8 weeks). Through this process, I learned to prioritize features and directions needed for this phase.