UX Case Study — Enabling Users to select a saree seamlessly with lesser friction

In this article, I will explain how I redesigned the TSCO home page to bring more attention to their variety and how I made it easier to select products from their vast collection.

What is TSCO?

The APEX society at the State level called Telangana State Handloom Weavers’ Co-operative society Ltd. (TSHWCS), popularly called TSCO.

It showcases the talents as well as variety of the weavers of the state of Telangana through the creations from their handloom and give them a platform to sell them.

Telangana State Handloom Weavers’ Co-operative society Ltd. brand logo

Why the Redesign?

Once, while looking through their selection of sarees to encourage the local weavers of the state, my mother was browsing the website for options. Since we are from a different state, we were not familiar with the variety present on the website. The range and quality of work kept us engaged till purchase, but owing to the wide variety of users who may use this website as their means to explore the options available, patience may not be plentiful to guarantee a purchase for TSCO. The design could use some changes to make it easier for a customer to find something that catches their eye.

Here are some of my observations on which I will elaborate on further in the case study

• NavBar: The navigation bar that sits at the top offers particular choices, but no options to explore the category as a whole. The options to search through the products are placed in a manner that does not allow it to be useful as a feature.
• Filter options: It offers three parameters to change, of which the ‘product type’ filter offers no real value.
• Featured collections: The website has plentiful opportunity to present the works of the weavers as collections that evoke certain emotions, of which it does not take advantage.
• About us section: The sarees put up on the website are meant to illustrate the diversity of weavers and their works in the state. The website does not provide any means to learn more about the background of the work being put up.

Competitive Analysis

https://suta.in/collections/saree

https://www.vandanafabrics.com/index.php

https://mahahandloom.com/index.php

https://balaramsaha.com

User Research

In order to gain some perspective, I asked some of my friends and family to use the website (some existing and some new users) and these are the pain points they shared:

• Finding a saree requires prerequisite knowledge of what each type entails, since the website forces persistent exploration to find out what is available.
• Supporting a particular group of handloom weavers would require their personal intervention since the website does not make clear what works come from which weavers.
• If one were interested to learn more about the weavers making these clothes, then the website would not be helpful in providing them any information about them owing to the lack of an about section.

Wireframes and iterations

When I approached the design problem, I sketched out ideas that I would want to explore. I chose what might be the most relevant and practical ways to solve the problems and chose the ones I wanted to focus on.

I continued to iterate with colours and ideas on the software to be able to see them in play to better make my decision. You can find my Figma file here.

Problem 1: Visual symmetry in the navigation bar

1.1 Generally, the profile, cart and search icon are to the right of the navigation bar. The search icon being to the left of the logo, makes it easy to miss and ends up being used less even when needed.

1.2 The category drop downs when clicked show a list of the sub categories but if one just wants to explore the options available to them, there is no means to do so. One must perforce see each subcategory one at a time.

Solution:

1.1 I moved the search icon to the right, along with the profile and cart icon to improve its visibility. I also gave these icons a little more emphasis by changing their colours to be more inline with the brand logo.

1.2 When one clicks on the category drop down, it now gives the additional option of ‘All’. This allows the user to view all options available within that category instead of having to browse the selection one sub category at a time. I also changed the layout of the ‘Handloom Sarees’ drop down from a purely vertical list to a bounded box. Earlier a user would have to scroll down to see all the options underneath ‘Handloom Sarees’, but now they can see them all at a glance. When a category is selected

Problem 2: ‘Product Type’ filter option does not provide real value

The filter has three options, one of which is ‘Product Type’. Since the website did not allow the user to select a category as a whole, there were no options for product type. Different naming conventions for the products were being bunched under one banner, but that is an issue to be resolved in the backend of things, not by the user.

Solution:

Solving problem 1.2 enabled the website to offer more relevance to the ‘product type’ filter. What I did, is that I added all the various sub categories as options under the ‘product type’ filter. This allows the user to see multiple options at once.

Also now, if a user were to select a sub category from the category drop down in the navigation bar, it would open the category with the filter for just that product type applied. This gives the user to change to a different sub category without any page change.

Problem 3: A lack of opportunity to learn more about the people making this art

The website has plentiful opportunity to present the works of the weavers as collections made by them, but does not lay prominence to their role in its creation.

The website has an additional role aside from selling its wares, as a platform to bring the people who make this art to prominence. This function is currently not being achieved. If a user were inclined to support a particular group of weavers, then they would not know which sarees to purchase to help them and they would definitely not learn more about the weavers themselves.

Solution:

There are a few additions to the website that will help address this issue and also bring attention to the variety of styles and clothes that are offered:

3.1 Featured collections is an addition to the homepage that highlight the works of handloom weavers from different parts of the state. They are collections that evoke certain moods and emotions formed from a selection amidst the range offered.

They already have one with a fashion designer. Expanding on that with members of its society will help bring their work into the light.

In order to accommodate this, the ‘Bibi Russell Collection’ option in the navigation menu bar has been turned into a drop down titled ‘Collections’

3.2 An ‘about us’ section to talk about how TSCO brings together all these weavers under the banner of a state society. The work it has done and what it continues to do for the communities it supports by doing so.

Reflection & Takeaways

This project was a good opportunity for me to learn more about the cost benefit of making UX decisions and to pivot when ideas do not work.

Learning:

• What looks good need not work as well. Aesthetics are useful only till they are not.
• Minor changes in consistency can help make a larger system more accessible
• Redesigns do not need to mean an overhaul of everything, but making the same work better.

Challenges:

• Working on the website of a topic I have little understanding in made it all the more essential to rely on user research, so that the end result is one that is effective in providing use for them.

If you want to get in touch with me, you can find me on LinkedIn