An e-commerce portal with a visual house configurator

Hocomo is an e-commerce platform where we helped build a web app featuring a visual house configurator, enabling users to customize and visualize their home designs easily.

TIMELINE: SEPTEMBER 2020
- PRESENT
COUNTRY: POLAND

Visit website

About

The Hocomo platform offers a visual house configurator that allows users to modify house components like elevation and color, seeing real-time visual updates. This tool supports multi-language and multi-domain management, ensuring it works seamlessly across different markets.

An integrated admin panel helps manage submissions, financial calculations, and house configurations. Built on a scalable framework, the platform enhances customer experience by allowing users to visualize their dream homes while facilitating backend management for the sales team

An incon with an exclamation mark

Did you know?

Hocomo's house configurator not only lets you design your dream home but also calculates the costs in real time as you make changes!

Richard Ganpatsingh
CTO, IntelligentHealth

(…) working with them has been a pleasure. The working relationship and level of trust we’ve built up are outstanding. Moreover, the team’s ethical approach to their business, honesty, and transparency are second to none. TeaCode has been super responsive to what we want to do and has a vested interest in our goals; they’ve very quickly become part of our team.

Main goal

Hocomo operated with no website, so the client contacted us to build their very first web app that will ease their clients to send inquiries from the website. It should be intuitive and straightforward for potential clients to navigate through the website and fill out the form.

Client's needs

The client needed a web application with a customised form for sending messages directly from the website. Customers should be able to define all house parameters in the inquiry. We suggested building a visual configurator instead, so clients could see what the final home would look like.

Hocomo also needed its employees to manage the website and its content by themselves without coding. This solution was previously applied to both website content and configuration parameters, but at the next development stage was modified to ease the price management using Google Sheets.

During the development process, additional needs emerged. Hocomo wanted to be able to constantly monitor the sales level, modify configurations and so on, so they needed an admin panel. The data should be easily exported to .xls file.

As Hocomo operates in the European market, they had a few domains to manage independently initially. We built one solution for multiple website management as they needed to make it more straightforward.

Challenges

The ultimate challenge was to integrate the house configurator with the visual layer. The overview image had to adjust in response to real-time settings changes made by a user.

Our solution

We developed a highly scalable website using next.js and integrated it with Prismic – a content management system allowing the whole team to control and maintain their input easily. We used next.js, which is perfect for building fast, static websites and is rendered server-side. That improves user experience, which was one of the main Hocomo goals.

Next.js was also a perfect solution for the project’s internationalisation. This technology allowed us to configure one project that handles multiple domains and languages.

Instead of a regular form, we’ve built a visual house configurator that allows users to customise all components depending on their needs. Because of the dynamic visualisation, users can already see the house’s appearance when settings change. We received graphics for the configurator from the client. We aimed to build a real-time solution and sync it with the visualisations. That allows users to observe changes made after choosing elevation, colours, etc.

After submitting the project, users receive their house’s visualisation and detailed specification via email. Further communication was to be taken over by the sales team.

The website content was easily managed using Prismic CMS, but Hocomo needed a custom solution for managing the configurations sent by clients. For this reason, we’ve built an administration panel. At first, it allowed administrators and the sales team to view the submitted configurations, but its functionality extended as time passed. Now, the admin panel allows users to view the configurations and make changes to the margin, assign discounts and modify house options, and generate other PDFs when any changes are applied.

What’s crucial from the business perspective, when a configuration is submitted, the system automatically calculates all the financial information and indicators that were previously calculated manually. Users can also export an xls file with detailed house estimation.

Process & Cooperation

We started cooperating with Hocomo by building a landing page and creating a visual configurator instead of a simple inquiry form. We’ve built a simple version of the admin panel to provide insight into the configurations.

The client’s needs have been changing during the development process, and the app is constantly improving.

From the very beginning, the client entrusted us with the field of software development consultation and coding. Together, we managed to exceed the previous expectations.

Results

The project grew immediately from a simple landing page to a localisation-specific visual configurator.

Currently, the configurator has more than 100 thousand monthly visits and provides a lot of monthly inquiries.

We’re still expanding the functionality of the project to provide the client with a dashboard for clients, agreements and payments management.

Additionally, we started working on another project with the client.