PhonePe Stores
A UX case study on redesigning PhonePe Stores’ discovery and browsing experience.
PhonePe needs no introduction. The leading UPI-enabled online payment app in India that enables 30.5 million users to make seamless payments. The app also helps users discover the enormous network of close to 16.5 million stores and businesses across India.
With so many businesses listed across so many categories, it was becoming harder for our customers to find what they were looking for on the PhonePe Stores page. For a single page showcasing close to 16.5 million businesses across India — we had all the scalability and discoverability issues one could imagine. With limited, static, and sometimes irrelevant information, the Stores page had become quite redundant and just inadequate for the kind of content we wanted our users to engage with then.
The Huge Facelift
In 2019, Phonepe set out to bring alive the network effect for Stores- which simply meant that the user’s utility would increase with the increasing number of other customers and businesses. The network would continue to become more valuable with each new user and new business — more people would be incentivized to adopt, resulting in a positive feedback loop. This called for the biggest makeover the Stores Page had seen since the company’s inception in 2015.
To be the most preferred platform in India to enable customers to discover and establish strong relationships with businesses that provide relevant goods and services when needed.
My Role
I spearheaded the PhonePe Stores redesign exercise along with a team of product managers and app developers.
First things first...
The aim was to enhance and uplift the entire browsing and payment experience of Stores. To achieve this, we listed down some non-negotiable goals for the customer-facing page before we started our redesign journey:
- Seamless Payments
- Rich & Relevant information
- Browse & Find businesses easily
- Hyperlocal discovery of businesses
User Flows ( working title)
To solve our business problems and achieve our product goals, we knew it was impossible to do so without delving into user problems first. We started white-boarding our user-flows.
We noticed a whopping 95% users out of the 700k users that used to visit the Stores page bounced off without any interaction/clicking on anything. Something was definitely not working in our favor and we needed to find it and fix it!
That meant more than 700k curious, disappointed, and probably quite confused users.
Understanding user pain-points
The next step was to understand our user’s pain points in the existing Stores page and its subsequent flows. Some rough feedback from qualitative research done by Busy Bee Brands for PhonePe:
“I don’t understand this page, the map doesn’t show me directions?”
“How do I avail of offers and deals from my favorite stores?”
“This page looks incomplete..I usually can find much more useful information much faster on Google search and maps.”
“The page looks good but I don’t know what to do next”
Most customers could see the page’s potential but were either confused or put off by the interface of the section. The page was appealing to some, but they didn’t understand the value and how to avail the offers/benefits. Users coming from a higher socio-economic background felt that the page was underwhelming and for some, it even diluted the brand perception.
Post this, we conducted a broad competitor analysis to understand the landscape of similar applications and service providers. Key insights:
This got us to wonder how do Indians really shop for anything online or offline? What are they buying? How often are they buying? From where do they prefer shopping? Are they buying just for essentials or are they shopping for fun?
How do Indians really shop?
In order to understand our user’s shopping patterns and preferences, we set out to do quantitative research. Keeping the current Pandemic situation in mind, we spread across a survey with a certain set of questions based on Demographics — Psychographics, and Preferences. We received around 150 responses and purely based on few interactions, survey responses, and observations we tried to cluster the research and identify various user groups and respective insights.
What were the results?
Our old design looked something like this… 😵💫
The original page design consisted of four main components on one single page:
- Search Box
- Filters
- Map
- Categories grid
- Store cards in the listing
Once we dissected the users’ goals and pain points, we had a clear picture of all the problems that plagued the Stores homepage experience. We knew we needed to make them easier to identify and fix.
Problem 1: Cognitive overload 📚
The page was loaded with an overpowering map (which wouldn’t even load in slower connections) full of store pins, selective static categories in a bunch that wasn't helping anybody discover anything, and an endless scroll of visually inconsistent store cards that were packed with even more data. Anyone would get overwhelmed looking at this screen 🤷🏽♀️
Problem 2: No visual hierarchy ⚖️
There was no clear starting point or no obvious flow of information. The 4 main components had very distinct purposes, but the user’s intentions ad motivations were not being catered to. Why does a user visit the Stores page? What are they really looking for? What would they like to see on this page?
Problem 2: No clear action call outs🚦
Our users were lost when they landed on this page as they neither get the context of what to expect on the page before landing on it, neither did they know what to do next after landing on it. There were no clear call-outs or guidance on what to do next!
Problem 4: The users were expected to do all the heavy lifting 🕵🏽♀️
30.5 million users were using the PhonePe app for daily transactions and 16.5 million stores and businesses were featured on the Stores page and the only simplifying system feature was to localize the store listing to the user’s location. 🙄
Solutions
The overarching issue was that the users were being bombarded with all the information possible at the same time without any hierarchy. Once we understood the problems and constraints of our old design, it was time to point the team towards a common vision.
For all the problems that we had uncovered earlier, just a layout or screen redesign wasn’t going to cut it at all. Our solution had to be scalable, personalized, and engaging. We wanted something that would allow us enough flexibility to experiment across various factors like demographics and trends, and yet allow our users some time to get a hang of the elements and interactions of the new design.
Introducing the all-new PhonePe Stores! —
An immersive experience that seamlessly brings together all the things you need when it comes to hyper local shopping — whether it be for groceries, clothes, food, or anything else. It will help you discover new businesses, seamlessly make payments, and stay connected with your favorite stores to get the best products, service and offers!
1. Snappy is Sexy 💜
For the discovery of new stores, our old design relied on a deadly combination of an API intensive map that wouldn't load, a long list of categories buried under a horizontal scroll, and an endless lazy loading store listing.
It took an average of 5 seconds to load the map in slower connections. After landing on the map, it would be zoomed-out and then once the location was fetched it tried to zoom back in
We removed the map from the homepage and instead of the endless scroll of stores, we grouped relevant and impactful stores into categories and collections based on usage, location, and trends. Quick to discover, engaging, and actionable!
1.a) Popular Categories & Three-level category navigation
1.b) Collections / Suggested for you
2. My Stores 🛍
One of our key insights from the shopping preference survey was that people prefer to shop at their favorite and trusted nearby stores for daily groceries and essentials. People are quite habituated to shopping and transacting at these stores. Yet, if the same customers would try to find these stores on our app they would either have to search for the store names or scroll..scroll..scroll..
I asked myself if I were a customer walking down the road looking for my favorite stores, what would be the top 3 things I would look for? 🤔 — Card sorting came in super handy
- Store/Business Name
- StoreFront- Before a customer walks in any store, they are greeted by the storefront with a logo, banner, board, entryway..which basically become the main identity for the store.
- Is the store running any discounts or offers?
The final design was a simple personalized card with stores with just the three important things (Name, Thumbnail & Offer Availability) above the fold and easily accessible.
Launching beta
The new design was finally ready to ship. We were super excited to hear what our users thought and how much they like our new, redesigned PhonePe Stores. Before rolling out to our millions of customers, we launched our beta version to 50% of our users on android.
Monthly Clicks: Sept 2020–31mn | Mar 2021–46mn
Monthly User: Sept 2020–16.5mn | Mar 2021–21.5mn
What went right??
- The trends observed were the same as when 10% were on the new design.
- We continue to see an improvement ~3.1PPs in the share of Users coming to PhonePe Stores and interacting with the page inn the new IA. — First win☝️
- Impact on icons staying on L1: Most icons on L1 saw an increase in the user share. Category icon user share saw the most improvement of 8.5PPs — Second win☝️
- Most icons that moved to L2/L3 saw a decline in the share of users with stores clicked from map and pay now seeing the most decline
Shipping analytics after 6 months
A good chance to dissect and compare quantitative results. 😍 It helped me study and analyse the impact of all the progressive changes we had made over the past 6 months against each other.
We double-checked the data, ran the math, and found that our first hypothesis was correct.
It had worked 🎉 The simplified cardified page was performing well.
Soon, the bounce rate at the PhonePe Stores page had gone down by ~15.18% and we saw a significant increase of ~10.63% in the number of users clicking on the store listings.
After enough validation, we incrementally rolled back our old designs and moved all our users to the new designs, one group, at a time. Stay tuned to understand what changes this redesign brought about in our consumer habits and the merchant ecosystem. Karte Ja. Badhte Ja.
Team:
UX designer: Surabhi Manchalwar
Product Manager: Sidarth Mishra
Design Head: Navneet Nair
Customer Research: Siddarth Sreekumar