Jump to

Jump to

Jump to

Designing a Storefront builder
for Small businesses

Designing a Storefront builder
for Small businesses

A much easier way for emerging businesses to
showcase, and sell their products.

A much easier way for emerging businesses to
showcase, and sell their products.

Storefront page builder interface on Razorpay dashboard

Designing a Storefront builder
for Small businesses

A much easier way for emerging businesses to
showcase, and sell their products.

Storefront page builder interface on Razorpay dashboard

ROLE

ROLE

ROLE

Lead product designer

TEAM

TEAM

TEAM

1 Designer, 1 PM, 4 Devs

TIMEFRAME

TIMEFRAME

TIMEFRAME

Oct 2022 to Jan 2023

Overview

Small & medium sized businesses rely heavily on Razorpay's Payment pages - an intuitive custom page builder, to quickly start accepting payments for their products, services, donations, events and so on.

Small & medium sized businesses rely heavily on Razorpay's Payment pages - an intuitive custom page builder, to quickly start accepting payments for their products, services, donations, events and so on.

Small & medium sized businesses rely heavily on Razorpay's Payment pages - an intuitive custom page builder, to quickly start accepting payments for their products, services, donations, events and so on.

The product premise is simple: Click a button > Preview your payment page > Edit a few key details > Share with your customers.

Payment pages uses a What-You-See-Is-What-You-Get (WYSIWYG) interface for an intuitive and gratifying page-creation experience.
Real pages created by businesses for a variety of purposes, including selling shirts, getting donations, and organising events.
Payment pages created by a business to sell their shirts

It started with a discovery...

We observed that a significant number of ecommerce businesses were using Payment pages as “Makeshift stores” even though it was not optimized for such use-cases...

We observed that a significant number of ecommerce businesses were using Payment pages as “Makeshift stores” even though it was not optimized for such use-cases...

✢ RESEARCH ✢

Why solve this problem?

If a business owner wants to set up a storefront, what’s the first thing that’s likely to come to their mind?
Let’s use shopify, dukaan, wix stores, woocommerce or any of the other options. We also thought so.. But, on the other hand, we had 1000s of makeshift stores that these owners had already created. Why?

There was also a substantial business opportunity:
Ecommerce businesses were a tiny segment (15%)  of the Payment page user base but they contributed significantly to our payment volume (35%).
The issue was that nearly half (44%) of these businesses stopped using Payment pages within 3 months. But why? Solving these problems could translate into significant business impact.

To get a quick signal, the PM and I sent a Hotjar survey on the Razorpay dashboard with a single question:

To get a quick signal, the PM and I sent a Hotjar survey on the Razorpay dashboard with a single question:

To get a quick signal, the PM and I sent a Hotjar survey on the Razorpay dashboard with a single question:

“Are you struggling to set up a lightweight storefront?”

“Are you struggling to set up a lightweight storefront?”

“Are you struggling to set up a lightweight storefront?”

We received 650 Yes in a day. This convinced us to dig deeper..

We received 650 Yes in a day. This convinced us to dig deeper..

We received 650 Yes in a day. This convinced us to dig deeper..

Understanding the Problem space

What can we learn from already created Makeshift stores?

We did not know much about these businesses yet or what their problems were.. (we only had many assumptions)

I scrutinized 1000s of Makeshift stores created by these ecommerce businesses...

I scrutinized 1000s of Makeshift stores created by these ecommerce businesses...

I scrutinized 1000s of Makeshift stores created by these ecommerce businesses...

...observing the products they sold, prowling their social media, chatting with some of them, understanding their sales trends and checking frantically if they had a storefront elsewhere.

This helped us develop a much deeper sense of the context. Initially, I spent 1-2 days skimming through a few pages but the study proved so valuable that I continued the analysis full-time during the following week.

We observed that there were

We observed there were

2 kinds of Makeshift stores…

2 kinds of Makeshift stores…

2 kinds of Makeshift stores…

← Kind 1: All the products were listed on a page

↑ Kind 1: All the products were listed on a page

← Kind 1: All products were listed on a page

eg: Greentactics sold bioenzyme products. Their customers typically discover their page via Insta bio.

But, if we look closely: It is hard for these businesses to provide details about their products.

For eg: these product images are tiny and not very legible.

But, if we look closely: It is hard for businesses to provide details about their products. For eg: these product images are tiny and not very legible.

But, if we look closely: It is hard for businesses to provide details about their products.

For eg: these product images are tiny and not very legible.

(this is a representation of the nature of problems and are not the only or top problems)

There's no easy way to select a particular variant of a product. In this case, the buyer needs to type in the variant name in the textbox.

