This project matters because I...
🎓
🎨
🤝
❤️
🤗
Kept learning and expanding my skills
In this third project of my Google UX Design certification course, I completed hands-on activities simulating real-world UX design scenarios.
Showcased capabilities in new design tools
Learning new features of Adobe XD and Figma.
Balanced autonomy and collaboration
Though a solo project, I sourced user feedback and testing groups to gain insight, allowing for a truly equitable experience.
Empathized with users
Identifying with users, relating to their pain points, and connecting with them on a personal level.
Took the extra initiative
With custom illustrated UI elements and thoughtful design implementations stemming from several stages of user testing, I produced a responsive web design, end-to-end, that I'm very proud of.
Overview
Designing a responsive website for a dog shelter that specializes in the rescue
and re-homing of animals with special needs,
Beginning ideation to a complete prototype, optimized by several stages of
user testing and functional to both web and mobile users.
DURATION
September 2022 — October 2022
TEAM
Solo Design Project
MY ROLE: UX/UI Designer
Research, User Flows & Stories, Affinity Mapping, Sketching, Ideation, Wireframes, User
Testing, Prototyping, Visual Design, Branding & Illustration
PROJECT TYPE
Certificate Project for Google UX Design Program
TOOLS
Adobe XD, Illustrator, Procreate, Coursera
The Challenge
A Responsive Web Solution for the adoption of special needs dogs.
Designing a responsive website could provide much-needed clarity and simplification to the adoption process. A fun and clean design balanced with organized resources and intuitive navigation could make the adoption of special needs dogs more accessible and approachable.
THE GOAL
The Design Process
Understand
Starting with Research
Beginning with Empathizing with our Users
I'm a proud parent to a husky with an autoimmune disorder, so empathy was a key motivating factor for building DogHaus and its responsive web experience. However, to create an equitable experience, truly representative of the significant set of users, I know that my own perspectives and experiences caring for a disabled dog is not enough.
Yeti, my special pup
Conducting the Interviews
To begin the DogHaus project, I conducted a semi-structured qualitative interview with 4 participants via phone, to better understand what people need from an experience like this.
Key insights were then used to build & identify the target audience for this web experience.
Identifying the User Archetypes
Who are our users?
Analyzing the insights revealed from the phone interviews, I began to understand and identify the users I am building for. Considering each of my interviewee's unique perspectives and experiences with animal adoption, the two primary users groups I identified through research are:
Findings Show: Adopting a special needs dog is... overwhelming
Uncovering Motivations & Pain points
Writing the Problem Statement
What is the Actionable Statement?
Robin & Wyat (our users) are compassionate dog lovers
who need a website to search for a special needs dog
so that they can find the perfect furry friend that
fits their goals, lifestyle and expectations.
User Motivations
User Pain Points
Exploring further the personas I had created, I wanted to get a great understanding of the user goals, pain points, and behaviors.
Identifying these key factors would help guide me in making informed design decisions about how to improve the experience.
Define
Conducting a Competitive Audit
Identifying Strengths v. Gaps in the market
OVERVIEW
A larger corporation— not a shelter, but rather, a platform that displays large quantities of adoptable dogs by pooling from shelters all over the US
STRENGTHS
-
Fun branding, clear search capabilities, and expansive filter options
-
Wide outreach/target audience
-
Variety of Resources for dog owners
-
Ability to make an account & save information
GAPS
-
Featured stories/articles are not intriguing/captivating
-
Too many prerequisites before meeting a dog can turn people away
-
No iconography to identify the common traits/key qualities
OVERVIEW
East Bay SPCA is a smaller local dog shelter that appeals to potential dog owners in the nearby surrounding areas
STRENGTHS
-
Several pictures included in dog bios
-
Some scheduling systems in place
-
Many local resources and help options
-
Donate, Foster, Volunteer
-
Advertised events
GAPS
-
Congested header & complicated navigation
-
Messy homepage
-
No obvious, clear, upfront “call to action” directing users to adopt
How Might We?
How might we: make special needs adoption more approachable?
Understanding the current strengths and weaknesses in the market, my next step became strategizing the website's goals, which would inspire the website's architecture and overall direction. To do this, I formulated some of the questions I am trying to solve. Some of these motivating questions include:
1. How might we inspire people to adopt special needs animals?
2. How can we support people in the process of adoption?
3. How could we help users find the right animal for them?
Laying out the Information Architecture
Organizing the Experience
Ideate
Time to Sketch
Starting with Pen & Paper
Designing for Desktop and Mobile Responsivity
Digital Wireframes
But what do the users think?
Iterations based on Usability Test Insights
"The Key Information"
felt that the initial Dog Bio design was lacking in the quantity and quality of information on a dog's special need. One user noted:
"If a dog has a disease I don't know much about, it'd be nice for something to direct me to more information on that disease."
As a result, the final hi-fi Dog Bio design includes more information about a dog's needs, such as:
1. An excerpt about a dog's disease or disability
2. A link directing a user to more information
3. An overview of the dog's current medical needs
Iteration
5 out of 6 users
A Calendar View
said they were unsatisfied with the Calendar's layout in the lo-fi designs. Upon further questioning of this ranking, one user explained:
"It's not ideal. [...] I have to keep scrolling up to change the day. I'd like to be able to more quickly click around the calendar."
To remedy this, the new Calendar design has a side-by-side layout, better utilizing the wide canvas of a desktop screen and providing users with more efficient navigation.
Iteration
50% of users
Creating an Account before Scheduling
When asked to schedule a meeting with an adoptable dog, one user expressed their hesitation with this task. Upon clarification, the user stated:
"So I can meet this dog with the shelter knowing absolutely nothing about me?
That seems wrong..."
Empathizing with this user and realizing the security elements this user flow was initially missing, the new Schedule to Meet button feature opens with a pop-up prompting a new user to first create an account. This way, a user would submit all the basic required information before being able to meet with an adoptable dog.
Iteration
"Is that right?..."
Design System
Building out the UI
Utilizing my Graphic Design Background
Custom Illustrations
Prototype
The Responsive Prototypes
View the Experience
Outcomes & Learnings
Throughout this course of my certificate program, I designed a responsive website — this time using Adobe XD, showing my capabilities in using new design tools.
I completed the design process from beginning to end: empathizing with users, defining their pain points, coming up with ideas for design solutions, creating wireframes and prototypes, and testing designs to get feedback.
By the end of this course, I had completed hands-on activities simulating real-world UX design scenarios, equipping me with the knowledge and skills for entry-level jobs as a UX designer.
Finally, this project allowed me to pursue my passions, leverage my skills in visual design and enabled me to tap into my intrinsic empathetic self, thus providing me with a project I am truly proud of.