Brett Martin Daylight Systems required a product configurator to make selecting the appropriate modular roof light easier and more informative for the customer. The new tool will be used by people familiar with Daylight Systems products as well as those new to the product lines, so the interface needed to accommodate a quick route to finding a product code as well as a more educational route that explains each component.
The application required a web visible user interface for customers to be able to configure a product by choosing a set of options along with any extras. This configuration needed to handle single option combination exclusions as well as complex compound exclusions such as ‘manual opening’ where the option is not available if a user has selected specific sizes with ‘dome over glass’. Which meant millions of permutations and variants with different prices. How could these be managed and how would the system speed not be affected?
Working around established business process
Daylight Systems manage the vast array of options, pricing, shipping, valid combinations and business rules via a set of Excel spreadsheets. This was regularly kept up-to-date and Daylight System staff were familiar with this interface so it made sense to make this spreadsheet the main source of product data. The only change we needed to make was to transfer the data over to a Google spreadsheet which can be accessed securely online. Using an API connection, we run automated imports that extracts many layers of information including delivery lead times, available sizes, which sizes work with which options and pricing data. The benefit of this approach is that changes can be made easily and quickly whilst the client process for data entry would generally remain the same so no further training would be required.
As the focus was on creating the best user experience with speed being the top priority we opted to use a combination of Laravel for the backend data management and a separate VueJS frontend which we host on Amazon’s S3 and Cloudfront services. This combination of using a micro-service style API approach enables each component to be tuned to the best performance possible without mixing concerns and responsibilities within the codebase. We heavily used Redis for session, caching and queuing services to squeeze every last millisecond out of the API layer.
For the user facing side of the system we took the decision to implement some of the new Progressive Web App technologies that are up and coming. These enable further fine tuning of caching on the users devices along with the ability to use the app when not connected to the internet and the ability to add the app to the home screen of many devices. The user interface is just a normal website but using PWA technology we make it respond and feel just like a native app.
One of our goals was to enable Daylight Systems to be able to manage as much of the content as possible via a simple to use online control panel. This was a challenge in that the system was designed to solve the issue of a complex sales process and the highly connected sets of data often has meta-data between data sets. We achieved a very simple to use interface that allows non technical users to edit almost all of the worded graphics content quickly. All image manipulation is automated and the data sets are laid out in simple to use table formats.
We also included some additional features within the platform to make the system as easy for the customer to use moving forward including:
- Enquire about configuration online email form.
- ‘Email me these details’ functionality.
- Full list pricing where available
- Shortcode URL linking to ensure that the customer can get back to the configured product they’d selected.
- Expandable additional information for unfamiliar clients to get information whilst not providing unnecessary information to clients who already new the system.
- Subtle animations to help make the experience as pleasing as possible.
As the product configurator is now live and working, the next phase will concentrate on engaging the users further by encouraging registration so that configurations can be remembered long term. This will also form the basis of allowing web-based account management and allow for customer specific pricing. This phase will make repeat ordering simpler and provide a more tailored experience for each customer.
Rooflights are often perceived as difficult to specify because they typically have many options to choose from – size, shape, glazing material, thermal performance, lighting effect, ventilation etc. In the case of the Mardome modular rooflight range there are hundreds of thousands of possible permutations to satisfy nearly any requirement. From our first meeting it was clear Lesniak Swann understood exactly what we were trying to achieve when we proposed our Mardome configurator. They knew from the outset that this project wasn’t about a website, but rather an online communication tool that would demystify the world of rooflights, and make it simple for anyone to specify our products. They also knew that this was just the start, and so worked with us to develop a system that can evolve with us. We’ve been consistently impressed by their knowledge, enthusiasm, creativity and skill in crafting a system that will ultimately revolutionise the way we do business.