Floorigami Website

Crafting an Ecommerce Website for DIY Enthusiasts

Agency: Sagepath Reply

Role: Designer / Art Direction

Time: 2019 — 2020

The Client

Floorigami, a product line under Shaw Flooring, has established its own distinctive branding. The client has approached us to design a residential floor e-commerce website for this unique brand. Floorigami offers a range of intriguing products, setting it apart from other carpet lines. Unlike traditional options, Floorigami provides an innovative DIY experience, allowing customers to order rectangular tile-shaped carpet pieces along with accessories. With detailed guidelines, customers can assemble customized area rugs or carpets to suit their space.

Floorigami seamlessly blends practicality and beauty, making flooring both easy and enjoyable. It transforms a house into a home, evoking feelings of tranquility, warmth, and simplicity, imbued with vibrant colors and love.

The unique product line poses a challenge in the design process. Users don't just shop for ready-to-place products; they seek a DIY experience. The challenge is to make this experience seamless. We need to effectively communicate the shopping options, including determining "how many tiles do I need?" to complete the area rug or carpet. Additionally, users require guidelines on the quantity of items needed, along with necessary accessories like Easy Edge and replacement stickers.
To tackle this challenge, we prioritized the "How it Works" page, ensuring easy access from the navigation menu. We designed informative infographics and illustrations for each step: Prep, Measure, Design & Place, Attach & Cut, and Enjoy. To enhance understanding, we incorporated video assets for detailed explanations.
In the e-commerce realm, browsing and ordering processes are crucial. Therefore, we added a calculation module to guide users in determining "how many tiles do I need?" Furthermore, considering the various rug placement patterns, we implemented a visual selection feature. This enables users to choose their desired pattern, ensuring they receive the correct quantity of items and providing an estimate of the total cost with a single click.

The Concept

With a comprehensive understanding of the product, I delved into crafting the site's aesthetic. One striking aspect was the product packaging. Given the distinct size of each item, they are shipped in uniform rectangular boxes. I envisioned users having an online experience reminiscent of unboxing and diving into a DIY project. For the homepage, I opted for a 3-column layout system. This layout was chosen to mimic the ratio of the items and provide a cohesive visual experience. Additionally, I included a Style section to demonstrate how users can create their own customized flooring with images and explanations from the same collection. To streamline information, I simplified the steps into three clean and easily scannable liner illustrations. Users can also access quick instructional videos in the same location as the steps.

The client was enthusiastic about the approach; however, they expressed concerns about the potential development time associated with the 3-column scrolling feature. As a compromise, we decided to limit this feature to the homepage while maintaining a consistent look and feel throughout the entire site.

The Design

We maintain the current branding system and infuse it with a sense of joyfulness. Upholding the hierarchy of Swiss-style typography, we utilize red and dark navy as primary colors. Our iconography adopts a linear style. When selecting images, we focus on showcasing either the DIY process or the enjoyment of the space created. Lifestyle images exude a clean, relaxed, and warm tone, aligning with the desired aesthetic.

Component Library

Component-based design maintains the flexibility of an easily scalable development system. Through extensive research, wireframing, and sitemapping, we implement the design process. By adhering to a component-based approach, we streamline development, reducing time consumption and facilitating seamless maintenance in future phases.

Bring the DIY Experience to Live

We revamped the content flow for our e-commerce platform, integrating helpful guidelines throughout. Interactive features like the "How it Works" page and the "How many tiles do I need" module were added to improve user comprehension. Our focus on a smooth checkout process enables users to revisit and modify information before finalizing their purchase. Upon completion, users receive a confirmation message with a sneak peek of their package, elevating anticipation for their forthcoming DIY experience.