Home Page Redesign
UI/UX Case Study
By Vigneshwaran
About
Project Scope
How did we initiate and achieve the new design within the timeline?
This project faces significant visual design issues, with a focus on redesigning and achieving a good user experience through collaboration within the design team.
How did we identify problem and create solutions?
We identified the problems through user interviews and feedback, competitor analysis, and meetings with the internal design team.
Problem
Team Members
Vigneshwaran - UI/UX Designer
Dhanada - Graphic Designer
Vrindha - Product Manager
My Role
User Research
Design System
User Interface
Tools
Figma
Figjam
Google sheets
IBO- Shop of Home Building and Home Improvement Products
Buying home-building requirements has become easier than ever before with the largest collection of branded products across all home building categories at IBO.
Lack of clear navigation
Overwhelming or cluttered layout
Inconsistent design
Poor readability
Ineffective use of calls-to-action (CTAs)
Solution
Clear navigation
Balanced & clear layout
Consistent design
Improve readability
Effective use of calls-to-action (CTAs)
Enhance the overall appearance of the website by incorporating the existing design system and establishing a clear visual and typographic hierarchy to improve user experience.
Description
Among the three websites shown to you, which one did you like and why?
Question - 1
What do you find most frustrating or challenging about using our website design?
Question - 4
Is there anything else you would like to share about your experience with our website?
Question - 7
How does our website make you feel? Does it evoke any particular emotions?
Question - 5
What suggestions do you have for improving the overall user experience of our website?
Question - 6
Can you describe your overall experience navigating our website?
Question - 3
Find all products in one place
Best deals on products
Categories are not defined properly
On time delivery
Ease and quick shopping
Goal
He needs products delivered to the work location
Purchase bulk products at one time
Quality of the product
Images to be clear for better understanding
Needs
Clear Website
Proper information about products
Needs customer support
Clear images and detailed brief about product deals
Motivators
Un clear navigation
Unclear Images of products
Website has too much red color, readability is not clear
Unclear deals
Paint Points
How would you describe the visual design of our website? Is it appealing to you?
Question - 2
User Research on exiting design system
Identify gaps in the website and identify competitors design
Build guidelines for web Banners
Deliverables
The timeline for the redesign project was short
New team
Product images from the respective brands
Constrains
Desktop
Platforms
Week 1
Step 1 - User Interviews and feedback
To conduct user interviews, we visited our offline store and engaged with customers who were shopping there. We showcased our existing website and competitor websites, gathering feedback by asking questions related to the problems we aimed to address.
The above questions were prepared after discussions with my product manager.
Day 1
Day 2
Day 3
Day 4
Day 5
Day 6
Day 7
Day 8
Day 9
Day 10
Day 11
Day 12
Day 13
Day 14
Week 2
Research, survey, user interviews, competitor analysis
Internal team discussion, Correcting designs based guidelines
Creating guidelines for banners, Discussion with graphic designer
Creating New Home Page
Testing Final Design
User Insights user interviews
Parveen Kumar Sing
As a plumber, I don't know much English to understand from a website. I rely on images, but the product images were half-cut and unclear. Improving that part should help the website.
Vasanthi
It's the best option on the market to purchase home building needs for our new home construction. However, when it comes to the website, things are very cluttered, and some images overlap. Offers are not visible properly.
Saleem Malik
Text is overlapping, there's too much to read, and the visuals are not clean.
Sachin
This website resembles the Karnataka flag and lacks the professional appearance of companies like Ikea and Hippo Homes.
Umesh
There is too much red, and readability is difficult.
Step 2 - Competitor Analysis
As a second stage, we compared our website design and functionalities with other competitor brands like IKEA and Hippo Homes.
Brands
Alignment
Clear hierarchy of information
Consistent layout
Color contrast
Consistent design elements
Quality Images
Responsive design
Balanced use of colors
Consistent typography
Relevant and up-to-date information
The collected feedback and points was noted in a Google Sheet and used in meetings with our design team
Step 3 - Analyzing IBO Brand Guidelines
In the third stage, we thoroughly reviewed the design system of IBO, encompassing both print and online design systems, as it was developed by an agency in 2021.
IBO Brand Guidelines.
Color Pallet
Primary Colors
Secondary Colors
Font Style
ABCDEFGHIJKLMNOPQRSTUVWXY
ABCDEFGHIJKLMNOPQRSTUVWXY
Aa
B32525
404040
686465
FFFFFF
C72B2F
F3F3F3
DC3F43
INTER
How did we identify the problems and errors in the existing website?
We decided to visually mark the errors and problems seen on the website, then had discussions with the product manager and graphic designer to rectify the identified issues and come up with a clear and effective redesigned home page.
1
2
3
4
6
5
7
9
8
10
11
12
13
Visibility of text and alignment is unclear.
Category section is repeated twice.
Carousel navigation button overlaps with text content in the banner.
Excessive usage of red color in the banner and header bar.
Images are cropped and not properly aligned.
Excessive empty space due to incorrect alignment.
Message regarding available IBO in the cities is unclear, with improper image usage.
Typography imbalance, with all text in bold.
CTA does not resemble a button.
Navigation button is unnecessary since only 5 products are listed in the section.
Gradient is not consistent with the design system.
13 Inconsistent spacing.
Overall red color used does not adhere to the design system color palette.
problems and errors
After considering the errors and problems, new banner guidelines and thumbnail guidelines were provided to the graphic designer. Additionally, slight modifications were made to the overall layout to bring a design solution for the IBO homepage.
Before
After
The redesigned IBO Home Page is now complete.
User Interviews
24
Survey Replies
168
Competitor Analyses
02
How did we define our target audience (Persona)
After analyzing the survey data, target audience for the persona has been identified, represented by Sathish Kumar
Sathish Kumar
Age: 29
Marital Status: Single
Job: Electrician
Location: Bangalore, karnataka
24PX
24PX
24PX
24PX
Product
Name
Product
Name
Product
Image
Product
Image
Banner Guidelines
Thumbnail Guidelines
Home Page Redesign
UI/UX Case Study
By Vigneshwaran
About
IBO- Shop of Home Building and Home Improvement Products. Buying home-building requirements has become easier than ever before with the largest collection of branded products across all home building categories at IBO.
Team Members
Vigneshwaran - UI/UX Designer
Dhanada - Graphic Designer
Vrindha - Product Manager
My Role
User Research
Design System
User Interface
Tools
Figma
Figjam
Google sheets
Problem
Lack of clear navigation
Overwhelming or cluttered layout
Inconsistent design
Poor readability
Ineffective use of calls-to-action (CTAs)
Solution
Clear navigation
Balanced & clear layout
Consistent design
Improve readability
Effective use of calls-to-action (CTAs)
Project Scope
Enhance the overall appearance of the website by incorporating the existing design system and establishing a clear visual and typographic hierarchy to improve user experience.
Description
The timeline for the redesign project was short
New team
Product images from the respective brands
Constrains
User Research on exiting design system
Identify gaps in the website and identify competitors design
Build guidelines for web Banners
Deliverables
Desktop
Platform
How did we initiate and achieve the new design within the timeline?
This project faces significant visual design issues, with a focus on redesigning and achieving a good user experience through collaboration within the design team.
Week 1
Day 1
Day 2
Day 3
Day 4
Day 5
Day 6
Day 7
Day 8
Day 9
Day 10
Day 11
Day 12
Day 13
Day 14
Week 2
Research, survey, user interviews, competitor analysis
Internal team discussion, Correcting designs based guidelines
Creating guidelines for banners, Discussion with graphic designer
Creating New Home Page
Testing Final Design
Step 1 - User Interviews and feedback
To conduct user interviews, we visited our offline store and engaged with customers who were shopping there. We showcased our existing website and competitor websites, gathering feedback by asking questions related to the problems we aimed to address.
How did we identify problem
and create solutions?
We identified the problems through user interviews and feedback, competitor analysis, and meetings with the internal design team.
Among the three websites shown to you, which one did you like and why?
Question - 1
How would you describe the visual design of our website? Is it appealing to you?
Question - 2
Can you describe your overall experience navigating our website?
Question - 3
What do you find most frustrating or challenging about using our website design?
Question - 4
How does our website make you feel? Does it evoke any particular emotions?
Question - 4
What suggestions do you have for improving the overall user experience of our website?
Question - 6
Is there anything else you would like to share about your experience with our website?
Question - 7
The above questions were prepared after discussions with my product manager.
User Insights user interviews
Parveen Kumar Sing
As a plumber, I don't know much English to understand from a website. I rely on images, but the product images were half-cut and unclear. Improving that part should help the website.
Vasanthi
It's the best option on the market to purchase home building needs for our new home construction. However, when it comes to the website, things are very cluttered, and some images overlap. Offers are not visible properly.
Saleem Malik
Text is overlapping, there's too much to read, and the visuals are not clean.
Sachin
This website resembles the Karnataka flag and lacks the professional appearance of companies like Ikea and Hippo Homes.
Umesh
There is too much red, and readability is difficult.
Step 2 - Competitor Analysis
As a second stage, we compared our website design and functionalities with other competitor brands like IKEA and Hippo Homes.
Competitor
Analyses
02
Survey
Replies
168
User
Interviews
24
How did we define our target audience (Persona)
After analyzing the survey data, target audience for the persona has been identified, represented by Sathish Kumar
Sathish Kumar
Age: 29
Marital Status: Single
Job: Electrician
Location: Bangalore, karnataka
Find all products in one place
Best deals on products
Categories are not defined properly
On time delivery
Ease and quick shopping
Goal
He needs products delivered to the work location
Purchase bulk products at one time
Quality of the product
Images to be clear for better understanding
Needs
Clear Website
Proper information about products
Needs customer support
Clear images and detailed brief about product deals
Motivators
Un clear navigation
Unclear Images of products
Website has too much red color, readability is not clear
Unclear deals
Pain Points
Step 3 - Analyzing IBO Brand Guidelines
In the third stage, we thoroughly reviewed the design system of IBO, encompassing both print and online design systems, as it was developed by an agency in 2021.
IBO Brand Guidelines.
Color Pallet
Primary Colors
B32525
C72B2F
DC3F43
FFFFFF
F3F3F3
Secondary Colors
Font
404040
686465
ABCDEFGHIJKLMNOPQRSTUVWXY
ABCDEFGHIJKLMNOPQRSTUVWXY
Aa
INTER
How did we identify the problems and errors in the existing website?
We decided to visually mark the errors and problems seen on the website, then had discussions with the product manager and graphic designer to rectify the identified issues and come up with a clear and effective redesigned home page.
Visibility of text and alignment is unclear.
Category section is repeated twice.
Carousel navigation button overlaps with text content in the banner.
Excessive usage of red color in the banner and header bar.
Images are cropped and not properly aligned.
Excessive empty space due to incorrect alignment.
Message regarding available IBO in the cities is unclear, with improper image usage.
Typography imbalance, with all text in bold.
CTA does not resemble a button.
Navigation button is unnecessary since only 5 products are listed in the section.
Gradient is not consistent with the design system.
Inconsistent spacing.
Overall red color used does not adhere to the design system color palette.
problems and errors
After considering the errors and problems, new banner guidelines and thumbnail guidelines were provided to the graphic designer. Additionally, slight modifications were made to the overall layout to bring a design solution for the IBO homepage.
Banner Guidelines
Thumbnail Guidelines
Before
After