organization

Risor Infotech Pvt Ltd

Our role

User Experience Design

duration

Feb 2020 - Jan 2023

summary

We worked with Risor to design a B2B commerce platform that connects manufacturers, distributors, wholesalers, and retailers. The platform simplifies wholesale buying and selling, helping businesses discover products, build trusted relationships, and manage orders through a seamless mobile-first experience.

The Challenge

For millions of retailers in India, buying inventory often means traveling to wholesale markets, spending valuable time and money, and relying on personal relationships to find trustworthy suppliers.

To reduce frequent trips, retailers typically purchase inventory in bulk, tying up working capital and increasing the risk of unsold stock. On the other hand, manufacturers and distributors are limited by their existing buyer network and face delayed payments and slow business growth.

The opportunity was to create a platform that makes wholesale buying and selling simpler, faster, and transparent for everyone involved.

Project Goals

Create a B2B commerce app that could empower wholesalers, distributors, manufacturers, and brands to engage and grow their network of buyers. A product that could give SMEs the ability to create their B2B digital store with a few taps.

1. Differentiate from competitors through innovation and become a brand in the market.

2. Create a loyal customer base and show them how to grow their business beyond their turf.

3. Empowers customers to make good decisions and establish credibility through great service.

4. Use technology to solve hardest of problems while being presented in the simplest of forms.

Research Methods

1. SMEs Interviews
2. Empathy Maps
3. Personas
4. Problem Statements
5. User Journey Maps
6. Competitive Audit
7. Ideation

Discovery Workshop

• What's the product?
• Who will use it?
• What do our users need most?
• Which users are most important to the business?
• What challenges do we face moving forward?
• Who do we see as our biggest competitors?
• What internal and external literature should we view to familiarize ourselves with the product and technical domain?

product vision

Create an all-inclusive, fast, and safe market for SMEs who want to buy/sell online products.

business goals

At present, we're not concerned with revenue. Build a great product first, and then we’ll see how to monetize.

budget and schedule

Initially it would require several engineers for production and upkeep of the app after launch.

stakeholder perception

SMEs are cautious when doing business online, so every interaction had to reinforce transparency.

SMEs Interviews: Summary

We talked with a few SMEs and turned their insights into empathy maps to understand their needs. We had a few assumptions such as they aren't tech savvy and they want to stick with traditional offline businesses.

But we found out they are pretty knowledgeable about online business, and they do want to use it. But what they lack is a good product that can fulfill their business needs.

catalog

Creating an online catalog and updating it regularly on different platforms is difficult.

leads

Filter through lot of comments to get a few leads on social media.

navigation

Existing B2B apps are busy and inspired by B2C patterns, which results in confusing navigation.

accessibility

B2B products either poorly support or don't support native languages at all.

Personas

Problem Statements (Revised)

User Journey Map: Vinay Soni

Goal: Put his catalog online in multiple platforms and update it regularly

Competitive Audit

Goal: Compare the user experience of each competitor's app

general information

mobile app interaction

Ideation

We did an ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. Our focus was specifically on easily catalog creation and providing accessibility features.

revised goal statement

Starting the Design

1. User Flow
2. Paper Wireframes
3. Digital Wireframes
4. Usability Studies

User Flow

Use the Risor app to create your catalog

Paper Wireframes

Key path scenario: Adding product to catalog

1. Vinay launches the RISOR app by tapping the designated icon on his phone.

2. Enters his number to either use existing account or to create a new one.

3. Receives an otp to verify his number.

4. Types his name and his business name, then clicks 'Finish'.

5. Lands on chat/home screen and clicks on the 'Shop' icon on bottom app bar.

6. Scrolls through the shop screen and taps on 'Catalog Manager'.

7. Taps on 'Add product' to add a new product to his catalog.

8. Adds photos, name, price, and description of a product and saves them to his catalog.

Digital Wireframes

Key path scenario: Adding a product to catalog

Only asks for the necessary information to quickly onboard the users

