2D Concepting Phase

Prior to committing to the full-blown 3D experience, we ran a pilot test leveraging 2D static designs within a reformatted PDP experience to gauge user’s interest in a more premium and modern design. After receiving positive testing metrics on the 2D experience we utilized the reformatted PDP design with the objective of replacing the static 2D block with a fully immersive scroll-triggered 3D animation section.

Model Cleanup

The first step in creating the 3D experience dealt with cleaning up the client-provided CAD models. Sensitive hardware information had been removed from the internal guts of the products (which was fine for our intentions), but there was a fair amount of cleanup needed to remove unnecessary polygons and apply first-pass materials.

3D Animation

Following the cleanup of CAD files came the 3D animation workflow. I had past experience creating 2D animations using After Effects, but stepping into the 3D animation world was an entirely new skill I had to develop for this project. My background in photography and experience with studio lighting was enormously helpful in setting up camera & lighting rigs that were used in tandem with keyframed position movements to achieve the desired look for each product sequence.

After hours of video tutorials, forum discussions, and trial and error I was able to successfully produce a series of 9-second vignettes, each consisting of three “viewpoint” milestones that would be paired with relevant information. All twelve of the selected products had to be individually created with their own unique sequence showing off the product which resulted in the creation of over three thousand individual frames that would be linked to the user’s scroll pattern within that section.

Development Build

Once the individual animation frames were produced, we were able to tie the animation sequence into a 3D element block that reacted to user’s scroll. If they scrolled down the page, it progressed through the sequence, and if they scrolled back up it reversed the sequence. This gave users full control of seeing the product pan, tilt, and spin in a curated movement that gave helpful product highlights matching each viewpoint in the sequence.

A variety of factors had to be considered given the heavy impact to page performance, and due to a limitation with current web standards and data usage we opted to create an alternate mobile experience that utilized static frames for each viewpoint. Although it would have been more satisfying to run the full 3D experience across all screen sizes, serving the best experience on any given device was the top priority and ultimately led to positive testing metrics across desktop and mobile.

Before (Control Variant)

Rolling out a new template across a global audience comes with its challenges, and one area these issues spotted early on revolved around the usability of the category page. Individual product cards were placed within a horizontally scrolling module that could only be interacted with by clicking and dragging the small blue bar beneath the product cards and didn’t allow for any intuitive “dragging” of the cards themselves.

Additionally, product cards displayed a collection of less-than-helpful iconography that, although it benefitted the visual scanability of information, was visually repetitive and therefore wasn’t providing the value it should have.

Lastly, product filters rested above the product card section which not only would stay locked to the top of the page, but would load an entirely new page based on the selected parameters. This massively impacted the user experience as visitors needed to wait several seconds before the new selection had loaded.

After (Winning Test Variant)

Taking into consideration the pain points called out in the control variant, we opted to restructure the layout of the page to display product cards in a vertically scrolling wide layout. This allowed us to eliminate the unusable horizontal slider in favor for a continuous vertical scroll experience, which helped bring visibility to products hidden below the fold versus being stuck in the slider element.

This reorganization also gave us the opportunity to relocate the product filters into a persistent sidebar that follows users down the page. Our dev team also rebuilt the filter functionality from the ground up to accommodate an AJAX-style auto refresh of filtered products.

Lastly, given the extra real estate after converting product cards to a horizontal layout, we were able to introduce a short form copy block that gave a quick product overview instead of making users rely on iconography to differentiate product specs.