Overview

Digitalization has paved the path for the growth of e-commerce in India, thus transforming the face of business. The Nature’s Bowl is an e-commerce which is bricked upon the idea of providing healthy, wholesome and delicious organic food across India. In the summer of 2020 I got the opportunity to  designing the Nature's Bowl e-commerce to cater to the needs of the people.

Project Info

Objective - Strategy and Design

Tech - Figma, Miro, Ditto, Adobe CC

Duration - 12 weeks

Background

The growth in the digital infrastructure in India triggered the increase in the digital literacy making e-commerce one of the fastest growing sector. Entrepreneurs Devansh and Tejas behind The Nature's Bowl saw this as an opportunity to bring their vision to life.

"Create Awareness of the healthy products for the people and for the planet"


The Natures Bowl took this signal to enter the e-commerce market to provide healthy and delicious organic food to the consumers. Our Challenge was to evolve with the consumer, understanding their needs in order to enter the competitive e-commerce sector in India.

My Role

I was the Product designer for this project. I was working along with another designer to strategize, conceptualize, design and deliver the hand-offs to the developer for the e-commerce platform.

Understanding the Customer

I worked along with another designer to address customer behavior and needs, proposed features shedding some light on the insights.

Product Strategy

I designed frameworks and prototypes to define the product vision allowing me to ideate and organize ideas.

Scope Definition

I collaborated with the stakeholders and project owners to understand the business needs and define the customer goals. Additionally I formulated the feature set for the the product launch

Design

By collaborating with a designer I designed customer journeys, wireframes, prototypes and design specs for the proposed platform.

Business Objective

01

Presenting The Nature's Bowl core values: The Honest Food Revolution, Awareness of Natural organic products to the audience.

02

To make the company stand out from its competitors emphasizing on the core qualities of the product like no added chemicals, sustainable packaging, sustainably farmed.

03

Enabling customers to complete task from discovering products to completing the purchase, completely through the e-commerce platform.

Design Process

Literature Review

Before getting started with the project planning and execution we decided to learn about the current standing of the e-commerce sector in India.

Strategy

We collaborated with the stakeholders and came up with a plan to build a product with minimum viable features and make the platform live as soon as possible as a large number of consumers are heavily relying on e-commerce for various products due to the ongoing pandemic, as a necessary measure to help users to stay healthy.

Agile Development

The goal was to make the product available for the consumers as soon as possible. However, we had to build the website from scratch and accommodate the ever changing needs of the consumers. We followed an agile methodology which would allow us to bring out the product at the earliest. At each stage of the process we enforced collaboration with the project owner and stakeholders.

Understanding the Customers

We conducted a user survey to identify the target audience for the range of products and to gauge the behavior of the target demographic. Based on the survey, we then classified the users into various groups and interviewed each group to understand their shopping habits, modes of shopping and types of products. The takeaways from this study helped us to categorize the type of users and based on their needs. One of the key takeaways from the survey was to focus on the difference in the behavior of the mobile users and desktop users.

Desktop Users

  • Web users are open to invest relatively more time to complete a task
  • The users are focused on one task and hence are ready to learn more and explore.
  • The users tend to complete the purchase.

Mobile Users

  • Mobile users try to complete a task quickly.
  • Users are performing several tasks at once and are therefore not ready to explore.
  • The users tend to browse through the application but end up purchasing from the desktop application.

User Personas

We synthesized 3 personas to serve as a cumulative representation of user needs, goals, tasks, frustrations that we derived from the need-finding, stakeholder interviews, and contextual inquiry.

Browsers

This category includes relaxed shoppers who tend to spend more time on the website and learn more about the services and products. They visit the website often looking for new deals and products. These users often browse for future purchases or to draw comparisons with other products in the market.

Product Focussed

This category of users is goal oriented, often looking for a specific product. These users find the desired product and complete their purchase. They also tend to reorder their previous purchase. They may not focus on the available deals on the other products.

One-Time Shoppers

This category includes users who are often referral recipients, trying to avail a specific offer. These users may not visit the website again for another purchase. These users just browse through the entire catalog to find products that best fit their needs. Therefore they can be lured using attractive deals on different products.

Competitor  Analysis

In this stage, I identified three major competitors in the India and three major competitors globally. My goal was to compare common features across these sites and identify potential opportunities for The Nature's Bowl to create a distinct brand.

Feature Map

We created a feature map assisted by stakeholders and developers to narrow down the list of required features for the MVP based on the impact and implementation cost.

Balancing whaT the client and user wants and needs against the technical constraints

(click here to view full size image)

Mobile First - Responsive Web Design (RWD)

