Isharya

Isharya

WEBSITE

Isharya is a jewelry brand creating a wide range of fashion jewelry for the modern Indian woman. With stores situated across the country, they create easy-to-wear, versatile trinkets, to durable traditional necklaces, earrings and bracelets modernised for new-age women. Each piece is a collectible — something you want to cherish and share with everyone.

When Isharya approached us to create a revamped version of their online store, we were determined to create a visual style that was streamlined with their brick-and-mortar retail stores. Keeping the consumer in mind, we designed the website ensuring that the screens adapted well to mobile.

Process

Process

The design scope was broken down into 5 design buckets — each bucket for a certain set of screens. This made it possible to start web development 4-5 weeks into the project. The total duration of the project was 12 weeks.

In addition to the UI design we also created a detailed imagery guide to help Isharya create the image assets the new design language required.

isharya_process

Navigation

Navigation

Like most D2C brands, an e-commerce website often has numerous pages that play an important role in the consumer journey. Therefore, before we began, we first restructured the website, categorising various pages integral to the shopping experience across categories into groups, making it easy to locate for the user

Structure

Structure

SHOP

PRODUCTS

EARRINGS
NECKLACES
WRISTWEAR
RINGS
CHARMS

COLLECTIONS

DIY LEGACY
MODERN MAHARANI
BORDERLESS
DEMI GODDESS
GLITTER ON THE GO
SILVER LININGS

isharya_navlines

CELEBRITIES
NEW
BESTSELLERS
VIRTUALLY TRY ON

STYLE

SPOTLIGHT

LARGE HOOPS
CHOKERS
LAYERED PENDANTS
LINKS

isharya_navlines

PERSONALISED JEWELRY

GIFTING

THE GIFT GUIDE

UNDER ₹ 5000

₹ 5000 - 10,000

₹ 10,000 - 15,000

isharya_navlines

PERSONALISE

DIY CHARMS
DIY BRACELETS
DIY PENDANTS

isharya_navlines

GIFT CARDS

DISCOVER

OUR STORY

OUR FLAGSHIP STORE

STOCKISTS

STORE LOCATOR

ISHARYA INSIDER PROGRAM

AS SEEN ON

BLOG

isharya_navlines

LOOK BOOKS

VIEW ALL
BORDERLESS
MODERN MAHARANI
DEMI GODDESS

isharya_oldnav

OLD NAVIGATION BANNER

isharya_newnav

NEW NAVIGATION BANNER

Navigation

Navigation

Like most D2C brands, an e-commerce website often has numerous pages that play an important role in the consumer journey. Therefore, before we began, we first restructured the website, categorising various pages integral to the shopping experience across categories into groups, making it easy to locate for the user

Like most D2C brands, an e-commerce website often has numerous pages that play an important role in the consumer journey. Therefore, before we began, we first restructured the website, categorising various pages integral to the shopping experience across categories into groups, making it easy to locate for the user

Structure

Structure

SHOP

PRODUCTS

EARRINGS
NECKLACES
WRISTWEAR
RINGS
CHARMS

COLLECTIONS

DIY LEGACY
MODERN MAHARANI
BORDERLESS
DEMI GODDESS
GLITTER ON THE GO
SILVER LININGS

isharya_navlines

CELEBRITIES
NEW
BESTSELLERS
VIRTUALLY TRY ON

STYLE

SPOTLIGHT

LARGE HOOPS
CHOKERS
LAYERED PENDANTS
LINKS

isharya_navlines

PERSONALISED JEWELRY

GIFTING

THE GIFT GUIDE

UNDER ₹ 5000

₹ 5000 - 10,000

₹ 10,000 - 15,000

isharya_navlines

PERSONALISE

DIY CHARMS
DIY BRACELETS
DIY PENDANTS

isharya_navlines

GIFT CARDS

DISCOVER

OUR STORY

OUR FLAGSHIP STORE

STOCKISTS

STORE LOCATOR

ISHARYA INSIDER PROGRAM

AS SEEN ON

BLOG

isharya_navlines

LOOK BOOKS

