Animal Shelter Mobile App UI
Designing the UI for the Animal Shelter application was not just a technical endeavor, but a heartfelt mission to improve the lives of animals and potential adopters alike. By integrating modern UI trends such as the Bento grid design, I aimed to create a seamless and engaging user experience. This project reflects my dedication to utilizing design as a tool for positive change, ensuring that every interaction within the app fosters compassion, ease of use, and a sense of community.
When
Skills
UI Design
Information Visualisation
Mockups
Prototyping
Spring, 2024
Tools
Figma
Adobe Photoshop
Rotato/Mockuuups
Problem
It seems like there aren't many animal shelter applications available. I haven't come across many, and it appears that many shelters lack the necessary resources to create a modern and user-friendly mobile application. Instead, they rely on traditional websites and often require a visit to the shelter to view all the available animals.
A quick search on App Store and Google will only give you shelter-themed games.
For this project, my goal is to develop an intuitive, user-friendly iOS application that complies with Apple's design guidelines. To accomplish this, I have created a charming and approachable design system. This incorporates the latest UI design trends, including AI-generated imagery and the Bento Grid Layout.
Style
In this application, I followed iOS design guidelines, utilising their design resources including navigation bars and action bars. I also followed their 8pt grid system and 40pt interactive area requirement.
Design Guideline
Colours and typography
Final Results
Main page
Detailed Screen
Pawtagory
Search results
Search
Search result with filter
Filter page
Components
Mock-ups
App Store Images
![Appstore.png](https://images.squarespace-cdn.com/content/v1/644184ab3241e93d02a673cd/0ffba98f-e312-4a4d-bb15-ba8be8835c55/Appstore.png)
![category.png](https://images.squarespace-cdn.com/content/v1/644184ab3241e93d02a673cd/830e0455-7b69-47fc-bc44-3064ba7b488e/category.png)
![Search.png](https://images.squarespace-cdn.com/content/v1/644184ab3241e93d02a673cd/fc01adec-2ffd-4c00-9718-fc31910a2a75/Search.png)
![Filter -appstore.png](https://images.squarespace-cdn.com/content/v1/644184ab3241e93d02a673cd/33155693-a4bf-46c4-a37b-bcb76bebdc91/Filter+-appstore.png)
Reflection
Working on the UI project for the Animal Shelter application was a deeply rewarding experience. Leveraging my newly acquired UI knowledge and embracing the modern Bento grid design trend, I aimed to create an intuitive and visually appealing interface. This design choice not only enhanced usability but also provided a fresh, engaging user experience. Through thoughtful design and a passion for making the world a better place, I focused on ensuring that potential adopters could easily navigate the application, connect with animals in need, and contribute to their well-being. This project underscored the power of good design in driving positive change and fostering a community of compassion and care for our furry friends.
“The greatness of a nation and its moral progress can be judged by the way its animals are treated.”
— Mahatma Gandhi