Vijay Sales – Product Comparison Flow
Enhancing decision-making by delivering a cleaner interface, smarter insights, and a faster comparison experience that helps users choose with clarity and confidence.
Year :
2024
Industry :
E-commerce
Client :
Vijay Sales
Project Duration :
2 months
Problem Statement
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
Impact of Not Having a Comparison Flow
• Users juggle tabs, adding cognitive load
• Without structure, specs look messy and confusing
• Users can’t easily see what makes products different
• Extra effort causes slower decisions and less confidence.
• Lack of clarity leads to fewer purchase actions.
What We Aimed to Achieve
01
Add products effortlessly to compare
02
Quickly identify differences in specifications
03
Make a purchase decision without friction
Research
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
Competitive analysis
To identify industry standards and usability gaps, I conducted a competitive analysis of leading e-commerce platforms, including Flipkart and Croma. Flipkart offered a functional comparison feature with a sticky compare bar and smooth product selection, but its layout felt dense, and users struggled to scan large amounts of data. Croma, on the other hand, provided a clean and minimal interface with collapsible sections, making it easier to read but lacking interactivity and real-time feedback. From these insights, I learned that an effective comparison flow should combine Flipkart’s functionality with Croma’s clarity, leading to a balanced design that focuses on both usability and visual simplicity.
Flipkart
Pros
Intuitive “Add to Compare” option directly on product cards.
Sticky compare bar that stays visible while scrolling.
Cons
Dense layout when comparing more than two products.
Outdated design with poor hierarchy.
Croma
Pros
Clean, minimal interface with balanced white space.
Easy-to-read comparison table with collapsible sections.
Cons
No sticky comparison tray.
Doesn’t support inline product quick views — redirects users away from
the comparison page.
Design Challenges
• Managing large amounts of technical data without overwhelming users.
• Highlighting product differences clearly and visually.
• Making the comparison grid responsive for mobile screens.
• Ensuring smooth user flow from product listing to comparison.
• Worked within the existing design system to ensure consistency and alignment with the new visual direction.
• Users dropped off between listing and comparison pages, so a sticky compare bar was designed to maintain continuity and quick access.
Solution
To minimize user drop-offs between the product listing and comparison views, I implemented a sticky Compare Bar that appears after the first “Add to Compare” action and remains visible across pagination, filters, and page refresh. The bar displays selected product thumbnails, a live item count (e.g., “2/4”), and a clear Compare Now CTA, allowing users to seamlessly access the comparison view at any point. It includes an empty-slot indicator for adding more products, persistent selection storage to maintain state during navigation, and micro-interactions such as toasts and animations to provide instant feedback. On mobile, the bar adapts to a compact, collapsible pill for better screen economy and thumb-friendly usability making it easier to revisit or share comparisons.
Sticky Compare Bar
Appears after first “Add to Compare” and stays visible throughout browsing.
Quick Compare Access
“Compare Now” CTA always visible for instant navigation.
Live Selection Count
Shows number of selected items (e.g., “2/4”) with product thumbnails.
Empty-Slot Indicator
Encourages users to complete their comparison set.
Micro-Interactions
Toasts and animations give instant user feedback.
Mobile Adaptation
Collapsible, thumb-friendly pill for small screens.
User Flow Breakdown
01
Product Listing Page
Users start their journey by browsing items.
Each product card includes an “Add to Compare” button. When selected, a bottom bar appears summarizing chosen products with a prominent “Compare Now” CTA.
Key Design Goals -
• Introduce visual feedback when a product is selected.
• Keep a sticky bottom bar visible for quick access.
• Show small product thumbnails in the bar for context.
02
Product Detail Page (PDP) with Compare Integration
On the Product Detail Page, users can now directly add or manage products in comparison without returning to the listing — ensuring a smooth, connected experience.
Key Design Goals -
• Make Compare accessible from every stage of the user journey
• When a product is added, the sticky Compare Bar appears at the bottom of the screen, displaying selected product cards with price, name, and remove icons.
• Users can add up to four products and click “Compare” anytime to jump directly to the comparison view.
• Keep interaction consistent with the listing experience.
03
Compare Page
After tapping “Compare Now,” users enter the comparison grid — the heart of the product evaluation experience. The layout is designed to help users make informed decisions by visually comparing key specifications, prices, and features across multiple products.
Key Design Goals -
• Make spec-heavy data easy to scan without overwhelming users.
• Highlight key differences to guide decision-making effortlessly.
• Keep essential product details visible at all times via sticky headers.
Enhanced Comparison Interactions
To make the comparison process more intuitive and user-friendly, several interaction-level improvements were introduced. These ensure users can easily manage selections, discover products, and receive immediate feedback while staying within the flow.
Toast Message for Limit Reached
A toast message — “You can compare up to 4 products only” or “You can only compare similar product ” — gives quick, non-intrusive feedback.
➕ Sticky Add Product Bar
Sticky Add Product Bar with a ‘+’ icon lets users add more products from the comparison view, always visible for easy access.dd products effortlessly to compare.
Smart Product & Brand Search
Integrated search-as-you-type functionality within the “Add Product” modal, enabling users to find products by name or brand quickly.
Active Comparison Indicator
Added a “Compare (3)” CTA on the listing page to show the active product count, keeping users aware of their current selections.
Iteration Highlights
Final Design
Client Feedback
"The client appreciated the overall redesign, highlighting the improved usability and seamless comparison flow. They specifically praised the sticky Compare Bar, active count indicator, and PDP integration, noting how these changes made the experience feel intuitive and cohesive. The enhanced visual hierarchy and subtle feedback animations were also well-received, as they helped users stay informed without overwhelming the interface. Overall, the client found the solution visually refined, functionally consistent, and more user-centered, resulting in a smoother journey from product discovery to comparison."
Vijay Sales – Product Comparison Flow
Enhancing decision-making by delivering a cleaner interface, smarter insights, and a faster comparison experience that helps users choose with clarity and confidence.
Year :
2024
Industry :
E-commerce
Client :
Vijay Sales
Project Duration :
2 months
Problem Statement
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
Impact of Not Having a Comparison Flow
• Users juggle tabs, adding cognitive load
• Without structure, specs look messy and confusing
• Users can’t easily see what makes products different
• Extra effort causes slower decisions and less confidence.
• Lack of clarity leads to fewer purchase actions.
What We Aimed to Achieve
01
Add products effortlessly to compare
02
Quickly identify differences in specifications
03
Make a purchase decision without friction
Research
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
Competitive analysis
To identify industry standards and usability gaps, I conducted a competitive analysis of leading e-commerce platforms, including Flipkart and Croma. Flipkart offered a functional comparison feature with a sticky compare bar and smooth product selection, but its layout felt dense, and users struggled to scan large amounts of data. Croma, on the other hand, provided a clean and minimal interface with collapsible sections, making it easier to read but lacking interactivity and real-time feedback. From these insights, I learned that an effective comparison flow should combine Flipkart’s functionality with Croma’s clarity, leading to a balanced design that focuses on both usability and visual simplicity.
Flipkart
Pros
Intuitive “Add to Compare” option directly on product cards.
Sticky compare bar that stays visible while scrolling.
Cons
Dense layout when comparing more than two products.
Outdated design with poor hierarchy.
Croma
Pros
Clean, minimal interface with balanced white space.
Easy-to-read comparison table with collapsible sections.
Cons
No sticky comparison tray.
Doesn’t support inline product quick views — redirects users away from
the comparison page.
Design Challenges
• Managing large amounts of technical data without overwhelming users.
• Highlighting product differences clearly and visually.
• Making the comparison grid responsive for mobile screens.
• Ensuring smooth user flow from product listing to comparison.
• Worked within the existing design system to ensure consistency and alignment with the new visual direction.
• Users dropped off between listing and comparison pages, so a sticky compare bar was designed to maintain continuity and quick access.
Solution
To minimize user drop-offs between the product listing and comparison views, I implemented a sticky Compare Bar that appears after the first “Add to Compare” action and remains visible across pagination, filters, and page refresh. The bar displays selected product thumbnails, a live item count (e.g., “2/4”), and a clear Compare Now CTA, allowing users to seamlessly access the comparison view at any point. It includes an empty-slot indicator for adding more products, persistent selection storage to maintain state during navigation, and micro-interactions such as toasts and animations to provide instant feedback. On mobile, the bar adapts to a compact, collapsible pill for better screen economy and thumb-friendly usability making it easier to revisit or share comparisons.
Sticky Compare Bar
Appears after first “Add to Compare” and stays visible throughout browsing.
Quick Compare Access
“Compare Now” CTA always visible for instant navigation.
Live Selection Count
Shows number of selected items (e.g., “2/4”) with product thumbnails.
Empty-Slot Indicator
Encourages users to complete their comparison set.
Micro-Interactions
Toasts and animations give instant user feedback.
Mobile Adaptation
Collapsible, thumb-friendly pill for small screens.
User Flow Breakdown
01
Product Listing Page
Users start their journey by browsing items.
Each product card includes an “Add to Compare” button. When selected, a bottom bar appears summarizing chosen products with a prominent “Compare Now” CTA.
Key Design Goals -
• Introduce visual feedback when a product is selected.
• Keep a sticky bottom bar visible for quick access.
• Show small product thumbnails in the bar for context.
02
Product Detail Page (PDP) with Compare Integration
On the Product Detail Page, users can now directly add or manage products in comparison without returning to the listing — ensuring a smooth, connected experience.
Key Design Goals -
• Make Compare accessible from every stage of the user journey
• When a product is added, the sticky Compare Bar appears at the bottom of the screen, displaying selected product cards with price, name, and remove icons.
• Users can add up to four products and click “Compare” anytime to jump directly to the comparison view.
• Keep interaction consistent with the listing experience.
03
Compare Page
After tapping “Compare Now,” users enter the comparison grid — the heart of the product evaluation experience. The layout is designed to help users make informed decisions by visually comparing key specifications, prices, and features across multiple products.
Key Design Goals -
• Make spec-heavy data easy to scan without overwhelming users.
• Highlight key differences to guide decision-making effortlessly.
• Keep essential product details visible at all times via sticky headers.
Enhanced Comparison Interactions
To make the comparison process more intuitive and user-friendly, several interaction-level improvements were introduced. These ensure users can easily manage selections, discover products, and receive immediate feedback while staying within the flow.
Toast Message for Limit Reached
A toast message — “You can compare up to 4 products only” or “You can only compare similar product ” — gives quick, non-intrusive feedback.
➕ Sticky Add Product Bar
Sticky Add Product Bar with a ‘+’ icon lets users add more products from the comparison view, always visible for easy access.dd products effortlessly to compare.
Smart Product & Brand Search
Integrated search-as-you-type functionality within the “Add Product” modal, enabling users to find products by name or brand quickly.
Active Comparison Indicator
Added a “Compare (3)” CTA on the listing page to show the active product count, keeping users aware of their current selections.
Iteration Highlights
Final Design
Client Feedback
"The client appreciated the overall redesign, highlighting the improved usability and seamless comparison flow. They specifically praised the sticky Compare Bar, active count indicator, and PDP integration, noting how these changes made the experience feel intuitive and cohesive. The enhanced visual hierarchy and subtle feedback animations were also well-received, as they helped users stay informed without overwhelming the interface. Overall, the client found the solution visually refined, functionally consistent, and more user-centered, resulting in a smoother journey from product discovery to comparison."
Vijay Sales – Product Comparison Flow
Enhancing decision-making by delivering a cleaner interface, smarter insights, and a faster comparison experience that helps users choose with clarity and confidence.
Year :
2024
Industry :
E-commerce
Client :
Vijay Sales
Project Duration :
2 months
Problem Statement
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
"While shopping for electronics, users often feel the need to compare products side by side before making a purchase. However, the Vijay Sales website currently lacks a dedicated comparison flow. This absence creates friction in the user journey — forcing users to open multiple tabs, switch between pages, and manually evaluate specifications."
Impact of Not Having a Comparison Flow
• Users juggle tabs, adding cognitive load
• Without structure, specs look messy and confusing
• Users can’t easily see what makes products different
• Extra effort causes slower decisions and less confidence.
• Lack of clarity leads to fewer purchase actions.
What We Aimed to Achieve
01
Add products effortlessly to compare
02
Quickly identify differences in specifications
03
Make a purchase decision without friction
Research
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
To understand how users interact with the product comparison flow, I analyzed the existing Vijay Sales website and studied competitors like Best buy, Amazon, Flipkart, and Croma. The research showed that users often felt confused by too much technical information and found it hard to spot key differences between products. Many also struggled with the “Add to Compare” feature, especially on mobile devices. Most users focused only on product images, prices, and the first few specs, ignoring the rest because of visual clutter. These findings helped shape the goal — to make the comparison process easier, highlight important differences, and create a cleaner, more user-friendly experience.
Competitive analysis
To identify industry standards and usability gaps, I conducted a competitive analysis of leading e-commerce platforms, including Flipkart and Croma. Flipkart offered a functional comparison feature with a sticky compare bar and smooth product selection, but its layout felt dense, and users struggled to scan large amounts of data. Croma, on the other hand, provided a clean and minimal interface with collapsible sections, making it easier to read but lacking interactivity and real-time feedback. From these insights, I learned that an effective comparison flow should combine Flipkart’s functionality with Croma’s clarity, leading to a balanced design that focuses on both usability and visual simplicity.
Flipkart
Pros
Intuitive “Add to Compare” option directly on product cards.
Sticky compare bar that stays visible while scrolling.
Cons
Dense layout when comparing more than two products.
Outdated design with poor hierarchy.
Croma
Pros
Clean, minimal interface with balanced white space.
Easy-to-read comparison table with collapsible sections.
Cons
No sticky comparison tray.
Doesn’t support inline product quick views — redirects users away from
the comparison page.
Design Challenges
• Managing large amounts of technical data without overwhelming users.
• Highlighting product differences clearly and visually.
• Making the comparison grid responsive for mobile screens.
• Ensuring smooth user flow from product listing to comparison.
• Worked within the existing design system to ensure consistency and alignment with the new visual direction.
• Users dropped off between listing and comparison pages, so a sticky compare bar was designed to maintain continuity and quick access.
Solution
To minimize user drop-offs between the product listing and comparison views, I implemented a sticky Compare Bar that appears after the first “Add to Compare” action and remains visible across pagination, filters, and page refresh. The bar displays selected product thumbnails, a live item count (e.g., “2/4”), and a clear Compare Now CTA, allowing users to seamlessly access the comparison view at any point. It includes an empty-slot indicator for adding more products, persistent selection storage to maintain state during navigation, and micro-interactions such as toasts and animations to provide instant feedback. On mobile, the bar adapts to a compact, collapsible pill for better screen economy and thumb-friendly usability making it easier to revisit or share comparisons.
Sticky Compare Bar
Appears after first “Add to Compare” and stays visible throughout browsing.
Quick Compare Access
“Compare Now” CTA always visible for instant navigation.
Live Selection Count
Shows number of selected items (e.g., “2/4”) with product thumbnails.
Empty-Slot Indicator
Encourages users to complete their comparison set.
Micro-Interactions
Toasts and animations give instant user feedback.
Mobile Adaptation
Collapsible, thumb-friendly pill for small screens.
User Flow Breakdown
01
Product Listing Page
Users start their journey by browsing items.
Each product card includes an “Add to Compare” button. When selected, a bottom bar appears summarizing chosen products with a prominent “Compare Now” CTA.
Key Design Goals -
• Introduce visual feedback when a product is selected.
• Keep a sticky bottom bar visible for quick access.
• Show small product thumbnails in the bar for context.
02
Product Detail Page (PDP) with Compare Integration
On the Product Detail Page, users can now directly add or manage products in comparison without returning to the listing — ensuring a smooth, connected experience.
Key Design Goals -
• Make Compare accessible from every stage of the user journey
• When a product is added, the sticky Compare Bar appears at the bottom of the screen, displaying selected product cards with price, name, and remove icons.
• Users can add up to four products and click “Compare” anytime to jump directly to the comparison view.
• Keep interaction consistent with the listing experience.
03
Compare Page
After tapping “Compare Now,” users enter the comparison grid — the heart of the product evaluation experience. The layout is designed to help users make informed decisions by visually comparing key specifications, prices, and features across multiple products.
Key Design Goals -
• Make spec-heavy data easy to scan without overwhelming users.
• Highlight key differences to guide decision-making effortlessly.
• Keep essential product details visible at all times via sticky headers.
Enhanced Comparison Interactions
To make the comparison process more intuitive and user-friendly, several interaction-level improvements were introduced. These ensure users can easily manage selections, discover products, and receive immediate feedback while staying within the flow.
Toast Message for Limit Reached
A toast message — “You can compare up to 4 products only” or “You can only compare similar product ” — gives quick, non-intrusive feedback.
➕ Sticky Add Product Bar
Sticky Add Product Bar with a ‘+’ icon lets users add more products from the comparison view, always visible for easy access.dd products effortlessly to compare.
Smart Product & Brand Search
Integrated search-as-you-type functionality within the “Add Product” modal, enabling users to find products by name or brand quickly.
Active Comparison Indicator
Added a “Compare (3)” CTA on the listing page to show the active product count, keeping users aware of their current selections.
Iteration Highlights
Final Design
Client Feedback
"The client appreciated the overall redesign, highlighting the improved usability and seamless comparison flow. They specifically praised the sticky Compare Bar, active count indicator, and PDP integration, noting how these changes made the experience feel intuitive and cohesive. The enhanced visual hierarchy and subtle feedback animations were also well-received, as they helped users stay informed without overwhelming the interface. Overall, the client found the solution visually refined, functionally consistent, and more user-centered, resulting in a smoother journey from product discovery to comparison."