yDesyn | Product Designer

Improved AJIO E-commerce app's 'Search and filter' flow in a 48-Hour Hackathon

AJIO is an Indian E-commerce platform that serves its users through website and mobile app.

We (team of 4 designers) put their search and filter flow under the scope to find usability issues and designed their solutions

My Role

Heuristic evaluation of app pages in scope,

secondary and primary user research, user testing, iterating new solutions, final UI screens

Impact

Even though our solutions were hypothetical, the new designs and features we introduced were later implemented by AJIO in their app.

Approach

We applied a typical design thinking approach in solving the user problems we found.
We started with an internal evaluation by creating drawing out our own hypothesis and assumptions, which were later backed by user research and secondary research. Our findings then morphed into solutions and iterations followed by user testing and re-iteration basis user observation.

Design process (non-linear)

Heuristic evaluation - Hypothesis and assumptions - Primary and secondary research - User journey mapping - Iterating solutions - UI designing - User testing - Reiteration.

These existing screenshots and highlighted user experience issues concluded upon heuristic evaluation followed by user and secondary research.

Upon a thorough Heuristic evaluation, we concluded problems related to customer retention due to AJIO's existing product search and filter flow.

We noticed that users could be facing several issues while searching for a particular product and therefore our hypothesis and assumptions must be validated by real-time user information. So, we interviewed around 6-7 users to confirm our hypothesis.

Our findings:

Our users often found themselves stuck at AJIO's filter categorisation.
Lack of reviews/ ratings made them think twice before buying.
The search for specific item didn't seem too seamless.

UX Methods used to derive right solutions
We used three key UX methods to observe user journey in depth, identify key problems, and ideate solutions.

User journey mapping
By observing what our users did, felt, thought, and saw, we could understand their key pain points, and look for opportunities for right solutions.

How might we
By asking the right questions during group discussions, this exercise helped us re-iterate the problems to come a step closer to the solution.

Crazy 8
Letting out inhibitions slide, this exercise let each one of us to come up with ten solutions to each problem statement within 8 minutes (each).

Ideating solutions
We introduced new affordances for our users and fixed several minor issues in the 'Search', 'Product display', and 'Filter' pages of the app in our first iteration. These small fixes could result is a larger and positive impact on the customer experience.

User affordances (Search page):

Search items they saw somewhere or by uploading an image in their phone.
See their recent searches without having to type them again.
Get a snapshot and access to the products they last viewed.
Able to see what is trending on AJIO based on their taste/ past purchases etc.

User affordances (Product listing):

See simplified product display screen.
Navigation to go to the previous screen without replying on the phone's navigation.
See product rating, see if buyers have left reviews (and the number of reviews).
Quick view the colors a product is available in.
Be able to add a product to their wishlist
See the number of items left (helps business in creating a sense of urgency to expedite purchase ethically)
See when can they expect the product to be delivered
Significance that they can long press on each product display to get a quick view (this feature already exists in AJIO but there is no signifier for the users to know this, hence we added a signifier)

User affordances (Filter):

