Creation of a window roller shutter configurator that helps in selecting the right window roller shutter and then placing an order. The configurator is a one-page web application written in Next.js. The application is integrated with an online store, so after configuring the product, the user can add it to the cart and place an order.
Debesto is a company specializing in exporting windows, doors, roller shutters, and garage doors directly to construction companies. The company focuses on acquiring customers exclusively through the internet. Successfully implementing new technologies, Debesto helps its customers select suitable windows, doors, roller shutters, and garage doors that meet their expectations.
The most important aspect of the project was designing an appropriate information architecture and considering all dependencies. The system had to be very intuitive and guide the user step-by-step through the configuration process, ensuring that no essential elements necessary for a complete configuration were missed. The content and options for each subsequent step were dependent on the user's previous choices. The system had to save all selections made during the configuration process and reflect them when displaying subsequent steps. The dependency structure had to be designed in a way that future changes or additions to the configuration elements would be simple. The project's goal was simple: to facilitate ordering window roller shutters. Information architecture, appropriate UX, and a clear process were crucial. During configuration, after each choice made by the user, the configuration price should be recalculated and displayed. The final step of the process was to enable the user to add the configuration to the cart or submit it to a Debesto expert for further order details.
Before we started designing the UI and coding, we focused on creating the information architecture and considering all dependencies. We documented the dependencies in the form of a block diagram. Once the client confirmed that all dependencies were accurately captured in the architecture, we began designing the wireframes and UI. In the design, we focused on breaking down each step separately. We designed the product price display to be located in a bottom bar that remains visible during the entire blind configuration process. We decided to use vertical scrolling to navigate to the next steps, to maintain consistency with the natural way users browse a website. We developed the application using Next.js technology, which allowed us to ensure that the application would work quickly and be optimized for SEO. We integrated it with the online store using the store platform's API. After the configuration was completed, we sent a properly formatted request to the store with all the configuration data. To enable users to send their configurations to the Debesto.com expert, we designed a dedicated contact form. It allowed users to add a message to the agent, provide their email, and submit their configuration. After submission, the agent received the configuration on a designated email address for this type of request.
The clear UX of the application ensured that purchasing window blinds at Debesto is now even easier. Previously, such a purchase required a meeting with an agent. Now, the configurator significantly shortens the entire process. The client can do it themselves or send a ready configuration to the agent. The application streamlines the agent's work process and makes their time more efficiently utilized. The agent can dedicate more time to assisting the client in the final stage of the purchase and address all of their concerns.
As an employee of debesto.com, I approached Rigby with a commission to create an external roller shutter configurator. Despite the quite complicated logic of the configurator, the company managed to create it. The configurator works quickly and looks good on all devices. The cooperation itself went smoothly, all doubts were solved promptly. In case of any changes in the assumptions, they were immediately implemented. I recommend Rigby.
Product Manager at Debesto.com
Rigby Sp. z o.o
Al. Rejtana 20A, 35-310 Rzeszów
Ul. Robotnicza 42A, 53-608 Wrocław
Copyright @ 2023 Rigby - All rights reserved
Made with ❤️ by Rigby
Built using Next.js & Strapi. Hosted on Vercel & DigitalOcean. 🚀
