A responsive application flow for a pet shelter
Project Lead
UX Designer
UI Designer
Adobe XD
Procreate
The Noun Project Icons
User Research
Concept Ideation
Wireframing
Prototyping
Usability Testing
Branding
Visual Design
July 29, 2021 - September 23, 2021 (8 weeks)
User Interviews
Empathy Mapping
Competitive Audit
User Story and Persona
Problem Statement
User Journey Map
How Might We
Crazy Eights
Information Architecture
Wireframing
Low-Fidelity Prototyping
High-Fidelity Prototyping
Usability Testing
Recording Observations
Data Analysis
The Challenge
For my course on responsive web design, I chose to build a conceptual application flow for a pet rescue. To make a user-centered experience, I conducted user interviews to empathize with the website's target audience - people aged 18+ who are looking to adopt a pet.
I learned the following insights from the people I interviewed:
Pain Point #1
Users feel frustrated with completing long and arduous application processes that ultimately end up in rejection.
Result: The application flow is split into manageable chunks and shorter than traditional adoption applications.
Pain Point #2
Users feel disappointed when their pet’s health problems aren’t fully disclosed before adoption, as this results in expensive, unforeseen vet costs.
Result: Pet profiles disclose health status through badges and in profile descriptions.
Pain Point #3
Users feel uncomfortable working with untrustworthy establishments that have inhumane practices.
Result: Photos of previous successful adoptions and visual design build confidence in users.
To keep empathy at the forefront of my design process, I created a user persona to define the website's user needs and problems. Her goals, frustrations, user story, and problem statement were built with aggregate data from user interviews, making her representative of the whole target audience rather than a single user. Building for a person rather than a list of bullet points helped to inform my process throughout the project.
The Problem: Jamie is a full-time employee and dog owner who needs a straightforward way to adopt a new pet to keep her dog Butters company because other adoption application processes are too rigorous and selective.
After figuring out who I’m designing for and what the problem is, I brainstormed on how to address Jamie’s pain points and solve her problem.
I formulated How Might We questions from the interview insights which served as a basis for Crazy 8 sketches where I could quickly iterate through potential solutions.
How might we make the application process more engaging and fun?
After some iterating on ideas for the application flow, I planned what the information architecture might be, as this would help inform what pages I need to create wireframes for.
I sketched paper wireframes using Procreate and listed the features I wanted for the 3 main pages: the homepage, view pets page, and application page.
I worked from my paper wireframe sketches and I refined them in Adobe XD to create low-fidelity digital wireframes. Once I completed the desktop wireframes I adapted them to a mobile screen size to design a responsive website. With the wireframes done, I connected the screens together to simulate the application flow, resulting in a low-fidelity prototype.
I conducted unmoderated usability tests with the low fidelity wireframe prototype to see how the initial design could better address Jamie’s pain points. Users followed same user journey that Jamie would take to adopt a dog on the website.
The goals of the study were to determine if users could successfully complete the application flow, and what changes needed to be made to make the website more accessible.
I learned the following insights from the participants in the usability study:
Insight #1
Users noticed that back functionality was missing in the low-fidelity prototype, so they couldn't return to previous steps in the application.
Result: Back functionality was integrated into the prototype so users could move back and forth in the application more easily.
Insight #2
Users felt it was strange that dropdown menus didn't automatically close after selecting a pet for the adoption application.
Result: Dropdowns were made to close once a selection was made to create a more familiar experience for users and reduce the amount of clicks needed to complete the main user flow.
Insight #3
Users unanimously liked the overall experience of the website and especially how straightforward and short the application flow was.
Goal Achieved: All users successfully completed the application flow. Splitting the application into small chunks rather than a long scrolling page makes an easier experience for the users.
After refining the initial prototype using participant feedback, I felt ready to move on to transforming the low-fidelity wireframes to high-fidelity mockups, which was my favorite part of this project.
I first designed the brand identity for the website's fictional pet rescue, Pawdopt, so that I could apply the brand's colors, fonts, and personality into the user interface.
By empathizing with the target audience and determining their pain points in adopting a pet, I was able to create high-fidelity prototypes for an application flow of a pet rescue website.
Unlike traditional pet rescues and shelters, Pawdopt’s application flow was designed to relieve users from a burdensome and rigorous process and instead engage them in a fun and straightforward experience.
Here’s what participants had to say about the high-fidelity prototype:
As far as next steps, it would be beneficial to conduct usability tests with participants who use assistive technologies to assess whether the website accessible and friendly to assistive devices. It would also be fun to revisit pages that got cut from the initial information architecture, like the matchmaking page.
This project helped me learn to design adaptively for desktop and mobile screens, and it showed me how creating a minimum viable product can be an effective method for tackling larger projects.
Want to give feedback on the design, or chat about designing a responsive website that adapts to different screen sizes? Let's get in touch.