Animal Crackers eCommerce Store
Adobe Xd Daily Challenge
- Design System
- Adobe XD
- Adobe Illustrator
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.
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.
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?
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.
Main navigation - Shop by Pet
Mega Menu with Shop by Pet and Top Brands
Handy chat window
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?
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.
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?
Top products will be shown beneath the main message on the home page so the user can see latest deals and savings items.
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.
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
Hi-fidelity wireframes of the experience
Hooking up the wireframes