Project: 3D Model & Scroll Animations
At a glance:
- Website
- Demo
- Skills
- 3D, UX, UI, Code, Project Management
- Problem
- Showcase an in-depth product feature tour
- Impact
- Increased grill orders by 14%
Created a 3D model of the hero product
I led a project to create and use a 3D model showcasing the unique construction of the Nomad Grill & Smoker. Nomad had created and brought to market a product that is changing the portable grilling landscape. They wanted a fresh way to empower their potential customers to discover key features and see the size.
Research
I collaborated with the Nomad Creative Director to gather inspiration from the GOAT and created a map of how we could achieve a full-page scroll in a similar fashion. I worked with an expert in 3D modeling to translate their manufacturing specification files in Blender to a 3D format that could be textured, optimized, and exported to use on the web. While the 3D artist was iterating on the model, we volleyed back and forth to make sure the final product would be usable on the product pages with Shopify’s native model viewer as well as the landing page.
Plan
I conquered a number of technical challenges working with 3D in the browser (i.e. file types, file sizes, animation techniques). I created a series of 12 prototypes in order to solve each of the individual problems. I storyboarded keyframes and prototyped the animation in code. I also communicated on behalf of Nomad with the 3D artist throughout the process in order to push the quality of the final model.
Execute
Though this project didn’t lead to a new marketing page on the site, we achieved our goal to create a new high-resolution 3D model for use on the product page, including Augmented Reality (AR) on capable mobile devices. Over time, this contributed to increasing the sales of the grill by 14%. With the majority of product page views on mobile, potential customers utilized AR to know the exact dimensions of the grill.
In this project, I got to explore the 3D program blender, animation technologies (including threejs and GSAP), and WebGL.
