UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

Redesigning the AJIO website — a UI/UX case study

Sheya Basak
UX Planet
Published in
12 min readApr 29, 2020

What is Ajio?

Ajio is a fashion and lifestyle brand, it is Reliance Retail’s first pan-Indian e-commerce venture.

Why did I choose Ajio?

Well, I am a frequent online shopper and I keep browsing through a lot of shopping websites. Ajio happens to be one of those websites that I as a user could not connect to. To buy online, I am always looking for some sort of immersive experience to feel confident about my choice before placing the order. The experience with Ajio felt distant and made me unsure of my decision to make a purchase.

The next thing I know, I was in my first stage of research to see if anyone else shares my problem and if I could make any improvements to the website.

Guess what? I was not the only one.

Hence, I decided to take upon the challenge to fix this issue and also redesign the website from the ground up.

Having said that,

I am a product designer which exactly justifies why just giving a fresh new look does not suffice when I can add so much more to completely revolutionize the shopping experience. Ergo, I also added a ton of new features, such as putting outfits together to create a look and so much more.

We will look at all these one by one!

Disclaimer

I am not going to talk about my research and then show my final outcome. Instead, I am going to dive right into the visuals and explain my reasoning along the way.

So, let’s get started with the exciting features!

#1 CREATE YOUR LOOK

Imagine you ordered yourself a pair of denim pants and a nice neon jacket which you thought would make you a real show stopper at the next party. But guess what happens when your order finally arrives? The ensemble looks nothing close to how good it looked in your head.

What a bummer!

Sounds relatable, does it?

Now, what if I tell you, that it’s possible for you to mix & match your garments online and then place the order only if you like it! After all, you wouldn’t want such shocks again, or would you?

CREATE YOUR LOOK — offers a real-time experience by choosing the shortlisted items in your wishlist, and then doing a mix-and-match of your selections using different color options. You can also select the body frame you want to see the outfit on, and then visualize yourself.

Isn’t that the best thing possible?

Let’s sneak a peek into that.

Create your look

#2 Image/Voice Search

Moving on from the conventional 1-D Search engine you can now find a very exciting 2-D Image and Voice search that “listens to your heart”.

Image & Voice Search

Now coming to why did I introduce this feature…

It is imperative to make sure that my version has a compelling competitive advantage over others in the marketplace.

So how did I evaluate the competitive edge?

I did secondary research on the up and coming trends that are leading the way and which must be accommodated in a new system to increase the sales and for better user experience.

This was important for me as a designer to make sure, I am going with the trend and I incorporate the changes.

#3 Find your size

Find your size

Sizes differ with brands! This is a common problem that users encounter while shopping across brands. Here’s a new feature that helps you find your “M” size from the “L” of a different brand.

#4 AJIO Chat

In my new version, I also added a floating all-time live chat, for a more personalized shopping experience.

AJIO Chat

All the features I designed and introduced, I did it after mapping out the user and business goals, to come up with a profitable model for both. I also considered some technical goals to produce realistic outcomes.

Now, let’s have a look at the original version and my redesigned version.

One of the things that users really like about Ajio is when you first open it, the landing page asks, “what do you want to see?”

When shopping in traditional malls, you wouldn’t go around and see everything. Except, you would walk right into the section you want to.

From my user observation research and some self-observation as well I found out, that the layout of the screen was particularly confusing to the users in many ways:

  • The logo merges with the background, creating confusions,
  • Also, there were users who said,

The background picture talks about the big sale going on the website, hence, it is confusing if “shop women” would take me to the sale section or the women’s page

So here’s my revised version,

Don’t we relate to pictures more than text, that’s what happened above, right?

Therefore, I have distinguished sections with separate images, and for the new feature introduced I have a bright gradient hello bar.

I also added a navigation bar on this page, in case the user quickly wants to search for what they are looking for.

However, you must be wondering by now, why do I have such a big section for home & living and where did the sale go?

Well, let me explain it down here:

Information Architecture

Before beginning to categorize sections of the website, I conducted an in-person as well as an online card sorting exercise using the Optimal Workshop tool to reach out to more users. I ran a task-based card sorting activity.

This helped to create the foundation of developing a Sitemap and also a Task flow which represented how a user would use the website to purchase a product.

Site Map & Task Flow

Navigation Bar & Menu

The new navigation bar gives a feel of being clean- all items in a single row.

The original hanger icon which represents the wishlist is now a heart icon which stands as a universal symbol for liked items ( thanks to Instagram)

Then again in my new version, you find a very customized “My Profile” section that guides you on the items that you can get access to by signing up/logging in. The old bar simply shows the sign-in/join link like in any other conventional website offering no clue why a user should sign up or log in.

Moreover, the modern-day user also wants to know why should she sign up/log in? After all, who has got the time?

What made the users drop out, even more, was the overlapping categories and brands on hovering in the original version navigation.

One very glaring observation I had in the old version was all the tabs in the navigation bar led to the exact same page. Then why clutter the bar?

I have synced and clubbed the items in my version under similar heads for optimized search results. Thanks to the card sorting activity, it made the process natural and meaningful. My new menu looks cleaner and less crowded with marked sections for easy browsing. I have also removed many repetitive elements from the old menu, for example, Winter wear is thrice repeated in the old one!

Also, let me give you an example of how Must See works, under which I have clubbed the original category tabs.

