Overview
At Zia Tile scale, we needed a custom best-in-class eCommerce solution with maximum performance, reliability, and content flexibility. For these reason we chose to go with Shopify Plus, migrating from the existing Wordpress Woocommerce site. While a headless solution is more complicated to implement and maintain, at scale there are certain advantages - here it made a lot of sense. We leveraged Shopify as the eCommerce CMS + checkout and Storyblok for a content focused CMS with a visual editor.
- Discovery
- Branding
- Art/stylistic website direction
- Website design & development
- Trade program application
- Wishlist project builder application
- Heavy freight shipping application at checkout
Every tile is an expression of the artisan's work that day— beautifully imperfect and unique.
Danny Mitchell, ZIA Tile
Discovery
To start every project, we perform discovery with key stakeholders on each side. Here we performed exercises and held discussions on topics such as branding, site mapping, strategic initiatives and generally understanding the business & customers.
Once discovery was completed, we had enough information to start diving deeper on the brand identity visualization. The main focus of this exercise was to come up with a modern yet rustic typographic logo, as well as typographic system that could be used later on in establishing the art direction for the digital presence.
Art Direction
The art direction paves the way for the rest of the site design and separates a typical website from a refined engaging one. We knew that the different varieties of tiles needed to be let to speak for themselves, so the overall aesthetic need remain quite minimal and modern. That being said, through purposeful layouts and small distinct accents we were able to breathe some character into the overall look + feel.
With our newly developed branding and art direction we were ready to apply it to the web design. One word that kept arising in our meetings was to keep the design 'clean'. We utilized white space to easily draw the customers eyes to their beautiful tiles since the product imagery and tile installation shots were impeccable. We wanted to lean on their beauty at every turn. Ultimately, we were able to capture an effortless but sophisticated energy that thoroughly represents ZIA Tile as a whole.
Streamlined Customer Journey For A Large Catalog
Other big areas of focus were the navigation and product pages. The navigation needed to accommodate the large product catalog, while adding visual guides to those that may be less familiar with the different styles of exotic tiles. Similarly, the product pages needed to be very informative to both regular customers + builders alike. Not all tile is shaped the same, nor can it be installed the same way. Customers needed to know information specific to each tile such as the correct amount of tile to purchase for their project, dimensions, and how it need be installed.
Trade Program Application
In addition to the main site build, we were tasked with figuring out how Zia could drive more revenue with trade partners through an integrated sign-up and ordering experience. This resulted in a custom trade application that allows B2B customers to login to the same site, but have a discounted trade partner shopping experience - all flowing into the same Shopify CMS for ease of customer service management.
Product Coverage Calculator On Product Pages
In shipping for something like tile, you're not shipping by quantity but rather by the number of square feet that you need to cover. To alleviate customer service inquiries due to people not planning properly, we also needed to integrate overage calculations into the total number of boxes ultimately presented to be added to cart.
Sample Ordering
The lifeblood of renovation projects is sample ordering. We wanted to streamline the process as much as possible by integrating sample ordering directly into the product browsing flow from the product page. in addition to the smooth customer journey, we had to add additional discounting and shipping logic to account for a certain number of free samples and sample shipping.
Wishlist Project Planner Application
Many of ZIA Tile's customers are commercial designers. We developed a projects dashboard that allows them to create different projects and save tiles to that certain project. You can also assign tiles to rooms within each project. This organization will make it easier for customers to find what they need, reducing friction in the purchasing process, and will ultimately lead to more sales.
The process of adding to a project starts from the product page, where users can create or add to existing projects as well as create or add to existing rooms within that project.
Shipping Timelines & Logistics
At Zia scale, product is constantly moving in and out - arriving from the far reaches of the globe. On the other end, a lot of Zia's business is comprised of serious developers and other trade professionals that need accurate delivery timelines - they can't afford to have projects stall due to missing materials. As a result, we needed to integrate shipping timeframes to be real-time and accurate with ERP systems tracking inventory and purchase orders. The end result is the general product status that you see on the site, whether it's in-stock, sold out, or in transit (with the number of weeks until it arrives). The status is custom tailored and real-time to the number of square feet a customer is attempting to order on the product page.
LTL Shipping & Custom Carrier Rates
Shipping tile isn't the same as shipping health supplements. We're talking boxes, pallets, and thousands of pounds. Power ordering, we had to create a custom carrier shipping integration that communicated with one of Zia's heavy freight shipping partners. it needs to grab important product data like box dimensions and weight, and in a manner of seconds, return back a rate to the customer from the shipping provider with an accurate quote for shipping for the customer's exact address.
