(03)

Pet Supermarket

2021 — 2022
Role — Senior UI Designer
E-Commerce
Design Systems

Pet Supermarket is a local pet store known for its extensive selection of pet food, supplies, services, and more. Our primary objective was to create a fully responsive e-commerce website that not only embodies the updated Pet Supermarket rebrand but also significantly enhances the overall customer experience. To achieve this, we employed a modular design system and developed an extensive kit of parts, which provides both flexibility and ease of maintenance. This approach ensures that the website can be easily updated and that new content can be added frequently without disrupting the user experience. The new site design incorporates the latest branding elements (shown below), ensuring a consistent visual identity across all digital platforms and print materials.

Pet Supermarket
Click below to expand and view full layout

Pet Supermarket
Category Landing Page (CLP)

Pet Supermarket
Product Detail Page (PDP)

Pet Supermarket
Education Program
Pet Supermarket
Pet Supermarket
Pet Supermarket

Streamlining the navigation

The navigation utilizes the branding's new pet illustrations for each category, making it easy to locate everything based on which animal you're shopping for. Drawing inspiration from competitors like Chewy, we focused on refining the search functionality so users can effortlessly filter through the 2,500+ items available at Pet Supermarket. Given that over 60% of traffic comes from mobile devices, we prioritized ensuring that the desktop experience seamlessly translates to mobile.


Pet Supermarket
Your Cart

Pet Supermarket
Checkout

Pet Supermarket
Order Confirmation

The checkout process is designed to be both effective and efficient. Users can view items in their cart, including weights, promotions, and subscriptions. They have the flexibility to remove items, adjust quantities, and complete their purchase with ease. Throughout the checkout and confirmation screens, we incorporated a variety of peticons to maintain consistent branding and add an illustrative quality to the page.

Pet Supermarket
Pet Supermarket

V.I.P — Very Important Pet

We saw an opportunity to expand on the branding of VIP Rewards. We kept in mind what could blend in well with the pre-existing brand but be recognizable on its own throughout the site. We landed on creating a star icon, and kept that shape prevalent anytime rewards could be earned. From there we built out animal collages with peticons and photography, all centered and focused on the star.


Pet Supermarket
Account Dashboard

Pet Supermarket
Ways to Earn Rewards

Pet Supermarket
V.I.P Account Dashboard