VIEW ALL
BORDERLESS
MODERN MAHARANI
DEMI GODDESS

isharya_oldnav

OLD NAVIGATION BANNER

isharya_newnav

NEW NAVIGATION BANNER

Look and Feel

Look and Feel

We created a visual style for the website by expanding the elements of the Isharya mnemonic into various components. Using these amorphous shapes, we were able to create a simple and easy to adapt style to hold text and images wherever needed

We created a visual style for the website by expanding the elements of the Isharya mnemonic into various components. Using these amorphous shapes, we were able to create a simple and easy to adapt style to hold text and images wherever needed

isharya_icon
isharya_lookfeel-1-1

CATEGORY MODULE

isharya_lookfeel-2

GIFTING GUIDE

isharya_lookfeel-3

COLLECTIONS QUICK VIEW

isharya_lookfeel-5
isharya_lookfeel-4

MENU

Tone of Voice

We set a tone of voice for the brand that’s extremely conversational, almost as if you were talking to your best friend, your close confidante, or someone you really trust. 
The aim was to make the customer feel comfortable with the brand, and are unafraid to view a few witty comments across the website

We created a visual style for the website by expanding the elements of the Isharya mnemonic into various components. Using these amorphous shapes, we were able to create a simple and easy to adapt style to hold text and images wherever needed

isharya_tov-04-1

CHECKOUT SUCCESS PAGE

isharya_tov-03-1

GENERIC ERROR PAGE

isharya_tov-02-1

404 ERROR PAGE

isharya_tov-01-1

EMPTY CART

Tone of Voice

Tone of Voice

We set the tone of the brand as on that’s extremely conversational, almost as if you were talking to your best friend, your close confidante, someone you really trust. 
The aim was to make the customer feel comfortable with the brand, and are unafraid to view a few witty comments across the website

We set a tone for the brand that’s extremely conversational, almost as if you were talking to your best friend, your close confidante, someone you really trust. 
The aim was to make the customer feel comfortable with the brand, and are unafraid to view a few witty comments across the website

isharya_tov-04-1

CHECKOUT SUCCESS PAGE

CHECKOUT SUCCESS

isharya_tov-03-1

GENERIC ERROR PAGE

isharya_tov-02-1

404 ERROR PAGE

isharya_tov-01-1

EMPTY CART

Home Page

Home Page

isharya_homeold

OLD HOME PAGE

isharya_arrow
isharya_homenew

NEW HOME PAGE

Home Page

Home Page

isharya_homeold

OLD HOME PAGE

isharya_arrow
isharya_homenew

NEW HOME PAGE

isharya_home-1-1

PRODUCT CATEGORIES AND USPs

isharya_home-2

FEATURED PRODUCTS MODULE

isharya_home-3-2

FEATURED COLLECTIONS MODULE

isharya_home-4

SHOP INSTAGRAM MODULE

Product Page

Every product in the Isharya store is unique in its own way. Users have the freedom to customise, pair and select colours and sizes based on their needs. To ensure that this can be easily managed by the developers, customisation modules were designed that can easily be stacked as per the product’s requirement.

isharya_pdp-old

OLD PRODUCT PAGE

isharya_arrow
isharya_pdp-new

NEW PRODUCT PAGE

Product Page

Product Page

Every product in the Isharya store is unique in its own way. Users have the freedom to customise, pair and select colours and sizes based on their needs. To ensure that this can be easily managed by the developers, customisation modules were designed that can easily be stacked as per the product’s requirement.

Every product in the Isharya store is unique in its own way. Users have the freedom to customise, pair and select colours and sizes based on their needs. To ensure that this can be easily managed by the developers, customisation modules were designed that can easily be stacked as per the product’s requirement.

isharya_pdp-old

OLD PRODUCT PAGE

isharya_arrow
isharya_pdp-new

NEW PRODUCT PAGE

isharya_pdp-1
isharya_pdp-2
isharya_pdp-3
isharya_pdp-4

Product Listing Pages

Product Listing Pages

These key pages were kept clean and fucntional, providing the user an easy view of all the products. The product modules were designed so that the user can view the name as well as the collection it was from, along with a tag to inform them if the product were new or a popular item.

