Custom Multi-Component Web App For a British Construction Company

How smarter software accelerated order processing and transformed customer service for a British window and door installation company.

Industry:
Construction, Ecommerce

Web Development

UX and Design

Business challenge

Constantly rising consumer expectations are a perpetual driver of delivering digital products that are fast, transparent, and easy to use. Core Sash Windows — a British window and door construction company — identified gaps in its customer experience, from first interactions to post-purchase service, and sought to address them with a strategic software overhaul.

The company’s challenges spanned multiple stages of the sales and fulfillment process.

A measurement system that lacked essential features

Core Sash Windows’ internal application for taking measurements had been developed when the company operated on a much smaller scale. Over time, its limitations became increasingly apparent.

The system didn’t provide drawing functionality, relying entirely on text-based descriptions, which managers could interpret, but customers found difficult to visualize. Rather than seeing a technical sketch, they were presented with descriptions such as “a single casement window with maximum glass and one fixed fanlight.”

To compensate, managers used third-party design tools like Paint, Krita, and Canva to create rudimentary sketches. As a result, customers received two separate PDFs — one with measurements and another with a sketch — leading to confusion and delays.

Slow and manual price estimates

Mostly manual and, therefore, drawn-out price calculation was another major bottleneck affecting customer experience. Prospective buyers often faced delays while managers referenced product catalogs to provide even a rough estimate.

Limited visibility into order processing

Opaque order processing affected both internal teams and customers:

  • After the quote was submitted and transferred to the accounting software, managers couldn’t track its status. Meanwhile, accountants struggled to sift through a slew of both accepted and rejected orders.
  • Customers received the order details via email and had no way to check the progress of their purchases. Without an online portal, they were left to rely on direct communication with company representatives for updates.

With no in-house team to act on these issues, the company partnered with *instinctools to build integrated software that could improve both internal workflows and customer interactions. We assembled a dedicated team of a business analyst, web developers, QA and DevOps engineers, and a UX/UI designer, and set to work.

Solution

To ensure that the new solution aligned with the needs of multiple stakeholders, *instinctools’ business analyst conducted interviews with measurement specialists before structuring the project backlog.

  1. Deciding on the software linchpin

We translated the client’s need for speed, transparency, and scalability into a custom web app with three interrelated components:

  1. An internal portal with seamless drawing functionality and instant price calculation.
  2. A customer-facing portal for transparent order tracking.
  3. An admin panel for managing both portals.

The team recommended building the new system with an open-source React.js library for several reasons:

  • Ease of creating an interactive interface
  • Reusable UI components
  • Fast UI rendering
  • Smooth integration with libraries needed for the project (e.g. Konva.js, Firebase, etc.)

Upon setting up the development environment and infrastructure, our team adhered to biweekly sprints and demos to keep the client in the loop.

  1. Refining the client’s order processing and tracking

A laptop screen displays a “Quote List” in a business software. The list shows customer names, dates, quote statuses, addresses, and phone numbers. Four entries with colored status tags are visible, along with a red “New Quote” button at the top right.

To reduce inefficiencies, the system was modified so that only accepted quotes were sent to the accounting software. That way, accountants could focus only on active transactions without getting sidetracked by irrelevant orders.

Our team also made it possible to track the order status within the internal portal to keep the managers updated on the order progress.

  1. Crafting an internal portal with built-in drawing functionality

Replacing the company’s outdated measurements app required a solution that was both intuitive and functional offline. Our team implemented:

  • Integrated drawing capabilities
    Powered by the Konva.js library, the drawing tool allowed managers to create detailed window and door sketches directly within the system.
  • Offline accessibility
    With support from Firebase, managers could use the tool even in areas with limited internet connectivity.
  • A more efficient product catalog
    The previous method, which required navigating thousands of catalog items, was replaced with modular templates for different product types.
A laptop screen displays a software interface for creating a new product. A popup window shows options: Sash Windows, Casement Windows, Doors, French Doors, Misc. The Casement Windows option is highlighted. Behind, tabs and a Create Product button are visible.
Diagram showing four window frame types: single casement (one window), double casement (two windows), triple casement (three windows), and quadruple casement (four windows). Each style is illustrated with simple blue rectangles.

Casement windows were consolidated into four base templates.

Sash windows required 12 templates due to variations in glazing patterns.

A digital interface displays various window templates in a grid. Options include Box, Arc, Curved Corner, Semi Circle, Semi Circle with Corner Lights, One Third Over Two Thirds, Double Box Radius Head, Triple Box, and Triple Semi-Circular Box.
Screenshot of a window design app interface showing a diagram of a casement window with dimensions. A side panel displays options: window type, double glazing, quantity, frame (aluminum), and glass type, with buttons to close or save at the top.

