Shaw Floors

In early 2019, I worked on a team to develop a redesigned Shaw Floors homepage. It was meant to showcase the flooring options for every occasion. The design featured an interactive 3D scene of a room where the camera perspective would change as the user scrolled down the page. At any frame in the scroll animation, the user could toggle the scene to show it in day or night time, and they could also switch the type of floor in the room they're currently viewing. To add an element of surprise and keep the experience feeling fresh for return users, we featured three different rooms, one of which would be shown at random each time they revisited the page.

I led the front-end development of this page and built it with HTML, Less, JavaScript, and Three.js.

Accomplishments

I created a 3D scene of a room that would smoothly rotate the camera perspective as the user scrolled down the page.

• Problem: This component involved complex animations that would be extremely difficult to render at high FPS (frames per second) if built from scratch using the default browser APIs.
• Solution: In order to enable smooth animations, I reached for Three.js to leverage the client's GPU and increase the FPS.

I optimized the 3D scene of the room to work well on all devices, regardless of internet connection quality.

• Problem: Initially, the component required loading about 150 large images, one for each frame of the animation, so our team noticed the client bundle size of all assets was extremely large and wouldn't perform well on devices with a poor internet connection.
• Solution: Our team decided to remove two out of every three images from the animation, bringing the total down from 150 to about 50 frames. Then, we ran a script to batch compress them and decrease all of their file sizes. This decision lowered the fidelity of the animation, making it appear slightly more choppy, especially when the user scrolls slowly. However, it brought the total bundle size down below an agreed upon threshold of 10MB, which made the page load more quickly and improved performance for users on devices with poor internet connections.