UI

UX

UX Research

Information Architecture

Jan 2023 - Mar 2023

Jan 2023 - Mar 2023

EarthWorth

EarthWorth

EarthWorth

EarthWorth is an e-commerce website which is designed as a platform that allows users to shop for products which are innovative, eco-friendly and help support local small businesses in the process. The products are locally produced and all meet a quality standard and sold under the Earth Worth brand. Each product is linked with the story of the person producing it and adds a human touch to it.

Business Goals

Have a dedicated marketplace for shoppers who are environmentally cautious and want to bring an impact by replacing everyday products with options which are more sustainable without compromising on design or functionality.

Promote the benefits of a sustainable living and how every mindful purchase helps the environment.

Highlighting the stories of the various communities which build these sustainable products and promoting the traditional crafts,

UX Research

The primary goal of the UX research was to ensure that the e-commerce platform is user-friendly, intuitive, and meets the needs of both buyers and sellers of eco-friendly products.

Research Insights

Users often struggle to find products that meet their specific eco-friendly criteria.

Need for an easy to use website which uses principles of the most familiar apps is important for all to be effective.

Design Thinking Process

Design Thinking Process

Design Thinking Process

After talking to a few people in the hotel industry, I drew user personas to depict the user and empathy maps to take into account their painpoints and frustrations in order to draft the perfect solution.

Empathize

Empathize

Empathize

User Interviews

Define

Define

Define

Personas

Empathy Maps

Ideate

Ideate

Ideate

Task Flows

User Flows

Information Architecture

Wireframes

UI Kit

Prototype

Prototype

Prototype

Paper Prototypes

Mid Fidelity Prototypes

High Fidelity Prototypes

Test

Test

Test

Usability Testing

User Interviews

User Interviews

User Interviews

5 people were interviewed along with a survey which was hosted on video conferencing call.

These were students, a homemaker, a professor and a environmental scientist.

I interviewed these people as they were familiar with online shopping and covered a wide demographic. These people ranged between the ages of 18 - 55.

Sample Interview Questions

Sample Interview Questions

Sample Interview Questions

What are your views on shopping?

On a scale of 1-10, how would you describe your liking for shopping?

How often do you shop online?

What is your preferred device when shopping online?

Knowing the environmental impact of a product,will it hamper your decision of buying it?

Would you be willing to buy locally produced products if their quality was assured by a brand?

What are your views on shopping?

On a scale of 1-10, how would you describe your liking for shopping?

How often do you shop online?

What is your preferred device when shopping online?

Knowing the environmental impact of a product,will it hamper your decision of buying it?

Would you be willing to buy locally produced products if their quality was assured by a brand?

What are your views on shopping?

On a scale of 1-10, how would you describe your liking for shopping?

How often do you shop online?

What is your preferred device when shopping online?

Knowing the environmental impact of a product,will it hamper your decision of buying it?

Would you be willing to buy locally produced products if their quality was assured by a brand?

Important Interview Findings

Important Interview Findings

4 of 5 participants preferred desktop viewing when shopping online.

2 of 5 participants take into consideration the environmental input when buying a product.

2 of 5 participants preferred buying local products.

All participants felt that their product buying decisions might change if their environmental impact was known.

All participants showed interest in buying locally produced products if their quality is assured.

4 of 5 participants preferred desktop viewing when shopping online.

2 of 5 participants take into consideration the environmental input when buying a product.

2 of 5 participants preferred buying local products.

All participants felt that their product buying decisions might change if their environmental impact was known.

All participants showed interest in buying locally produced products if their quality is assured.

Important Interview Findings

4 of 5 participants preferred desktop viewing when shopping online.

2 of 5 participants take into consideration the environmental input when buying a product.

2 of 5 participants preferred buying local products.

All participants felt that their product buying decisions might change if their environmental impact was known.

All participants showed interest in buying locally produced products if their quality is assured.

User Personas & Empathy Maps

User Personas & Empathy Maps

User Personas & Empathy Maps

Based on the inputs from the user research conducted, I was able to narrow down and highlight the needs and pain points by reflecting them in a User Persona.

To dive deeper and understand the user’s behaviour, their actions and reactions, I created an empathy map.

User Flow

User Flow

User Flow

Having identified the key screens and task flow, I figured now i had to fit in key details to create a detailed user flow. This helped map out the various decision points and the potential paths the user might take.

Information Architecture

Information Architecture

Information Architecture

Having identified the key screens and task flow, I figured now i had to fit in key details to create a detailed user flow. This helped map out the various decision points and the potential paths the user might take.

Wireframes

Wireframes

Wireframes

Style Guide

Style Guide

Style Guide

Colors

Brown Sugar

#B76142

Davys Grey

#444A49

White

#FFFFFF

Celadon Green

#2E8377

Typography

Aa

INTER

Primary

Aa

Mikela

Secondary

Buttons

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

UI Elements

UI Elements

UI Elements

Some basic UI elements like the Navbar, footer, cards and modals were designed with detailed thought behind it.

Navbar

Order timeline

Product cards

Shopping Cart

Login Modal

Footer

Prototypes

Prototypes

Prototypes

After multiple iterations to make the UX bind seamlesssly, the final prototyping was presented to the users and usability testing was done to find any broken links in the UX and the UI components.

After a couple of changes as pointed out by the users, i concluded my project.

Testing & Revisions

Testing & Revisions

Testing & Revisions

Final step in the design thinking was to take the design and test it all out. I connected with the initial users I had approached for my user research.The prototype was sent to the users for them to test it out. This was an important step in order to gather feedback for the product from a user perspective and find the optimal solution for all the issues the user is facing.

Usability Testing

The factors on which this testing was conducted were:

Flow of Design

Ease of Navigation

Design reflecting the brand’s value

I narrowed down to 2 tasks the user needed to accomplish for this test:

Find your way to your saved addresses section on the website.

Find your way to the Artisan’s page of Om Prakash, who is a potter and choose one of his products.

Users felt that there was no option to change the quantity of the product(s) to be purchased from the cart modal. In order to change the quantity, the user had to edit the product and go to the product page to make those changes.

Users felt that there was no option to change the quantity of the product(s) to be purchased from the cart modal. In order to change the quantity, the user had to edit the product and go to the product page to make those changes.

A dropdown option the change the quantity was added within the cart item value to reduce the user fatigue and give the user more control over his cart.

When the cart was empty, the users felt that it was a bit dull and they could not interact with it further.

When the cart was empty, the users felt that it was a bit dull and they could not interact with it further.

An image signifying an empty cart was added and the option for the users to navigate to the bestsellers page was provided for the users to interact with.

An image signifying an empty cart was added and the option for the users to navigate to the bestsellers page was provided for the users to interact with.

The product card had an image as the background, product name, price and an add to cart button for the user to make a decision to buy the product.

After testing users felt they needed a bit more details regarding the product on the product card in order to make the decision of buying the product without having to go into the product page.

The product card had an image as the background, product name, price and an add to cart button for the user to make a decision to buy the product.

After testing users felt they needed a bit more details regarding the product on the product card in order to make the decision of buying the product without having to go into the product page.

A layout was added to the product card which laid out the details regarding the product, i.e. the product description along with the already existing details, which would be much more helpful in helping the user make an informed decision.

A layout was added to the product card which laid out the details regarding the product, i.e. the product description along with the already existing details, which would be much more helpful in helping the user make an informed decision.