Nationwide Furniture Retailer
UX/UI Transformation: From Wholesale to DTC E-Commerce Success
The Challenge
A nationwide furniture retailer approached Hubrig Crew Marketing with an ambitious goal: transform their wholesale focused business into a thriving direct to consumer (DTC) e-commerce platform. The existing website had significant UX/UI barriers preventing customers from completing purchases and creating a trustworthy shopping experience.
Comprehensive UX/UI Audit
Our team conducted an extensive usability audit across desktop and mobile devices, testing every critical user journey from product discovery to checkout. We identified 28 distinct issues affecting conversion rates, user trust, and overall experience.
Critical Issues Discovered
#1: Broken Mobile Checkout
Problem: Add to Cart buttons completely non-functional on mobile devices (iPhone/Safari and Android/Chrome).
Impact: Zero mobile conversions possible. With 60%+ mobile traffic, this was catastrophic for revenue.
Solution: Reviewed and fixed preview mechanism code to make all buttons clickable and functional across all devices.
#2: Invisible Text = Lost Trust
Problem: Text matched background color in modal cart, login pages, and critical sections (making content completely invisible).
Impact: Site appeared broken and untrustworthy. Users couldn't complete basic actions.
Solution: Identified all problematic areas and reworked chosen template code for proper contrast throughout.
#3: Inconsistent Design System
Problem: Paddings and section alignment varied wildly across pages. No unified design language.
Impact: Unprofessional appearance reduced brand credibility and user confidence.
Solution: Unified paddings and sizings across the entire codebase for consistent, professional appearance.
#4: Broken Icons & Visual Elements
Problem: Social media icons broken, comparison links invisible in sticky header, banners non-clickable.
Impact: Lost opportunities for social proof and user engagement with key features.
Solution: Reviewed and fixed icon/media links directly in code. Updated color scheme for sticky header visibility. Converted banners to proper linked elements.
#5: Non-Functional Lightbox
Problem: Product preview with eye icon opened direct link instead of proper lightbox gallery.
Impact: Poor product visualization experience, harder for customers to evaluate purchases.
Solution: Fixed product preview code to properly display images within lightbox mechanism.
#6: Broken Review System
Problem: "Write a review" button opened and immediately hid window, preventing customer reviews.
Impact: No social proof accumulation possible. Lost opportunity for authentic customer testimonials.
Solution: Fixed color scheme and reviews section functionality to enable proper review submission.
Design System Overhaul
Color Palette Problems
The existing 3-color palette (navy, gold, teal) created mismatched and unreadable layouts throughout the site. Our audit revealed incorrectly juxtaposed colors leading to poor contrast and confused user experience.
❌ Before
- Only 3 colors sampled from logo
- No hover state colors defined
- Severe readability issues
- Mismatched color combinations
✓ After
- Expanded, cohesive color palette
- Proper hover effects specified
- High contrast throughout
- Consistent brand aesthetic
Button & Interaction Chaos
We discovered multiple button variations with inconsistent styling, sizing, and hover behaviors creating a disjointed user experience across the entire site.
Problem #7: Button Overload
Excessive button types with same text/BG colors on hover. Different font sizes and capitalization, with no visual hierarchy.
Solution: Established consistent button guidelines. Created clear visual hierarchy and primary/secondary button system.
Problem #8: CTA Confusion
Inconsistent "Add to Cart" button styling across site (critical for conversions.
Solution: Unified CTA button style and reduced design variants throughout.
Problem #9: Broken Cart Icon
Cart icon appeared strange/broken in sticky header after adding products.
Solution: Enlarged icon area for proper display and functionality.
Navigation & Layout Improvements
Problem #10: Typography Inconsistency
7 different font styles in one viewport, creating visual chaos and hurting readability/performance.
Solution: Reduced to 2-3 effective font styles for better readability and site performance.
Problem #11: Duplicate Content
Header section duplicated content from Shop Info overlay, diluting value and wasting space.
Solution: Removed duplicate content. Transformed header into engaging banner with interactive elements and clear cart button.
Problem #12: Messy Header UX
Header wasn't clickable information container. It forced redirect to contact page when users clicked "Contact Us."
Solution: Converted to open banner with interactive buttons, better vertical space management, and prominent cart button.
Problem #9: Sign-in Scroll Bug
Modal popup for sign-in/register caused unwanted horizontal scroll affecting cart experience.
Solution: Fixed popup placement in code to eliminate scrolling issue.
Problem #10: Non-Clickable Banners
Homepage banners showed cursor suggesting clickability but weren't linked, creating false expectations.
Solution: Linked images to category pages and repositioned for better engagement. (Or removed them if not needed.)
User Experience Refinements
Problem #1: Account Creation Flow
Users redirected to homepage after email confirmation. Users should go to login page.
Solution: Fixed redirect to send users to login page for seamless onboarding.
Problem #2: Password Security
Reset password link flagged as suspicious by Google, damaging trust.
Solution: Reviewed email settings for possible spam blacklist on domain.
Problem #4: Sticky Header Contrast
Logo in sticky header used default color (dark primary accent accent color), making it hard to read against dark background.
Solution: Changed logo to white monochrome for primary turquoise sticky header.
Problem #5: Review Icon Confusion
Heavy contrast on review icons made both versions look rated at "5". Customers couldn't distinguish rating levels.
Solution: Reduced star icon light grey to 10% opacity or removed color palette.
Problem #6: Inconsistent Hover Effects
"Related Products" section hover effects didn't match site patterns, mixing borrowed elements from different sections.
Solution: Standardized "Related Products" module hover styles to match site-wide patterns.
Problem #8: Empty Space Waste
Category pages on mobile left massive empty spaces, a wasted opportunity to showcase products.
Solution: Updated grid and added responsive support for all screen resolutions.
Product Page Transformation
The product page required a complete redesign to focus customer attention on the purchase journey while implementing proper responsive grids and modern e-commerce best practices.
Issue #13: Poor Responsive Grid System
❌ Before
- Liquid layout didn't help grid responsiveness
- Hard to follow content flow
- Poor product discovery experience
✓ After
- Flex containers with 1440px max-width
- Enlarged featured images as focal point
- Action sidebar for purchase journey
- Organized content into logical groups
Issue #14: Attribute Organization Chaos
Problem: Attributes lacked consistent structure. When searching for a chair, users expected similar attributes grouped together ("sizes" and "details"). Current table format mixed everything creating boring, hard-to-scan product info.
Solution: Divided attributes into logical sections (like "sizes" and "details"). Organized data to help customers make informed decisions quickly. Color/fabric selection became integral part of description rather than buried in attribute table.
Issue #15: Hidden Color Selection
Problem: Colors labeled with fabric sample tiles, but exploring required extra hovering action. Combined with enlarged featured image, this replaced need for separate gallery sample display.
Solution: Replaced small color icons with large visual samples. Shortened decision-making time and made product customization instantly visible.
Issue #16: Overly Long Breadcrumbs
Problem: Full product names in breadcrumbs weren't user-friendly. Price presentation before/after reduction had the same visual hierarchy. Magnifying present price gave impression of better importance.
Solution: Collaboratively shortened product titles and kept SEO value intact. Made current pricing visually prominent with proper hierarchy. No further action required.
Measurable Results
After implementing all UX/UI recommendations, the client experienced transformative improvements in their e-commerce performance:
- Mobile conversions went from impossible to fully functional. unlocking revenue from 60%+ of traffic
- Consistent, professional design system. building customer trust and brand credibility
- Streamlined purchase journey. reduced friction at every conversion point
- Proper responsive grids. optimal experience across all devices and screen sizes
- Social proof accumulation enabled. review system fully operational for authentic testimonials
- Enhanced product visualization. proper lightbox galleries and color selection
Our UX/UI Audit Methodology
1. Multi-Device Testing
Comprehensive testing across iPhone, Android, desktop, and tablet devices to identify platform-specific issues.
2. User Journey Mapping
Testing every critical path from homepage to checkout, identifying friction points and conversion barriers.
3. Design System Analysis
Evaluating color palettes, typography, spacing, and component consistency against e-commerce best practices.
4. Code-Level Implementation
Direct code fixes rather than template limitations, ensuring proper functionality and performance.
The Transformation
Hubrig Crew Marketing transformed a wholesale furniture retailer with a broken website into a fully functional DTC e-commerce powerhouse. Our comprehensive UX/UI audit identified critical conversion barriers that were costing them sales daily, particularly the complete inability to checkout on mobile devices.
By implementing a systematic approach to fixing design inconsistencies, broken functionality, and poor user experience patterns, we created a cohesive, professional, and conversion optimized online shopping experience. The result is a website that not only looks trustworthy and modern but actually works properly across all devices, turning browsers into buyers.