Context
Ottawa Dog Rescue is a community-driven non-profit dedicated to rescuing and rehoming dogs. While the mission is compassionate and human, the existing web experience felt visually dated and less emotionally engaging — which can reduce trust and make it harder for users to take action.
Problem
The original site presented UI challenges: inconsistent hierarchy, dense layout, limited warmth in visual language, and competing calls-to-action. These issues can create friction when users are trying to quickly understand the organization, meet dogs, or decide how to help.
Objective
- Modernize the UI while keeping it trustworthy and accessible.
- Create a warm, welcoming tone that matches the mission.
- Improve hierarchy and scanability for key paths (Adopt, Donate, Volunteer).
- Reduce visual clutter and make CTAs clearer and more human.
Before & After — Side-by-side Comparison
Left: the original live site. Right: my redesigned Figma prototype. This comparison highlights improvements in hierarchy, spacing, typography, and overall warmth.
Key Improvements
What changed in the redesign:
- Warmer visual tone: softer neutrals + friendly accents to match the mission.
- Cleaner hierarchy: clearer headings, spacing, and sections to scan faster.
- Stronger CTAs: Adopt / Donate / Volunteer are more obvious and emotionally aligned.
- Less clutter: improved spacing and content grouping to reduce cognitive load.
- Dog-first storytelling: imagery and layout prioritize connection and trust.
Outcome
The redesigned UI creates a calmer, more welcoming experience that better reflects Ottawa Dog Rescue’s values. By improving hierarchy and using warmer design cues, the interface helps users focus on the dogs and feel confident taking action.
Learning
This project reinforced how powerful UI can be in emotionally driven experiences. Small decisions — typography, spacing, color temperature, and CTA language — directly influence trust, empathy, and engagement.