Back to all works

PetsGetAllergies.com

<!--

Project Details

-->

Client:

Stallergenes Greer

Industry:

Healthcare

Role:

Lead UI/UX Design

Year:

2025

Platform:

Desktop, Tablet & Mobile

Project Overview

PetsGetAllergies.com served as an educational resource for pet owners seeking information about allergy symptoms and treatment options. However, the original site created significant barriers to user success:

The Problem:

Single-page layout with poor structure forced endless scrolling
Zero mobile optimization (60% of traffic on mobile)
Complex medical jargon confused non-medical users
No clear path to "Find a Vet" or learn about immunotherapy
High bounce rate, low conversions

The Goal:

Create an intuitive, mobile-first resource that guides pet owners from concern to action—improving engagement, conversion rates, and reducing bounce rates.

The Solution:

Redesigned the site from a single-page, scroll-heavy layout into a multi-page, task-focused structure with clear navigation pathways. Built interactive tools (symptom quiz, glossary, vet finder) and rewrote medical content in plain language—resulting in a 40% conversion increase and 45% faster information discovery.

My Contribution

Ran interviews with stakeholders and users
Built sitemap, wireframes, UI kit
Designed responsive layouts for all screen sizes
Defined content strategy with interactive elements
Led UX and UI design end-to-end

Results

Increase in user engagement

Increase in conversion 40%

Faster navigation

Reduction in Bounce Rate

Before

Single-page, scroll-heavy layout:

Dense paragraphs of medical text
No clear visual hierarchy
Desktop-only experience
Hidden or unclear CTAs
Medical jargon throughout

User Feedback: "I couldn't find what I was looking for" "Too much information, felt overwhelming" "The site didn't work on my phone"

After

Multi-page, task-focused structure:

Scannable content with clear sections
Interactive tools (quiz, glossary, vet finder)
Fully responsive mobile-first design
Prominent, contextual CTAs
Plain language with optional technical details

User Feedback: "So much easier to find what I need" "The quiz helped me understand my dog's symptoms" "I could actually use this on my phone"

My Approach

01 — Discovery

Stakeholder Alignment:

Conducted workshops with Stallergenes Greer product owners
Identified business priorities: increase vet finder usage and immunotherapy awareness
Reviewed competitive landscape (5 pet health sites)

User Research:

Interviewed 12 pet owners about their allergy information needs
Key insight: "I just want to know if my dog has allergies and what to do about it—I don't need a medical degree"
Conducted heuristic evaluation using Nielsen's 10 principles

Research Findings:

73% of users couldn't locate specific allergy types within 2 minutes
Medical terminology confused 8 out of 12 interviewed pet owners
Users wanted symptom checklists, not paragraph-heavy content
60% mobile traffic had unusable experience

User Personas Identified:

Concerned Pet Parent: Noticed symptoms, seeking diagnosis clarity
Treatment Seeker: Already diagnosed, looking for treatment solutions
Vet Finder: Ready to take action, needs local veterinary resources

02 — Define & Strategy

Problem Framing: Navigation and structure were the primary barriers preventing users from finding information and taking action.

Options Evaluated:

Option A: Keep Single-Page, Add Anchor Links

Pros: Minimal development effort
Cons: Still heavy scrolling, poor mobile experience persists
Decision: Rejected

✅ Option B: Multi-Page Structure with Task-Based Navigation

Pros: Clear user paths, better mobile UX, scalable content strategy
Cons: Larger scope, longer development timeline
Decision: Selected based on user research insights

Option C: Visual Redesign Only

Pros: Quick win, modern appearance
Cons: Doesn't address core usability or conversion barriers
Decision: Rejected

Strategic Decision: Chose Option B because user research showed structure and findability were the biggest blockers. Multi-page approach would create clear paths for each user type.

03 — Design

Information Architecture:

Restructured from single-page to clear, task-focused pathways:

Content Strategy:

Separated dog vs. cat content (different allergy profiles)
Created scannable symptom checklists
Developed plain-language glossary for medical terms
Added interactive quiz to increase engagement and guide diagnosis

Mobile-First Design:

Since 60% of users accessed via mobile, I designed for small screens first:

Card-based layouts for scannable content chunks
Accordion patterns for FAQ-style content (reduced scroll)
Sticky "Find a Vet" CTA on mobile
Thumb-friendly tap targets (minimum 44px)

Visual Design System:

Typography: Increased body text to 18px for better readability
Color Palette: Warm, approachable colors (WCAG AAA compliant)
Imagery: Real pet photos to build emotional connection
Iconography: Simple, recognizable symbols for quick scanning

Interactive Elements:

Symptom Quiz: 5-question flow to help owners identify potential allergies
Glossary: Hover/tap definitions for medical terms inline
Find a Vet Tool: Zip code search with map integration

Accessibility Features:

WCAG 2.1 AA contrast ratios throughout
Keyboard navigation for all interactive elements
Alt text for all images
Screen reader-friendly semantic HTML

Responsive Breakpoints:

Mobile: 320px - 767px
Tablet: 768px - 1023px
Desktop: 1024px+

04 — Test & Iterate

Usability Testing:

Tested low-fidelity wireframes with 8 pet owners
Task scenarios: "Find information about cat food allergies" and "Locate a vet near you"
Success rate: 87% (compared to estimated 40% on old site)

Key Iterations:

Iteration 1: Quiz Placement

Initial approach: Quiz buried in main navigation
Problem: Users didn't discover it organically
Solution: Added prominent quiz CTA on homepage hero
Result: 3x increase in quiz completions

Iteration 2: Medical Terminology

Initial approach: Used technical terms with glossary links
Problem: Users frustrated by constant clicking for definitions
Solution: Rewrote content in plain language, moved glossary to sidebar for reference
Result: 40% reduction in confusion-related feedback

Iteration 3: "Find a Vet" CTA Visibility

Initial approach: Button in footer only
Problem: Low discoverability, missed conversions
Solution: Sticky button on mobile, prominent header placement on desktop
Result: 55% increase in vet finder tool usage

Validation Methods:

A/B tested two homepage layouts (task-focused layout won)
Conducted heat mapping on prototype to identify attention patterns
Held stakeholder review sessions to ensure medical accuracy maintained

Key Learnings

What Worked:

User research revealed the gap between medical language and user needs
Mobile-first constraints improved UX across all devices
Interactive quiz increased engagement by 65%
Plain language doesn't mean dumbed-down—it means clear

Challenges Overcome:

No analytics baseline → Relied on qualitative research + set up post-launch tracking
Balancing accuracy with simplicity → Collaborated with vets, used progressive disclosure
Stakeholder buy-in on scope → Presented user data and ROI projections