Back to all works

HouseTipster

<!--

Project Details

-->

Client:

Marble.com

Industry:

E-commerce

Role:

Senior UX/UI Designer

Year:

2020

Platform:

Desktop, Tablet & Mobile

Project Overview

HouseTipster was originally a content-only interior design blog focused on home renovation tips, DIY projects, and design inspiration. As the blog grew in popularity, the business decided to monetize by selling furniture and décor directly to readers. However, the blog-first architecture had zero e-commerce functionality, there was no way to actually purchase products. Users struggled to find shopping features, navigate the inconsistent layout, and complete purchases once e-commerce was hastily added. The challenge was to transform the site from a pure content blog into a cohesive shopping platform without losing the brand's editorial identity and loyal readership.

The Problem:

Blog-style layout made product discovery nearly impossible
Inconsistent navigation confused users switching between content and shopping
No clear path from reading articles to purchasing products
Missing trust signals (reviews, ratings, detailed product info)
Checkout process too complex, causing high cart abandonment
Loyal blog readers felt alienated by commerce attempts
Mobile experience (60% of traffic) was barely functional

The Goal:

Transform HouseTipster into an integrated content-commerce platform that maintains editorial trust while enabling seamless shopping—increasing engagement, conversions, and reducing checkout friction.

The Solution:

Redesigned the site to blend editorial content with e-commerce functionality, creating clear pathways from inspiration to purchase. Implemented intuitive navigation, integrated product reviews, streamlined checkout, and responsive layouts—resulting in increased engagement, higher returning customer rates, and faster checkout times.

My Contribution

UX research and competitive analysis
User interviews and persona creation
User flows, wireframes, and prototypes
Visual design and responsive layouts
Usability testing and iteration
Collaboration with developers and product stakeholders

Results

Engagement Rate

Returning Customer Rate

Faster Checkout Time

Before

Blog-first site:

Scattered articles with no product connection
Confusing navigation between blog
Desktop-only optimization

User Feedback: "I couldn't figure out how to buy the products they mentioned" "The checkout was too complicated, so I left" "Doesn't feel like a real store"

After

Integrated content-commerce platform:

Shoppable articles with inline product cards
Unified navigation blending shop and content
Prominent reviews, ratings, trust badges
Streamlined 3-step checkout
Mobile-first responsive design
Clear pathways from inspiration to purchase
Reduced abandonment (28%)

User Feedback: "I love that I can read their DIY guides and immediately shop the products"
"The checkout is so simple now—I actually completed my purchase"

My Approach

01 — Discovery

Business Alignment:

Conducted stakeholder workshops with Marble.com leadership
Identified key goals: grow revenue, preserve brand personality, scale e-commerce
Reviewed market research confirming home improvement market growth potential (12% annual growth)

Competitive Analysis:

Analyzed 3 competitors (Wayfair, Houzz, IKEA)
Identified UX gaps competitors left open:
- Wayfair: Great commerce, no editorial inspiration
- Houzz: Strong content, overwhelming product marketplace
- IKEA: Excellent shopping, limited styling guidance
- Opportunity: Blend editorial inspiration with seamless commerce

User Research:

Interviewed 12 HouseTipster readers and shoppers
Conducted surveys with 150+ site visitors
Analyzed 6 months of user behavior data (Google Analytics, Hotjar heatmaps)

Key Insights:

"I love reading HouseTipster's DIY guides, but when they mention a product, I have no idea how to buy it. I end up searching Amazon instead."
— Long-time blog reader

"I tried to buy a lamp from them once, but gave up. The checkout was confusing and I wasn't sure if they were legitimate."
— First-time shopper

Research Findings:

Trust deficit: 67% of users unsure if HouseTipster was a "real store"
Discovery broken: 73% couldn't find products mentioned in articles
Navigation chaos: Users bounced between blog and shop with no clear connection
Mobile disaster: 60% of traffic on mobile, but site optimized only for desktop
Checkout friction: Average 7 steps to complete purchase (industry standard: 3-4)
Missing signals: No product reviews, sparse descriptions, unclear shipping info

User Personas Identified:

DIY Enthusiast: Visits for project inspiration, occasionally buys recommended products
Home Decorator: Browses products first, reads content for styling tips
Bargain Hunter: Comparison shops, needs trust signals and clear pricing

02 — Define & Strategy

Problem Framing: The site had no native e-commerce infrastructure—when shopping was added as an afterthought, it created a disjointed experience where commerce felt completely disconnected from the content users loved. Users couldn't transition from interior design inspiration to purchasing furniture and décor.

Options Evaluated:

Option A: Keep Content and Commerce Separate

Pros: Easier implementation, minimal redesign
Cons: Confusing user paths, doesn't solve discovery issues
Decision: Rejected

Option B: Full E-Commerce Redesign (Remove Blog Focus)

Pros: Clear shopping experience, standard e-commerce patterns for furniture/décor
Cons: Alienates loyal readers, loses brand differentiation and interior design authority, kills SEO
Decision: Rejected

✅ Option C: Integrated Content + Commerce Model

Pros: Editorial supports shopping, improves engagement and SEO, unique positioning
Cons: More complex to design and build, requires content strategy
Decision: Selected—balances editorial voice with e-commerce goals

Strategic Decision: Chose Option C because user research showed both readers and shoppers valued the potential content-commerce blend—they wanted to discover furniture and décor through interior design inspiration. The integrated model would preserve HouseTipster's editorial authority while building a proper e-commerce foundation from scratch.

03 — Design

Information Architecture:

