Redesigning the world's first e-commerce experience
UI/UX Design, Front End Development (HTML, Sass, AngularJS)
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.
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.
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.
A selection of UI elements used throughout the web and mobile apps
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.
This component is completely customizable: displaying recommendations, sale items, sponsored items, or a category of items based on the page a user is on.
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.
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.
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.
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.
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.
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.