Design Process: From ambiguity to clarity
Evaluate the user flow of AJIO app from search to filter and redesign the user expereince to impact conversion metrics
Conducted Self-Heuristic evaluation on the screens pertaining to the flow.
Conducted usability testing, desk research and competitive benchmarking to new insights and validate our hypothesis.
Drew user journey map from primary research insights.
Redefined the problem statements using the ‘How Might We’ UX framework.
Applied the ‘Crazy-8’ problem solving framework to ideate.
Shortlisted solutions with reasoning.
Created wireframes
Created UI designs
Tested our solutions with users using mid-fid prototypes.
Revised designed based on feedback. Tested again.
Created hi-fid prototype
Drew conclusions and learnings.
Problem Statement
Evaluate the product search and filtering flow of Ajio app, which includes search, product listing, and filter page and redesign the experience while identifying opportunities to improve usability for the working women which will lead to decrease in bounce rate and improve user retention rate.
Current user flow
Self-heuristic evaluation
We found some key heuristic issues in Search, Product listing, and Filter screens.
User journey mapping
To understand our users better, we started with a hypothetical user journey mapping keeping a user persona in mind.
Search screen interaction
Does
-
Opens up the search bar
-
Types what they want to search or browse
-
Presses enter to complete search
Think
-
Will I find what I am looking for
-
What if it is not available
-
How much will it cost
-
Am I even searching it right/using correct keyword
-
Will it be in other colors and my size, what if they’re not?
-
I have mental image of the item I want to search but can’t remember what is it called
Feel
-
Confused, hopeful, little excieted to find what i want, scared to not find what I want.
-
Not much in control
Pain
-
No result for women t-shirts only men.
-
Cannot see any way to look for something who’s visual they remember but don’t know what it’s called.
-
No way to search for women without typing ‘for women
-
Had to specially type gender oriented keywords in search bar to show specific result
Product description screen interaction
Does
-
Looking at the options/ product listing shown to me
-
I am trying to find what I searched for
-
I am looking for filters to apply
-
I am scrolling to see what else is there
Think
-
Where are t-shirts for women?
-
Why cant I find what I want with just one simple search?
-
Do I need to add filters?
-
Do I go back to search and type for women again?
-
Where are the discounted products listed?
-
How do I go back?
-
How can I know which one is exclusive collection or new arrivals?
-
Any ratings?
Feel
-
Not finding what I am looking for, frustrated.
-
Feeling confused about making decisions.
Pain
-
No immediate filters to apply in listing page.
-
Can’t see how to go back
Filter screen interaction
Does
-
Arrive on filter page from clicking on filter CTA in the product listing page.
-
Look for filters that I want check, and choose them
Click on ‘apply filters’ once done -
I am checking how well filters were applied
Think
-
This app just shows offers for the sake of showing it. Nothing useful.
-
Size and fit filter is confusing
-
Cannot find applied filters without opening filters page again.
-
Cannot feel personal/human touch to find trendy stuff
-
Why is there an extra category in the bottom bar if there one in filter?
Feel
-
Ordering from here is expensive
-
Confused with the filters options being repeated in the listing page and inside the filter page.
Pain
-
Gets an opportunity of apply an offer again only to get disappointed for not being able to apply again.
Hypothesis and assumptions
We went ahead and drew some hypothesis and assumptions based on the journey map we created. With each step we reached to more clarity from ambiguity.
There should be a scan-outfit feature so users can easily find what they saw somewhere. ​
​
Users should be able to view previously searched items. We assume that they want to save their time remembering what they searched earlier
​
There should be a clear way to go back to the previous page.
​
A voice dictation feature can help many users who want to save time typing manually.
Secondary research
Up until now we have insights from the heuristic principles and our own hypothesis, but we cannot move ahead unless we validate those insights with secondary and primary research. We start with two types of secondary research: Desk and Benchmarking.
Desk research:
​Statistical insight:
​
​
On average, 59% people between age 18-24,
​
65% people between age 25-49,
​
and 57% people above age 50 heavily use voice command on a daily basis
​
Behavioural insight:
​
Voice searches (especially multilingual search bots have helped non-English speaking people of the country find what they are looking for with much ease as opposed to typing. Voice search also helped people search for their desired items despite complicated UI screens.
​Statistical insight:
​
Almost 90% of users read online reviews to take a decision.
​
Behavioural insight:
​
Customers tend to spend more if they read good ratings and reviews about a certain product.
Competition benchmarking:
Amazon
Product Search
2
1
3
1. Voice search option is presented right next to the search bar.
2. Camera icon inside the search bar to help users search for products using their camera.
3. Amazon's very own voice search assistant–Alexa–is presented to the users in the home page for improved search experience.
2.1. Amazon gives their users the options of
scanning a live product or using a bar code to search for products, OR uploading an image of product in their device to search for them.
Swiggy
Product Search
(non-competitor benchmarking)
1. Swiggy allows their users to directly look for their recent searches.
Nykaa Fashion
Filter search
1. In Nykaa Fashion app, users can see the filters they have applied in the product listing.
This not only helps them remember the filters they applied but also quickly remove certain filters without having to open the filters page again.
Primary research (user testing)
We interviewed a total of 4 working-professionals (female) from different cities–Bangalore, New Delhi, and Gwalior.
We prepared a set of questions just for our reference. The flow of the questions, however, did change as per the nature of the interview.
We put these women into two groups:
1. Used AJIO in the past
2. Never used AJIO before.
List of questions:
-
When was the last time you used an e-commerce app to order clothes for yourself?
-
Which e-commerce app do you use the most?
-
When was the last time you used AJIO app? (to order or just browse)
-
Were you satisfied with your experience the last time you ordered an apparel for your self?
-
Did you easily find what you were looking for the last time you were on a fashion e-commerce app?
-
If so, why do you think you found what you were looking for easily?
-
If not, what issues did you face that led to you not being able to find the a desired products.
​
Task for the user:
​
We gave each of our users a task - which was to find any clothing that they would like to order, or just find a t-shirt in case they had nothing they could think of.
Soumya
​
Lives and works in Bangalore. Not a frequent e-commerce user. Does not shop for clothes either (offline or online).
When she did a vague search for a top, she could find many options that she liked, but when she narrowed down her search by typing 'blue top' or 'turtleneck top', the search results were not that many and she didn’t find anything likeable either.
When asked to re-search for the item she had earlier searched for, she went to the search bar and typed the item name again, and missed the 'recent search chips' that were listed below the search bar.
She did not focus on the price unless she liked something first. "Price is the second priority, first is finding the right product."
​
She mentioned that she would have preferred if she could see any ratings on the product listings as it would help her decide if she wants to even spend time browsing a specific product or not. "If I could see ratings, that would help choosing the right top."
​
When I asked her to use the filters and play around with categories, and also try ‘more filters’ she got a bit confused with the options and information prompts given by the app and in the app.
​
Mansha
​
Lives and works in Delhi. Married.
Frequent users of AJIO and several other e-commerce apps.
Notices the discount and offer banners in the home page section.
Uses ‘women’s clothing’ card to find what she is looking for instead of search.
When asked to use the search bar, she types ‘pants for women’ specifically as just ‘pants’ showed results for men.
Prefers to search as per brands rather than price.
Upon searching for shoes, she immediately applied filters of gender, brand, and size.
While applying for gender filter, she did not use the ‘categories’ (men, women, kids) button in the bottom of the listing page, instead she opened the ‘filter’ button next to categories and chose the gender there.
For most apparels, she barely noticed the descriptions; only notices the images carefully.
Only goes into the product description page when she really likes a product, else she just scans the products from the listing page.
Accidentally cleared all filters by touching the ‘reset’ filters button.
Ayushi
​
Lives and works in Gwalior. First time AJIO user but already knows what to shop for as she want to buy track pants.
My teammate did not ask her to shop for anything in particular as she had been wanting to buy a pair of track pants for a long time, which she did. She typed 'track pants' in the search bar to look for them. Applied colour and size filters and thoroughly checked the description before making her purchase. She found the process smooth.
Teammate asked to use the search bar again and look for thing using filters. Upon searching and applying filters and landed on the listing page and scrolled a long time before adding something to cart.
​
When she was asked to go back to the home page from the listing page, she faced difficulty in navigating her way back.
​
Her overall experience was good, however, she did feel that filters had nothing new to offer as compared to other e-commerce sites. Moreover, she also felt that the homepage was relatively better from other apps, and was attracted to the offers and discount banners.
Mrigna
​
Lives and works in Ghaziabad. User of AJIO app. Likes the availability of luxury brands in their app.
She uses the search bar when she has something specific to buy, other times she uses the women section (especially when she is in the mood for window shopping).
​
In the home page screen she easily located the search bar. Did not find useful discount or offer options though.
​
She was happy finding the offer price highlighted. It gave her more reasons to continue shopping in AJIO. However, not being able to see any ratings made her feel that Mantra is better.
​
As she did not have anything specific in mind, she used the categories (inside the hamburger menu) to look for clothes. Once she landed on the product listing page, she applied some filters for brand, size, and colour.
​
She couldn't find the tops of her chosen brand in the listing page despite applying ​filters.
User journey mapping - Post primary research
It was now time to draw another user journey map, but this time with real user insights, which helped us understand real problems of real users, as well as validate our hypothesis and assumptions.
Search screen interaction
Does
-
Makes a specfic search (H&M trousers/ brand name etc)
-
Searches for a non-specific product (top/ shoe/ bag)
-
Look for previous searches
-
Looks for gender category options while searching
Think
-
Does not like that after typing ‘bags’ she is getting suggestions for different brands even though she doesnt want to look at the brands
-
User also feels satisfied by using the search bar.
There is no voice dictation for when the user is too lazy
Feel
-
Feels that autosuggestions are not intuitive and also feels that she needs to type every specification wrt (gender/ sub-type of product she is searching)
-
Feels helpless when she is unable to type but cannot give voice dictation.
-
Feels like extra effort to search for previous searches becasue the previous search suggestions are horizontally listed so they get pushed further out of the scree.
Pain
-
Has to enter every filter manually first ( eg. t-shirt for women)
-
Epic confusion with two cross buttons in (secondary and tertiary) - iOS
-
Recent search option chips are not properly placed - they get missed out easily. (iOS)
-
No recent search history in auto suggestion for android user whatsoever.
Product description screen interaction
Does
-
They click on hamburger icon to quickly switch to previous product section or the home page.
-
User looks for brands from list of products avaliable.
-
User can have a list of products from search result and make choice.
-
Users do not notice the description written under the product card.
-
Users looks for enlarged preview of the image.
-
Users clicks on “what’s new” in sort feature to look for trending products.
-
User looks for price and discount for every product.
Think
-
Why do offers prices are showing twice at different places, which lead to confusion.
-
Why brand name of the product (text) is not highlighted.
-
Wishes to see ratings of products listed before going to description.
-
Wishes they could see new arrivals separately.
-
Wishes there was a way to view the inside images of the product without going into the product detail page.
Feel
-
Feels collection is old and repeating again and again.
-
Feels confused to decide reviews/rating product listing card there itself.
-
Feels frustrated because there is no option, so that she can know how many colour options for that product is avalaible.
-
Feels clueless while differentiating trending and what’s new in the list page.
Pain
-
Cannot figure out the quality or rating of a product from listing page.
-
Confusion between categories and filter option.
-
Cant figure out how to go back (androidusers)
-
It is hard to recognize brand name , unable to differentiate name of the brand and product details in product listing cards.
-
All the price related information is written too close so it is creating visual stress.
Filter screen interaction
Does
-
Users selects the filters in the listing page and is overwhelmed by lot of choices that are not segregated in a right way. User does lot of to and fro between landing page and filter options.
-
Click on filters again and again to get a desired item.
-
Over categorization leads users to show custom product.
Think
-
Filters has too many options, taking time to decide.
-
After selecting categorization user is not sure about whether they would find the desired item.
-
Thinks that there should be away to deselect and have more control over selected filtered quickly and easily.
-
Thinks if the product is not visible after applying the filter then may not be available,hence they drop off from the process.
Feel
-
Feels disappointed when they can’t find appropriate filters.
-
Feels confused when there is repetition of same filteration element in filters section and category section.
-
Feels cluless when category section changes into style type afer selecting few filters.
Pain
-
Hard to choose product in multiple options from the search list, wasting time of suggesting unrelevent products to my preferences.
-
Hard to recall what all filters were applied when they accidentally remove the selected filters.
-
Hard to locatate filters because they are not properly sequenced.
Highlighting key pain points of users
We concluded from the second user journey map (post primary research) some key pain points that would help us in defining new problems.
-
Has to enter every filter manually first ( eg. t-shirt for women)
-
Epic confusion with two cross buttons in (secondary and tertiary) - iOS
-
Recent search option chips are not properly placed - they get missed out easily. (iOS)
-
No recent search history in auto suggestion for android user whatsoever.
Re-defining the problem statement
The How Might We framework to help us define new problems based on primary and secondary research insights.
Note: Highlighted problems are the ones we shortlisted for the project as we felt these problems weigh more in their importance and solving them would help improving the user experience for a large number of users.
Search
How might we help users minimise the need for typing filters manually in the search bar while looking for desired products?
How might we improve the recent search feature so the users can easily find the keywords they recently looked for, and search them again if they have to?
How might we provide the recent search history option for the android users?
How might we improve the search bar and auto search suggestion?
How might we minimise the confusion because lots of buttons there while searching? (iOS)
How might we improve the search experience w.r.t image search?
How might we add more features to the search experience wrt to access to the wish list?
Product listing
How might we make the user locate discounted products as they browse through the product list?
How might we make the user aware about the Quality and usability of the product ?
How might we make users easily comprehend the description of any Product ?
How might we give the user a better choice while shopping?
How might we help users to browse intuitively across the platform ?
How might we create a fresh experience for the user every time they open the App ?
How might we we help the user acknowledge on not missing out the Collection?
How might we make users confident to make ease their decision on the product?
How might we make the user know her advantages on buying a product?
How might we help the user get to know all details about the product with minimum clicks possible?
Filter
How might we give users a seamless experience in the journey of selecting products from the list?
How might we help the user in repeating search of the products from filter?
How might we can reduce the difficulty and confusion in searching products.?
How might we allow users to have more control over applied filters quickly and easily?
How might we reduce clutter caused by overlapping of certain filtering categories options?
How might we make filtering process more real world oriented?
How might we prevent users from accidentally resetting the filters?
Solutions and wireframes
Search
​
How might we improve the search feature so the users can easily find the keywords they recently looked for, and view them again if they have to?
​
How might we improve the search experience w.r.t image search?
Add recent search chips with a 'cross' icon to remove the recent searches.
​
Also, add the voice search feature to help users ease and speed up their search process.
Another idea is to add upload and scan dress feature.
​
Also, putting the recent searches in a dropped down menu.
​
And add more popular searches too.
Another solution could be to also add the product user last viewed so users get access to them straight from the search interaction.
Another idea was to show a shortcut to categories from the search interaction page itself.
​
Additionally, adding recently bought products - giving them an option of buying them again short-cut.
Product listing
​
How might we we help the user acknowledge on not missing out the Collection?
​
How might we make the user aware about the Quality and usability of the product?
How might we make users feel confident enough to choose a product and buy it?
​
Highlighted in red:
Add ratings
​
Highlighted in blue:
Add the number of reviews buyers have left for the product inside the product description page.
​
Highlighted in yellow:
The app already allows users to quickly look at the image without going in the description page by long pressing on them, however there is no signifier to know about this feature. Therefore, add the signifier.
​
Text written in red:
Instead of selling fast, telling users how many are items are left could make them decide faster.
Highlighted in green
Show the number of angles (image scrolls) they can view the product in to help them decide faster from the listing page itself.
​
Give users the option to check other angles from the listing page, should they want to view product description, they can click on the image itself.
​
Text written in red:
​
Add ETA or delivery date to help users know exactly when they receive their order to speed decision-making.
Filters
​
How might we allow users to have more control over applied filters quickly and easily?
​
How might we reduce clutter caused by overlapping of certain filtering categories options?
​
How might we prevent users from accidentally resetting the filters?
​
In the product listing page, there were three filtering buttons–sort, categories, and filter. Categories is repeated twice (once inside filter and one in the bottom nav bar. Therefore to remove clutter, the solution is to just have two buttons in bottom nav bar, and include Categories only once inside the filter page.
​
Provide users a quick access to choose between what's new and what's trending in the listing page.
Prevent accidental resetting of filter by moving the reset button on top right of the screen highlighted in red.
​
Disable Apply Filter button unless the use choose at least one filter.
The apply filter button gets enabled only upon checking at least one filter option.
Product listing page post applying filter would have the filter chips on the top of the screen giving users the freedom to easily view and remove the filters they applied.
UI designs
Search flow
Upon landing on the search screen from Home page.
The new UI designs of AJIO app's search page screen bring:
-
A 'back' navigation button to allow users to go to the previous page.
-
A Voice search command option inside the search bar (following the popular design - thereby complying Jakob's law.
-
Recent research chips for users to quickly find what they earlier searched for. Furthermore, an option to remove certain chips in the recent search section.
-
'Scan' and 'upload image' option to give users a more custom search experience.
Product listing and filter
The new UI designs of AJIO app's product description screen bring:
-
A 'back' navigation button to allow users to go to the previous page.
-
Bottom filter strip with only two main options - Sort and Filter.
-
A quick switch strip between ALL, NEWEST, and TRENDING options.
-
A product card with details like:
-
A signifier for the affordability of long-pressing to view quick product detail pop-up
-
Rating in stars and the number of reviews left by other customers
-
Number of products left
-
Estimated time of delivery​​
-
The new UI designs of AJIO app's filter screen bring:
-
A disabled 'Apply Filters' button unless user choses at least one option.
-
A back button to go to the previous page.
-
A cleaner layout with no 'Reset Filters' button unless user checks a filter.
-
Filters applied chips to allow users to easily recognise the filters they applied and also give them the freedom to remove them easily. This way we also include two heuristic principles - recognition better than recall and user control and freedom.
Usability testing - Key insights
Our new UI designs worked well with the users. However, there was still some scope for improvement.
-
Two users completely missed the the ETA (delivery date)
-
Some also missed the 'number of comments' info, which was present to help users know the number of comments buyers left for a product.
-
Not every user could recognise the 'long press' icon and its usage.
We tested our solution and new designs with our users again. Below are the key insights from all the user interview.
​
UI designs (Revised)
Most users gave feedback w.r.t the product listing page, we revised only the product listing for our final UI.
Highlighted in orange, users can now clearly see the product rating and number of feedback left by other buyers.
​
ETA replaced by 'Delivery by (date)' is now drawing more attention and is more scannable.
Or, watch video prototype below: