Animal Crackers eCommerce

Animal Crackers eCommerce Store

Company

Adobe Xd Daily Challenge

Animal Crackers Logo

Process

  • Branding
  • Design System
  • Wireframes
  • Prototypes

Tools

  • Adobe XD
  • Adobe Illustrator

Overview

The objective of the project was to create an online pet store experience using Adobe Xd to problem-solve and design with the user in mind.

There were various features of the store that needed attention, such as Efficient Navigation, User Support, Top Products, Product Page, Shopping Cart and Checkout.

To solve these challenges, I drew from my many years of experience in eCommerce and conducted market research on sites like Amazon, Petco and PetSmart.

Design System

To start the project, I designed elements to easily construct the user experience and interface. The name Animal Crackers sounded whimsical, fun and a little bit quirky.

Based on this branding, I created the logo, color scheme and typography.

Animal Crackers Design System
Animal Crackers Design System
Animal Crackers Design System

Efficient Navigation

User research shows that when visitors come to the site, they prefer to filter by pet rather than product. How would this impact the information architecture of the site, particularly the page navigation at the top?

Solution

The Shop by Pet is the first link the user will see on the top left of the navigation menu. There is a down arrow indicating that the menu can be expanded to reveal more options for searching products by pet.

For the mega menu, each pet category is accessed through the top navigation buttons. The default is Dog. Once the user clicks on the button, it changes to orange, indicating that pet category is selected. Each category displays the top-searched subcategories. The Shop More link will take the user to a list of those products in the full pet category.

Top Brands for each of the categories with corresponding pet picture will show at the right of the navigation.

Animal Crackers Shop by Pet

Main navigation - Shop by Pet


Animal Crackers Menu

Mega Menu with Shop by Pet and Top Brands

Animal Crackers Chat Window

Handy chat window

User Support

While site organization helps decrease a user’s need for help, there may be more finite questions such as “how do I find all grain free products?” What can be implemented or added to the landing page experience to help users connect with customer support?

Solution

The chat icon will be located in the lower right corner of the browser viewport and follow the user's scrolling. This way the chat window will be available whenever the user needs it.

Animal Crackers Chat Icon

Top Products

You’re given a Google Sheet that includes a complete list of products and are tasked with organizing the information in a way that aligns with marketing initiatives. Which products will you feature on the landing page?

Solution

Top products will be shown beneath the main message on the home page so the user can see latest deals and savings items.

Animal Crackers Top Products

Top Products layout

Product Page, Shopping Bag, Checkout

User research shows that shoppers want a fast and easy checkout where they don't need to provide too much information.

Solution

The product page has a large image and supplemental images that may be viewed. Reviews and rating are a deciding factor for many shoppers, so putting that at the very top of the product information was vital.

I also added a marketing message as an incentive for the shopper to sign up for weekly email specials. This will give the customer a deal while helping to drive traffic to the website.

Wireframes and Interactive Prototype

Animal Crackers Prototype

Hi-fidelity wireframes of the experience


Animal Crackers Flow

Hooking up the wireframes

Interactive Prototype