Chat acts as homepage where sellers can get their orders notifications

A dedicated area to find all the tools to run your business smoothly

A non-intimidating interface encourages users to create their catalog

Paper Wireframes

Online shop scenario: Purchase an item

1. Vinay opens Sadhguru's shop by tapping shop icon inside its chat details.

2. Taps the category 'women' from the catalog home screen.

3. Selects a product and adds appropriate quantities to his cart.

4. Goes to the cart screen to place his order.

Digital Wireframes

Online shop scenario: Purchase an item

Usability study

Usability Study Parameters

research questions

1. How long does it take for a userto add a product in the app?

2. Are users able to successfully create the catalog?

3. What can we learn from the steps users took to create a catalog?

4. Are there any parts of the catalog creating process where users are getting stuck?

5. Is the ordering process easy for the customer?

participants

• 7 participants

• Participants between the ages of 20-60 who do business in tier II or tier III cities.

• Either buyers only or buyers and sellers both.

methodology

• 25-30 minutes

• India, remote

• Unmoderated usability study

• Users were asked to add a product on his catalog on a low-fidelity prototype

Usability Study Findings

lack basic key inputs

The "add product" form is too basic and lacks many key features, such as add variants, moq, categories, lot size etc.

how to find new sellers

Sellers who are also buyers need a way to see other sellers (manufacturers, distributors, etc.) to negotiate a good deal.

no option to share products

No way for sellers to share their products on social media or on  WhatsApp. It's also one of the problem statements we found earlier.

missing product detail view

A product detail view is crucial to seeing the product in greater detail as well as checking out all the variants to make an informed decision.

Refining the Design

1. Mockups
2. High-Fidelity Prototype
3. Identity
4. Accessibility

Mockups

Design flaws

lack basic key inputs

missing product detail view

Critical thinking

find new sellers easily

We changed the Status screen to the Home screen, which is basically a feed page. Here, buyers/sellers can see the status updates, products, and likes from people that they follow, as well as find popular stores, top categories, and best sellers across Risor.

option to share products

As soon as sellers publish their products on Risor, we show them a dialog box where they can further share their products on various social media channels. Additionally, we also provided them an option to add their Facebook account to our app and select the particular page where they automatically want to publish their products.

Key Mockups – App

Key Mockups – Web

Identity

A typical time-tested blue & white combination. A light background provides a calm feeling and keeps people on an app/website for a relatively long time whereas the color blue gives a corporate feel.

The choice of font, Avant Garde, was based on its geometrical shapes, which give it a technological feel. Incidentally, the name Avant Garde aptly fits Risor, as Risor also favors new, experimental ideas and methods.

typography

color palette

Accessibility Considerations

languages

In the first version, provide an option to use the app in English and Hindi and then progressively add additional languages.

alternate text

Provide access to users who are vision impaired through adding alt text to product images.

dark mode

A dark mode to accommodate people who need more contrast to view things correctly.

Going Forward

1. Takeaways
2. Let's Connect
3. Next Steps

Takeaways

impact

Our users found the experience intuitive to navigate, more engaging through the use of imagery, and supported by a clear visual hierarchy. One piece of feedback that stood out was:

"Risor made B2B e-commerce feel like child's play. It empowered people who have historically been underrepresented in this space."

what we learned

We found that, in B2B e-commerce, users' needs, motivations, and behaviors are completely different from those in B2C. We also learned that experience in an adjacent market doesn't always help and can sometimes hinder your progress.

You have to keep in check your biases and actually unlearn a thing or two to learn the new patterns and practices.

Next Steps

01: post-launch research

Conduct post-launch research to measure how successful Risor is in reaching its goal of empowering SMEs from non-metropolitan cities to do b2b e-commerce business.

02: empower people

Add educational resources for SMEs so that they can learn online B2B e-commerce nuances.

03: empathize more

Discover offline B2B e-commerce practices and patterns and use them online to see their impact.