Room Planner

B2B / B2C desktop and mobile application that allows a user to draw and design their space with millimetre accuracy

Overview

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.

Goal

Take the current 3D planner tool and elevate its navigation above competitor propositions in the following way:

01. 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.

02. Improve brand consistency to allow for design system level brand customisation.

Deliverables

Output

New Desktop / mobile navigation and product menus

New Icon set update

New font hierarchy

Introduction of smart search and filters

Component library and design system update

Effect

Time to first product placement decreased by 7mins

Add to cart order value increased by 14%

Drop out rate decreased by 65%

6% increase in sales in the first 6 months

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

Steps I took

  1. Persona alignment

  2. Analytic data scrape and analysis

  3. Workshop with training team

  4. Workshop with evangelist group

  5. Customer survey

  6. Competitor analysis

  7. Site map updates

  8. PM/PO and Dev alignment

  9. Business roadmap alignment

  10. Existing component check

  11. Design team sketching session

  12. Wining designs refinement

  13. Prototype creation

  14. Unmoderated, remote, Quantitative
    user testing

What I learned

Before testing

  1. Our current persona set is too narrow.

  2. Internal business was concerned about potential re-training costs.

  3. Trained users were excited by the thought of a Ui update but worried about re-training.

  4. Competitor tools that have cleaner user interfaces are less techinical and offer less features then us.

  5. Professional designers would not use the mobile version of the tool as the screen size is not optimal for everyday use.

After testing

  1. Users found navigation items 30% faster then in the live tool.

  2. Although verbally option two to was preferred by the most users, when asked all trained staff chose option one as it involved less retraining.

Takeaways

  • Users were able to find everything that they were looking for in the new top bar.

  • Users found the navigation switching via the top bar confusing at first. But quickly got used to this function and commented how much faster this would make designing in the tool.

  • Users liked the hide and show menu structure as this gave more real estate to the 3D design element.

  • As the mobile version of the tool is only useful to a consumer user the journey will need to be different and hold their hand through the experience of building out their space.

  • Adding a more advanced search and filtering system would improve the user's experience. However each customer owns their own data hierarchy and structure, meaning adding these features would involve a heavy lift for the data BAs.

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.

Summery

Overall the changes to the ui improve the scalability of the application and allow the user to navigate more quickly and efficiently.

Along with implementation of the top tab action bar, the addition of smart search and advanced filters has been instrumental to the success of achieving its goal of reducing the time to first product added into the 3D scene.

Given the opportunity to do this project again I would generate two versions of the tool. One that matches the output shown above and one that is a more extreme change to the Ui, that would look to implement the end users requests without the constraint of keeping the ui similar to the live version to reduce training. As I believe that the ui could be made intuitive enough to illuminate the need for basic tool training all together.