A 3D Interior Design Web App

iDesigner

A multi-platform app built with BabylonJS and Vue.js

Paweł HawrylakHEAD OF DESIGN AT MONTERAIL

Like what we do? Let’s talk about your project and build something your users will love.

Building a 3D Web app is an extremely complicated case, requiring both extensive knowledge and experience. Monterail proved to live up to our expectations in using BabylonJS and providing a full-service experience. Due to their business-wise approach, we were able to answer questions which we wouldn’t have asked on our own. And the support from the tech lead was impressive. I would recommend Monterail to all our partners and people from the industry.Sławomir HylińskiProduct Owner at Extradom.pl

Scope and Highlights

Multiplatform 3D app

Discovery Workshops

Outstanding UX/UI

8months to deliver MVP

6team members

1e-commerce intergration

The Challenge

Extradom is one of the biggest players in the Polish architecture industry. In 2017, they approached us with the idea of building a 3D interior design app for the Web. Given their approach to business, we knew they needed a truly customer-oriented solution to achieve their goals.

The list of requirements included stability of the app, shiny UX/UI, and integration with external assets via a REST API. Furthermore, the application was supposed to be accessible online on every modern operating system and browser without installation. The project ultimately included the following challenges:

The Process

It was certain from the very beginning that the app of this size and complexity demanded a powerful framework. We didn’t ponder long and chose Vue.js for the frontend. It makes data management easy even when dealing with big and complex creations like iDesigner. Considering the app’s visual nature, top-tier UX/UI tied with the design would be key to its success, so we decided to go with BabylonJS, one of the best 3D engines out there. This setup helped us maintain stability and high performance on every platform the users might choose.

Distance permitting, we were able to meet the Product Owner frequently at our place. We dissected all the pressing issues, planned iterations, and conducted discovery workshops during which we went through the app development process step-by-step. All of these insights combined contributed to the vision for the new product. Core activities at this stage included:

Frontend development with BabylonJS, Vue.js

Facilitating development by using the Virtual DOM and the Entity System

Verifying business hypotheses and planning the scope using the Agile development method

Vue.js has once again proven that it’s capable of handling even very complex projects. It allowed us to build an app with an unusual architecture and was highly flexible in the process. Leading such a project was truly a unique experience and a breath of fresh air offering an opportunity to face new challenges.Krzysztof JungSenior Frontend developer at Monterail

The Outcome

In less than eight months, we managed to release the MVP of the Web application within established deadlines and according to project-specific requirements. The application works smoothly while the implemented UX and UI solutions provide an easy and enjoyable experience. Going with Vue.js as the library of choice for building the UI, turned out to be a good choice, as it solved our data flow issues.

Although iDesigner is still in its early days, it has already gained a four-digit group of active users and become one of the key selling points of Extradom. By integrating iDesigner with external assets, Extradom was able to engage in close cooperation with e-commerce platforms which opened doors to many future cross-industry mergers. In October 2018, one of such events was Extradom’s acquisition by the Wirtualna Polska group for $19.8M. The success of the project hinged on three key factors:

Choosing powerful frameworks to build the app

A well-thought out approach and technology solutions, resulting in a stable software product