(this is a representation of the nature of problems and are not the only or top problems)

← Kind 2: Each page listed one product

↑ Kind 2: Each page listed one product

eg: Vasthram silk had created 200+ payment pages, one for each saree

eg: Vasthram silk had created 200+ payment pages, one for each saree. They typically marketed sarees on Facebook groups and attached links to respective payment pages

They typically marketed sarees on their Facebook groups and attach links to respective payment pages

They typically marketed sarees on Facebook groups and attached links to respective payment pages

But, how do their customers browse or search their complete catalog?

How do they place a single order if they are buying multiple items?

(this is a representation of the nature of problems and are not the only or top problems)

User interviews

Talking to owners of these small businesses

I conducted a series of interviews with a goal to answer 3 major questions:

  1. Why do these businesses use Payment pages for this?

  2. Why do they not resort to a more “mature” ecommerce platform? (such as: shopify, woocommerce & others)

  3. What challenges are they currently facing?

I conducted a series of qualitative interviews with a goal to answer 3 major unanswered questions:

  1. Why do these businesses use Payment pages for this?

  2. Why do they not resort to a more “mature” ecommerce platform? (such as: shopify, woocommerce, dukaan, square, wix & 100s more)

  3. What challenges are they facing in running a store this way? (we had many hypotheses and wanted to in/validate)

Sheet that we used to manage our interview calls

To cover a diverse set of businesses, we used signals such as: their industry, their sales volume, are they active or have they churned, the no. of pages they had created.

I made a detailed script with a list of starting questions - mostly thinking of these as prompts for the interview and relying on pointed follow-up questions to dig deeper.

The PM and I made many cold calls. We ended up having conversations with 30 business owners.

Transcripts and notes from interviews

We made many discoveries. The most important realisation was that...

Insights

there were 3 distinct user segments..

We discovered that these businesses fell on a spectrum. Depending on the maturity of the business, their needs evolved and this affected how they leveraged Payment pages.

What business owners had to say

What users had to say

1

2

3

4

of 3

of 3

❛❛

Customers don’t buy our products because they cannot view important details.”

Listen

Snippets from user-interviews with Greentactics, Vatsalas kitchen and Nature’s work

❛❛

Customers don’t buy our products because they cannot view important details...”

Listen

Snippets from user-interviews with Greentactics, Vatsalas kitchen and Nature’s work

Businesses could not showcase products well - Only 2 lines of product description could be provided. Images were tiny, illegible thumbnails. This significantly affected customers’ intent to purchase. To solve this, business owners were forced to use workarounds.

On ← this page, Vatsalas kitchen numbered their products and added their catalog so that customers could see larger product images and details.

Businesses could not showcase products well - Only 2 lines of product description and tiny product images could be added. This significantly affected customers’ intent to purchase.

To solve this, business owners used workarounds. On ↓ this page, Vatsalas kitchen numbered their products and added their catalog so that customers could see larger product images.

Most businesses had 50+ products but one could only add 25 products per Payment page.

To workaround this, some business owners created multiple pages →. This would lead to customers having to juggle between pages and having to place multiple orders.

Most businesses had 50+ products but one could only add 25 products per Payment page.

To workaround this, some business owners created multiple pages ↓. This would lead to customers having to juggle between pages and having to place multiple orders.

Customers were concerned if the “form” was authentic, especially for high order values. Understandably, Makeshift stores did not seem to inspire trust.

On ← this page, the business owner attempts to establish trust by adding an “official” text-marker.

Customers were concerned if the “form” was authentic, especially for high order values. Understandably, Makeshift stores did not seem to inspire trust.

On ↓ this page, the business owner attempts to establish trust by adding an “official” text-marker.

There were many other experiential issues too.
For example: Shipping fee options couldn’t be provided (standard vs express), Variants cannot be added, etc

On the page →, basic delivery fee is added as a mandatory field. To get express delivery, the customer must “select” the differential amount. Not really easy to understand.

There were many other experiential issues too.
For example: Shipping fee options couldn’t be provided (standard vs express), Variants cannot be added, etc

On the page ↓, basic delivery fee is added as a mandatory field. To get express delivery, the customer must “select” the differential amount. Not really easy to understand.

there was an Opportunity...

As businesses scale, they need to eventually graduate to a mature storefront platform and that’s okay, we won’t focus on their problems.

But, we can focus on solving for businesses who are nascent and in early stages of growth: they are validating their business ideas and cannot risk spending a lot of time/energy into these problems, a mini storefront solution

As businesses scale, they need to eventually graduate to a mature storefront platform and that’s okay, we won’t focus on their problems.

