Day You Rescue
Responsive web design to engage transparency for sheltered animals and enrich the adoption process during a pandemic.
Overview
Day You Rescue (D.Y.R.) needed to reach more people in the community by refreshing their brand image and complying with a responsive web design. This move is vital to keep the animals from neglect and allow them to get adopted as soon as possible especially during a lockdown with limited volunteers, workers, and a half-closed, semi-open organization. It is the move to be adaptable and flexible in trying times.
DYR believes in the power of connection by serving animals and people together. The relationship between animals and humans saves lives and helps with overall health. In the time of the pandemic, isolation, and depression increased. The need for a therapist and the need for animals for emotional companions hiked.
Problem
There are 1.5 million animals euthanized each year in America. DYR has closed its doors to the public during the pandemic of 2020, and all its services are moved online, such as the adoption process.
Solution
To provide a stress-free online application process anywhere that is available on desktop, iPad,
and mobile.
My Role
UX UI Designer, UX Researcher
Over 80 hours of work
Speculative work
Design Process
Empathize
Define
Ideate
Prototype & Test
Empathize
Understanding what people ultimately love about their pets can direct a positive and optimistic re-design in the hope to overshadow doubts and concerns. about animal adoption and relationships
In October, I held user interviews and surveys:
70% already have pets today and over 80% of the participants highly considered adopting from a local shelter in 2019.
From my research of other organizations and local businesses, the top reasons people adopt are:
-
Goodwill
-
Love and friendship
-
Emotional support
Data Pie Chart's Importance for Analysis
Creating a visual representation from the user survey results provides a holistic and easy understanding of data to onlookers, the design teams, engineers, and stakeholders.
User Quotes to Why They Adopt
"Life is short - I want to provide a beautiful life for them"
"It's good for trial time for a couple before having a baby"
"They're like family, and nice to cuddle"
Define
Adopting is a commitment and a sensitive matter, after all, relationships are complex. So, a clear information card to provide more than just basic history, but include personality, interactive photos, and videos, will help onlookers find the 'right' pet to adopt.
The pain points I discovered from user interviews are
-
their lack of patience for their pets in allowance for adjustments
-
the surprise of unexpected and development of personalities
-
the long-term financial addition
-
the time and effort in care-taking for another being
Meet Romina, a Business Art Director, the Primary Persona
Persona is a way of thinking from a point of view and it allows the design process to be human-centered since not all people will be users, but all users are people.
Romina embodies a prospective adoptee who has the means to adopt. She has the influence to raise awareness towards the shelter through her company, peers, and social media.
SWOT Analysis as a Strategy to the Right Direction
Identifying the strengths, weaknesses, opportunities, and threats allows the process to be more informed and guided.
Strength includes the values and the righteous effort of the organization that makes this possible.
Weaknesses include the small visibility and presence online, and what seems to be a long adoption application form.
Opportunities include local people working together and helping to bring optimism to each other's lives.
Threats include the uncertainty of times in 2019, the fear of death, health, and contact.
Ideate
The first creative idea was to present the animals with audio poetry to make the experience charming. The second design excluded the poetry to focus more on the simple display of information and the stress-free application form. Ideating phase is a space to explore various ways of solving the problem.
I find the first ideation to be an opportunity to be creative, fun, and take risks; like the Pet and Poetry and Community Club feature.
Here I re-learned to focus on objective key results (OKR's), how to create responsive wireframes, and the importance of keeping it simple principle (KISS principle) as a new designer.
Finding a resolution to the problem, I revisited my previous steps, reviewed user feedback, and decided which of the volume of ideas will give the most value. As an emerging UX designer, one principle to remember is I am not the user, and it's OK to take risks.
"Learning is uncomfortable, so creating the right circumstances to experience this discomfort safely is
a way to make progress." - InVision Design Engineering Handbook
The Creative Process of Logo making and UI Kit
The process of logo-making for the animal shelter was delightful. The first version has a brighter and more fun mood to complement the Pet & Poetry feature and includes illustrations. The second iteration that excluded the initial feature has a more solid, bolder, and more serious tone because of a re-directed focus on the basic information of animals and its application. The logo has an illusion of an animal tail or a paw which depends on the initial perspective.
Responsive Wireframes and Its Challenges
Creating responsive wireframes correctly was a new challenging experience. I learned about composition structures, auto-layout, power of constraints, and creating components. Ideating on the layout wireframes is searching for the best presentation of the brand image and values to come across to viewers exactly its purpose.
My mentor provided great help and insight about the best practice in creating wireframes. I started using Figma during this project. I spent time getting to know the software and watching YouTube videos as a guide. This time, the design patterns are making more sense and registering to how elements interact with other elements.
Design Version 1 in Discovering Accessibility Rules
I focused on visual designs, the importance of white space, hero section, and user feedback for the first round of design iteration.
It was an experience discovering accessibility rules of color contrast, the power of illustrations, and font pairings especially working with the grid allowed me to exercise finer-detail work.
I learned to become more open in observing users' wants and needs. where I gained more understanding in discerning what users say from their actions during testing.
Design Version II Back to Usability Principles
I re-directed the designs to the fundamentals of usability principles.
My choice was to completely redesign this iteration to practice non-attachment, adapt to new situations, and be flexible in collaborating and starting over. I made progress in the information hierarchy, copywriting, and efficiency of the application process. I thank my mentors and other students for their feedback. It was definitely a validated learning experience.
Prototype & Test
Prototyping and testing are necessary to receive feedback on the usability of the design and how to benefit from the following iterations and directions.
Each design showed its strengths and weaknesses. I learned about user anticipation, likes, and dislikes. Listening to user feedback without feeling the need to express or explain is the value of deep listening skills.
Equivocally important is becoming more aware of my mindset processes during the entire design process and learning to receive feedback and adapt to changes.
The minor pain point of the application is
-
the screening questions made users feel it was a quiz
-
users wanted explanations as to why questions are being asked
The Concept of Pet & Poetry and the Community Club was Thought-Provoking for Many of the Participant
Half of the users found it creative, and the other half did not find the connection. It was a distraction and a bit complicated. It exposed that information on animals' personalities and breed is a better strategy to pursue first hand. The application process reveals to be easy for most participants.
The Second Iteration was Well Received by Users
It was more focused on the task of finding the 'right' pet. It had a clearer objective and the application process is separated into 3 consecutive parts. In both testings, users still wished for the application to be shorter. There was a visible improvement in user experience between design iterations shown by the speed users accomplished their goal.
Conclusion
Familiarizing with the fundamentals of creating a responsive web design, building components, empathizing with users, and creating user interface patterns were the key takeaways from this project.
The importance of identifying which problem to solve and visualizing the path is critical. Analyzing the insights and sharing these insights for as much feedback is paramount in the design process. For the next steps, I would iterate on the application process and perform more user surveys and interviews to explore what the deeper user needs are.