Nerdy Banana Automized custom
product configurator
for Shopify-based e-commerce

About

Let's meet Nerdy Banana

Nerdy Banana is a digital & e-commerce agency based in the UK & USA. As described in their own words, they're a bunch of creatives, designers, and strategists with big ideas, and one such is engaging people all over the world in non-standard, memorable gifting experiences.

To do so, they've built a few funky brands focused on providing a variety of highly-customized products. These include dolls, blankets, socks, pajamas, T-shirts, wrapping paper, mugs, swimsuits, aprons, underwear, pillows, cushions, pet toys, and many more.

Goal

What the client wanted to achieve

Nerdy Banana inquired us about a new product configurator they needed for a couple of the brands they manage like Snugzy, Super Socks, Nifty Gifty, Dogzy, or Air Bod. The main objective was to make the product customization phase quicker, easier, and more effective.

It would have to be working perfectly with their Shopify-based storefronts, in which their customers place orders. It meant they were looking for a custom Shopify app that would help them develop their business further.

When they contacted us, they didn't have such a tool. All the work regarding the preparation of their products for shipment to the customer was done manually.

Creating a friendly product configurator (in the form of a web app) was crucial for their business as it would make the personalization friendlier and streamline the ordering process and, eventually, bring the company to the next level in terms of customer satisfaction.

This would eventually lead to attracting new clients to the company's products and making the business scale up significantly.

Challenge

What we had to face

During the discovery session, the Nerdy Banana team said they didn't use all the sales opportunities due to the lack of an automated configurator and the at-that-moment process negatively affecting the user experience.

With the previous set-up, the process of management of orders required additional manual work from the company's design team, especially cutting out the client's faces from the uploaded pictures.

Additionally, 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 would be delivered and simply couldn't add filters, texts, clothes, and other personalized effects.

This resulted in time and cost overspending and much customer service-related activity needed to be taken as the project needed to be accepted by the customer. If it required some changes, the designer would spend additional time applying them.

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 fine, the files would be handed to the printing company and the order would be delivered after a few days at the soonest.

This wasn't ideal for Nerdy Banana's team so they asked us to support them with enhancing the product experience & buying process.

Development challenges

But before we jumped into work, we wanted to define important development objectives. A few technological challenges came into importance.

First, 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.

Thus, we needed to come up with a solution universal enough to be further developed.

Second, 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.

Third, the configurator should 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.

It should also ensure the high quality of the cutouts to evaporate the need for correcting product designs.

Solution

How we chose the stack and strategy

We knew it wouldn't be easy but having an opportunity to work on such a fun and colorful project, we simply couldn't say "no"!

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:

1. Front-end layer for customers allowing for live customization of the product directly on the website
2. A post-purchase process with automated file preparation in the background
3. 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.

However, if auto cutout doesn't work perfectly, the customer can adjust its position manually. Due to the beforehand restricted area of personalization, it's always printable so that the company doesn't need to double-check all questionable designs. They simply don't happen!

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. They can also choose the skin tone of the product for the hands, arms, and neck area.

Editing the design is facile and the same goes for creating other orders because of the feature of storing client photos so that they don't need to go through the whole process again. When clients finish the preparation of the project, they can proceed to checkout. At this very time, there is an automated post-purchase process happening in the background.

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. This significantly reduces the time needed to prepare the product to be produced.

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. What's more, they're in the position of changing the available templates whenever they need to do so.

Examples? 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.

The above describes features available in the Template Level, which enables options for configuring the products. On the Order Page level of the Admin Panel, the Nerdy Banana team can handle all the important activities regarding the orders. This way, they're always ready to support their customers with any inconsistencies or unusual situations.

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.

If you want to learn more about creating Shopify apps - check one of the articles on our blog.

Read on

Vue.js
Nuxt.js
Ruby on Rails
AWS
EC2
Postgres

Dropbox
Shopify
Veeqo

1

1 Front End Developer
2

2 Back End Developers
3

1 Project Manager
4

1 Technical Product Owner

Results

What we accomplished

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.

Delivery

4-5 d 1 d
Production Lead Time

48 hrs 5 min
File Preparation Time

24 hrs 10 s
Conversion rate

3.6% 4.9%

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.

First, our solution allowed for cost savings due to not having to manually cut out & save the print file every time there is an order placed.

Second, we limited the human error factor in saving the wrong design with a face (which previously could happen especially during busy periods).

Third, we saw an improvement in product creation & delivery of customer orders. A new, automated configurator allows for immediately preparing production files, printing, producing, and shipping personalized products.

The production team now throughout the day will print orders as they come in rather than previously having to wait till the following day to print off the previous day's orders.

Some numbers (we all like numbers!)

5 mins
Production Lead Time
1
day to deliver
0
possibility for a human error factor
15%
sales growth (so far!)

The new configurator led to reduced delivery times, with next-day delivery possible (compared to a few days prior to the start of the project).

Another desired and met result was increasing conversions thanks to the fact that customers could see a preview of how their item would look during creating orders without the designer's support.

At the same time, this reduced highly the time needed for communicating with customers who were unsure about the final look of their product.

Reduction of the number of poor quality, unfitted photos received was equally important as it slowed down the purchase process in many cases. A new tool ensured the proper quality of the photos cutouts.

Ultimately, an admin panel was created for the Nerdy Banana team, inside which they now easily create and modify product templates. This made it more efficient for the company's staff to operate and cut the time to deliver factor significantly.

Also, with this project, we paved the way for specifying the level of personalization available in the configurator for every particular product they have in their brands' portfolio.

The automated product configuration process
Fun & real-time customization
Immediate & live preview of the future product
Streamlined file preparation process
Next-day delivery possibility
Order backlog reduced to zero
Solution scalable for other products and brands

Testimonial

What our client says

I am delighted to have found more than just a vendor in Naturaily. They've become a partner in the true sense. They offer much more than superb coding services - their sound advice and proficient troubleshooting on technological issues are second to none.

Charlie Rodman

Director at Nerdy Banana

At the same time, tuning into our business specificity was apt, quick, and facile, allowing them to actively take part in transforming our business and supporting us in further growth. With Naturaily on our side, we feel confident and excited about being even better aligned with our customers' needs in terms of user experience and usability.

What I find essentially important is that they're proactive, collaborative, and great at communicating with our team.

Read the whole review on Clutch

Extras

There's something more…

We enjoyed the cooperation so much that we even created our own Naturaily dolls! On one special day, all of our employees met their Snugzy lookalikes. Now, they make a great team: together they smile, eat, work, brainstorm, drink coffee, hang out, play, and enjoy quality time.

Legends even say that the dolls-doppelgangers can talk…

Just take a look at these cuties!