But, we can focus on solving for businesses who are nascent and in early stages of growth: they are validating their business ideas and cannot risk spending a lot of time/energy into these problems, a mini storefront solution that comes packaged with their payment solution works perfectly for them.

We projected that there were nearly 1000s of businesses who already used Razorpay and fell into this category

(remember our initial survey?)

that comes packaged with their payment solution works perfectly for them.

We projected that there were nearly 1000s of businesses who already used Razorpay and fell into this category

(remember our initial survey?)

Reframing the Problem

Most small businesses look for simpler storefront solutions during their initial years, until they scale to a point when a mature platform becomes necessary.. 

How might we help small/medium sized ecommerce businesses to easily showcase and sell their products on Payment pages?

✢ SOLUTION ✢

Introducing Storefront pages
a new template of Payment pages..

Introducing Storefront pages
a new template of Payment pages..

Introducing Storefront pages
a new template of Payment pages..

Buyer experience

Let’s see how Greentactics' storefront would look like.

Product listing

With the new storefront page, they can showcase products with bigger images, organize by categories and have a brand identity

Product details

They can also share links to a specific product's details with customers.

We plan to provide cross-sell opportunities and support for add-ons and variants, on this page.

Cart & Checkout

Once the buyer proceeds to purchase, we decided to let another Razorpay’s product to take over the journey:

Due to its maturity and suite of features, nearly all checkout related problems and needs were handled.
(eg: providing offers, pre-filling customer details, solving for RTO etc)

Due to its maturity and suite of features, nearly all checkout related problems and needs were handled.(eg: providing offers, pre-filling customer details, solving for RTO etc)

Storefront pages were designed mobile-first due to vast majority of buyers typically using mobile devices.

Home/Product list ➔
Product details ➔
Cart ➔
Magic checkout ➔

While we felt that these designs used familiar ecommerce patterns. To our merchants, this was a big level-up. They finally had a properly functioning storefront.

While we felt that these designs used familiar ecommerce patterns. To our merchants, this was a big level-up. They finally had a properly functioning storefront.

Creating a store

Let’s see how business owners can create their storefronts

On the Razorpay dashboard, they can head over to Payment pages section and click “Create”.

In the selection menu, the 1st option opens the existing generic page editor and the 2nd option opens the new storefront page editor

Store creation view

Business owners can add their products, customize their store while looking at a live preview and do much more, all in one place.

Cart & Checkout

Once the buyer proceeds to purchase, we decided to let another Razorpay’s product to take over the journey:

Due to its maturity and suite of features, nearly all checkout related problems and needs were handled.
(eg: providing offers, pre-filling customer details, solving for RTO etc)

Due to its maturity and suite of features, nearly all checkout related problems and needs were handled.(eg: providing offers, pre-filling customer details, solving for RTO etc)

Cart & Checkout

Once the buyer proceeds to purchase, we decided to let another Razorpay’s product to take over the journey:

Due to its maturity and suite of features, nearly all checkout related problems and needs were handled.
(eg: providing offers, pre-filling customer details, solving for RTO etc)

Due to its maturity and suite of features, nearly all checkout related problems and needs were handled.(eg: providing offers, pre-filling customer details, solving for RTO etc)

We optimized the entire journey for mobile devices, as well because a sizable chunk of this market relied heavily on mobile-devices to create and manage their storefronts.

Store creation (first time) ➔
Product addition ➔
Store creation ➔
Preview ➔

Business owners are usually overwhelmed while using complex store builders. As a principle, we wanted to ensure that users could setup storefronts as easily as possible.

Impact

The key product goal for Payment pages was to improve adoption. "Monthly active pages" was our P0 OKR (i.e. no. of pages that were actively receiving transactions)

Launching storefronts was a bet to nearly 2x this growth. After shipping and observing for 4 months, we saw nearly a 23% increase in these numbers.

74K

74K

74K

Monthly active pages

Monthly active pages

Monthly active pages

92K

92K

92K

Monthly active pages

Monthly active pages

Monthly active pages

23%

23%

23%

in 4 months of release

Only using in-product banners and with no GTM, we observed nearly 5% monthly increase in active page numbers.

To start seeing businesses create their Storefronts on this product was truly the greatest kick.

Thanks for your time

Contact

hi.vinodxyz@gmail.com

Copied

No copyrights ✦ MADE by yours truly

Thanks for your time

Contact

hi.vinodxyz@gmail.com

Copied

No copyrights ✦ MADE by yours truly

Thanks for your time

Contact

hi.vinodxyz@gmail.com

Copied

No copyrights ✦ MADE by yours truly