Queen's Best 
Stumpy Dog Rescue

Website Redesign UX/UI Case Study

Tools

Figma • Adobe Photoshop • Canva

Duration

2 Months

Roles

Project Planning • User Research • Problem Definition

Ideation • Interaction Design • Visual Design

User Testing • Wireframes • Prototyping

Project Overview

Description

Queen’s Best Stumpy Dog Rescue (QBSDR) is a small size non-profit animal rescue organization situated in Los Angeles, CA. Despite its relatively small size, QBSDR is committed to rescuing Corgis with special needs and providing rehabilitation for surrendered Corgis dealing with behavioral challenges.

Problem

Impulse buying and unethical breeding practices have let to a surge in pet abandonments, contributing to overcrowding in animal shelters. For smaller rescue organizations like QBSDR, the challenge to secure the necessary resources for rescue missions is a daily struggle. With the Pembroke Welsh Corgi gaining increased popularity among pet enthusiasts in recent decades, QBSDR faces a pressing need for additional resources to sustain its vital operations.

Goal

Our objectives is to redesign QBSDR’s website to attract a larger audience, leading to increased donations and volunteer support. This initiative aims to bolster the organization’s efforts as a dedicated rescue center for Corgis, enhancing its capacity to serve these beloved animals in need.

Design Process

Research

  • Stakeholder Interview

  • Guerrilla User Interview

  • Empathy Map

KICK OFF

Define

Ideate

  • Information Architecture

  • User Journey & Storyboard

  • User Flow

  • User Persona

  • Problem Statement

  • Product Vision

  • Feature Definition

  • Competitor Analysis

  • Value Proposition

Test

Design

  • UI Style Guide

  • Typography

  • Design System

  • Low-Fi Wireframe

  • Usability Testing

  • First Iteration

DEVELOPMENT

Finalize

  • Final Design

  • Final Interactive Prototype

Stakeholder
Interview

Research

Frustrations

  • Lack public education on the breed

  • Scarce resources

  • Lack manpower

Needs

  • Increase in cash donation

  • Gain volunteer and foster involvements

  • Increase online and community presence

To Change

  • Content organization

  • Add/combine/delete p ages if necessary

  • Application form reconstruction

  • Online donation system improvement

T0 Keep

  • Royal purple color scheme

  • Brand logo

  • Dog stories

  • Dog categories

User Pain Points

Upon completing 5 Guerrilla User Testing sessions, synthesizing user insights and creating an Empathy Map, we identified the following areas of user pain points:

Research

Information Clusters

  • Content-heavy

  • Lack visible divisions and sections

  • Long-scrolling

Disorganized Content

  • Content not logically grouped

  • No visible hierarchy

  • No progress indicators

Trustworthiness

  • Lack organization structure and introduction

  • Unclear donation route

  • No user reviews or testimonials

Aesthetically Bland

  • Very little color

  • Nothing visually eye-catching

  • Unattractive content

User Persona

QBSDR website caters to 3 groups of target audiences: donors, volunteers, and adopters. By creating distinct user personas for donors, volunteers, and adopters, our website can deliver a more targeted and impactful experience for each group.

User Persona 1 • Donation/Adoption Path

“I live alone and would love to adopt a corgi. I grew up in the house full of corgis and we had good memories together.”

Elizabeth Windsor

63 | Widowed | Retiree | Burbank, CA

Define

About

Elizabeth, a retired woman, is a regular donor to various animal rescue groups. Recently widowed, Elizabeth yearns for furry companionship. She cherishes her childhood memories filled with the playful Corgis that holds a special place in her heart. She is looking into making donation to a corgi rescue group and now ready to provide a loving home for a corgi with special needs.

Pain Points

  • Not very tech savvy and cannot understand if the info on the website is difficult to read

  • Weary about online donation because it’s either complicated, confusing or look insecure

  • Adoption process can be long and tedious with lots of uncertainty

Gains

  • Need simple clear information on adoption website with guidance

  • Wants more information about how to care for special needs dogs

  • Needs a safe and streamline online donation system

User Persona 2 • Volunteer Path

“I love to be with dogs, especially corgis. Their wiggle little booties really help me calm down my stress and anxiety.”

Charlotte Spencer

24 | Single | Law Student | Los Angeles, CA

About

Charlotte, a vibrant and caring law school student, has actively volunteered since her high school days. Her passion lies in supporting animal causes, with a particular dedication for dog rescue missions. She is especially fond of corgis and is looking to maximize her volunteer experience by aligning it with her genuine passion for helping corgis in needs.

Pain Points

  • Lives in the dormitory that is not pet-allowed

  • Unable to foster or adopt a corgi while in school

  • Wanted to help dogs in needs but has no prior experience handling dogs with special needs

Gains

  • To get trainings about how to care for special need dogs

  • To receive credits and recognitions on the volunteer works she does

  • To reduce stress and anxiety from school through helping animals

Project Vision

