MillerKnoll /​Fully: Adobe Commerce Design & Implementation with Complex Product Configurator 

The Problem

As a brand, Fully had an aggressive growth trajectory from its inception and came to GRAYBOX to support their just-launched Magento 1-based ecommerce website. From the start of our work together, it was clear that the way customers—both consumers and businesses—configured and purchased their products wasn’t supported by most ecommerce platforms.

Fully made the decision early-on to use Magento (then an independent ecommerce company, now a part of Adobe and rebranded as Adobe Commerce to drive their online business. The platform’s level of customization possibilities was well-known and it served as a good foundation for their growing operation. The original implementation, though, was largely out-of-the-box and didn’t set the bar as high as Fully desired.

The key areas that needed to be addressed as part of the redesign were:

• Creating a best-in-class buying experience to support both consumer and business customers that included a more dynamic product configurator
• Migrating to Adobe Commerce as Magento 1 was nearing end-of-life
• Enable global growth, allowing multiple currencies and languages, along with consolidated payment gateways across domestic and international markets
• Unify Oracle NetSuite (their current ERP solution) as the single source of truth for product data, orders, and currencies here and abroad

As the business continued to scale, Fully added a second distribution center on the east coast to complement their HQ in Portland, Oregon. Within two years of the Magento 1 site launch, conversations started on what a redesign might look like.

Our Solution

Given the size and scale of their ecommerce operation, there was an intense focus on making sure the right folks were part of the redesign process to drive the best outcomes, from Discovery through to the site launch. Data also played a significant role in influencing decision-making.

Discovery

The charge from the client-partner team was to set a new paradigm on how customers purchased furniture online. It’s always refreshing when we’re working with folks who want to put an ambitious stake in the ground and do what it takes to get there.

We always take a persona-driven approach to our work and this project was no exception. The complicating factor here was that there were different primary pathways on the site dependent on whether it was a consumer or business audience. Consumers needed guidance into what product was best for them and to be able to cut through hundreds of options.

Businesses—small and large—also needed to understand what the options looked like, but a direct purchase at the time of product configuration, was an uncommon experience. The ability for a user to be able to configure a variety of products and then roll that into a quote that could be priced and shared within the business was incredibly important.

• There were some tent-pole decisions that were made as part of Discovery:
• Creative approach on how we were to define the home / workplace market
• UX approach to how to best address the complexities in the product configuration and buying pathways
• Identification of product configuration independencies so the team could architect a solution for what would become the product configurator

Creative & Experience

Complex ecommerce projects don’t exclusively follow a waterfall approach. Alongside the creative phase, there’s always some degree of technical architecture and solutioning that needs to happen in parallel. This project was no exception; while the creative team focused on designing an incredible customer experience, the GRAYBOX tech team got to work architecting an entirely separate product model that would marry seamlessly into the Adobe Commerce product structure.

Fully has always sought to involve best-in-class partners to drive the right outcomes for the business. Starting in Discovery—and especially in the creative phase—GRAYBOX collaborated with the Fully team as well Jelly Helm Studio and The Good. It really takes a village.

To craft the best customer experience, it was important to combine educational and brand content with commerce moments. This would come to differentiate the Fully brand in a competitive landscape.

As cores to both consumer and business pathways, the homepage, navigation, category listing page (CLP), and product page (PDP) were areas we paid significant attention to. This included making solution recommendations that could be tightly integrated into the site, including Yotpo [to our page] for product reviews and Klevu [to our page] for site search.

We recommended an approach that included interactive prototyping across a number of breakpoints so everyone could see the impact of UX decisions, including a comprehensive customization to the standard checkout.

This was no more evident than in the product configurator, which could be triggered from the PDP and exploded the options surfaced to the user. It wasn’t just about configuring a specific desk: it was about building a workspace and everything that went into, from desktop to cable management.

Anytime someone is looking at a purchase that often pushes $1,000, it’s critical that a brand reinforce confidence throughout the entire experience. A key part of this started with the product configurator, where we leveraged both photographed and 3D rendered assets to build the “space”.

One of the main challenges to solve for—from both a UX and technical perspective —was how directive Fully was going to be when they were enabling users to configure products. Too directive and users feel confined. Too open and the interdependencies of compatible products would make for a frustrating experience.

We struck a balance that allowed for the feeling of optionality as a starting point and clear communication when there were desired options that didn’t work with the ones they had previously selected. It was all about providing guardrails and reinforcing confidence in what they were configuring was the right product(s) for their needs.

Technology

While this redesign was focused on creating the best DTC/B2B ecommerce experience, there were significant technical hurdles to overcome.

The primary challenge was figuring out the product model that was needed to support the purchasing experience. When a customer purchases a desk, they think of the whole desk as the product they’re buying. In reality, though, the “product” was made up of up to two dozen individual SKUs.

Adobe Commerce—and all ecommerce platforms like Shopify or BigCommerce—have the concept of a “configurable product.” Lots of examples of these pervade the ecommerce industry: think a t-shirt that comes in 5 colors and 8 sizes. That’s a configurable product.

Enter the Super Configurable Product

For a customized desk, it really encompassed a number of different configurable products grouped together to make the entire desk. There’s nothing in Adobe Commerce or other platforms that allows you to do this, so we had to build it: enter the super configurable product.

As the name implies, the “super configurable” product type was a configurable product made up of other product types. In many ways it was “as simple as that” but it needed to be architected in a way that allows for all the standard end-user functionality to be possible.

Almost as important as ensuring that it didn’t break any out-of-the-box customer experience paradigms, the product model needed to be able to flow into Fully’s NetSuite ERP system for each order so that everything could be fulfilled accurately. This necessitated backend functionality that would split the super configurable into individual SKUs after the order was placed so inventory could be tracked and the integration between Adobe Commerce and NetSuite (via Celigo’s Integrator.io platform) wouldn’t fail.

Custom Configurator Application Parallel with Adobe Commerce

For the product configurator itself, we needed a tightly integrated front- and back-end experience so we could maintain aggressive speed performance targets across devices. Our team chose React as the Javascript framework to best serve this need and ultimately built a separate web application that tightly integrated with the Adobe Commerce front-end.

Given that “product” images (again, a combination of multiple different SKUs) need to be compiled essentially on the fly based on the user input, we needed a solution that wouldn’t impact performance. For that, we chose Cloudinary for its support of both image and video content, and they provided AI-powered auto-cropping at scale.

International Payment Unification

To support the phased international rollout of the site, payments were a real sticking point. The standard array of domestic-focused payment providers often have some international capabilities. We needed a third-party solution that would truly scale with the business. For this, we recommended Adyen as the end-to-end payment provider (and integrated fraud solution) for the US and abroad. Consolidating around this solution has been critical in enabling the brand’s success.

Finally—entirely behind the scenes—there has been a comprehensive and automated testing framework. Our QA team leveraged Selenium-enabled scripts that ran whenever a staging or production build was rolled out. Given the number of product-based permutations based on user interactions, it simply wouldn’t be possible to use human-only testing.

Launch & Follow-up

Consolidating Magento 1 and Shopify Plus websites into a single Adobe Commerce instance requires coordinated effort. Our US-based operation coordinated with a client team both here in Portland, as well as in Europe to ensure that things went smoothly.

Once this new site went live, we used New Relic's tooling to monitor the Adobe Commerce infrastructure, as well as custom synthetics to monitor the health of the external APIs which the site relied on. This helps us catch and correct any issues before they impact users.

Even with a well-orchestrated launch plan, a project like this always has unexpected hiccups, and this one was no exception. Our teams stayed connected for almost 6 hours on the live conference call as everything rolled out: it was truly a “one team” effort.

In the end, our collective team had a successful launch both here and abroad, and we couldn’t be happier with the efforts of everyone involved to get this over the finish line.