Case study - The Window Roller Shutter Configurator for Debesto.com

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.