Mobile - first responsive (RWD) e-commerce web application
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
MVP Strategy
Product Design
Tools
Figma
Miro
Adobe Illustrator
Microsoft Clarity
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.
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.
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.
Minimum Viable Product
Always visible Shopping Cart
The Nature’s Bowl website features an always visible cart, making sure our customers have complete knowledge and control over what they are purchasing at any time during their visit.
Single Page Checkout
With a single page design, our checkout page offers an intuitive and quick way to complete the purchase, without having to travel through different pages.
Product Page
Product page is a most important page for the purchase decision making. This page presents rich information ( facts focusing on healthy benefits, illustrations of product features) assisting our customers to make the right decision for themselves.
Purchase Confirmation Page
The Purchase Confirmation is placed on the home screen into a familiar interface with the necessary information to inform the customer about their purchase status.
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.
- To validate target demographics
- To assess users opinion towards organic food items
- To explore customers attitude towards e-commerce
- To learn about the changes adapted by the users due to covid-19
- To determine the likelihood of the users to purchase our products
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.
User Behavior Analysis
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.
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.
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.
Customer Journey Map
We created journey maps to understand the experience, feelings, and emotions of each type of user at different times based on the timeline.
(click here to view full size image)
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.
(click here to view full size image)
Mobile First - Responsive Web Design (RWD)
Keeping the MVP feature list in mind we started with sketching initial concept. 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.
Prototypying
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.
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.
User Activity Analytics
We incorporated Microsoft Clarity to learn the user activity and analyse the user behaviour of the beta version experience.
Beta Usability Testing Results
80.2/100
System Usability Score
Score calculated based on the usability testing session on 9 participants
94.3 %
Task Success Rate
Percentage calculated based on the usability testing session on 9 participants
33.3%
Net Promoter Score
Percentage calculated based on the usability testing session on 9 participants
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
Let's Connect and talk design :)
Say HI