Let us suppose the user wants to check out INDIE

Who is my user?

Well, let me introduce you to Rollika, the loving mom.

Persona & Empathy Map

So here’s the situation,

Rollika wants to buy a Saree for her friend's destination wedding in Udaipur.

Her experience is explained through the following user flows

Original version
My version

My version depicts all that Indie has to offer with beautiful pictures for seamless navigation.

Setting the navigation bar straight was one of my key priorities from the user insights I had gained as discussed below.

User Insights

I formulated a research plan and did qualitative and quantitative research to determine the demographics of potential consumers — their needs, expectations, and what drives their motivation.

Key Quotes directly from the user while browsing through the website:

“The Navigation is confusing, I keep hovering between Categories and Brands.”

“There’s too much mixed content on the screen, very confusing to my eyes. The page setup is very random”

“Can’t figure out which product is being advertised, the models are too accessorized”

Overall findings from research helped establish:

Pain Points:

  1. Complex navigation
  2. Confusing product showcasing
  3. Unorganized and cluttered content on the screen
  4. Lack of customization and customer interaction

Moreover, what’s the point of being a designer if I can’t do a heuristic analysis of my own…

  1. The lost emphasis, super cluttered interface with everything on the screen fighting for attention be it pictures or the text.
  2. Overlapping context
  3. Confusing product showcasing with not enough details
  4. Overall the website’s vibe is happy but lost

This $100 test gave me the direction for my revised version

I took a hypothetical $100, which represents the total amount of investment resources I can apply in designing and developing a revised application.

Home Page

The old version is cramped up with everything fighting for your attention, all chances that you might miss out on something that you are actually looking for. What happens is, it creates a “halo effect”, and the user assumes the whole website is mixed up.

I had one thing on my mind while redesigning the Homepage, brand personality should come through.

Ajio has carved out a niche that says loudly, good brands at amazing discounts. I have structured the Homepage keeping the brand identity intact, minimal, and easy on eyes.

Home Page

Product Listing Page & Product Detail Page

Product Listing

What are the filter options?

In the simplest terms, it is designed to help the user refine/filter their search results. But what if I don’t know what is meant by a “sheath dress” or a“halter dress” how is the filter useful then?

In my version, you will find the vector icons for clear communication of different filters to enhance the experience.

The models on different color backgrounds make product interpretation and comparison difficult at a glance. Hence, a smart improvisation that I worked upon, I used pictures of the dresses all on the white background and a hover interaction to see the dress on the model to set the context.

Quick Look at the product from the product listing page.
Product Detail Page

I redesigned the product page in a non-traditional manner and my inspiration comes from fashion magazines and editorial layouts to craft a system for creating a product page that tells each one is a unique product also making the layout more interactive and fresh, clearly mentioning all the details which were earlier cramped up and dull.

I also added an option to play the video where you can see the model wearing the outfit, highlighting the details.

“Customer product review plays an instrumental role in a purchase decision.”

I can’t lay more emphasis on how important customer review is. I did not go on adding comments but the stars work well for a clean and minimal layout and convey the message.

Micro-interactions like these make the experience fun and indulging for the user.

Product Detail Page

Size Guide

Yet another feature to fast track your purchase. Simply select your size and Add to Bag from the size guide and Get Notified if not available.

With the redesigned version the user can add the item to the bag directly from “Recently Viewed”.

Micro-Interactions bringing the layout to life

From my user testing, it was clear that users enjoyed smart inclusions like “style it with”.

To make it more relatable,

I would introduce you to Jenny, the fashionista. Who is Jenny?

Persona & Empathy Map

Jenny saves a lot of time with this new addition on the product page that prompts the best styling option for every product mix. She can now also view the complete look with the new “create a look” feature!

Let us have a look at this user flow for better understanding.

So, Jenny wants to buy a new trending outfit for her friend’s birthday which she can use later for her styling shoots too. With the revised version this is how Jenny will proceed.

My version

This feature seamlessly accelerated her online shopping experience. She is happy cause she truly rocked the look!

More Pages

Login/ Sign up

Sign Up / Login

Wishlist

Checkout Pages

Bag /Delivery Details /Payment Details /Order Review

Details Matter

Call To Action Button

Keeping the primary colors intact, I worked upon making the most important button appear more “clickable”.

Interaction on hovering

Footer

Minor changes include the use of symbols instead of text for clearer communication, an input box for subscribing to the website, information revised in the order of preference in the columns.

Footer

Behind the scenes

This is a small picture of a very big picture.

Wireframes
User Observation/ Ideation/Paper Mock-Ups

Learning

I’m really proud that I was able to take up the challenge to redesign a complete website. This project gave me the chance to innovate the visual language and apply a lot of critical thinking in the process. I developed new creative solutions and used different techniques. In the end, I established a design pattern and a visual language. It was a long and fascinating process, from which I learned a lot.

And… That’s a wrap!

So that’s pretty much it. This was my entire process of redesigning the website. Hopefully, you found this article very intriguing and insightful. Do reach out to me if you would like to share anything!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

UX Planet is a one-stop resource for everything related to user experience.

Hello there, I design, sing, write and travel. I am a product designer fascinated by the user centric web products.

Write a response

This is so well done. I really love how you found a solution for the filter option. Also, the brand identity of Ajio can be seen on the new pages.

--