Super-charging designer productivity: How I designed a tool that helped interior decorators plan, design and create photorealistic rooms in 3D, with home decor and furniture, exactly to scale.

Tintash, Product Design, 2017 - 2018

Decorist is an online interior design service that matches clients with a designers online to work with them and pull a room together given a specific style and budget.

Their flagship product Roombuilder, was one of the earliest long-term projects that I had the opportunity to work on. Before RoomBuilder, designers would create a layout with specific measurements of the client’s floor plan and select products matching their budget and aesthetic to create concepts.

Using those concepts, technical artists would then generate photorealistic images of the room through professional software such as 3ds Max and VRay. A detailed shopping list of the furniture and decor would be passed on to the client and the whole process would take a couple of days.

Decorist engaged my company to develop the Room Builder application. They wanted to automate the whole process of generating photorealistic renders and make it faster and more efficient through a user-friendly app for their designers. Before I was bought onboard, the development team did not have a dedicated UX designer.

During this time, I learned how to critique the pre-existing application and evaluating its user experience effectiveness as well as figuring out how to define new interaction models, user task flows, and user interface specifications which were consistent with what was already in place.

Since we were a team collaborating with another remote team in the United States, Roombuilder was a tremendous learning opportunity for me. Quite often, I had to communicate different scenarios, interaction models and end-to-end experiences to product managers and developers. Later on, as the product started to mature and reached its beta testing stage, I had to ensure timely development and maintenance of various design wireframes as the product evolved with our user's needs.

01 — Desigining for designers

Designing an interior design software tool for professional designers required careful planning and consideration to ensure it met their neeeds. After joining the workstream I was able to get in touch with to various stakeholders including interior designers, product owners, line managers and developers and with the help of our Product Owner, refine a list of UX considersations which would be critical for designing such a tool.

This also helped inform our Jobs-to-be-done framework that we used to keep track of the various features that needed to be created during our sprint cycles.

I have summarised a few of these considerations below:

User Interface (UI):

• Intuitive interface: Create a user-friendly and visually appealing interface that is easy to navigate, even for those with limited design experience.
  
• Workflow optimization: Streamline the design process with clear, logical workflows to make it efficient and enjoyable for users.
  
• Customization: Allow users to personalize the interface to match their preferences and working style.
  

2D and 3D Visualization:

• Provide both 2D floor plan and 3D room visualization options to help users better understand their designs.
  Realistic rendering: Utilize high-quality rendering to create lifelike representations of spaces, materials, and furniture.

Extensive Catalog and Asset Library:

• Include a diverse and extensive catalog of furniture, fixtures, materials, and accessories that users can easily browse and incorporate into their designs.
• Regularly update the library to reflect current design trends and styles.

Drag-and-Drop Functionality:

• Implement a user-friendly drag-and-drop system for placing and arranging furniture and objects within the design space.

Measurement and Scaling Tools:

• Incorporate measurement tools to ensure accurate scaling of designs.
• Allow users to input precise dimensions and automatically adjust the design accordingly.

Collaboration and Sharing Features:

• Enable collaboration among multiple users on the same project, facilitating teamwork among designers and clients.
  
• Provide sharing options, such as exporting designs in various formats or sharing them through cloud-based platforms.

Material and Color Selection:

• Include a tool for selecting and applying various materials, textures, and color schemes to surfaces and objects.
• Allow users to sample real-world paint and material colors.

Budgeting and Cost Estimation:

• Integrate a budgeting feature that helps users estimate costs based on selected materials and furnishings.
• Track expenses and be able to provide cost breakdowns for different aspects of the project commissioned by their clients.

02 — Consolidating the design language

Before I could create any features however, my first task on Rombuilder (RB) was to consolidate and harmonize the product's design language. This is a crucial step in creating a cohesive and visually appealing experience throughout the various stages of its development.

I started by thoroughly researching RB's existing design elements and assets. I looked at examples of previous iterations, Decorist's brand guidelines, and various artefacts that already existed. This was critical in helping me understand the current state of RB's design language and identify any inconsistencies.

This culminated in a basic but effective style guide that formed the basis of our design language. From the beginning of this effort, the team were keen on setting standards for various elements such as color schemes, typography, iconography, imagery style, and layout principles.

I have summarised a selection of those below:

