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

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.

  • trending-up icon

    Arranging information architecture

  • trending-up icon

    Clear presentation of the entire process

  • trending-up icon

    Calculating the configuration price

  • trending-up icon

    Integration with an online store

  • trending-up icon

    Arranging information architecture

Case study image

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

    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.

    • check icon

      Shortening the order placement time

    • check icon

      Streamlining the agent's work time

    • check icon

      Facilitation of the roller shutter purchasing process

    Case study image

    Tell us about your project

    Got a project in mind? Let's make it happen!

    placeholder

    Grzegorz Tomaka

    Co-CEO & Co-founder

    LinkedIn icon
    placeholder

    Jakub Zbaski

    Co-CEO & Co-founder

    LinkedIn icon