These key pages were kept clean and fucntional, providing the user an easy view of all the products. The product modules were designed so that the user can view the name as well as the collection it was from, along with a tag to inform them if the product were new or a popular item.

isharya_plp-01
isharya_plp-02

Quick Add to Cart

Quick Add to Cart

The users also had the option to add products to their cart directly from the listing page. This was done with the help of an overlaying module, allowing the user to select sizes and colours, along with any personalisations they may choose.

isharya_plp-03
isharya_plp-04

Product Filters

Product Filters

Product filters are essential when browsing a website. Therefore we have allowed the user to have three different ways to filter products. They can choose to view products based on its style, categorise products on numerous criteria in a side filter, and sort products based on popularity or price.

isharya_plp-05

Cart

We wanted to ensure that users could view all their personalisation selections easily through their cart to ensure that they recieve the right products. We therefore created numerous states of the cart to display the necessary information and available offers to the users for an ideal consumer experience.

isharya_cart-old

OLD CART

isharya_arrow
isharya_cart-new

NEW CART

Cart

Cart

We wanted to ensure that users could view all their personalisation selections easily through their cart to ensure that they recieve the right products. We therefore created numerous states of the cart to display the necessary information and available offers to the users for an ideal consumer experience.

We wanted to ensure that users could view all their personalisation selections easily through their cart to ensure that they recieve the right products. We therefore created numerous states of the cart to display the necessary information and available offers to the users for an ideal consumer experience.

isharya_cart-old

OLD CART

isharya_arrow
isharya_cart-new

NEW CART

isharya_cart-01

EMPTY CART

isharya_cart-02

CART WITH PRODUCTS

isharya_cart-03

CART WITH PERSONALISED PRODUCT

isharya_cart-04

CART WITH OFFER BANNER

isharya_cart-05

VALID COUPON CODE ENTERED

isharya_cart-06

INVALID COUPON CODE ENTERED

isharya_cart-01

EMPTY CART

isharya_cart-02

CART WITH PRODUCTS

isharya_cart-03

CART WITH PERSONALISED PRODUCT

isharya_cart-04

CART WITH OFFER BANNER

isharya_cart-05

VALID COUPON CODE ENTERED

isharya_cart-06

INVALID COUPON CODE ENTERED

Checkout Flow

Checkout Flow

isharya_checkout-01
isharya_checkout-02
isharya_checkout-03

Gifting

Gifting

Through our conversations with the client, we learnt that a majority of their sales happen during festive seasons. The client also provides customisable gift boxes for consumers for their products.

We therefore felt that it was appropriate to make the selection experience for their user be as enriching and confusion-free as possible. We therefore allowed the user to browse gifts through numerous filters, ensuring that they pick the right gifts for their loved ones.

Through our conversations with the client, we learnt that a majority of their sales happen during festive seasons. The client also provides customisable gift boxes for consumers for their products.

We therefore felt that it was appropriate to make the selection experience for their user be as enriching and confusion-free as possible. We therefore allowed the user to browse gifts through numerous filters, ensuring that they pick the right gifts for their loved ones.

isharya_gift-01

SHOP GIFTS BY BUDGET

isharya_gift-02-1-1

SHOP GIFTS BY OCCASSION

isharya_gift-03

SHOP GIFTS BY POPULARITY

Gift Vouchers

Gift Vouchers

E-vouchers are often the most sought after gifting options, and we created this flow that allowed users to personalise their gifts with not just an image, but also with a personalised note. We took the hassle out of the process and created this simple 
3-step process to ensure a seamless gifting experience.

isharya_gift-04

E-vouchers would be sent directly to the recipient on the selected date in the form of a beautiful emailer.

isharya_gift-05

Handover Files

Handover Files

Once all the screens were approved by the client, they were handed over with notes for the developer so that the development could be smooth and quick. Every module was explained in detail, elaborating on its function and purpose.

Once all the screens were approved by the client, they were handed over with notes for the developer so that the development could be smooth and quick. Every module was explained in detail, elaborating on its function and purpose.

