In the past few years, Virtual reality and 3D product modifications have been making waves in many industries, from architecture to manufacturing. In recent months we have seen an increased demand for this technology among container manufacturers due largely thanks to their ability not only print parts but also to configure them into any shape or size that your needs may be! One such company is ContainerDiscounts which approached us about redesigning its website along with adding several key functionalities, including a dynamic pricing engine where customers can view estimated costs based on configuration options they choose when ordering online - all without having ever laid eyes upon these products prior.

The entire process of how we developed a real-time 3D custom container modification with a dynamic shipping fee is detailed in this article.

Background Information

This case study intends to demonstrate Meliora’s deep knowledge of the Shopify ecosystem. 

From building a custom Shopify theme through integrating custom/public Shopify applications, and 3D configurations to migrating/managing hundreds of products.

Also, this case study is an excellent example of Meliora’s high-quality built development processes, our rapid and agile responsiveness to change, and our ability to collaborate with 3rd parties and deliver a high-quality product on time.

Background

Our client is the world's largest online marketplace for shipping containers, based in the U.S.

They are based in the U.S., so we developed the store to serve their location. However, the day-to-day operations included a collaboration with their US and our key partners for this project from the Netherlands - Klaas Nienhuis, 3D & 3D Configurator and Frodo Schering, UI/UX and Design, so the processes needed to be strictly followed to provide a smooth working environment.

An important detail is that the client already had an up-and-running Shopify store, so the one we developed needed to provide the same user experience with the new extra functionalities.

The Challenge

The client's willingness was to disrupt the status quo.

They had two pain points. 

The first one was how to find a way to optimize their conversions, which we did through an innovative approach - by fast and easy custom container building in real-time, which does not have an equivalent in any other marketplace. 

The second challenge was providing users with a quick and easy way to find the nearest container vendor. A challenge we approached by building a smart IP filtering based on the user’s current location or a desired one. 

The client expected to have someone with deep Shopify knowledge to deliver the expected outcomes and help them grow their business. Thanks to our 15+ years in eComm, we provided significant value by constantly consulting them about technology and business-related issues and optimisations. We built a solid and trusting relationship and achieved the excellent result that is seen now.

We were referred by another partner of ours. We were selected among several agencies thanks to our deep expertise in the Shopify ecosystem and the eCommerce world. We presented a detailed plan of how we would approach the project, showing the client expertise, professionalism, and trustability.

The Solution

The project's size and difficulty required a detailed plan of each big functionality and its features.  We based our strategy on the Shopify ecosystem knowledge we gained over the years, but also we faced a few challenges that required some research from our RnD team. We found new ways to integrate the Shopify storefront with third parties and something new in our experience - to build 3D models of products, modify them in real-time and place them on the product page.

In the initial phase, we collaborated with the client to understand their business strategy, day-to-day operations, and overall website maintenance to build a long-term strategy of optimising conversions and improving the user experience.

The project had many key features and pages to implement such as a 3D product configurator, quote response, automated pricing. We created a plan for each feature which led us through the process of rapid implementation, resulting in a MVP-ready product with all needed functions - it worked great!

We kicked off with:

• Breaking the deliverables into Epics and User stories in Jira. Each epic corresponded to a page, and its stories were the FE/BE tasks breakdown.
• Determined the communication base - we used BaseCamp for the PM tool and scheduled weekly meetings with the client and the 3rd-parties involved in the project.
• Creating a Gantt chart containing all the epics and user stories.
• Creating the low-fidelity interaction designs of the priority pages, for which the designer, Frodo Schering, used Adobe XD. This not just allowed us to start the development work immediately after. Still, our client could provide real-time feedback of which we would start work ASAP and not waste time and effort implementing something, which is changed later.

We started out the development process with the Product Listing page because it’s crucial for the store and its conversions. 

There are many available products, so the filter must be as user-friendly as possible. No customer will stay on a website for more than a few minutes if they can’t easily find the thing they are looking for or keep scrolling and not find the wanted product. So, we used customers’ IP addresses for the initial containers show. This way, the customer could check the containers as close to him as possible and save from a shipping fee. Imagine a 50ft container shipping fee!

Every container has its unique characteristics, and we had to implement the filtering, considering them to be easy and fast to be maintained at the same time. Each container had a unique size, price, type, condition, and door configuration. So, we used the power of Shopify product tags and developed a custom application, which integrated with the storefront API. Based on the product’s available tags, it was either shown or not on the Listing page. This way, we killed two birds with one stone - we used native Shopify functionality, and thanks to the bulk product import, tags were easily maintained.

Using the product tags, we even displayed on the container cards if they had modifications available. This way it was super easy for the customer to check whether a container could be modified or not without any effort.

We made a real-time map view of the available products!

The map showed numbered pins with all available containers per location. Once a customer clicks on a, a container card pops up with all its characteristics leading to the product page. So, two clicks, and the customer is already on the product page of their exact desired container! Google Maps API gave us a tough time playing with it, but eventually, we conquered it.

The map view had to be identical to the list view, so we also made the filtering work there. By zooming in/out, the customer could see available containers depending on their location.

3D custom container configurator - challenge accepted!

