Behind Zia Tile's Headless Shopify Website Build

Luxury tile from around the world

Our mission is to make beautiful, handmade, artisanal tile accessible to everyone.

Services
Brand Identity, website design & development, application development
Deliverables
Headless eCommerce website, shipping application, 3PL integration, custom wishlist application
Technologies
React, NodeJS, Shopify Plus
Visit site
www.ziatile.com

Zia Tile is positioned to be one of the largest independent tile manufacturers + distributors in the United States. They offer luxury tile at great prices sourced from their carefully selected dedicated suppliers from around the globe.

At Zia's scale, we needed a custom best-in-class eCommerce solution with maximum performance and content flexibility. For these reason we chose to go with Shopify as the eCommerce CMS + checkout and Storyblok for a content CMS with visual editor. While a headless solution is more complicated to implement and maintain, at scale there are certain advantages - here it made a lot of sense.

Some of the final deliverables included:

  1. Discovery

  2. Branding

  3. Art/stylistic website direction

  4. Website design & development

  5. Trade program application

  6. Wishlist project builder application

  7. Heavy freight shipping application at checkout

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 & their 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.

Every tile is an expression of the artisan’s work that day—beautifully imperfect and unique.

Danny Mitchell, ZIA Tile

As with any website redesign project, 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.

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.

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.

Wishlist 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.

Have a project in mind?

background