The insights from the study and priority matrix helped me to list a set of features and requirements for the MVP. Based on this information, I started with the ideation process. To support the agile iterative process we used sketching, allowing us to quickly ideate and visualize a feature. We would then shape the feature relative to a design concept.

Information Architecture

Moving forward with a better understanding of the user expectations we decided to define the information architecture to start with the design. We initially started deconstructing the IA of the popular competitors. As expected we discovered the top-level architecture was almost similar and further deconstructing the IA revealed some logically sensible blocks.
To validate these assumptions we conducted a short card sorting activity with 6 participants involving some stakeholders and potential users. These activity allowed us to reflect on our understanding of the domain. With a better understanding of the users mental model and competitor IA models. We decided to follow the conventional IA being followed and make necessary tweaks to suit the project.

Low-Fidelity Prototypes

The Low-Fidelity Prototypes helped us to thoroughly integrate the sketched design concepts with the defined information architecture. This also allowed us to ensure clear use of design principles. Most Importantly it acted as a key tool to communicate the design concepts to the team, stakeholders and the project owner.

Design Specs

We created the design system to bolster the multi-device design following a set of visual elements like color, typography and UI elements. These elements and modules were translated into figma components for consistency throughout the website. This also helped our developers to reuse the components for increase the efficiency.

UI footprint

With a mobile first approach it was really important to consider the touch targets of each action elements to enable easy interaction and at the same time avoiding accidental touch. We tried to maintain a consistent and easy to access touch target and at the same time scaled the icon size and font size based on the display. With a variety of screen ratio of smartphones we tested on multiple devices to find comfortable touch target sizes.

Validation

The next step was to validate the design and evaluate the usability. Initially we tested the prototype with various stakeholders and then moved on to some potential users. We also made use of A/B testing by giving some users a different variant of the UI to complete the same task to make sure the navigation of the web application was easy and accessible.

Minimum Viable Product

About us

  • The Checkout page is designed with the traditional layout to keep the task secure and user focused to complete the task.
  • The checkout components are placed into collapsible accordion windows supporting a responsive design.
  • The collapsing window helps the user to complete the task with ease.
  • The Confirmation window has a greeting illustration, email notice and required CTA.

About us

  • The Checkout page is designed with the traditional layout to keep the task secure and user focused to complete the task.
  • The checkout components are placed into collapsible accordion windows supporting a responsive design.
  • The collapsing window helps the user to complete the task with ease.
  • The Confirmation window has a greeting illustration, email notice and required CTA.

Checkout

  • The Checkout page is designed with the traditional layout to keep the task secure and user focused to complete the task.
  • The checkout components are placed into collapsible accordion windows supporting a responsive design.
  • The collapsing window helps the user to complete the task with ease.
  • The Confirmation window has a greeting illustration, email notice and required CTA.

Learning before Launch

Overcoming the communication gap

Product discovery is a critical part of any e-commerce and the e-commerce search provides the customers with an easy and instant way to discover and find the appropriate product for themselves. During our usability evaluation we observed a majority of customers initially tried to find the products in their local languages. This created a new obstacle in the customer experience. To minimize this gap we created the Search Optimization Framework

Search Results screenshot

Search Optimization Framework

The goal of this framework is to make the product discovery and search experience intuitive by incorporating multi-lingual keyword search assist in order to increase the sales conversion.

New Search Results

User Activity Analytics

We incorporated Microsoft Clarity to learn the user activity and analyse the user behaviour of the beta version experience.

The Launch

Due to covid-19 the application is yet to be launched on a large scale basis.

Phase 2 - Focusing Personalization and Value Proposition

The phase 2 of the Nature's Bowl e-commerce focuses towards including additional features to present a value proposition, also to learn the user behavior and provide recommended products for the consumers. Looking through the business perspective we intend to introduce a loyalty premium membership program which will provide premium services.
Some of the additional features are listed below.

  • To introduce The Nature's Bowl blogs
  • Recommended products for the users
  • Including the blogs related to the specific products on the product page, to communicate the healthy benefits and related recipes of the organic item
  • Introduce reorder the previous purchase section on the landing screen
  • Introducing a sales/about page to share the brand vision.

Reflections and Takeaways

Some of the key takeaways through this project

  • Learning about the user requirements and their goals, to fulfill these needs through designing the experience of the application
  • Work in a faced paced environment to finish deliverables by setting timed goals and accomplishing them.
  • Working in a direct collaborative environment of cross-functional teams of designers, developers, marketing, content and project owners.
  • Importance of a collaborative iterative process of design. During this project I learned to question myself about my every design decision and to see what could be done to make this more efficient.

Additional Discussions

Points which are not covered in this case study but could be worth discussing in person:

  • Comprehensive visual design process
  • Alternate design ideas and iterative design process
  • User Study and Journey Map
  • User Testing proceedings

Thank You