So, each container card led the customer to its product page, where the true magic happened! By clicking a button, the customer was opening a 3D implementation of a container with its actual dimensions and the possibility to add modifications, such as windows, doors, different colors, door locks, and roofs. The changes themselves could be adjusted, too, and previewed in real-time. We made the modifications more effortless and intuitive with a drag and drop option. We also made rules for the modifications: depending on the container size, let's say 50ft, the customer could add no more than four windows as they would not fit into the container. The customer also had the option to twist the container to view all its sides. In addition, all modification prices were real-time calculated and added to the container's worth, so we also displayed a summary price. For example, for the colors, we showed the color's price per square meter, calculated the whole amount considering the container's size, and added the amount to the summary price. Whenever the customer chose different colors, they applied to the container to preview what it would look like. There was also a modification removal option before the completion. 

The 3D developer, Klaas Nienhuis, used WebGL and JavaScript for the container configurator and developed a custom application, which integrated the configurator with the Shopify storefront.

After the customer hit the Done button, they were led back to the container's product page, where we put a real-time preview of the modified container in an iframe. The customer could also check the container's details, such as surface scuffs, rubber seals, lockboxes, and even real-time opening doors, showing the container flooring. For that, we over-used the product tags again. So, each container's detail was a product tag on Shopify, allowing the bulk edit option again. 

We wanted to centralize the container's edit process so it would be super easy to maintain the hundreds of products. 

In the iframe preview, we added the container's specifications, also. Imagine a container blueprint with dimensions, weight, floor space, and equivalent. Because the containers had different specifications, we again used the product tags to display each container's ones.

Along with the preview, the customer had a list view of the modifications they added to a container with the option to edit them. 

We made the product page displaying all the essential information about a container with a no-scroll view. We developed an option to change the delivery location and the shipping fee calculating immediately depending on the customer's chosen delivery option.

We also developed a custom application that we integrated with the Acorn app and displayed different options for deferred payment.

For a primarily b2b-oriented business like this, a crucial part was for the potential customers to get a quote for one or more containers. So, once the customer had configured the container they wanted, they had the option to get a quote for it. How did we do that? We developed a “Get a quote” page, where the configured container with all its modifications and price was displayed along with the option to edit, remove or change its quantity. The cost would be re-calculated accordingly. 

We made the delivery address section almost automatically filled. We took the zip code based on the customer’s IP address, and if they had a profile in the store, their address was automatically pre-filled. Along with the address, the customer had the option to change the delivery option, and the estimated delivery would re-calculate. 

We integrated the customer information with the storefront API, so whenever a customer requested a quote, they were saved as “customer” in the Shopify admin panel along with the details they provided. So, it was super easy to reach them out afterward.

Again, the most common case for the business was a b2b sale. We needed to implement the “Get a quote” functionality to be as automated as possible. Here’s what we did. 

Once a customer filled in all the required fields and hit the send button, a draft order was automatically created in the Shopify admin panel containing all the information needed, including the custom questions we had asked in the form. The customer also received an email with a CTA to complete the order in one step. We developed a custom application for the custom delivery options and integrated it with the checkout page. Once the customers clicked the CTA button, it led them to the checkout page, where all the delivery information was pre-filled, and they were pretty much one step away from completing the order. We made it that easy! Impressive, right?

We did not just make the site super usable. We made it like you were there!

First impressions are everything, and even though the site was full of super user-friendly-developed functionalities, we needed to bring the customers’ attention at first glance. So, we made the homepage look like the customer is in the shipping yard. We simulated a 3D environment so the customer would understand what a container would look like. And not just that, they could “take a walk” in the yard with an almost 360° panorama view.

We also made each container type pop up a modal with the predefined available sizes for that type. Once a customer had selected once or more, the product listing page would open up with the sizes pre-applied as filters. We made the maintenance of those pop-ups super easy to use with the help of the Shopify customization panel. We implemented custom fields on the homepage where it could be fully edited without a code need.

And not just that, we developed the entire site available on all screen sizes!

So, it was an incredible, challenging, and learning experience for a wrap-up. We gained so much knowledge of how the Shopify APIs work. We are proud of the development level we gained from this project and believe there’s no such currently on the web!

We spent almost a year from the project kick-off to the final handover, complete with so much brainstorming and improvements, making the site as it is.

It took us about 2-3 weeks to plan the initial solution building - the discovery phase. That included an initial feedback gathering, collaboration with the client and the third parties, and research. Based on that, we developed a project forecast and a Gantt chart of the implementation.

Implementing the website itself, with all included functionalities and a live-ready state, took us ten-ish months to complete. That included design, development, and testing of the website from both our and the client sides.

The Results

With the new re-design and additional functionalities, the client saw the following immediate improvements:

• no-equivalent 3D model of the product

• fast and easy custom product builder

• increased employee productivity

• better system

• innovative and no-equivalent website

• super smooth user experience

When websites are built with thought for the end-user and provide a reliable solution for an existing problem, the benefits are not late. First and most important is the increased conversion rate and business growth.

Our client was delighted with the result and grateful that together we achieved the intended goal - to build an innovative and non-equivalent shipping container marketplace where the end-to-end user experience is nothing less than exceptional.