I redesigned the mobile and web UX/UI of an iframe product that animals shelters use to display adoptable animals on their websites. While a shelter’s website is a crucial channel for getting adoptable animals in front of adopters, existing products fell short of providing superb user experience. Determined to change the status quo, I set out to redesign the product.

The new design simplifies browsing for adopters. In the original design, adopters were simply viewing a long list of pictures and scrolling a lot (especially for the big shelters that have lots of adoptable animals). A set of filters now allow adopters to narrow in on specific animals they’re looking for.

The new design enhances the experience of viewing a specific animal. Based on the powerful insight that imageries are crucial pieces of information to adopters, I designed an innovative display of imageries that allows adopters to not only easily scroll and navigate through photos but to take a large view, seeing multiple photos at a time. In addition, new ‘sticky’ call-to-action buttons that stay on the page make it easy for users to take actions. Further, text content is now clearly organized and animal attributes are displayed visually, which makes it easy to scan through the page. Lastly, the new design also facilitates other types of interactions between the adopter and shelter such as donations and sharing animals with others. Here're mobile designs: