2 Blondes All Breed Rescue redesign
Case Study Overview
This case study showcases the redesign for a local dog shelter's website. Working with two other designers, our focus was to rework existing pages and create cohesive a style guide for consistency as well as information architecture for stronger user experience. Through usability testing, public surveys, and one-on-interviews, we gathered data that we incorporated to our design approach.
Goals
Our goal was to recreate how the site presents visually, updating negative space, reorganizing information and pages, and adding more images and color. We sought to refine the user interface to uphold professionalism and usability through reworking the existing information architecture. Our belief is that with our additions, the site engagement will increase in affect of our emphatic design approach.
our process
Empathize
Define
Ideate
IA/Prototyping
Testing
Iterate
Empathizing
Research
When looking for a new pet where do you look?
We conducted an online survey with 17 anonymous participants to gain a deeper understanding of our target audience's wants and needs. Our five-question survey provided valuable insights that shaped our project's approach, allowing us to create user personas to better define our user experience. This research played a key role in guiding the direction of our project.
Local pet store
Local shelter
Online
Social media
Competative analysis
To optimize our site's usability, we analyzed the design layouts of competing businesses. This process helped us identify both successful elements and common design pitfalls. These insights allowed us to target usability issues across different platforms and refine our approach to problem-solving.
Our Findings
-
Emotional Connection: We align our approach with the shelter’s mission, using its core values to create a meaningful bond with users.
-
Visual Storytelling: High-quality photos highlight each dog's unique personality, fostering empathy and engagement.
-
Warm & Inviting Design: A carefully chosen warm color palette enhances the emotional connection, making the experience feel welcoming and compassionate.
Example of portfolio stock photos made in photoshop.
Example of competitor's (BARC) home page main image.
Define
Next, we conducted a thorough content inventory of the site, evaluating each page to determine what was effective, what needed improvement, and what could be removed. This process helped refine the site's content for a clearer, more engaging user experience.
Identifying key issues
Example of portfolio stock photos made in photoshop.
-
Enhance Navigation & Consistency: Streamline menu items, maintain uniform design elements, and ensure a cohesive user experience.
-
Boost Emotional Appeal: Use more pictures of dogs and warm visuals to foster a stronger connection with users.
-
Emphasize Charitable Opportunities: Highlight donation and volunteer options to encourage community support.
-
Maintain & Optimize: Regularly update hyperlinks, resize/organize buttons, advertisements, and flyers for a polished, functional site.
ideate
Examples of mind mapping processes
ia/prototyping
Existing Information Architecture
Redesigned Information Architecture
prototypes
In this process, our team focused on implementing the necessary changes to align with the site's new information architecture. Guided by our research, we ensured the integrity of the site's content while streamlining and consolidating page categories for improved organization.
Version A Wireframes
Version B Wireframes
A/b Testing
Example of portfolio stock photos made in photoshop.
Identifying key issues
-
Designed two mobile navigation prototypes for testing.
-
Conducted usability tests to compare their effectiveness.
-
Determined which version users preferred and why.
-
Identified the optimal user experience based on insights.
-
Pinpointed successful elements and areas needing improvement.
iteration
prototypes
Outcomes
The redesigned site successfully improved both usability and visual clarity. By implementing a refined information architecture, cohesive layout, and intentional color palette, the final design allows users to navigate content more intuitively and absorb information with less cognitive load. The updated visual hierarchy guides attention naturally, resulting in higher engagement and more efficient user interactions.