ASPL
Animal Shelter Property Locator
Branding / UI + UX / Visual Design
I designed a website that would allow communities the opportunity to search and select the best location for their new animal shelter
Date
Role
Team
Deliverables
Jan. - Feb. 2022
Lead UX Researcher/
Designer
Yours Truly
User Research, Wireframing, Low-
Fidelity Prototyping, High-Fidelity
Prototyping & Design Iteration
Design Process
01
Define
- Define Project Goals
- Define Key components to be included
Research
02
- Research Goals
- User Interviews (5)
- Persona Creation
Design
03
- Ideation
- Sketches
- Low-Fi Wireframe
- User Feedback
- High-Fi Prototype
Evaluate
04
- Usability Testing (5)
- Survey
- Interview
Main Objectives
The Challenge:
Design a website that would give communities the opportunity, to search and view land for sale for their new animal shelter.
Key Components to Include:
1. Search Function
2. Map
3. Filter Search
User Research
Research Goal
To determine whether our application fits user needs, enhances their experiences and improves the convenience of their current needs
Methodology
I interviewed 5 Participants of different ages and backgrounds to determine the most important factors that communities were looking for when searching for a new location for animal shelters. I visualized the user journey to show the existing experience and summarized pain points and needs for all types of users.
Personas
The following personas were based off of 2 chosen interview participants. The goal of the chosen personas was to show the two most contrasting agendas available among Shelter workers/volunteers.
Briana
Age: 22
Occupation: Civil EngineerFamily: Single
Age: 27
Occupation: HR Recruiter
Family: Single / 2 Cats
“We’ve taken in too many strays
and are looking for more space
for the animals.” - Bri
Goals
- Find a larger property for their animal shelter
- Take in more residents
Frustrations
- Lack of space for new residents at current shelter
- Current space is too close to the Inner city
Bio
Bri has been working at the local animal shelter for 8 years now. At first, it was a great home for the animals they sheltered. However, it has recently become too crowded. They’ll have to start turning new animals away, or releasing them to other shelters because of a lack of space. Bri’s looking to upgrade the shelter and give the animals the room the deserve.
Adam
Bio
Age: 30
Occupation: IT
Family: Married
Adams been volunteering at shelters his entire life. He
Recently moved to a new city and couldn’t believe that
The nearest shelter was 50 miles away. He knows all
The necessities of a good shelter and wants to raise
Money to open a new one where he lives. (Preferably
In the country to give the animals room to roam)
“The closest animal shelter is 50
miles away. We need one local ”
- Adam
Goals
- Find a cheap plot of land to build the shelter on
- Build a shelter for the animals in his own city.
Frustrations
- Nearest shelter is two cities over
- Everything in the inner city is too expensive
Insights
Opportunity Areas
Features
After synthesizing the insights from the interviews and learning about our user needs and wishes, I identified the following opportunities areas, which serves as the inspiration for ideation and feature design.
Design
Ideation
I brainstormed potential design solutions based off of user interviews:
1. Saved Property Function
2. Map View + List View of Properties
3. Ability to Contact an Agent
From Paper to Prototype
With objectives in mind, I started prototyping form paper to digital designs
Testing and Iterations
I made low-fidelity prototypes on Adobe XD for initial usability testing with 5 participants made up of the general public. Participants were able to navigate through the website, however, there was some friction and areas of improvements.
Following are the main iterations I made:
Iteration #1
No Indication of Saved Property
During usability testing, I noted that there wasn't an indication to the user that the listing they had wanted to save was in fact saved.
I received positive feedback from users after this iteration was added.
Once a user clicked on the heart to add a property to their saved files, it displays a darkened version of the heart.
Iteration #2
Similar to the above note, there wasn't any indication to the user which page had currently occupied the screen.
To make it easy for the user to be able to tell, I had darkened the selected page on the navigation bar at the bottom of the screen.
No Indication of
Current Page View
A small indication appears on the navigation bar to show the user which page occupies their current screen
Iteration #3
Added ability to view
blown up images of
property
A user noted during the testing phase that, aside from the standard view of property photos, it'd be nice if they would be enlarged once clicked on.
I took this into consideration and added a function to enlarge the photos of the property once they were clicked on by the user.
A simple function was added to allow users to view and scroll through blown up photos of the property. This can also be done with the Map View.
Usability Testing Results
1.
2.
3.
Added non-verbal queue to show users a property was successfully saved
Added 2nd non-verbal queue on the navigation bar to display what page was currently occupying the screen
Included a function allowing users to blow up images of the property chosen
Final Iterations
The final iterations of the design represent the final product. There is no user-flow associated with these iterations, only snapshots of chosen pages from the website.
A Map view of the searched address, city or zip code
A "List" view of the searched
address, city or zip code
The ability to filter your search options
A Saved screen that gathers all your favorited lots
A Property Details screen that gives the user all the land info needed
Profile screen that includes the users information and a quick selection to recently viewed, past toured, etc.
Thank You!
Call
(952) 484 - 7806