Overview
This project commenced during my time as the experience design intern at Peapod Digital Labs. Peapod Digital Labs is an American e-grocery platform. It is in partnership with local retail brands - Stop and Shop, Food Lions and Giant foods. Our project was associated with Stop and Shop’s desktop/mobile web platform.
In redesigning the search functionality, we aimed to alleviate user pain points while searching products to buy, online as well as in-store. As part of the first sprint, the feature is now live in the market.
So far the impact of feature redesign has been very positive. The 'Add to cart' sessions of users has increased from, 13.86% to 19.81% and 'Add-to-cart' Revenue increased from, '~ 800k to ~ 1.4M'
My Role:
UX/UI designer, UX Researcher
Project Length:
4 months
Members:
Experience Design team, Product Managers, Development team
Tools Used:
Sketch App, Figma App
Methods Used:
Product Analysis, User Flows, Wireframing, Prototyping
Our Goal
This was a redesign that had multiple goals. They consisted of:
1) Enhancing search functionality
2) Improving browsing experience
3) Optimizing product discovery and find-ability
4) Switching from product tile grid view to product list view
Our goal was to complete these milestones to reduce user churn and increase user adoption
what were we trying to solve?
The search functionality of the user app was limited and restricted. Users were offered limited options in search results. The desktop navigation was not utilized to its full potential. The search results were not completely relevant. This in turn caused much user frustration.
Our Solution
In order to address this problem, we chose to redesign the whole search functionality. We did it, in order to promote user freedom in product discovery as well improve user conversion rate by making our products easily searchable.
Our Process
Research, Ideation, Conceptualization and Iteration
Research
We had two main goals for our research study. First we wanted to understand what could constitute a 2.0 version of our current search bar. And second we wanted to understand how we can adapt these new search features into multiple devices.
Analyzing the current platform
Verifying with the experts
After analyzing the current platform, the key insights were discussed with the Product and XD team. After getting a green signal from them, the conceptualization began
Competitive Analysis
Next step in the research was to analyze the existing platforms with great search systems as well platforms that specialized in grocery products. We did this in order to learn how to properly design our search for multiple devices. This allowed us to leverage off existing platforms to recreate our search functionality.
In this analysis, we looked at platforms such as Instacart, Amazon, Sam's Club, Best Buy and many more..
Statement Cards
For our research we spoke to users with different shopping goals and dietary needs, interviewed and conducted a broad range of desk research. All of this resulted in statement cards about users.
Ideation
In exploring different UI iterations, we decided to explore different options for mobile and desktop
Desktop Version
Some options that we ideated for desktop:
1) Limited search and multiple product suggestions with a scroll bar on product suggestions or vice versa
2) CTA of aisle location in product suggestions
1) Limited search and multiple product suggestions with a scroll bar on product suggestions or vice versa
2) CTA of aisle location in product suggestions
Mobile Version
1) Mapping of image/thumbnail with the product keyword
2) Mentioning Aisle location for every product
3) Dynamic Product carousal that changes with each input string in the search bar
2) Mentioning Aisle location for every product
3) Dynamic Product carousal that changes with each input string in the search bar
Wireframing
As we already had a maintained design system, we directly moved towards high fidelity conceptualization
Conceptualization
We started visual conceptualization of our ideas...
Auto-Correct Results
Currently, if the user makes a spelling error, the search screen goes blank.
Impact: Imagine an instance, where the user types in a single string and nothing appears. The user could assume that the required product isn't available and that could end up in loosing customers.
In this concept, we propose a solution that in spite of a spelling error, relevant search results can still appear. This could help in retaining customers
Single String
User types in one string --> In this case --> String p
Relevant keywords starting with letter 'p' will start appearing on the left hand side
Simultaneously, product suggestions related to the first keyword will start appearing.
Dynamic Element
In this concept, whenever user hovers over a keyword, search suggestions change.
Here, for desktop, as the user hovers over keywords starting with letter 'p', suggestions on the right starts to change
Mobile designs
Once desktop ideas were pitched, the product team approved it after some iterations. After the approval, we started working for mobile ideas. Our main challenge here was to replicate the design on desktop for consistency, while keeping the currently shown information intact
One thing to note here is, while pitching for desktop, we got a feedback that robust prototyping for mobile would be optimal. Accordingly, we created a prototype to add more interactivity to the design...
As part of redesign, for mobile, we designed a dynamic product carousal which changes with each input string. On click, the product carousal expands to a product tile carousal
Below the product image carousal would be the search suggestions. We thought, this design structure would replicate the desktop redesign to an extent
Feedback
We discussed the desktop and mobile designs in our sprint meetings and had constructive feedback.
Impact
As the feature is now live in real-time, here are the statistics we have received so far,
We see a huge increase on our ATC(Add to Cart) rate sessions:
Increase from 13.86% to 19.81%
ATC Revenue has also drastically increased from ~800k to ~1.4M
Increase from 13.86% to 19.81%
ATC Revenue has also drastically increased from ~800k to ~1.4M
Next Sprint
As part of search 2.0, we decided to integrate savings and recipes in the next sprint
Lets take a look at the current UX flow of a customer finding coupons and savings
Challenges and Pain points
After diving into some user research, we gained some key insights into some challenges that users face while searching for coupons and savings
1) User has to scroll through 'savings' section to find offers for specific products
2) No filter/search bar to exclusively search in the savings section
1) User has to scroll through 'savings' section to find offers for specific products
2) No filter/search bar to exclusively search in the savings section
Solution
What did I learn?
Search in any standard is a complex feature to tackle. Though there are many instances of good search design, learning how to adapt it to your specific platform is a large task. I honestly thought it would be quite simple but I realized such a simple feature has many things associated with it. Additionally, many users use search differently. This is where data driven design is important in regards to making decisions. Working with a small team, I learned communication and cross-functioning is of utmost importance when it comes to launching a successful products and maintaining internal peace.