FloorFit

In 2018, I built the front-end for a web application for Shaw Floors called FloorFit. This app enabled users to quickly narrow down the flooring products based on their preferences and then save a mood board and suggested products. Since Shaw has such a large array of flooring options, this app provided an immersive experience to make the process of finding the perfect products much more enjoyable.

It followed the wizard design pattern where users would make selections to proceed through 4 steps: Room, Features, Investment, and Styles. Each step had its own unique design and interactions, with a smooth fullscreen wipe animation between. Also, whenever the user had made all required selections on the current step, a pulsing proceed button would appear fixed in the corner of the screen until clicked, triggering the animation to move on to the next step.

I knew this application would involve retaining state on the client-side, because some of the user input would dictate the selection options of later steps. Because of this, I built the application with Vue.js and reached for Vuex as the store library. I styled the components with Less and created the timeline wipe animations with anime.js.

I also worked closely with a motion designer who used Adobe After Effects to create the pulsing proceed button animation. By using Lottie by Airbnb, I was able to integrate the animations into the browser and trigger them with JavaScript.