Problem & Goal
Cat rescue organizations often rely on outdated or hard-to-navigate websites to connect potential adopters with cats in need. Cattage aims to solve this by providing a clean, friendly mobile experience where users can browse available cats, save their favorites, and learn more about the adoption process — all in one place.
Original Submission
The final submission included 4 screens — a home page and CATalogue page designed for both iPhone 16 Pro and iPad Pro 11.
iPhone — Home
iPhone — CATalogue
iPad — Home
iPad — CATalogue
Interactive Prototype
Navigate between the Home and CATalogue pages within each viewport.
Revisions
After submission, a few issues were identified and addressed in the revised version:
- Image distortion in cards — Cat photos were being stretched or distorted when cards were resized. Fixed by applying proper fill constraints and consistent aspect ratios to all image frames within cards.
- Incorrect use of info semantic color — The blue info color was applied to general text content that carried no informational meaning. Revised so the info color is only used for ancillary system-level content such as help messages, status updates, or progress information.
- Header and tab bar outside page margins (iPad) — Elements in the header bar and tab bar were extending into the page margins. Fixed by ensuring all elements are contained within the defined column grid margins.
- Missing component for Success Stories (iPad) — The Success Story element was reused without being made into a component. Converted to a main component with instances used throughout the design.
- Header bar dimensions (iPhone) — Several dimensions in the iPhone header bar were not aligned to the 8pt grid. Corrected to ensure all measurements are multiples of 8.
Revised Prototype
The revised version addresses the feedback above with corrected image constraints and accurate semantic color usage.