isharya_handoff-03
isharya_handoff-04
isharya_handoff-05
isharya_handoff-06

Style Guide

Style Guide

The clients were also provided with a detailed style guide, with all the icons, field states, button states etc. This was done to ensure a smooth transition into the final website without any confusion for the developer 

isharya_guide-01
isharya_guide-02
isharya_guide-03
isharya_guide-04
isharya_guide-05
isharya_guide-06
isharya_guide-07

Style Guide

Style Guide

The clients were also provided with a detailed style guide, with all the icons, field states, button states etc. This was done to ensure a smooth transition into the final website without any confusion for the developer 

isharya_guide-01
isharya_guide-02
isharya_guide-03
isharya_guide-04
isharya_guide-05
isharya_guide-06
isharya_guide-07

Image and Photography Guide

Image and Photography Guide

The client’s in-house creative team was provided with a detailed image and photography guideline, allowing them to shoot and select appropriate images for the appropriate sections on the website, as well as export them at the right resolutions. They were also provided with a guide on how to make the website banners, as well as an understanding of the tone of voice set for the brand, ensuring that future designs followed a similar language.

IMAGE GUIDE

isharya_p-guide-01
isharya_p-guide-02
isharya_p-guide-03
isharya_p-guide-04

PHOTOGRAPHY GUIDE

isharya_p-guide-05
isharya_p-guide-06
isharya_p-guide-07

BANNER CREATION GUIDE

isharya_p-guide-08
isharya_p-guide-09
isharya_p-guide-10
isharya_p-guide-11

TONE OF VOICE GUIDE

isharya_p-guide-12
isharya_p-guide-13
isharya_p-guide-14

Image and Photography Guide

Image and Photography Guide

The client’s in-house creative team was provided with a detailed image and photography guideline, allowing them to shoot and select appropriate images for the appropriate sections on the website, as well as export them at the right resolutions. They were also provided with a guide on how to make the website banners, as well as an understanding of the tone of voice set for the brand, ensuring that future designs followed a similar language.

IMAGE GUIDE

isharya_p-guide-01
isharya_p-guide-02
isharya_p-guide-03
isharya_p-guide-04

PHOTOGRAPHY GUIDE

isharya_p-guide-05
isharya_p-guide-06
isharya_p-guide-07

BANNER CREATION GUIDE

isharya_p-guide-08
isharya_p-guide-09
isharya_p-guide-10
isharya_p-guide-11

TONE OF VOICE GUIDE

isharya_p-guide-12
isharya_p-guide-13
isharya_p-guide-14

STORE LOCATOR

isharya_screens-01

CREATE ACCOUNT

isharya_screens-02

COLLECTIONS PAGE

isharya_screens-03

404 ERROR

isharya_screens-04

CELEBRITIES PAGE

isharya_screens-05

PERSONALISATION MODULE

isharya_screens-06

CATALOGUES PAGE

isharya_screens-07

INFORMATION PAGE

isharya_screens-08

ISHARYA INSIDER PROGRAM

isharya_screens-09

PERSONALISATION MODULE

isharya_screens-10

STORE LOCATOR

isharya_screens-01

CREATE ACCOUNT

CREATE ACCOUNT

isharya_screens-02

ISHARYA INSIDER PROGRAM

isharya_screens-09

PERSONALISATION MODULE

isharya_screens-10

COLLECTIONS PAGE

isharya_screens-03

404 ERROR

isharya_screens-04

CELEBRITIES PAGE

isharya_screens-05

PERSONALISATION MODULE

PERSONALISATION

isharya_screens-06

CATALOGUES PAGE

isharya_screens-07

INFORMATION PAGE

isharya_screens-08

Project Credits

Client: Gauri Tandon
Creative Direction: Anushka Sani

Project Management: Nishita Mohta

UI/UX Lead: Rohit Dasgupta
UI/UX Team: Farshogar Vazifdar


New Business

New Business

info@thoughtoverdesign.com

info@thoughtoverdesign.com

Follow Us

Follow Us

© 2021 Thought Over Design

© 2021 Thought Over Design