Having identified the problem statements, the vision and direction for the website redesign is defined next. As a small NGO operating with limited resources, financial stability becomes paramount for both the organization’s sustainability and the well-being of the rescued corgis. Also, the continuity of its rescue efforts relies heavily on the recruit and the dedication of volunteers and the continuous support from donors. Therefore, QBSDR website redesign should be:

Donation-Driven

Encourage

Donation

Increase

Donation

Secure

Donation

People-Centered

Attract

People

Connect

People

Retain

People

Define

Feature Definition

With a clear vision for the project, a brainstorming session is conducted to prioritize the following features in the redesign to create a more user-friendly experience. Additionally, to make sure the enhancements truly stand out, a thorough competitor analysis is conducted and  value proposition is created to ensure the redesign offers an experience that exceeds expectations.

Define

Streamline Navigation

  • Quick access to subpages

  • Application progress indicator

  • Sort/Filter/Search functions

Donation-Driven Features

  • One-time/Monthly donation

  • Sponsorship

  • More digital payments options

Content Organization

  • Overviews/Dog story highlights

  • Infographics/Visual images

  • Decluttered and reconstructed application forms

People-Centered Features

  • Donor appreciation program

  • Volunteer portal

  • Volunteer certificate program

Information Architecture

Through a card sorting session, the following sitemap is created to optimize the website's navigation.

Ideate

User Flow

Donation Path

Volunteer Path

Adoption Path

Ideate

Usability Testing

Five user testing sessions are conducted to help refine the navigation of the lo-fi wireframe for optimal usability. The following user feedbacks and insights are obtained:

Positive Feedback

  • Header navigation is clean and simple

  • Tabs on the landing pages make content well-organized

  • Dog overviews and sort function make content easy to read

Negative Feedback

  • The “Beginner”, “Intermediate”, “Advanced”, and “Sanctuary” secondary landing pages below the “Our Dogs” primary navigation is unclear and confusing for the first time user. So is the “My Profile” secondary landing page under “Volunteer” page.

  • On “Our Dogs” page, the explanation of the “levels” should be brought up to the top so users can be taught what each level means before clicking the tabs

Low-Fi Wireframe Two-Layer Navigation

“Our Dogs” Page Dropdown

“Volunteer” Page Dropdown

Test

Iteration

Through usability testing, valuable user insights are gathered and the following improvements are implemented to create a more user-friendly experience.

One-Level Header Navigation

The secondary dropdown menu has been a source of confusion. While it offers quick access to secondary landing pages, it has led users to overlook crucial information about each primary function. Understanding the entire foster or volunteer process is vital before selecting a dog or applying for a volunteer position, as both entail serious commitments. In response, we have decided to revert to a one-level navigation system, ensuring that users are compelled to read important instructions before navigating to secondary pages.

Secondary Navigation

Upon landing on the primary page, specifically the “Our Dogs” page, users will find clear definitions and requirements for each dog category. To enhance user experience, first-time users can seamlessly access secondary landing pages using the secondary navigation tabs such as “Beginner”, “Intermediate”, “Advanced”, and “sanctuary”, without causing confusion. This approach aims to provide straightforward information and easy navigation for users exploring different dog categories.

Volunteer Portal

To address the confusion caused by having a “My Profile” page, a decision has been made to create a dedicated secondary site specifically for volunteers while the volunteer page will only provide general information about volunteer positions and the application process. Existing volunteer members will have exclusive access to their profiles and documents through a separate “Volunteer Portal” page, streamlining the user experience and maintaining clarity between general information and volunteer-specific resources.

Application Form Overlay

Instead of in-page application form, we decided to use overlay for application. The overlay format enables us to break down the lengthy application form, categorizing questions meaningfully for improved organization. This approach not only allows users answering multiple questions simultaneously without the need for scrolling but also ensures that answers entered in the middle of the application are saved, alleviating concerns about potential data loss.

Test

UI Style Guide

UI Direction

In crafting the design for our new website, we consciously chose a sophisticated and elegant aesthetic to convey a sense of regality and timeless appeal. In accordance with the stakeholder’s request to maintain the “Royal Purple” color theme, the choice of a refined and royal design was driver by our desire to create an online space that reflects intelligence and courage inherent in the Corgi breed. By intertwining these qualities seamlessly into the visual elements, we aim to communicate not only the elegance associated with our brand but also the intelligent and courageous spirit that defines our mission. The deliberate integration of these keywords ensures a visually compelling and cohesive user experience, resonating with our audience in a profound and memorable manner

Color Palette

Base

#F2F4F7

White

#FFFFFF

Brand

#463B5C

Grey

#F9FAFB

Highlight

#D4AF37

Logo

#101828

Border

#D0D5DD

Text

#344054

Design

Typography
Rufina

In alignment with our regal theme, we have opted for a typeface pairing reminiscent of the one utilized by the UK Royal Family’s website. This deliberate choice aims to evoke a sense of connection, symbolizing that QBSDR is an extension of the esteemed UK Royal Family’s online presence. By harmonizing the typography, we seek to convey a seamless integration with royal identity, fostering a sense of familiarity and association with the noble values and traditions embodied by the royal institution

+ Raleway

Design

Final Design

