.png)
AdoptMax is a tool for animals for adoption. It is built for both animal shelters or individuals that want to put an animal up for adoption, or for people looking to adopt an animal to have a platform to facilitate that.
The problem:
A lack of common and dedicated platform for people to look for and put animals for adoption.
The goal:
Design an app and a website that would facilitate the the process of adopting an animal, both for animal shelters and for people looking to adopt.
Role:
UX designer, designing the app from conception to delivery.
Responsabilities:
Conduct user research, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies and iterating on design.
Understanding the user
User research: summary
I conducted researches with user bios, to better understand the users I am designing to, their pain points and their needs. To majos groups were identified: the users who are looking to adopt and the users who run animal shelters.
The research made clear that both groups would greatly benefit from having a dedicated website and an app and that would make the overall user experience better. One point that there is not one (well-implemented) centralized tool for animals for adoption, there are a lot of dedicated small ones for specific shelters and some poorly designed/not that used ones.
User research: pain points
1
There isn’t one centralized tool that gathers animals for adoption. There are a lot of small ones, but not one to rule them all.
2
The people that run the shelters feel bad that they are slow regarding the communication with the clients through regular calls.
3
The people that run the shelters feel bad that they are slow regarding the communication with the clients through regular calls.
Persona 1: Maria
Maria is a retired teacher that runs an animal shelter who would like something to help her run the animal shelter, because she is often busy caring for the animals
Persona 2: Daniel
Daniel is a SW Developer that works remotely from home who needs a tool to help him find a an animal to adopt, because he is often lonely in the house
User journey map
Starting the design
Paper wireframes
​Taking time to create different iterations of the home screen on paper ensured that the elements that made it to the digital frame would be well-suited to address the users’ pain points
Digital wireframes
As the initial design phase continued, I made sure to base designs on feedback and user research
Home page
Bottom bar with easy shortcuts
.png)
Filter shortcut to enable user preferences
Cards with key info already on display
Add new profile
Add pictures
Easy button to submit new profile
.png)
Add all profile info
Profile page
Pictures in a carousel display
​“Send Message” button to facilitate dialog
Written description of the animal
Low-fidelity prototype
​The low fidelity prototype connected the primary user flow of both looking into different animals and adding a new animal to the platform, so the prototype could be used in usability studies with users.
Usability study: findings
​I conducted a moderated face to face usability study using the prototype above and these were the findings:
1
The description box looks like a chat box
2
There is a global chat page missing in the wireframe
3
The key info of the profile page looks like it is connected to each other
Refining the design
1
The description box being just above the "Send Message" button gave the feeling that it is where you type the message to be sent. This was modified so this would not be the case.
.png)
.png)
2
The global chat page was included in the prototype, because there was none bafore.
.png)
3
Changed the way the key profile info is displayed, so it doesn’t look like it is connected to each other
High-fidelity prototype
After iterating the design with the feedback from the usability study, I moved into the high fidelity prototype .
First, I created the sticker sheet to be used on the high fidelity design, with all the color codes and typographies to be used.
Then, I transformed the design to come to life in color and created the high fidelity prototype. And this is what became the final version on the app!
Website
Once I was satisfied with the app, I jumped into the website part of this tool.
First off, I started by doing the sitemap of what I visioned it would be:
![Sitemap [Animal Shelter].png](https://static.wixstatic.com/media/bf5619_194aa42bc2ae4012bc24d1fee5f0f457~mv2.png/v1/fill/w_89,h_50,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/Sitemap%20%5BAnimal%20Shelter%5D.png)
Paper Wireframes
After that, I skecthed on paper the homepage to try out different approaches. As I already had the homepage of the app, consistency was the key here.
.jpg)
Digital wireframes
I built the wireframes based on what was already on the app, trying to keep things cohesive and familiar.
Home page
Keeping the same structure of each animal profile with info underneath the photo
The filter rem in the top right of the screen
The "add" button continues to have a special place in the bottom of the screen
Profile page
The "Send Message" button stays on its privileged position of center/bottom of the screen
The key info was moved the side of the photo instead of below it, to make the best use of the horizontal space
Chat page
The chat list and the chat page itself were able to be in the same screen, due to larger and horizontal screen
The name and photo of the animal in question remains in the very top, so the user can check which animal the chat is about
Filter
The filter also comes from the right and has the exact same options as in the app
High Fidelity Mockup
After the wireframes were done, I jumped into the high fidelity prototypes.
For the color palette I kept it exactly the same as the app and for the typography I used the same typeface, just with different sizes and thicknesses.
​Here is how the three main pages turned out:
Home page
.png)
Profile page
.png)
Chat page
.png)
Following that, I connected all the screens to make the final functioning prototype for the website.
Wrapping up
Impact
The app really prioritizes the animals and serves the function to find them a new home. One quote from a usability study stood out: “This is really cool, you can actually make this in Sweden”
What I learned
While designing the app I learned how all the steps of the UX process come together to bring out one final product at the end. Every single step has a reason to be and it felt good to be part of every single one of them.
Next Steps
Implement this into an actual Android/iOS app.
​
Contacting an animal shelter to see if they would like to be the pilot on this platform.​
Let's connect!
Thank you for taking the time to go through my usability study! I sent a chocolate bar to your mailbox (just kidding haha)
If you would like to get in touch: cattaneo.mariana@gmail.com