top of page

Reimagining IFB Homepage

Asset 2INFINITY.png

Case Study

Customer Persona
The first key decision I took was identify who would use this website.
Let’s say a sample group like this:

  • Professional/ Business Owner

  • Age: 28-40

  • Income: 10 LPA & Above

  • Urban

​
Approach

Secondary research on the competitor brands and similar websites
Customer Journey
1. To buy/look up one specific product.
2. To explore the product range and gain knowledge.

Problems
Lack of Information Hierarchy.
Cluttering of unnecessary information.
For the scope of this project, I am considering these as the main problems.

Existing Design

SOLUTION
The sole intention of this exercise is to unclutter the unnecessary information and create a smooth information flow to the IFB Website.

1. Header

Header-Old.png

Observations
The current header had information that was unnecessary and could be shifted to the footer.

Header-New.png

Solutions

  • Removed the unnecessary information such as Location, Store locator, Offers, Support, About us, Blog

  • Tied up the Search, Log in and Cart as icons

  • Opened up the Product section to optimize the Navigation bar

Frame 98.png

For a customer, this would provide an initial framework on the kinds of products the brand has to offer.

2. Landing

Existing_Landing.png

Observations

  • The banner covers up the entire screen.

  • No breadcrumbs on what's coming next

  • No breathing space.

New_Landing.png

Solutions

  • Removed the unnecessary information such as Location, Store locator, Offers, Support, About us, Blog

  • Tied up the Search, Log in and Cart as icons

  • Opened up the Product section to optimize the Navigation bar

2. Product Mix Scroll

image 15.png

Observations

  • The size of the product scroll was inadequate and would be easy to miss.

  • A poor choice of product photography style  for the image size.

  • The IFB care tab seems out of place.

image 14.png

Solutions

  • Increased the size of the product scroll to fit the Header width.

  • Used simple and clear product photos.

  • Added clear indication to more products by covering the last image partially and adding a button.

4. What’s New

image 16.png

Observations

  • The gift vouchers and modular kitchen tiles seems out of place.

image 17.png

Solutions

  • Removed the gift vouchers and modular kitchen tiles.

  • Made it a specific section for the new launches along with the buying options.

5a. Product Segregation

image 18.png

Observations​

  • There was no Information hierarchy.

  • There was no titles and sub sections.

  • The main CTA “SHOP LAUNDRY” that connects to the main laundry page is lost in the clutter.

  • The two large blog tiles seems out of place.

  • Too many full bleed imagery adds to the clutter and leaves the user confused.

New_Landing.png

Solutions

  • Provided titles to each sections

  • Added a tab listing the products under each section. (Front Load | Top Load | Washer Dryer | Dryer). This would enable the user to glance though each product category swiftly and gain an over all knowledge on each of them. This would also reduce the number of clicks as the user will have a zoomed out view of all the products in each section.

  • Maintaining the same collage style, I assigned the bigger tile to call out the important merchandise and other tiles to celebrate the USP features, creating a hierarchy.

  • Added a prominent CTA to the shop section and a different CTA to learn more about the features.

  • Confined this to a desirable height so as to hint the users the next sections.

These points apply to the next 2 sections as well - Living Solutions and Kitchen Solutions.

5b. Product Segregation

image 18 (1).png

Observations​

  • No titles.

  • The space the (Essentials) section takes does not justify the product mix hierarchy.

New_Landing (1).png

Solutions

  • Contained the essentials into a tile which is half the width.

  • Added the “Modular Kitchen” tile to this section.

  • Provided titles and a brief introduction to each section.

  • Added a prominent CTA to the shop section and a different CTA to learn more about the features.

  • Also, added CTAs to each tile that takes you to their respective shop pages.

Modular Kitchen Tiles were repeated and spread across the website without any context. Adding it here would give the user a structured product segregation.

6. Live the Experience

image 18 (2).png

Observations​

  • Modular Kitchen tile does not make sense here.

New_Landing (2).png

Solutions

  • Removed the Modular Kitchen tile.

  • Added the Blog Post tile here (Removed from the Product Segregation section)

  • Replaced the photos with icons. (Since too many photos were already used in the above sections)

bottom of page