UI / UX Design
Medical Supply E-Commerce Redsign
Medical Supply E-Commerce Redesign: From Cluttered Catalog to Clean, Conversion-Focused Experience
Year :
2025
Industry :
E-commerce
Project Duration :
3 weeks
The Challenge:
This established Canadian provider of physiotherapy and rehabilitation equipment faced several critical UX challenges with their original website:
Navigation Overload: The top navigation bar featured eight primary categories competing for attention, creating decision paralysis for users trying to find specific products.
Visual Inconsistency: The homepage mixed professional product imagery with banner graphics of varying quality, diluting brand identity and trust signals.
Information Hierarchy Issues: Important elements like search functionality, account access, and the shopping cart lacked prominence, buried among competing visual elements.
Product Presentation: The "Featured Collection" and other sections used small product thumbnails with limited context, making it difficult for users to evaluate items at a glance.
Mobile Experience: The dense desktop-first layout suggested potential usability issues on smaller screens, a critical concern given the healthcare industry's mobile usage trends.
The Solution: A User-First Redesign
1. Hero Section Transformation
Before: Multiple rotating banner ads competing for attention with inconsistent messaging and quality.
After: A clean, lifestyle-focused hero image featuring an actual treatment room with natural lighting and professional equipment. The hero now communicates the brand's professional credibility immediately while the prominent "SHOP NOW" call-to-action guides users into the shopping experience.
UX Principle Applied: First impressions matter. The new hero establishes trust and professionalism within the critical first three seconds of page load.
2. Simplified Navigation Architecture
Before: Eight top-level categories (Care Supplies, Massage Products, Physio Supplies, Waxing Tables, Fast Relief, Brands & Suppliers, About Therapy Supply) created cognitive overload.
After: Streamlined navigation that prioritizes user intent over product categorization. The cleaner header allows users to focus on their primary tasks: searching, browsing, or accessing their account.
UX Principle Applied: Hick's Law – reducing choices decreases decision time and improves user satisfaction.
3. Enhanced Product Discovery
Before: Small, uniform product grids with minimal visual differentiation and star ratings that blended into the layout.
After:
Larger, high-quality product photography with consistent white backgrounds
Clear pricing hierarchy and promotional badges ("SAVE" labels)
Strategic use of lifestyle imagery showing products in context
Improved product card layouts with better visual breathing room
UX Principle Applied: Visual hierarchy and progressive disclosure help users scan and evaluate products more efficiently.
4. Category-Driven Homepage Design
The redesigned homepage introduces a more editorial approach:
Featured Category Blocks: Large, immersive images for major categories (Linens, Treatment Tables, Theraband, etc.) create visual interest and help users quickly navigate to their area of interest.
"Deals of the Week" Section: Prominently displayed promotional items with clear discount messaging and visual emphasis through red "SAVE" badges.
Curated Collections: Themed product groupings (Wound Care Essentials, Monthly Essentials, Wound Care) help users discover related items and increase basket size.
UX Principle Applied: Content chunking and visual breathing room reduce cognitive load while maintaining information density.
5. Trust and Credibility Signals
New Additions:
Prominent trust badges at the footer (Secure Payments, Fast Shipping, Quality Products, 24/7 Support)
Clean, professional product photography
Consistent brand voice and visual language
FAQ section for common customer questions
UX Principle Applied: Building trust is essential in medical supply e-commerce where product quality directly impacts patient care.
6. Improved Information Architecture
Before: Content was organized primarily by product type, requiring users to already know what they needed.
After: Multiple pathways to product discovery:
Shop by category (traditional)
Shop by use case (Wound Care, Physical Therapy, etc.)
Shop by brand
Shop by promotion/deal
UX Principle Applied: Supporting multiple mental models accommodates different user types and shopping behaviors.
7. Visual Design Refinement
Color Strategy:
Maintained the brand's blue primary color for consistency
Introduced a warmer, beige secondary color palette for lifestyle imagery
Strategic use of red for promotional elements creates urgency without overwhelming
Typography: Cleaner, more consistent type hierarchy improves scannability and reduces visual noise.
Whitespace: Generous spacing between elements creates a premium feel and improves focus.
Photography: Professional, consistent product photography on white backgrounds creates a cohesive, trustworthy shopping experience.
Outcome and Post-launch
While specific performance data requires time, the redesign positions the client to improve:
Bounce Rate: Clearer value proposition and improved first impression should reduce immediate exits
Time on Site: Better navigation and product discovery should increase engagement
Conversion Rate: Streamlined user flows and reduced friction should improve purchase completion
Mobile Conversions: Responsive design improvements should boost mobile performance
Average Order Value: Improved product discovery and related item visibility should increase basket size
Conclusion:
A Canadian medical supply e-commerce website underwent a complete digital transformation, evolving from a traditional online catalog into a modern, user-centered shopping experience. This case study explores the strategic design decisions that improved navigation, enhanced product discovery, and created a more professional brand presence in the competitive medical supply marketplace.
This medical supply e-commerce redesign demonstrates how thoughtful UX/UI design can transform a functional but cluttered shopping experience into a modern, user-centered platform that builds trust and facilitates product discovery.
By prioritizing clarity over density, trust over transaction, and user goals over feature proliferation, the new design creates a foundation for sustainable growth in the competitive medical supply market.
The success of any redesign isn't measured in aesthetics alone, but in how effectively it serves user needs while achieving business objectives. For this project, the new design balances these priorities, creating a platform that serves both healthcare professionals seeking reliable equipment and a business seeking to grow its market presence.
Design Principles Applied:
User-centered design methodology
Mobile-first responsive approach
Visual hierarchy and information architecture
Trust and credibility building
Conversion rate optimization
Brand consistency and professional credibility
Technologies: Shopify platform, responsive web design, modern web standards.
What Worked Well
Less is More: Reducing navigation options and visual clutter immediately improved clarity and user confidence.
Photography Matters: Professional, consistent product imagery dramatically elevated brand perception.
Context Creates Connection: Lifestyle imagery showing products in real treatment environments helped users envision product application.
Strategic Whitespace: Generous spacing improved readability without sacrificing information density.
Opportunities for Continued Optimization
Search Functionality: Consider adding autocomplete and search suggestions to further reduce friction.
Personalization: Future phases could incorporate personalized product recommendations based on browsing behavior.
Content Marketing: The new design provides a foundation for educational content that could improve SEO and position the company as a thought leader.
User Testing: Ongoing usability testing with actual healthcare professionals would validate design decisions and identify optimization opportunities.
UI / UX Design
Medical Supply E-Commerce Redsign
Medical Supply E-Commerce Redesign: From Cluttered Catalog to Clean, Conversion-Focused Experience
Year :
2025
Industry :
E-commerce
Project Duration :
3 weeks
The Challenge:
This established Canadian provider of physiotherapy and rehabilitation equipment faced several critical UX challenges with their original website:
Navigation Overload: The top navigation bar featured eight primary categories competing for attention, creating decision paralysis for users trying to find specific products.
Visual Inconsistency: The homepage mixed professional product imagery with banner graphics of varying quality, diluting brand identity and trust signals.
Information Hierarchy Issues: Important elements like search functionality, account access, and the shopping cart lacked prominence, buried among competing visual elements.
Product Presentation: The "Featured Collection" and other sections used small product thumbnails with limited context, making it difficult for users to evaluate items at a glance.
Mobile Experience: The dense desktop-first layout suggested potential usability issues on smaller screens, a critical concern given the healthcare industry's mobile usage trends.
The Solution: A User-First Redesign
1. Hero Section Transformation
Before: Multiple rotating banner ads competing for attention with inconsistent messaging and quality.
After: A clean, lifestyle-focused hero image featuring an actual treatment room with natural lighting and professional equipment. The hero now communicates the brand's professional credibility immediately while the prominent "SHOP NOW" call-to-action guides users into the shopping experience.
UX Principle Applied: First impressions matter. The new hero establishes trust and professionalism within the critical first three seconds of page load.
2. Simplified Navigation Architecture
Before: Eight top-level categories (Care Supplies, Massage Products, Physio Supplies, Waxing Tables, Fast Relief, Brands & Suppliers, About Therapy Supply) created cognitive overload.
After: Streamlined navigation that prioritizes user intent over product categorization. The cleaner header allows users to focus on their primary tasks: searching, browsing, or accessing their account.
UX Principle Applied: Hick's Law – reducing choices decreases decision time and improves user satisfaction.
3. Enhanced Product Discovery
Before: Small, uniform product grids with minimal visual differentiation and star ratings that blended into the layout.
After:
Larger, high-quality product photography with consistent white backgrounds
Clear pricing hierarchy and promotional badges ("SAVE" labels)
Strategic use of lifestyle imagery showing products in context
Improved product card layouts with better visual breathing room
UX Principle Applied: Visual hierarchy and progressive disclosure help users scan and evaluate products more efficiently.
4. Category-Driven Homepage Design
The redesigned homepage introduces a more editorial approach:
Featured Category Blocks: Large, immersive images for major categories (Linens, Treatment Tables, Theraband, etc.) create visual interest and help users quickly navigate to their area of interest.
"Deals of the Week" Section: Prominently displayed promotional items with clear discount messaging and visual emphasis through red "SAVE" badges.
Curated Collections: Themed product groupings (Wound Care Essentials, Monthly Essentials, Wound Care) help users discover related items and increase basket size.
UX Principle Applied: Content chunking and visual breathing room reduce cognitive load while maintaining information density.
5. Trust and Credibility Signals
New Additions:
Prominent trust badges at the footer (Secure Payments, Fast Shipping, Quality Products, 24/7 Support)
Clean, professional product photography
Consistent brand voice and visual language
FAQ section for common customer questions
UX Principle Applied: Building trust is essential in medical supply e-commerce where product quality directly impacts patient care.
6. Improved Information Architecture
Before: Content was organized primarily by product type, requiring users to already know what they needed.
After: Multiple pathways to product discovery:
Shop by category (traditional)
Shop by use case (Wound Care, Physical Therapy, etc.)
Shop by brand
Shop by promotion/deal
UX Principle Applied: Supporting multiple mental models accommodates different user types and shopping behaviors.
7. Visual Design Refinement
Color Strategy:
Maintained the brand's blue primary color for consistency
Introduced a warmer, beige secondary color palette for lifestyle imagery
Strategic use of red for promotional elements creates urgency without overwhelming
Typography: Cleaner, more consistent type hierarchy improves scannability and reduces visual noise.
Whitespace: Generous spacing between elements creates a premium feel and improves focus.
Photography: Professional, consistent product photography on white backgrounds creates a cohesive, trustworthy shopping experience.
Outcome and Post-launch
While specific performance data requires time, the redesign positions the client to improve:
Bounce Rate: Clearer value proposition and improved first impression should reduce immediate exits
Time on Site: Better navigation and product discovery should increase engagement
Conversion Rate: Streamlined user flows and reduced friction should improve purchase completion
Mobile Conversions: Responsive design improvements should boost mobile performance
Average Order Value: Improved product discovery and related item visibility should increase basket size
Conclusion:
A Canadian medical supply e-commerce website underwent a complete digital transformation, evolving from a traditional online catalog into a modern, user-centered shopping experience. This case study explores the strategic design decisions that improved navigation, enhanced product discovery, and created a more professional brand presence in the competitive medical supply marketplace.
This medical supply e-commerce redesign demonstrates how thoughtful UX/UI design can transform a functional but cluttered shopping experience into a modern, user-centered platform that builds trust and facilitates product discovery.
By prioritizing clarity over density, trust over transaction, and user goals over feature proliferation, the new design creates a foundation for sustainable growth in the competitive medical supply market.
The success of any redesign isn't measured in aesthetics alone, but in how effectively it serves user needs while achieving business objectives. For this project, the new design balances these priorities, creating a platform that serves both healthcare professionals seeking reliable equipment and a business seeking to grow its market presence.
Design Principles Applied:
User-centered design methodology
Mobile-first responsive approach
Visual hierarchy and information architecture
Trust and credibility building
Conversion rate optimization
Brand consistency and professional credibility
Technologies: Shopify platform, responsive web design, modern web standards.
What Worked Well
Less is More: Reducing navigation options and visual clutter immediately improved clarity and user confidence.
Photography Matters: Professional, consistent product imagery dramatically elevated brand perception.
Context Creates Connection: Lifestyle imagery showing products in real treatment environments helped users envision product application.
Strategic Whitespace: Generous spacing improved readability without sacrificing information density.
Opportunities for Continued Optimization
Search Functionality: Consider adding autocomplete and search suggestions to further reduce friction.
Personalization: Future phases could incorporate personalized product recommendations based on browsing behavior.
Content Marketing: The new design provides a foundation for educational content that could improve SEO and position the company as a thought leader.
User Testing: Ongoing usability testing with actual healthcare professionals would validate design decisions and identify optimization opportunities.
UI / UX Design
Medical Supply E-Commerce Redsign
Medical Supply E-Commerce Redesign: From Cluttered Catalog to Clean, Conversion-Focused Experience
Year :
2025
Industry :
E-commerce
Project Duration :
3 weeks
The Challenge:
This established Canadian provider of physiotherapy and rehabilitation equipment faced several critical UX challenges with their original website:
Navigation Overload: The top navigation bar featured eight primary categories competing for attention, creating decision paralysis for users trying to find specific products.
Visual Inconsistency: The homepage mixed professional product imagery with banner graphics of varying quality, diluting brand identity and trust signals.
Information Hierarchy Issues: Important elements like search functionality, account access, and the shopping cart lacked prominence, buried among competing visual elements.
Product Presentation: The "Featured Collection" and other sections used small product thumbnails with limited context, making it difficult for users to evaluate items at a glance.
Mobile Experience: The dense desktop-first layout suggested potential usability issues on smaller screens, a critical concern given the healthcare industry's mobile usage trends.
The Solution: A User-First Redesign
1. Hero Section Transformation
Before: Multiple rotating banner ads competing for attention with inconsistent messaging and quality.
After: A clean, lifestyle-focused hero image featuring an actual treatment room with natural lighting and professional equipment. The hero now communicates the brand's professional credibility immediately while the prominent "SHOP NOW" call-to-action guides users into the shopping experience.
UX Principle Applied: First impressions matter. The new hero establishes trust and professionalism within the critical first three seconds of page load.
2. Simplified Navigation Architecture
Before: Eight top-level categories (Care Supplies, Massage Products, Physio Supplies, Waxing Tables, Fast Relief, Brands & Suppliers, About Therapy Supply) created cognitive overload.
After: Streamlined navigation that prioritizes user intent over product categorization. The cleaner header allows users to focus on their primary tasks: searching, browsing, or accessing their account.
UX Principle Applied: Hick's Law – reducing choices decreases decision time and improves user satisfaction.
3. Enhanced Product Discovery
Before: Small, uniform product grids with minimal visual differentiation and star ratings that blended into the layout.
After:
Larger, high-quality product photography with consistent white backgrounds
Clear pricing hierarchy and promotional badges ("SAVE" labels)
Strategic use of lifestyle imagery showing products in context
Improved product card layouts with better visual breathing room
UX Principle Applied: Visual hierarchy and progressive disclosure help users scan and evaluate products more efficiently.
4. Category-Driven Homepage Design
The redesigned homepage introduces a more editorial approach:
Featured Category Blocks: Large, immersive images for major categories (Linens, Treatment Tables, Theraband, etc.) create visual interest and help users quickly navigate to their area of interest.
"Deals of the Week" Section: Prominently displayed promotional items with clear discount messaging and visual emphasis through red "SAVE" badges.
Curated Collections: Themed product groupings (Wound Care Essentials, Monthly Essentials, Wound Care) help users discover related items and increase basket size.
UX Principle Applied: Content chunking and visual breathing room reduce cognitive load while maintaining information density.
5. Trust and Credibility Signals
New Additions:
Prominent trust badges at the footer (Secure Payments, Fast Shipping, Quality Products, 24/7 Support)
Clean, professional product photography
Consistent brand voice and visual language
FAQ section for common customer questions
UX Principle Applied: Building trust is essential in medical supply e-commerce where product quality directly impacts patient care.
6. Improved Information Architecture
Before: Content was organized primarily by product type, requiring users to already know what they needed.
After: Multiple pathways to product discovery:
Shop by category (traditional)
Shop by use case (Wound Care, Physical Therapy, etc.)
Shop by brand
Shop by promotion/deal
UX Principle Applied: Supporting multiple mental models accommodates different user types and shopping behaviors.
7. Visual Design Refinement
Color Strategy:
Maintained the brand's blue primary color for consistency
Introduced a warmer, beige secondary color palette for lifestyle imagery
Strategic use of red for promotional elements creates urgency without overwhelming
Typography: Cleaner, more consistent type hierarchy improves scannability and reduces visual noise.
Whitespace: Generous spacing between elements creates a premium feel and improves focus.
Photography: Professional, consistent product photography on white backgrounds creates a cohesive, trustworthy shopping experience.
Outcome and Post-launch
While specific performance data requires time, the redesign positions the client to improve:
Bounce Rate: Clearer value proposition and improved first impression should reduce immediate exits
Time on Site: Better navigation and product discovery should increase engagement
Conversion Rate: Streamlined user flows and reduced friction should improve purchase completion
Mobile Conversions: Responsive design improvements should boost mobile performance
Average Order Value: Improved product discovery and related item visibility should increase basket size
Conclusion:
A Canadian medical supply e-commerce website underwent a complete digital transformation, evolving from a traditional online catalog into a modern, user-centered shopping experience. This case study explores the strategic design decisions that improved navigation, enhanced product discovery, and created a more professional brand presence in the competitive medical supply marketplace.
This medical supply e-commerce redesign demonstrates how thoughtful UX/UI design can transform a functional but cluttered shopping experience into a modern, user-centered platform that builds trust and facilitates product discovery.
By prioritizing clarity over density, trust over transaction, and user goals over feature proliferation, the new design creates a foundation for sustainable growth in the competitive medical supply market.
The success of any redesign isn't measured in aesthetics alone, but in how effectively it serves user needs while achieving business objectives. For this project, the new design balances these priorities, creating a platform that serves both healthcare professionals seeking reliable equipment and a business seeking to grow its market presence.
Design Principles Applied:
User-centered design methodology
Mobile-first responsive approach
Visual hierarchy and information architecture
Trust and credibility building
Conversion rate optimization
Brand consistency and professional credibility
Technologies: Shopify platform, responsive web design, modern web standards.
What Worked Well
Less is More: Reducing navigation options and visual clutter immediately improved clarity and user confidence.
Photography Matters: Professional, consistent product imagery dramatically elevated brand perception.
Context Creates Connection: Lifestyle imagery showing products in real treatment environments helped users envision product application.
Strategic Whitespace: Generous spacing improved readability without sacrificing information density.
Opportunities for Continued Optimization
Search Functionality: Consider adding autocomplete and search suggestions to further reduce friction.
Personalization: Future phases could incorporate personalized product recommendations based on browsing behavior.
Content Marketing: The new design provides a foundation for educational content that could improve SEO and position the company as a thought leader.
User Testing: Ongoing usability testing with actual healthcare professionals would validate design decisions and identify optimization opportunities.