"RECOGNIZING THE NEED IS THE PRIMARY CONDITION FOR DESIGN."
- CHARLES EAMES

SHOP GROCERIES

role:
designer, developer
platform:
web
deliverables:
wire frames, mockups, finished products
tools:
photoshop, illustrator, html, css, js

The Problem

Market America was introducing online groceries, a new category to their products. This is not only innovative for the company, but innovative for e-commerce overall.

My challenge was building a UI that would fit into our e-commerce platform, while still replicating an in-store grocery shopping feel.

Solution

When I got involved with the project, a UI for groceries was already started on – primary focused on the home page. Understanding the goals of this project and the unique UX, I decided to start with a userflow diagram. This was to understand how a customer could use this new UI.

ac-variations-01
Shop Groceries User Flow – Property of Market America

I began by researching the shopping habits of grocery customers. I found that often a customer will glance at the shelves in an aisle, find the product they want, and quickly place it in their cart. I came up with the idea to organize the product categories like grocery store aisles to mimic the grocery store feel. I also came with an idea to forgo traditional product pages and just have a “quick view” for the customers to place the products in their virtual cart. This would keep the customer in the “aisle” product category pages and simulate a customer picking up a product to view it in the store.

ac-mockup-02
Shop Groceries Mockup – Property of Market America

I built the Shop Groceries landing page with HTML and CSS so it was fully-responsive. I also worked with the SHOP.COM team to develop components for the site. They created a custom-script “Quick View” component. I added this “Quick View” component and product carousel and pop-up auto-play YouTube video components to add interactive features to the site.