Philadelphia Commercial Website
Revamping an Elegant Commercial Flooring Website
Role: Design / Art Direction
Agency: Sagepath Reply
Time: 2019
The Client
Philadelphia Commercial Carpet by Shaw is among the leading choices for commercial carpeting within the industry. Recognized for its outstanding wearability, durability, and extensive selection of colors, textures, and styles, Shaw's brand offers solutions tailored for high-traffic areas. They approached us to redesign their commercial flooring site, seeking a platform that streamlines product exploration and enhances connectivity with sales representatives.
-
The primary challenge is guiding users through the wide array of products to find exactly what they need, while also ensuring seamless connectivity with sales representatives on a commercial flooring site. Additionally, facilitating easy access to saved collections or previous orders is a key goal.
-
To address these challenges, we focused on establishing an elegant style throughout the site. We strategically placed product images not only as texture tiles but also in context, providing users with a better understanding of how they appear in real-life settings. We enhanced the filtering options with visually intuitive selections to simplify the product search process. Additionally, we incorporated a "Get in Touch" feature, prominently located at the bottom right corner of the screen, ensuring users can easily connect with sales representatives at any time. Furthermore, we developed a "My Account" page where users can conveniently view their order history and saved collections, streamlining the browsing and purchasing experience.
Digital Guidline
Our digital guideline comprehensively outlines all design elements, including typography, iconography, color palette, and UI elements. Additionally, it provides guidance on hover state transitions, allowing users to visualize room views and swatches simultaneously for a more immersive experience.
Design
With thorough research from content analysis and wireframing, we initiated the site design starting from the home page. Shaw provided high-quality rendered images showcasing their exceptional products, which we prominently featured. Room scenes were matched with actual swatches, allowing users to easily add them to their collection books with a simple click. The flowing column layout was meticulously crafted, complemented by linear elements to guide users' eyes down the page, encouraging further exploration of helpful information.
It's noteworthy to highlight the product detail page, where we implemented several user-friendly features. Users can toggle through thumbnail images to view stunning live scenes and utilize the pattern selector to better understand how the carpet's placement will meet their needs. Additionally, color swatches provide an instant view of the items. On the collection page, we featured collections with larger cards, following the column layout system to create a visually appealing design.
Product-Focused Design
The focus of product view is user-centric and intuitive, ensuring a seamless browsing experience. The design is fully responsive, adapting seamlessly to various devices. Our filter options include visually intuitive selectors, allowing users to search for items based on color palette and pattern type with ease.
My Account
Given Shaw's sales process, users can easily connect with a sales representative to place orders. We've enhanced the filter options with visually intuitive selections and ensured constant accessibility to the "Get in Touch" feature, which is fixed in the bottom right corner of the screen. Additionally, we've developed a "My Account" page where users can conveniently view their order history and saved collections, providing easy access to their account information and past activities.
The Result
The culmination of our endeavors manifests in a design aesthetic characterized by elegance and sophistication, enriching the product viewing experience with unparalleled visual appeal and user-friendly navigation throughout the entirety of the website.