The typeface of choice for RoomBuilder was Avenir Next - a 2004 rework of the tremendously popular geometric, sans serif Avenir designed by Adrian Frutiger. It is a modern, clean, and highly legible sans-serif typeface, which includes various weights and styles, making it suitable for a wide range of design applications, including print, web, and digital media. 

 Avenir Next's design principles prioritize simplicity, clarity, and versatility - the kind of values which resonated with our team's ambition of designing a simple yet highly effective tool.

In addition to the fonts, Three core colours — Blue, black, and white were used to define RoomBuilder's brand identity. 

The minimal use of additional color was a deliberate choice to ensure that RB's interface was as unobstructive as possible. Designed to elevate the experience, we wanted the interface to seamlessly blend in and serve as a frame for Decorist's incredible catalogue of products and homeware goods.

The usage of black helped with better readability and contrasted well with the otherwise light interface. Lastly, accents of Dodger Blue were used to guide user's focus to important Call-To-Action items.

The challenge: Designing for 3D

Pointer movement in the context of 3D, are essentially cursors or control devices used to navigate and interact with three-dimensional environments. This is quite different from 2D, flat surfaces where scale and depth are not a consideration. For me, the challenge as a designer was to create experiences which reflected the 3D canvas space that our users would be operating and designing in. Some important considerations were:

• Translation: Moving the pointer in two dimensions (X and Y) can translate an observer's viewpoint or an object within a 3D space. For example, when using a mouse or touchpad, moving the cursor horizontally or vertically can pan or tilt the view, making the users feel like they are looking around in a 3D world.
  
  
• Depth Perception: In 3D environments, depth is crucial. Pointer movement can control depth perception by allowing users to move forward or backward in a scene. I achieve this effect through a native Unity 3D functionality, which let users to scroll their mouse to simulate movement closer or farther away from objects. This was challenging because sudden movements would look and feel nauseating.
  
  
• Rotation: The pointer rotation helped control the orientation of my user's view in a 3D environment. This was vital for examining decorations and furnitures from various angles. All objects were created as full 3D models with a collision box (depending on their characteristics) to ensure the rotation felt natural.
  
  
• Selection and Interaction: Pointer movement is critical for selecting and interacting with objects in a 3D world. I spent a lot of time (and iterations) designing the optimal solution. The aim of a selection pointer, was to help the user orient objects, point at and click on objects or areas within the 3D environment and trigger actions or manipulations as required.

1. Cube

2. Sphere

3. Puck

Figure 1: Illustration from my wireframe exploring possible interactions in a 3D environment.

Figure 2: Example of a 3D object and properties within a Unity environment

Figure 3: A 3D model of a bed designed in 3DS Max with various objects stacked

In addition to the challenges around representing traversal and perception in 3D, one of the most interesting problems was object stacking. This included challenges around:

1. Spatial Perception: To tackle the spatial perception challenge, I designed clear visual cues including grid lines and snap-to guides to help users stack items precisely. Additionally, I also provided rotation and zoom controls for a more comprehensive view, making it easier for users to gauge item positioning.
   
   
2. Collision detection: In order to make the space and the objects in it feel real, the team implemented collision boxes around objects. This meant that a sofa model, for example, would not overlap a bed frame and thus look odd.
   
   
3. Object stacking: To help users select and interact with specific items within a stack, I introduced a selection hierarchy and a layering system. This allowed users to cycle through and select items in the stack while using transparent or wireframe representations when items overlapped.
   
   
4. Scaling and rotation: Scaling and rotating stacked items while preserving their proportions and alignment were addressed by implementing scaling and rotation handles. These handles appeared when users selected an item, making it easier to maintain relative positions and alignments within the stack.

03 — Key Features

Because of the complex technical challenges around automation and photorealistic rendering, the team took a test-driven R&D approach . This was paired with an agile development approach - delivering small, incremental improvements and releasing functional builds frequently. Each iteration was also deployed for user testing, with the feedback then used to improve upon the next iteration.

Here are some examples of the features that I helped design during my time with the team: 

Instant Templates

When setting up a new room, RoomBuilder gives the users two options - they can either draw floorplans themselves  - or use an existing set of templates.

These templates to serve as starting points for our users who can modify them to fit their own needs. For that purpose, I based these templates off of the most commonly used shapes in architectural drawings.

Custom Floor Plans

RoomBuilder makes it very easy to create and draw your own floor plans. This meant that users could accommodate most kinds of shapes otherwise not found in Decorist's floor plan repository. To ensure that the drawing tool was intuitive and familiar to designers, I based it off of existing vector drawing tools with snap-to-grid functionality, drawing guides and hints which made drawing custom floor plans very easy. 

