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.
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.
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.
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.