Snugzy.com: custom product configurator that automized and streamlined the buying process for an e-commerce company

We built a scalable product configurator that optimized order management (48 hours to 5 mins), allowed for next-day delivery, and added a fun factor to customization process, leading to increased sales, conversion and customer satisfaction.

BACKGROUND & GOAL

Nerdy Banana is a digital & e-commerce agency based in the UK & USA. Their main purpose is to engage people all over the world in non-standard, memorable gifting experiences by providing a variety of highly-customized products (like dolls, pillows, and cushions).They inquired us about creating a new product configurator they needed for a couple of the brands they manage, including Snugzy. When they contacted us, they didn’t have a tool that allowed for live customization of their offerings. All the work regarding the preparation of their products for shipment to the customer was done manually on the basis of the customer’s inquiries. This limited company’s potential for growth.Creating a friendly product configurator (in the form of a web app) was crucial for their business development as it would make the personalization friendlier, streamline the ordering process and, eventually, bring the company to the next level in terms of customer satisfaction.

CHALLENGES

No customization tool and automated order management resulted in time and cost overspending and much customer service-related activity needed to be taken.Customers couldn’t really enjoy the personalization process and were left without the fun factor, as well as no product visualization was provided instantly. They lacked a preview of the product that will be delivered and simply couldn’t add filters, texts, clothes, and other personalized effects.It also affected the stage of gadget production and shipping. Nerdy Banana’s designer needed to prepare a print version of the file consisting of the look & feel of the product. When everything was accepted by the customer, the files would be handed to the printing company and the order would be delivered after a few days at the soonest.Technological-wise, we were confronted with the challenge of choosing and applying a solution for automated cutting the faces out for photo upload that would be quick, user-friendly, and cost-effective at the same time.A configurator and template generator needed to be easily applied to the various types of products Nerdy Banana offers. They vary notably in terms of designs, shapes, or elements, and areas allowed to be customized.The configurator should also be integrated with Shopify’s order placement flow in a way that offers a consistent experience for customers and quick import of the products’ details and objects located in the Shopify database.

TOOLS, FRAMEWORKS & EXECUTION

We decided to go with a custom Shopify app, meaning creating a unique solution created exclusively for Nerdy Banana. With Vue and Nuxt JS as front-end frameworks and Ruby on Rails for the back end, we were able to integrate important third-party tools easily, through REST API & GraphQL. The application consists of three main elements:

- Front-end layer for customers allowing for live customization of the product directly on the website

- A post-purchase process with automated file preparation in the background

- Admin panel for Nerdy Banana team for updating & modifying templates of products

PRODUCT CONFIGURATOR WITH LIVE PREVIEW FOR CUSTOMERS

This is where users can check and modify how their product will look with an actual live preview. They can upload a photo and it will automatically fit into the project thanks to the integrated Cutout Pro background remover we recommended. We trained the algorithm and it works perfectly fine basically every time: we tested out different angles, lighting, or backgrounds. Customers can now easily input text, numbers, or other messaging on certain areas, as well as add or remove filters and free-roam assets like glasses or hats.

POST-PURCHASE PROCESS AUTOMATION & PRINT FILE GENERATION

We automated the process of generating print files and preparing them for shipment. Once the project is ready and the order is placed, they’re created in print quality and automatically saved as the order number into a specific Dropbox folder.What’s more, the different types of products require different saving types. For example, with the dolls, there is a requirement to create separate files for both the front and back of all dolls. We crafted a solution for this easily.By integrating the custom application with Veeqo, we managed to show the face upload & print files on packing slips for proper processing. They’re also visible in transactional e-mails.

ADMIN PANEL

With a unique admin panel we created, the Nerdy Banana team can now have more control in managing and anticipating orders. Basically, they can directly define anything that clients are able to do within the products’ templates when creating their personalized designs. They can change the available templates whenever they need to do so.They can easily determine possible elements allowed for the client’s modification, be it text input, curved text, image asset, vector asset, or photo upload mask for a particular area and shape. This applies also to their positions and areas allowed for the edits. Admins also can set upload styles and types of design that include single, multiple, mash, and tile patterns.They can view print files, image uploads, or order details, as well as the preview of any designed product. Thanks to that, easy editing of customer orders is available. They’re also able to create manual orders and print-ready files from the panel which makes it a perfect way of producing new or sample orders.

PROJECT RESULTS AND ACHIEVEMENTS

The original configurator we created allowed for user-friendly product personalization, automated the ordering process, and cut the effort and time required from the Nerdy Banana team to manage the orders.

What we achieved:

- Reduced delivery times, with next-day delivery possible (compared to a few days prior to the start of the project)

- Streamlined files preparation process: a cut from 48 hours to 5 minutes after the order is placed, meaning the production team can print orders as they come rather than fall behind with ongoing accumulation of new orders

- Increased conversion rate from 3.6% to 4.9% thanks to the fact that customers could see a preview of how their item will look during creating orders without the designer’s support

- Grew up sales by 15% compared to last year when the configurator wasn’t implemented yet

- Eliminated the human error factor due to no manual file preparation

- Reduced highly the time needed for communicating with customers who were unsure about the final look of their product

- Automated product configuration process, allowing for real-time customization and preview

- Made the product customization process fun and easy, ensuring the product looks exactly the customer imagined it to and increasing satisfaction

- Ensured the proper quality of the photos’ cutouts thus we cut the time needed to prepare a product’s design

We successfully finished the first phase of the project. Here, we were tasked with creating an original product configurator for one type of product (Snugzy dolls). In the second phase, it will act as a baseline and core component of all the product configurators that we’d create for every Nerdy Banana brand and product type.Our solution's scalability contributes to its substantial future potential, proving our team's capacity for innovative problem-solving and entire product development. The customizability across various product types indicates its adaptability to evolving market trends, customer demands, and our client’s development plans for all the brands in their portfolio. This flexibility allows Nerdy Banana to respond promptly to market shifts, maintain competitive relevance, and pursue growth opportunities.