Case study - The Window Roller Shutter Configurator for Debesto.com
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.
- Client
debesto
- Year
2023
- Technology
Next.js
![Case study image](/_next/image?url=https%3A%2F%2Frigby-web.fra1.digitaloceanspaces.com%2Fba641fe11b5c401155b6f3bd6081d555.png&w=3840&q=85)
Client
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.
Challenge
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.
Arranging information architecture
Clear presentation of the entire process
Calculating the configuration price
Integration with an online store
Arranging information architecture
![Case study image](/_next/image?url=https%3A%2F%2Frigby-web.fra1.digitaloceanspaces.com%2Fb951482f65022b4f8b0bebb42127ac7f.png&w=3840&q=85)
Solution
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.
![Case study image](/_next/image?url=https%3A%2F%2Frigby-web.fra1.digitaloceanspaces.com%2Fc9edaa28cc0c12949fc1d357b58ed893.png&w=3840&q=85)
Results
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.
Shortening the order placement time
Streamlining the agent's work time
Facilitation of the roller shutter purchasing process
![Case study image](/_next/image?url=https%3A%2F%2Frigby-web.fra1.digitaloceanspaces.com%2F6ed6f98d98d74b38a7f5558068a69fa5.png&w=3840&q=85)