Configurator where you can upload your own images, which can be printed on posters, glass or other materials.
Working in an e-commerce company as a software developer offers a wide range of different tasks. On rare occasions, however, there is a project where you can create a new service from scratch, where you get to manage each step from conception, system setup to implementation. I was lucky to work on such a project for our customer Wall-Art, which sells canvas prints, wall stickers and many other things you need for your home decoration.
In a three-part article series I will present my experience with that project, how our solution looks like and what pitfalls we encountered. The first article covers the fundamentals of the project including a requirement analysis and our improvements. It concludes with an overview of the overall system setup we came up with.
Status quo
Wall-Art already provided a configurator where you can upload your own images, which can be printed on posters, glass or other materials. Due to the mass of new features, they decided to rebuild the configurator from scratch.
Our first task was to analyze the state of the legacy configurator. It was a five step process directly integrated into the shop system (in Wall-Art's case: OXID):
Step 1: choose material and size of the canvas
Step 2: upload an image and choose the area to print
Step 3: optionally apply a filter to the image
Step 4: add custom options (e.g. include wall holders)Step 5: put custom canvas into basket
Each step was located on a separate page, which means that we need complete page reloads. We learned that we needed at best eleven clicks to get through the whole process. And, depending on the chosen material, we needed even more clicks.
Improvements
Most improvements we planned for the configurator were related to user experience. Our goal is to provide a smooth flow through the process. That is, the configurator should be easy to use and assist the customer in the overall process. To this end, the three biggest improvements we implemented were:
Getting rid of the multi-step setupAvoiding page reloaded by using frontend renderingSuggesting settings
Getting rid of the multi-step setup
To provide a better user experience, we replaced the step-based approach with a single page where the customer can put together his custom canvas. Thereby the customer does not have to go through the process linearly. By presenting only enabled actions and choices, the customer is still guided through the process. For instance the customer is unable to choose a filter before uploading an image.
Avoiding page reloads by using frontend rendering
Another improvement was to avoid full page reloads by using a single page application. To reduce the communication with the server, changes to the image (filter application, image rotation, area selection) are rendered directly in the browser using a JavaScript library.
Suggesting settings
To minimize the number of interactions to go through the process, the configurator pre-fills fields. As an examp
le, if a customer uploads an image, the configurator will suggest a canvas that fits best w.r.t. width, height and quality of the image. This allows to rule out canvases that are too big or would result in a low quality print.
Summary
These three improvements lead to a better experience for the customer and an increased conversion rate. To illustrate the benefits we counted the least number of clicks and page reloads needed to order a custom canvas printed on glass. The following table illustrates the suggested improvements and its benefits:
Status Improvement Benefit
multi-step process all settings on one page reduced number of clicks by 4
page reloads with server-side rendering client-side rendering reduced number of reloads by 10 customer chooses all settings pre-fill selected settings reduced number of clicks by 7
After applying the improvements, a customer only needs four clicks: one click to choose a material, two clicks for uploading an image and one click to put the custom canvas into the basket. Furthermore, a page reload is no longer necessary.
System Architecture
To implement the improvements and prepare the setup for future adjustments, we came up with a new system architecture. We split the overall architecture into three components.
The first component is the shop system OXID, which contains all products and manages the payment process. It also provides landing pages that act as a starting point for the configurator. From there the customer gets to the second component: the configurator.
The configurator is a microservice that enables the customer to put together a custom canvas with her own images. It stores the image uploaded by the customer, records all the customisations and transmits the fully configured product to the OXID shop, where the customer can actually buy it.
The process after buying a custom canvas is handled by the ERP system, which is the third component in our architecture. The ERP System stores the information about the order together with a link to the image that needs to be printed.
The overview below illustrates the three components together with their constituent parts and connections:
In the remaining articles in this series, we will dive deeper into the the components and their communication behaviour. There will be also a section about the pitfalls we encountered and how we overcame them. If you have further questions or want to be informed when the next article is published, please feel free to contact us.
Links