The Project
This front-end application leverages the power of React to create a fully immersive presentational experience for Precor's strength lineup. It was constructed primarily as a Marketing tool which allows users to select one of five products from Precor's strength line, then view several color options for the frames and upholsteries.
I worked closely with the Marketing team to ensure each color for each product was represented as closely to real life as possible. The app also comes with a light/dark mode toggle to allow for better accessibility when viewing light/dark color options. You can use the right-hand menu to share your selections as well.
Incorporating 3D
The app first began as a 2D-only viewer, displaying the renderings of each product with the upholsteries layered on top of the frames, creating the illusion of a single image. Later, however, I introduced a 3D mode that completely changed the user experience. Leveraging our industrial design files, I was able to import each product's 3D model into the project and render a 3D scene using ThreeJS/React Three Drei. In real time, I was able to manipulate the colors of the meshes based on the same app state I was already using for the 2D viewer.
By combining these two modes, I created a fully immersive experience for our distributors/partners, and of course the customers to whom they sell. This app is a testament to the power of React & ThreeJS. It is live and in active use by Precor today.
The client
Headquartered in Woodinville, Washington, Precor® is a leading manufacturer of commercial fitness equipment worldwide. Precor's mission is to provide the highest quality fitness equipment to help exercisers achieve their health and wellness goals.Precor's brand is sharp and distinct, with a clean and modern design that is both functional and aesthetically pleasing.
I have the privilege of serving as Precor's Senior Web Administrator since March of 2024. My role functions as the bridge between Marketing and IT, where I spearheaded the development of Precor's marketing systems, ensuring they remain at the forefront of fitness equipment innovation.
Visit Precor's Website