Overview

Research

Secondary

Interviews

Painpoints

Insights

Problem

Solution

Design

Decisions

Challenges

Impact

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

-

peek into process -

Explorations & key design decisions

The above solution resulted from many trade-offs, constraints, and opinions. Below are some alternative ideas that we initially explored and some potential improvements.

01

Alternate version of creation view

Initially, we explored the WYSWYG approach for creation view. While seemingly intuitive, adding products or introducing features was challenging. Unlike classic payment pages where WYSWYG worked well, the form and preview pattern seemed better for Storefront pages. It also easily adapted to mWeb.

02

Ways to onboard users to Storefront page

03

Easier way to add products

04

Stores as a new Razorpay product

05

Issues with merging Storefront & Payment pages

06

Workshopping ideas

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

Creating a store

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

—

One view to do everything + reiterate Design principle

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

—

One view to do everything + reiterate Design principle

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

—

Left side: Products are shown, store title and contact info

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

—

Left side: Products are shown, store title and contact info

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

—

Right side: Preview of the store

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

—

Right side: Preview of the store

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

—

Adding a product - easy to fill, essential info only

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

—

Adding a product - easy to fill, essential info only

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

—

All details are filled - eg: discounts can be added, big need

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.

—

All details are filled - eg: discounts can be added, big need

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.

—

Product is added to the store

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

Magic checkout

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)

—

Product is added to the store

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

Magic checkout

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)

—

Preview on multiple devices

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

Magic checkout

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)

—

Preview on multiple devices

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

Magic checkout

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)

—

Success

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

Magic checkout

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)

—

Success

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

Magic checkout

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)

✱
✱
✱

It started with a discovery:

Many ecommerce businesses were using Payment pages to create “Makeshift stores” even though it was not optimized for such use-cases.

Many ecommerce businesses were using Payment pages to create “Makeshift stores” even though it was not optimized for such use-cases.

There were

We observed there were

2 types of Makeshift stores.

2 types of Makeshift stores.

2 types of Makeshift stores.

← Type 1

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

← Kind 1: All products were listed on a page

All products are listed on a page

Businesses like Greentactics showcased all their products on a single page.

Their customers discovered the store via their Instagram bio.

But, if we look closely, there are many problems.

For example, it is very hard to showcase products, images are not very legible and so on

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.

← Type 2

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

← Kind 1: All products were listed on a page

A single product is showcased on a page

Businesses like Vasthram Silk had created nearly 250+ payment pages, each showcasing a particular 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 products on their Facebook group and would attach links to respective payment page.

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

—

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. Despite having a store, these businesses were struggling with experiential problems.

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, we sent a survey on the Razorpay dashboard with a single question:

To get a quick signal, we sent a survey on the Razorpay dashboard with a single question:

To get a quick signal, we sent a 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.

—

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 type of Payment pages

— Introducing Storefront pages —
a new type of Payment pages

— Introducing Storefront pages —
a new type 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:

Magic checkout

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:

Magic checkout

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:

Magic checkout

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.

Thanks for your time

Contact

hi.vinodxyz@gmail.com

Copied

LinkedIn

Projects

Storefront builder

Settlements revamp

No copyrights ✦ crafted by yours truly