Restructured from blog chaos to integrated content-commerce ecosystem:

Old Structure (Content-Only Blog):

Home → Blog Articles (interior design tips, no shopping)
     → About / Contact
     → [No e-commerce infrastructure]

Content-Commerce Integration Strategy:

1. Shoppable Articles:

Inline product cards within blog content
"Shop This Look" sections at article end
Related products sidebar on all content pages

2. Editorial Product Pages:

Rich product descriptions with styling tips
"How to Use" sections with project ideas
Customer photos and stories
Related articles and inspiration

3. Trust-Building Elements:

Prominent customer reviews and ratings
Detailed product specifications
Clear shipping and return policies
Secure checkout badges

Navigation Design:

Global Navigation:

Unified header combining Shop + Content seamlessly
Persistent shopping cart (visible on all pages)
Search that queries both products and articles
Mega menu showing categories + featured content

Product Discovery Enhancements:

Filtering by room, style, price, color
"Complete the Look" recommendations
"As Seen In" tags linking to blog posts
Visual grid layouts for easy browsing

Visual Design System:

Brand Preservation:

Maintained HouseTipster's warm, approachable editorial aesthetic
Introduced clean, modern e-commerce elements without disrupting brand identity
Used Material Design principles for consistency and familiarity

Design Components:

Typography: Maintained editorial font for content, added clean sans-serif for commerce UI
Color Palette: Kept signature warm neutrals, added accent color for CTAs
Photography: Mix of lifestyle editorial shots + clean product images
Spacing: Generous whitespace to feel editorial, structured grids for shopping

Checkout Optimization:

Simplified from 7 steps to 3:

Step 1: Cart Review (edit quantities, apply promo codes)
  ↓
Step 2: Shipping & Billing (autofill, address validation)
  ↓
Step 3: Payment & Confirmation (multiple payment options, order summary)

Key Improvements:

Guest checkout option (no forced account creation)
Progress indicator showing 3 steps
Inline validation to prevent errors
Save cart for later (persistence)
Multiple payment methods (credit card, PayPal, Apple Pay)

Responsive Design:

Since 60% of traffic came from mobile, I designed mobile-first:

Mobile Optimizations:

Bottom navigation bar for key actions (Shop, Search, Cart, Menu)
Swipeable product image galleries
Sticky "Add to Cart" button on product pages
Thumb-friendly filters and sorting
One-tap payment options (Apple Pay, Google Pay)

Tablet Experience:

Hybrid layout blending mobile and desktop patterns
Grid view for product browsing (2-3 columns)
Floating cart preview on scroll

Desktop Experience:

Full mega menu navigation
Grid and list view options
Enhanced filtering sidebar
Larger product imagery and detail

04 — Test & Iterate

Usability Testing:

Conducted 3 rounds of testing with 7 participants per round (21 total)
Mix of existing blog readers and new shoppers
Tasks: Find product from article, browse by style, complete checkout

Testing Results:

Task success rate: 80-90% (vs. estimated 40% before)
Time on task: 20-30% faster than baseline
Error rate: <10%
Satisfaction score: 4.2/5 average

Key Iterations:

Iteration 1: Navigation Labels

Initial approach: "Shop" and "Inspiration" as separate top-level items
Problem: Users didn't understand the distinction, bounced between sections
Solution: Combined into "Shop by Room" with content integrated
Result: 45% reduction in navigation confusion

Iteration 2: Product Card Design

Initial approach: Minimal info (image, title, price)
Problem: Users needed more context to make decisions
Solution: Added quick view, ratings, "As Seen In" tag
Result: 32% increase in product page clicks

Iteration 3: Checkout Flow

Initial approach: 5-step checkout with account creation
Problem: 68% cart abandonment rate in testing
Solution: Reduced to 3 steps, made account creation optional
Result: Abandonment dropped to 28%

Iteration 4: Visual Hierarchy

Initial approach: Equal weight to all page elements
Problem: Users missed key CTAs and trust signals
Solution: Emphasized "Add to Cart," product reviews, and shipping info
Result: 27% increase in conversion intent

Iteration 5: Mobile Filtering

Initial approach: Desktop-style sidebar filters on mobile
Problem: Took up too much screen space, hard to use
Solution: Bottom sheet drawer with clear apply/reset buttons
Result: 55% improvement in mobile filter usage

Validation Methods:

Pre-launch usability testing (moderated sessions)
Post-launch A/B testing (navigation patterns, CTA placement)
Hotjar heatmaps and session recordings
Customer feedback surveys
Analytics monitoring (engagement, conversion, bounce rates)

Accessibility Compliance:

Ensured WCAG 2.1 AA compliance throughout
Keyboard navigation for all interactive elements
Screen reader testing for product pages and checkout
Color contrast verification for all text

Impact Statement

The HouseTipster transformation proved that you can successfully add e-commerce to an editorial brand without compromising either experience. By building a proper shopping foundation from scratch and integrating it thoughtfully with interior design content, we created a platform that serves both inspiration seekers and furniture/décor shoppers.

The 40-point reduction in cart abandonment and significant increase in returning customers showed that when users feel supported from interior design inspiration to furniture purchase, they become loyal to the brand—creating a sustainable business model beyond ad revenue.

Planned Improvements:

Personalization Engine: Product recommendations based on browsing and reading history
A/B Testing Program: Continuous optimization of checkout flow, product pages, and CTAs
PWA Implementation: Progressive Web App features for better mobile performance
User-Generated Content: Customer photos and project stories on product pages
Loyalty Program: Rewards for both content engagement and purchases