Room Planner
Navigation Redesign for Efficiency and Scalability
Role: Lead UX & Product Designer
Context: B2B/B2C | Web & Mobile | E-commerce Integration
🧠 The Challenge
The 3D Room Planner is the flagship application of 3D Cloud, used daily by professional designers and consumers across major retail clients such as B&Q. While rich in features and live analytics, user feedback and behavioural data flagged key pain points:
Navigation was unintuitive and slowed task completion.
Time to first product placement averaged 26 minutes, a key conversion bottleneck.
UI complexity increased drop-off and training overhead for partner teams.
⚽️ Strategic Goal
Redesign the navigation and UI to reduce time-to-first-action, increase sales conversions, and make the product scalable across brands—without alienating trained power users.
🎯 Design Objectives
Simplify and modernise UI/UX to reduce cognitive load.
Enhance discoverability of core features and speed up room planning workflows.
Ensure brand-level customisation via a shared design system.
Deliver measurable improvements in conversion and retention.
Just for context
Here is a live example of the application deployed for B&Q (taken 12.07.2024). A UK home retail customer that has professional designers that are trained on it’s use as well as providing direct customer access via their e-commerce platform.
✍🏼Wireframes
🧭 Approach & Methods
🔍 Research & Discovery
Persona refresh through data-driven analysis and stakeholder alignment
Google Analytics funnel deep dive (conversion & dropout focus)
Stakeholder workshops: in-house training teams, client evangelists, and sales
Competitor audits (IKEA, Planner 5D, Roomstyler)
Cross-functional alignment with PM, PO, and dev leads
Component audit to assess reusability and scalability
🧪 Testing & Validation
Multiple navigation prototypes
Quantitative unmoderated testing (internal & external users)
Success metrics: task completion time, navigation clarity, preference scores
Trade-off analysis between “minimal retraining” and “max UX gain” variants
📤Takeaways
Top Bar Navigation: Users were able to find everything they needed in the new top bar.
Initial Confusion, Quick Adoption: Some users found top bar navigation switching confusing at first but quickly adapted and appreciated the improved speed.
Improved Workspace: Users liked the collapsible menu for maximizing 3D design space.
Mobile Experience Needs Guidance: The mobile version caters to consumers and should guide users step-by-step through the design process.
Advanced Search Challenges: Users want better search and filtering, but implementing this is complex due to each customer owning a unique data structure.
🎨 Final Design
Mobile Design
Mobile design taken to its own separate project as it was found that it would need a more hands on approach when it comes to guidance. This can be shown if you decide to invite me to interview.
✨ Key Design Solutions
Solution
Area
Impact
Show/hide menus to prioritise 3D canvas space
Menus
Reduced visual clutter
Smart filters & contextual search
Search
Improved product findability
Modular components, customisable per brand
Design System
Increased scalability, faster rollout
+30% faster nav performance
Navigation
Top-tab action bar to streamline access to key workflows
📈 Outcomes &
Business Impact
Metric
Result
⏱️ Time to first product placed
↓ 7 minutes
🛒 Avg. order value (add-to-cart)
↑ 14%
❌ Dropout rate
↓ 65%
💰 Sales (within 6 months)
↑ 6%
🔄 What I Learned
Training friction is real: While users verbally preferred a bold UI change, they pragmatically chose minimal retraining paths.
Mobile ≠ Desktop: Professional users rejected mobile workflows entirely, leading to a pivot—mobile UX is now being designed specifically for consumer onboarding and handholding.
Search ≠ Universal: Each client owns their own taxonomy, making scalable smart search challenging without foundational data restructuring.
🧠 Strategic Takeaway
Balancing innovation with legacy constraints is key when designing enterprise-grade tools. Given another opportunity, I’d push for dual-design pathways:
Incremental version for ease of adoption
Visionary version to demonstrate full UX potential and reduce training dependency entirely.
