Click below to visit the project’s Figma file:
https://www.figma.com/file/IybVSiiWvYJxrkl6m8xhcp/Fetch-App?node-id=1%3A3
The project: Our animal shelter management shelter was ready to be sold off to a new company. It needed a brand refresh and updated pages.
The goal: Make use of the screen’s full space. Reduce the number of clicks and scrolling a user needs to do. Make the layout very intuitive for onboarding. Give better visibility to the system’s data.
The challenge: How best to make use of the space with the number of features we wanted to include? How to make everything fit in a layout that makes sense?
The process: I took existing client feedback and past interviews to better understand the desired user path. Meanwhile, we also did a brand update that included a new logo and brand colors. We decided on a purple, orange, and yellow color scheme, due to orange and yellow being common animal colors, with that purple contrast. Also, no other competitor had a similar color scheme (the industry had a lot of blues and teals).
First, I focused on the login screen. I wanted to make use of the space by including an advertisement to start a free trial. I also pitched a concept to include a photo of an animal adopted through one of our client shelters, which could be rotated yearly or semi-regularly.
Login screen before and after:
Next, I focused on our dashboard. Our old dashboard had no content in it, other than the menu and the software logo. Based on client feedback, I included shelter statistics, a rolling photo gallery of adopted animals, and a to-do list of shelter tasks. Before and after:
Finally, I focused on the animal profile screen. This screen was the most crucial page of the whole system, as it needs to give a 360 degree view of what’s happening with the animal. The old layout had too much wasted space. I tightened everything by moving to a horizontal tab layout. I then put the animal to-do list front and center. The “recent timeline” to the upper right also received a lot of positive feedback. Before and after:
