Room Planner
B2B / B2C desktop and mobile application that allows a user to draw and design their space with millimetre accuracy
Team: One UX/UI Designer, One User Researcher, Two Developers, One Project Manager and One QA.
Role: Product Design Lead
Timeline: 6 weeks
Introduction
As the flagship application of 3D Cloud, the 3D Room Planner is built on a robust foundation, supported by valuable live data, including analytics and user feedback. The tool has already been successfully integrated into leading DIY and home planning companies, where professional designers are trained to use it on a daily basis.
Key feedback indicates that users find the tool challenging to navigate, and the space drawing process, which averages 20 minutes, is considered too time-consuming.
Hypothesis
The navigation feature has expanded significantly to encompass the increasingly diverse product sets and evolving requirements of the client, all without giving adequate consideration to how the additional data might affect its overall clarity and usability. In light of this, we hypothesised that the poor performance of the application is primarily rooted in the confusion surrounding its navigation.
Goal
Take the current 3D planner tool and elevate its navigation above competitor propositions in the following way:
Simplify the UI to help guide the user through the full end to end room design process and reduce the average time to first product placement from 26 mins.
Improve brand consistency to allow for design system level brand customisation.
Target Audience
From looking at the clients builds and how they are using the application we can see that we have two target audiences that serve the DIY (Do it yourself) and DIFM (Do it for me) demographics:
Rebecca
Pro Designer
32 years old
Hybrid working
Adverse to change
Restricted to 1h sessions with consumers
Experianced using competitor tools
Trained in tools use
Dave & Jill
Consumers
20-25 years old
Little to no design tool experiance
Happy to spend time playing with the tool
Easily discouraged by complex journeys
Average 3 designs saved per room created
Starting Point
Unanswered Questions
Is our hypothesis correct? Are all of the tools provided by the application being used?
Are any competitors providing a more compelling experiance? if so why?
Do all of the tools need to be presented to the user at the same time?
Research & Analytics
Is our hypothesis correct? Are all of the tools provided by the application being used?
Analytics
An analysis of the analytics across all clients taken between Aug 2023 to Aug 2024 was conducted to identify items that are either unused or utilised infrequently.
Delete all 2% - Only used by internal QA to quickly clear test data.
Wall view 15% - This data was suprising and when investigated we found that users prefered to stay in 3D view and pan their camera.
User perspective view 9% - High bounce rate with an average of 2 minuets in this view.
Help 25% - Only used once a fix is triggered and the user sees a notification dot.
User feedback
Utalising user serveys, in store user interviews and the training teams feedback cycle we were able to identify:
‘The controls take up too much of my screen’
‘Products are buried under too many categories’
‘Why can’t I just search for any product at any time?’
‘Styling a product or room element is confusing’
‘I don’t know where to go once I am happy with my design’
Action items
Hide any contorls from the main navigation that are needed but used infrequently.
Look at how the data in the menus is structured and simplify this.
Improve search and filter functionality.
Remove over complex camera controls.
Siplify the help fuctionality.
Look at the overall flow of the UI to help guide the user more.
The data confirms our hypothesis thus far ✅
Market Research
Are any competitors providing a more compelling experience? if so why?
Now, with our hypothesis confirmed, I searched for other applications and products that solved similar complex UI problems to answer the next question.
2020 Spaces: A top professional design software. It is widely used in universities around the globe to train digital interior designers. https://www.2020spaces.com/
Pros
✅ Customisable toolbar section
✅ Filters
✅ Multiple viewpoints at once
✅ Tabs to section controls
Cons
❌ The UI is dated
❌ Very busy
❌ UI over complex
❌ Needs training to use confidently
Home by me: A web based application. Designed to provide a platform that any consumer can use and monetised based on add ons. https://home.by.me/en/
Pros
✅ Modern Design
✅ Stepped UI flow
✅ Simple camera options
✅ Multi room capability
Cons
❌ Lack of text to support icons
❌ No purchase journey
❌ Limited functionality
❌ No customisation options
CooHom: A web based application. A combined pro and consumer 3D design application with upgrade options to unlock functionality. https://www.coohom.com/
Pros
✅ Product search and filters
✅ Text to support icons
✅ Live chat support
✅ Multi room capability
Cons
❌ Complex camera controls
❌ No clear flow to the UI for new users
❌ No purchase journey
❌ No customisation options
After reviewing these competitors and taking into account the key pros and cons we then had to consider the following known constraints:
Constraints
1. Our clients own their own data hirachy
Our clients tend to match their eccommerce data hirachy and product categorisation. This means that although we can provide advice on data structure, ultametly the power is in the hands of the client.
2. We allow for client customisation
Because we allow for full brand customisation for colours, fonts and icons we need to ensure that we provide clarity around supporting text and their use.
3. Our tool wont allow for multiple view points at once
Due to the level of real time render quolity we use in our 3D presenntation layer we are not able to display multiple viewpoints side by side with out seriously effecting the performance of the tool.
4. We have an Ai chat bot in testing
We have an Ai chat bot in testing on our furniture modular configurator. Once proven we intend to intergrate it to all of our other tools to create a seemless support journy regardless of the tool in use.
5. No multiroom
The business has made the decision that they do not want to allow for multiroom at this time. However any work that we do now should not prevent this from becoming a reality in the future.
Brainstorming
Do all of the tools need to be presented to the user at the same time?
Next I took all of the information above and held a fully remote white-boarding session with the wider team. This allowed us to talk though options on layout, data grouping, user flows, expected outcomes and best practice. During this session we:
Pulled up our favourite E-commerce journeys that had a compelling checkout process and discussed these as a group. 30 mins
Looked at non competitor tools that solve complex navigation issues with elegant solutions. 30 mins
Listed all possible entry and exit points in the current journey and discussed SSO integration limitations. 30 mins
Took all of the current navigation options and looked at possible grouping. 20 mins
Break out sketching session where each team member drew out possible UI solutions ready for discussion. 30 mins
UI sketch discussion and refinement. 40 mins
Navigation grouping
-
New file, Save, Save as, Open, Settings, Hotkeys, copywrite
-
Draw walls, Draw Deck, Draw floor edge
-
Design from photo, Catalogue, Floors, Walls, Favourites, Customise
-
Full screen mode
-
Full screen mode
-
Full screen mode
-
Dimensions, Grid, Zoom level, Snapping, Lighting
-
Task List, Fixes, Knowledge base
-
Gallery, Save, Estimate, Product List
-
Zoom in, Zoom out, Screen captue, 2D, 3D, Render type
-
Undo, Redo, Product Lock
1
3
2
All 3 designs add a top ribbon navigation bar that allows for tabs to be added to the UI and for a best practice e-commerce style checkout to be added to the top right.
They also all have the addition of a new search bar and filters to allow for more efficient product selection
Design 1
Pros & Cons
✅ E-commerce navigation placement
✅ No floating menus
❌ Split top and bottom vanigation
❌ Horizontal UI does not scale well
❌ Reduced vertical 3D scene space
Design 2
Pros & Cons
✅ Limited change from current UI
✅ Top to bottom left to right flow
✅ Largest 3D scene space
❌ Floating menus
Design 3
Pros & Cons
✅ Well grouped placement and edit controls
✅ Top to bottom flow
❌ Reduced horizontal 3D scene space
❌ Stacked tabs on left panel confusing
Prototype & Test
From the output of the remote white-boarding session I took Design 2 and 3 into user testing. To do this I created two prototypes of the following wireframes, along with a third control prototype of the current UI that I created in the same style:
This unmoderated, quantitative user test was run using sixty test subjects split into two separate groups. Thirty pro design users and thirty DIY enthusiasts that are either in the middle of or planning a home design project. We started each test by making the user interact with the control, then to make the test fair evenly distributed the order that the users saw the other two prototypes.
Results
Affirming that not all tools need to be presented to the user at the same time. ✅ The new designs tested out performed the control to both target audiences, across all categories:
Ease of use
Speed
to find
actions
Layout
preference
Product
Navigation
Task
completion
time
Control
Design 2
Design 3
Comments of note recorded in the testing sessions:
Design 3 - ’I wish I could hide these menus to see more of the room’
Design 2 - ‘I like the larger space to show more products at once’
‘I love the filters once I found them’
UI Refinement
We made the informed decision to develop design option 2 based on these insightful results, coupled with constructive feedback from both the development and training teams. They expressed that, due to its similar placement and components when compared to the existing User Interface, the Training and Development process would consequently be greatly reduced, leading to a more efficient implementation phase.
Visual design steps
Re-draw icons to clean up the line weights and create a more modern consistent look and feel.
Stacked the Icons and contextual text in the left navigation to match the style of the original tool belt (bottom right) and reduce the amount of space needed for both of these components.
Added drop arrows to the ‘Tab Ribbon’ for elements that had drop menus for clarity.
Expanded on the checkout section of the ‘Tab Ribbon’ to include the price, gallery and save.
Added a content picker to the search bar so that users can choose to either global search or search with in a set category in the product catalogue.
Expanded the top 3 filters in the catalogue menu to provide quick access.
Added brand colours to the UI components and design system to allow for brand customisation and quick switching.
Additional factors
During the execution of this project a new requirement from the clients came into play. They requested access to different render types in the camera controls.
Also during an internal review of the finished UI updates it was noted that the top ribbon was not ver visible when it shared the same colour profile as the other menus. So I took that feedback and went with a darker colour for the ribbon bar. This change received positive feedback feedback both internally and via key stakeholder feedback.
Final Product
These foundational updates resulted in a 6% increase in sales during the first six months following their implementation. Considering the cost of the products sold, this represents a substantial and impactful improvement.
Other stats of note
Average time to first product placement decreased by 7 minuets.
Drop out rate during the planning stage decreased by 65%.
Average add to cart order value increased by 14%
Other major changes to the 3D Room Planner that I can discuss with you are:
One-click design (magic rooms)
Plan upload and trace
Worktop integration
Annotation creation and management
Tile and texture mapping
Render menu improvements
Addition of shortcut keys