Shopping List

RoomBuilder automatically detects any items that users add to their rooms and subsequently creates a shopping list. Designers simply choose items from a vast catalogue of items and design their rooms in 3D. Once they are done, RoomBuilder automatically generates a shopping list which they can then share with their clients - complete with item descriptions, any variants, retail prices and vendors etc.

Auto Budgeting

Decorist positions itself as a service which matches interior designers and clients with a pre-defined style within a budget range. Therefore, I wanted an easy way for the designers to track the price of items they are selecting for their clients. The shopping list displays a simple widget that automatically calculates the total cost of all their items placed in the room as well as the amount left in the specified budget range. 

Toolbar Redesign

One of the first tasks that I took on when asssigned to the Decorist RoomBuilder's development team was to rework the user interface (stencil shown below).

In order to do this, I conducted a workshop with our clients to help identify the pain points of the current user experience. In addition to the workshop with our clients, we conducted a series of user testing sessions and recorded them while attempting to navigate pre-determined tasks. The results of this discovery session were later presented to our client with a summary of possible solutions.

For inspiration, I looked at other tools which were designed for the purpose of design. Over the course of my research, I was able to divide all the components of the existing user interface into three broad categories: toolkit, user/file management and most importantly, a drawing canvas. The next step was to unify and structure these user interface components in a more orderly, accessible fashion. A panel was also added to keep track of the various notifications in one place.

In order to make the tool more task oriended and intuitive, I also stripped it off any unneccesary design elements to remove any visual distractions. Care was also taken to ensure efficient usage of pixel space while keeping the canvas as spacious as possible.

RoomBuilder in Action

We were able to meet all the objectives defined by the Decorist’s product team. The time taken to design a room was successfully reduced to 30-40 mins, including the time required to load the item models being used in a room. 

The time taken to generate photorealistic renders of a fully furnished room was reduced to an average 10-15 minutes per room. The entire process including the room design and rendering which usually took around two days could now be completed in less than two hours.

Reflection & Outcomes

RoomBuilder was one of my earliest long-term client engagements which instilled in me a great sense of organisation when it came to design asset and inventory management. For this purpose, I created a sketch file documenting all the elements in order to keep the design consistent and reusable across the board. This eventually became an important management tool for myself and the team to ensure quicker pace of development as the project evolved over time.

I also came to appreciate our development team's cohesiveness and ownership of the project despite the fact that it was spread across three continents and four timezones. As a UX designer and a budding global citizen, this kind of exposure was easily the hallmark of my project and offered tremendous learning opportunities for me.

Roombuilder helped reduce the processing time from two days to less than two hours.

By the end of the project, the time taken to design a room was successfully reduced to 30-40 mins, including the time required to load the item models being used in a room and resolve any performance issues. In addition to boosting designer's productivity, the time taken to generate photorealistic renders of a fully furnished room was reduced to an average 10-15 minutes per room. This meant that the entire process of designing a room and rendering it which erstwhile took around two days could now be completed in less than two hours.

"It has been a distinct pleasure working with the Tintash team. The product solves a critical conversion issue by producing photo-realistic images that are comparable (sometimes better) to those created by a 3D artist. Even though the Room Builder team is located on another continent, we've been able to collaborate effectively and efficiently; the Tintash team has even made suggestions on newer technologies to us."

-- SVP, Product and Technology, Decorist.

More Work

Over the course of my career, I've had the opportunity to work on a range of projects, across industries that continue shaping our digital landscape. I have collected a few case studies to illustrate my design process, the objectives and outcomes for some of the projects that I've worked on.

I also use this portfolio as a reference point for myself, to keep track of my learning and development as I continue evolving in my design career. Please feel free to reach out if you have any feedback, comments or if you'd like to know more about my work.

Bus Open Data Service

Designing BODS: A groundbreaking platform for nationwide bus data - a one stop hub for timetables, fares, and real-time bus locations across England.

Kia Reviews

Designing for trust: How I designed a reviews system that fosters trust, provides valuable information, and enhances car buying experience for Kia customers.

Timar

Mobile-first: Designing an application that helps users discover salons for a broad range of beauty treatments and easily manage appointments.

Thank you for visiting my website 🌍

If you'd like to know more about my work, please send me an email or get in touch on LinkedIn.