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

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 develop the product vision and strategy allowing me to organize ideas and anchor design decisions.

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

Content Strategy

I collaborated with a content writer and marketing specialist to lay the product features and goals in the context of the platform and aligning with the interest of the business.

Design

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

The Challenge

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

E-commerce is India’s fastest growing sector and the Indian e-commerce market is expected to grow to  US $200 billion by 2026. This exponential growth is triggered by the growth in the digital infrastructure. This increase in the number of users is due to the emerging eCommerce aggregators aiming to digitalize  various traditional services in order to create a convenient ecosystem for consumers. Due to the increasing digital literacy people have started becoming more aware of the organic food which is a healthier and more nutritious option.

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.

Strategy

The main objective of the company was to provide an e-commerce platform to the users. 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 since a large number of consumers are heavily relying on e-commerce for various products due to the ongoing pandemic. Since we had limited resources, a tight budget and a small workforce we decided to build a mobile first responsive website which provided a comfortable user experience and had an aesthetic visual appeal.

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. In order to strike a balance between the two, we decided to proceed with 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 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 take aways 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.

Insights from the User Study

We classified the users in 3 different category based on the different types of shopping habits and goals.

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.

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 conceptualization 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 the sketched out design concepts we created the information architecture which helped us to define the structure of the content effectively. We also designed a detailed navigation system and the organized the components of various feature modules.

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.

Minimum Viable Product

Navigation and Browsing

  • The modular layout allows the user to browse through the products and at the same time view, act or modify the actions on the application.
  • The layout allows the user to keep a track of items on their cart while browsing through the products.
  • The utility window presents a set of modules to control the cart, user account, manage addresses, saved items, etc.
  • Both the main window and the utility window are supported by separate navigation for easy access.
  • The layout highlights the responsive nature of the application by turning into collapsible windows on mobile devices.

Account Management

  • The signed in user is greeted with a personalized navigation menu.
  • The order history page presents CTA for tracking, reordering the items and initiating the refund process.
  • Adding new address is easy with a popup modal address form.

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.

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.

Re-Designing the e-commerce Search

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

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
  • Introducing a sales/about page to grow the brand value and to share the brand values.
  • 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

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