Through extensive user testing and iterative refinement, the following final design that prioritizes user needs has emerged.

Hero Image

Organization Overview

The new homepage provides readers an immediate glimpse of the organization:

  • Who we are

  • What we do

  • How to get involved

Featured Story

Homepage also includes an eye-catching story of a rescued corgi to gain visibility and increase chance of adoption.

Social Connection

Keep readers up-to-date on the latest events and news of the organization to encourage participations

About Pages & Donation

Intuitive Navigation

Navigation items are reorganized and renamed for easier understanding and browsing. They immediately bring out 3 most important goals of the organization: Donate, Volunteer, and Foster-to-Adopt, especially making the “Donate” button pop out.

Captivating Image

High-quality images and videos can grab attention, establish brand identity, and evoke emotions. Visuals that align with the brand’s messaging and target audience are used here.

Clear Call to Action

Call to Action (CTA) buttons are a vital element of any website, as they directly influence user engagement and conversion rates. The added motto clearly brings out the mission of QBSDR at first sight.

Homepage

Organization Transparency

Transparency is crucial for building trust and positive relationships with readers. It instills confidence by openly communicating the organization’s values and practices, and consequently gaining users’ confidence in making donation

Public Education

As a Corgi-specific rescue organization, QBSDR plays a crucial role in disseminating accurate knowledge about the breed, raising awareness, and fostering informed decision making within communities so the goal of reducing corgi homelessness can be achieved

Streamline Donate Process

Clear instructions and a user-friendly donation process instill a sense of trust and security among donors. New improvements include:

  • Frequent Donation Option

  • New Payment Methods

Volunteer Pages

Finalize

Clear Application Process

The step-by-step process infographic offers prospective volunteer applicants a straightforward and comprehensible guide, outlining the expectations and steps to follow should they decide to apply for a volunteer position

Organized Volunteer Info

The volunteer position info cards offer comprehensive descriptions of each position, categorized based on skill levels. Each card conveniently includes a direct link to the application form for seamless access

Guided Application Form

Questions are organized in a logical sequence, and each page features an appropriate number of questions to maintain user focus and engagement. Applicants are guided by progress indicators that provide transparency and improve overall navigation through the application process

Our Unicorg & Adoption Pages

Visual Storytelling

Not all corgis are built the same. Each of the QBSDR corgis possesses a unique story and individuality. They all deserve personalized love and care tailored to their distinct needs. There, we decided to name the dog page “Our Unicorgs”, meaning “Unique + Corgi”

Secondary Navigation

Upon landing on the primary dog page, users will now find clear definitions and requirements for each dog category and select one that suits user’s need accordingly. Sort/Filter/Search functions improve readers’ browsing experience by shortening scrolling and searching time

Animated Dog Profile

Dog card includes instant highlights and attention-grabbing dog photo to increase chance of clicking. Individualized dog profile includes:

  • Full dog story: For users who delight in heartwarming stories, and in accordance with the stakeholder’s request, the detailed full rescued story section remains unchanged

  • Story highlights: For users who prefer concise information over lengthy reads, crucial details about the dog are highlighted and showcased in the side navigation bar for quick and easy access

Streamline Adoption Process

Questions are organized in a logical sequence, and each page features an appropriate number of questions to maintain user focus and engagement. Applicants are guided by progress indicators that provide transparency and improve overall navigation through the application process

Volunteer Portal & Forum

Volunteer Recognition

Introduce a “Volunteer Appreciation and Certification” program designed to celebrate and recognize volunteers for their exceptional commitment and dedication to the organization.

Work Management

Newly added Volunteer Portal provides volunteers a centralized system to:

  • Efficiently schedule volunteer hours and sign up as an event assistant online, enabling volunteers to easily monitor and track their time and progress

  • Stay informed with the latest internal updates and announcements pertaining to the organization

Volunteer Communication

The discussion forum provides a platform for all staff and volunteers to share information, ask questions, and engage in communication, fostering a sense of camaraderie and creating a tight-knit family within the organization

Takeaways

Saving Low-Riders, One Design at a Time

Design isn’t merely a means of earning a living; it embodies life itself. A well-crafted design has the power to make saving lives possible.


Being a corgi parent myself, this website redesign project holds a profound personal significance. With a deep sense of attachment, I dedicated substantial personal time delving into each rescue story, accentuating the unique qualities of every Unicorg, and offering each one of them my undivided attention while working on their stories. The commitment is driven by the desire to assist an amazing NGO like Queen’s Best Stumpy Dog Rescue in sustaining their incredible rescue efforts.

Setting aside personal attachment to this project, the QBSDR website redesign process has revealed several vital professional insights and takeaways:

  1. The importance of visual storytelling and compelling imagery in evoking empathy and encouraging support for the cause

  2. User-friendly navigation and intuitive design play a pivotal role in engaging potential donors and volunteers

  3. Emphasizing the impact of donations and volunteer contributions has proven to be an effective strategy ini garnering support

  4. Highlighting success stories and the organization’s mission fosters a stronger emotional connection with visitors, inspiring them to take action and support the rescue efforts