The Reset filter button is moved to the top right corner so users do not press it by mistake and lose all their applied filters (as opposed to where it was placed earlier, which was next to 'Apply filter'.
'Apply Filter' button is disabled until at least one filter is checked.
Users can view all the filters they applied in a horizontal scroll above the product listing. They can also remove the filter from there.

UI designs
We designed the final UI screens of the iterations we created of all screens. During the UI design process, we let go of a few solutions that we had earlier iterated as they didn't align with our designs in the later stages.

The new search flow makes it easy for the users to look for what they searched earlier under the 'Recent searches' section. Furthermore, they can also leverage 'Click a photo' and 'upload a photo' to enhance their product search. These feature additions target 'Flexibility and Ease of Use' usability heuristic.

New user journey
User wants to shop for 'red t-shirts for women', but have entered the keyword - 'T-shirts'.

As per popular demand, the app displays mostly
t-shirts for men.

The new designs make it easy for them to navigate through filter journey by removing the confusion of finding 'Gender' under 'Filter' as opposed to old designs that included 'Sort', 'Filter' and 'Category' making is confusing for shoppers open the right filter.

'Apply filters' button remains disabled unless minimum one filter is checked by the user. This 'Visibility of System Status' usability heuristics was implemented in new designs.

'Reset' filter option is moved to the top right corner to prevent users from accidentally removing all the filters (as it was earlier placed right next to 'apply filters' button). This 'Error Prevention' usability heuristics was implemented in new designs.

Product listing page after applying filters allow shoppers to see the filters they have applied and also remove them from the listing page, without having to open the filter page again.

This Flexibility and Efficiency of Use usability Heuristic was implemented in the new designs.

You have reached the end of this case study

Ajio anchor

Want to hire me?

Let's talk.

reachpragyagupta@gmail.com

View résumé

Linked In

Fintech | Personal loan | Financial product

'CreditView' is Moneyview's (a personal loan provider) new product that helps users build their credit profile.

I designed the mobile app from ground zero to MVP - 1.

Improved AJIO E-commerce app's 'Search and filter' flow in a 48-Hour Hackathon

My Role

Impact

Approach

Design process (non-linear)

Heuristic evaluation - Hypothesis and assumptions - Primary and secondary research - User journey mapping - Iterating solutions - UI designing - User testing - Reiteration.

These existing screenshots and highlighted user experience issues concluded upon heuristic evaluation followed by user and secondary research.

Upon a thorough Heuristic evaluation, we concluded problems related to customer retention due to AJIO's existing product search and filter flow.

We noticed that users could be facing several issues while searching for a particular product and therefore our hypothesis and assumptions must be validated by real-time user information. So, we interviewed around 6-7 users to confirm our hypothesis.

Our findings:

Our users often found themselves stuck at AJIO's filter categorisation.

Lack of reviews/ ratings made them think twice before buying.

The search for specific item didn't seem too seamless.

UX Methods used to derive right solutions We used three key UX methods to observe user journey in depth, identify key problems, and ideate solutions.

User journey mapping By observing what our users did, felt, thought, and saw, we could understand their key pain points, and look for opportunities for right solutions.

How might we By asking the right questions during group discussions, this exercise helped us re-iterate the problems to come a step closer to the solution.

Crazy 8 Letting out inhibitions slide, this exercise let each one of us to come up with ten solutions to each problem statement within 8 minutes (each).

Ideating solutions We introduced new affordances for our users and fixed several minor issues in the 'Search', 'Product display', and 'Filter' pages of the app in our first iteration. These small fixes could result is a larger and positive impact on the customer experience.

User affordances (Search page):

Search items they saw somewhere or by uploading an image in their phone.

​See their recent searches without having to type them again.

Get a snapshot and access to the products they last viewed.

Able to see what is trending on AJIO based on their taste/ past purchases etc.

User affordances (Product listing):

See simplified product display screen.

Navigation to go to the previous screen without replying on the phone's navigation.

See product rating, see if buyers have left reviews (and the number of reviews).

Quick view the colors a product is available in.

Be able to add a product to their wishlist

See the number of items left (helps business in creating a sense of urgency to expedite purchase ethically)

See when can they expect the product to be delivered

Significance that they can long press on each product display to get a quick view (this feature already exists in AJIO but there is no signifier for the users to know this, hence we added a signifier)

User affordances (Filter):

The Reset filter button is moved to the top right corner so users do not press it by mistake and lose all their applied filters (as opposed to where it was placed earlier, which was next to 'Apply filter'.

'Apply Filter' button is disabled until at least one filter is checked.

Users can view all the filters they applied in a horizontal scroll above the product listing. They can also remove the filter from there.

UI designs ​We designed the final UI screens of the iterations we created of all screens. During the UI design process, we let go of a few solutions that we had earlier iterated as they didn't align with our designs in the later stages.

Product listing page after applying filters allow shoppers to see the filters they have applied and also remove them from the listing page, without having to open the filter page again. This Flexibility and Efficiency of Use usability Heuristic was implemented in the new designs.