Pawsitive Futures

The challenge was to create one clear experience for people arriving with very different goals, from finding a pet to fostering, volunteering, donating, or learning more about adoption. The experience also needed to stay easy to navigate across mobile, tablet, and desktop.

Tools used: Google Meet · FigJam · Figma

Affinity Mapping

The interview findings were grouped in FigJam to identify common needs around pet information, getting involved, trust, and navigation.

Clear, current pet information

Adopters wanted detailed profiles, behavioural information, care needs, availability, and clearer guidance before making a decision.

Guided ways to take action

Adoption, volunteering, and fostering all needed clearer steps, expectations, and supporting information.

Trust through transparency

Participants looked for reviews, success stories, regular updates, visible community activity, and clearer information about how support makes an impact.

Competitive Review

I reviewed three animal rescue websites to understand how they handled pet discovery, community involvement, calls to action, and trust-building content.

Ottawa Dog Rescue

What works Clear Donate and Featured Dog CTAs, visible navigation, impact metrics, and featured-animal storytelling made important actions and organizational impact easy to see.

Gap / opportunity Pet discovery could be stronger with clearer hierarchy, more detailed search and filtering, adopter testimonials, and additional educational content.

Ottawa Humane Society

What works Strong Adopt, Donate, and Get Involved CTAs, community programs, accreditation information, and accessible navigation helped communicate credibility and participation opportunities.

Gap / opportunity The large amount of content created an opportunity for simpler navigation and clearer organization, with more adopter testimonials supporting the experience.

Paws for Cause

What works Emotional animal photography, a calm colour palette, simple navigation, and a distinctive Donate CTA created a welcoming and approachable experience.

Gap / opportunity Animal profiles needed more detail, while search, volunteer information, testimonials, FAQs, and educational content could make the experience more useful.

Key Takeaway

The review reinforced the need to combine emotional storytelling with practical discovery tools, clearer participation pathways, and enough information for users to act with confidence.

Journey Map

To look more closely at the volunteer experience, I mapped Jim’s journey from exploring animal shelter websites to applying for a volunteer role.

What the journey revealed

The Pain Points row showed where Jim faced friction at each stage. During Explore, some websites did not have a clear section for volunteer opportunities. During Research, role details and application instructions were limited. During Apply, unclear application processes and limited volunteer experiences made it harder to move forward with confidence.

These findings helped shape the design priorities explored in the next section.

Research findings were grouped into three priorities that shaped the refined experience.

Tool used: FigJam

Refined Information Architecture

The original sitemap had several separate top-level sections, so I simplified the structure around the three audience groups identified in the research. Adopt supports prospective adopters, Get Involved brings volunteer, foster, and donation paths together for volunteers and supporters, and Contact gives all users a direct way to reach the rescue.

Resources sit within Adopt because the guides, workshops, and FAQs mainly support people learning about adoption. A Resources link also remains in the main navigation so users can access that content directly.

The final structure keeps the main paths clear while still supporting the different goals identified in the research.

Tool used: Figma

Low-fidelity wireframes helped establish page hierarchy, content placement, and responsive layouts before moving into visual design.

Desktop

Tablet

Mobile

The early layouts focused on making pet discovery, adoption information, and ways to get involved easy to find across screen sizes.

Tools used: Figma · Adobe Illustrator

Moodboard

The original moodboard established a warm, approachable direction that remained the visual foundation of the project through the later refinement.

• Friendly
• Compassionate
• Warmth
• Hope
• Organized

Style Tile

The style tile translated that direction into typography, colour, imagery, and interface treatments that continued to guide the 2026 redesign.

Logo & Brand Mark

The moodboard helped spark the idea for the logo. I kept coming back to the feeling of “finding a home,” so I combined a paw with a location pin in Adobe Illustrator. I paired it with the Inter typeface to keep the name clear, friendly, and easy to recognize.

Initial UI

The first coded version established the visual foundation across Home, Adopt, and Contact.

The interface was later refined and expanded in 2026, while the original visual direction and core brand language remained consistent.

Tools used: Figma · In-person focus group

After the first version was built, the interface was presented to a 25-person peer focus group in person, with the design shared through Figma. Their feedback, combined with a further design review, highlighted four areas to improve: colour hierarchy, CTA visibility, visual engagement, and contact-form clarity.

01 — Colour hierarchy

Similar background treatments made some sections blend together.

02 — CTA visibility

Primary actions needed stronger prominence and more consistent button treatment.

03 — Visual engagement

Text-heavy sections needed stronger supporting visual elements.

04 — Contact hierarchy

The contact form needed clearer definition as the page’s main action.

Tools used: Lovable · Figma

In 2026, I revisited the interface to address the focus-group feedback while keeping the original visual direction and brand language intact.

Visual Inspiration

For the visual direction, I kept coming back to the moodboard image of the dog surrounded by a playful dotted trail. I liked how it made a static photo feel more lively and warm, so I reworked that idea into a journey motif using the Pawsitive Futures colours and paired it with editorial pet crops.

AI-Assisted Exploration

I used Lovable to quickly explore different interface directions, then brought the strongest ideas into Figma and refined them to fit the Pawsitive Futures brand, research findings, and focus-group feedback.

01 — Impact & Storytelling

This exploration helped test:

• stronger impact statistics
• more prominent animal photography
• a more visible success-story section

02 — Story-Led Experience

This exploration helped test:

• larger emotional photography
• stronger editorial typography
• success stories as a more important part of the page
• a clearer sense of progression through the content

03 — Content & Action Hierarchy

This exploration helped test:

• clearer CTA hierarchy
• stronger section groupings
• stats, events, success stories, and Get Involved content working together
• more structured card-based content

I treated the AI outputs as starting points. I pulled useful ideas around storytelling, hierarchy, imagery, and calls to action into Figma, then adapted them to the existing brand and final experience.

01 — Colour hierarchy

Refinement:
Introduced clearer background changes, spacing, dividers, and content groupings to give sections stronger visual distinction.

Before

After

02 — CTA visibility

Refinement:
Standardized primary and secondary action treatments to create a clearer and more consistent hierarchy across the experience.

Before

After

03 — Visual engagement

Refinement:
Expanded photography, editorial pet crops, success stories, and supporting visual elements to reduce text-heavy sections.

Before

After

04 — Contact hierarchy

Refinement:
Separated contact information from the enquiry form and gave the form clearer definition as the page’s primary action.

Before

After

The final experience brings pet discovery, adoption guidance, resources, and ways to get involved together across desktop, tablet, and mobile.

Desktop

01 Home

02 Adopt

03 Get Involved

04 Contact

Tablet

01 Home

02 Adopt

03 Get Involved

04 Contact

Mobile

01 Home

02 Adopt

03 Get Involved

04 Contact

I built the refined design as a responsive website using HTML, CSS, and JavaScript, then deployed it with GitHub Pages.

The build included responsive navigation, reusable styling, pet search and filtering, result feedback, form interactions, and pet-profile modals.

Pet Search & Filtering

JavaScript handles pet search, category filters, result counts, and feedback when no matches are found.

Pet Profiles & Enquiry

Selecting a pet opens a detailed profile with key information about the animal.

The “I’m interested in…” button takes the selected pet into the adoption enquiry form.

Pawsitive Futures grew from an initial three-page website into a more complete responsive experience for adopters, volunteers, foster caregivers, and supporters.