logo banner.png

Peapod

Redesigning the world's first e-commerce experience

overview.png

My Role

UI/UX Design, Front End Development (HTML, Sass, AngularJS)


The Problem

I started working at Peapod in 2013, and by then they had been in business for over 24 years. Their website was showing its age, which hadn't been updated in 11 years, and their 4 year old mobile app was in need of an overhaul as well. I was tasked with redesigning their ecommerce experience across all platforms: mobile, tablet, and desktop.

At the time, I was the only UX designer in the organization, working with a very small team of talented developers. We had to move the customer experience into present day, ensure it wouldn't feel out of date in the coming years, all while limiting the amount of disruption to our customers that had been with us for decades. 

We decided on a single code base hybrid app, with responsive and adaptive content, that could be coded once and released to the hundreds of thousand of Android and iOS customers.


Component System

Taking an adaptive approach to the redesign, I created a library of elements that could be combined to form components. These components are designed to be used across all platforms, dynamically adjusting layout and content depending on the size of their parent container. 

Elements

With iOS 7 just being released flat design was the hot new thing, and we had to move in that direction to feel relevant.  After a thorough analysis of how other apps were transitioning from iOS 6 to iOS 7, I presented my findings and convinced my colleagues we had to move to a more flat design. But since our user base was a mix of about 70% iOS and 30% Android, I couldn't implement a solution based entirely on either company's set of interface guidelines.

One of the downsides to early flat design was the emphasis on aesthetics. It typically involved low contrast typography and interactive elements void of any signifiers, making for a frustrating experience at times. The interface redesign addressed these problems, while also adhering to WCAG 2.0 guidelines and improving the experience for people of all abilities.  

 

button examples.png

A selection of UI elements used throughout the web and mobile apps

 

components

Hero

The combination of images with transparent background and a variety of solid background colors to choose from, allow the module to closely fit the brand of each product.

 

Item Group

This component is completely customizable: displaying recommendations, sale items, sponsored items, or a category of items based on the page a user is on. 

Item list.png
 

Publishing Tools

In order to publish weekly content and build promotional pages, some HTML had to be written by marketing and merchandising employees. They weren't that familiar with the markup language, so I created a tool to help them preview what their code would look like as well as giving code examples.


Research

Over the course of the product redesign and new feature designs, we used a variety of research methods to get valuable data and insights. We performed in-person and remote usability testing, surveys, and usage analytics.

In-person usability testing session

In-person usability testing session


Feature Highlights

Home

Users can always see their cart total so it's easy to keep track of how much they're spending. Search is prominently displayed in the header, as over 50% of items added to carts come from search.

Critical information, like notifications affecting delivery times and a user's delivery and cut-off times, are clearly displayed. 


Express Shop

This feature makes it easy to shop from a grocery list. Users enter in their items, and can also add from the most commonly searched items. They are then guided through search results for each item on the list, adding products to their cart along the way.  

Users can move to the next item on their list, or quickly jump around their list and search in whatever order they want. 


Browse Aisles

Side navigation makes it possible to jump between hundreds of product categories while not getting lost. Users can sort and filter by attributes including popularity, price, nutrition information, and their past purchases. Users can also view products in a list, making it easier to compare prices and sizes. 

browse aisles berries.png

Past Purchases

The previous version of this feature made users browse their previous orders by date placed. We found that over 90% of users only shopped from their last order placed. Users also had a difficult time remembering in which order an item was placed. So instead we grouped previous orders by last order, 3 months, 6 months, and all time - more closely matching how users think about their past purchases. 

past purchases.png