Any details can be added or changed at a later stage.

Doors shared attributes with casement windows, so they required only minor modifications, such as adding styles for the door leaf.

Screenshot of a window design app showing a vertical sash window with measurements, glass pattern options, and controls for saving or editing components. The interface includes tabs for overview and component, with pattern selection highlighted.
A diagram shows a blue shaded area beneath a curved arch. The arch is bordered by black lines, with numbers: 90 at the top, 50 at the sides, and 33 at the bottom center. A gray downward arrow points from the top to the bottom.

Our UX/UI designers perfected the templates down to the last detail. For instance, thanks to varying line transparency, customers can see the difference between the joints of the window parts.

We also provided the option to apply specific parameters, like openability, to individual window components rather than the entire unit.

Screenshot of a window design interface showing a diagram of a double-pane window with measurements. The left pane is selected, with the option for the sash to open left. Controls on the right adjust width, height, opening, and handle direction.

When the measurements are done, customers receive a concise, easy-to-read PDF, while manufacturers get a version containing detailed technical specifications.

Illustration of a sash window with two panes, each featuring a diagonal line indicating openings. Quote details list location as top floor small bedroom, clear glass, RAL 9016 paint, satin chrome hardware, easy clean hinge, and trickle vent as “No.”.
A technical diagram of a double-glazed window with measurements. The window is 1200mm wide and 1500mm high, opens outward, and features two sashes with triangular symbols indicating handle positions. Next to the diagram is a detailed specification list.
  1. Automating price calculation

By integrating the internal portal with the company’s accounting system, pricing became automated. This change allowed managers to provide customers with an immediate cost estimate during measurement appointments, eliminating unnecessary wait times.

  1. Building a personalized customer portal

To enhance post-purchase communication and provide customers with a simple way to check their orders, we developed a customer-facing web app.

A laptop displays a website with four quote cards at the top, each showing a quote number, date, address, description, status, and Open Quote button. Below is a section with Core Sash Windows text beside a photo of a white house with black door and sash windows.

How it works:

  • After a measurement appointment, customers receive a personalized link to their portal.
  • The portal includes a “My Quotes” section where customers can review their past and current orders.
  • A dynamic pricing module allows users to explore in real time how different service options affect the total cost.
A window quote with an illustration of a double casement window on the left and a table on the right. The selected service option is Box + Sash window, with two windows, each priced at 1,720.00 for a total of 3,440.00.
  1. Developing a centralized admin panel

To manage both the internal and customer portals, the development team built a React-based admin panel using an open-source AdminJS, which consolidated all data and system settings into a single interface.

Before

A laptop displaying a table with columns for Description, Qty, Price, Disc, Account, and Tax rate. Rows include product details like Locator: Living Room Bay Middle and a price of 2654.00, with links and guarantee information in the descriptions.
  • Sketches stored separately from the order’s text description
  • Manual pricing
  • Clumsy product selection among thousands of catalog items
  • Customer PDFs overloaded with excessive technical details
  • Declined orders have to be filtered out in the accounting software
  • Limited order tracking capabilities

After

A laptop shows a window design tool with adjustable measurements, patterns, and an “Opening” toggle. Beside it, a tablet displays a website with window quotes, order statuses, and a house image. Both screens show branding for CORE Sash Windows.
  • Integrated web app with built-in drawing functionality
  • Automated price calculation
  • Flexible product templates for easier customization
  • Two separate PDFs: simplified quotes for customers and detailed specs for manufacturers
  • Only accepted orders are transferred to the accounting software
  • Convenient order tracking for both customers and managers

Business value

  • An up-to-date and cohesive web application with interconnected components designed to support internal teams and customers
  • A step up in customer service at consideration and post-purchase stages, including more intuitive product selection and faster response times
  • Full transparency of order tracking for both customers and the client’s employees
  • Improved order management efficiency thanks to reduced manual processes, faster pricing, and clear, organized workflows for accountants, managers, and customers

Multiplier effect

Perfecting customer experience at all touchpoints is vital for any business, especially in B2C. As tech evolves so do your customers’ expectations — and most businesses aren’t keeping up. In fact, ⅔ of customers* feel brands are too slow to adapt. The good news is that there’s always a way to automate operations, increase process transparency, and simplify workflows to turn frustrating service into service excellence.

* According to the Harvard Business Review

A person in a suit points to a virtual hexagonal button labeled “SERVICE” on a digital screen. Surrounding hexagons display icons for communication, global network, tools, chat, and analytics, suggesting digital business services and technology concepts.

Do you have a similar project idea?

Anna Vasilevskaya
Anna Vasilevskaya Account Executive

Get in touch

Drop us a line about your project at contact@instinctools.com or via the contact form below, and we will contact you soon.