ZETR

By Nightjar

Creation of a scalable platform to support business growth, increase ZETR’s internal team’s efficiency by automating key functionality, drive leads through improved UX, and deliver a modern brand experience aligned with the product experience.

ZETR's desktop homepage hero, showcasing the product 3D video asset alongside our key product information.
ZETR's mobile product showcase, overlaid onto a ZETR project image
ZETR's stories page layout, featuring a large portrait image with key information and product links sitting to the grid
ZETR side by side slice, showcasing a large project image showcasing the product in situe, with a tile linking directly to the project story page.
ZETR desktop range page, showcasing the range of products with a stunning close up detail product shot, overlaid on a ZETR project image.
ZETR's "cart" empty state, which creates a Salesforce lead for ZETR's sales team to follow up. It features a 3D spinning asset of a ZETR product.
ZETR product tile, showcasing its hover state which allows quick 'explore' and 'add to quote' options for users.
ZETR's product page has stacking layers on scroll, which highlight dense, but important, product image in a clean manner.
ZETR mobile product page landing screen. Showcasing a portrait product image, key information and quick UI at the bottom of the users screen allowing them to switch variant, see price, and add to quote
ZETRs mobile menu open state. It is a simple overlay, which defines hierarchy through the use of colour for quick navigation.
ZETR's 404 page, which features fun 'code like' writing, with a 3D spinning product asset.
ZETR resource page screens, outlining key product details and company information
ZETR product imagery, showcasing the macro (project image) and micro (close up product in situ) alongside one another.
ZETR product tile index, which presents clean product imagery alongside in situ project imagery to showcase both sides of the ZETR product in action.
ZETR product specification diagrams, used by architects and builds to picture exactly how the product comes together
ZETR's about page, showcasing their company ethos, team and awards.
ZETR's product Sanity dashboard, which has multi-layered categorisation for easy navigation for content editors.
Nightjar's custom 'Slice Config' system implement for ZETR. It outlines all slices in the project, their use case, and allows for edits to the base template that is inserted when making pages.
ZETR's product page slice layout, very simple, with the ability to copy and paste all slices to another page if required.
ZETR's home page slice layout, allowing for quick edits and full control of the content displayed

About the project


Established in 2017, ZETR designs and manufactures award-winning solutions for both residential and commercial sectors. ZETR has a range of recessed, trim-less, and completely flush switches and outlets that integrate with the surrounding wall surface to provide minimal impact on architectural finishes.

ZETR approached Nightjar to design and develop a digital platform with longevity that would serve them for the next five to ten years, with the ability to evolve as the business and product offering expands, while maintaining the sleek aesthetic they are known for.

Challenge

The previous site had been built internally and did not allow the flexibility or scalability ZETR needed to grow the business. There was a lot of manual work being done by the sales team - sending out pricing requests daily rather than users being able to self-service.

There was also a knowledge gap in how the product works - architects and designers needed to be educated on the fact that the product must be purchased as a bundle - faceplates, switch/power, and the correct mounting plate - depending on the surface it's being mounted on or into.

With such a premium product, the digital experience needed to speak to architects and designers, and hit a refined aesthetic aligned to their vision for a space.

Our vision was to set the standard for the industrial product category, by creating an aspirational, intuitive and scalable platform that educates, inspires and generates leads - allowing the business to grow exponentially.

Objectives

  • Decrease the number of support calls to sales team
  • Increase the number of leads per product
  • Increase conversion to selected tailored content for each target audience

Solution

The ZETR range of products are minimal and refined, they are the ‘quiet detail’ in any space. With a key target audience of residential and commercial architects and designers, the new platform needed to reflect this level of detail, and embrace the understated. More than just a channel for inspiration, the website’s design needed to springboard from its function.

The ZETR products are complex, which had previously made them seem complicated. Our UX approach clarified the way the products work, guiding visitors through the process and requirements, to ensure less errors were made when purchasing components.

Nuanced needs

The main audience, architects and designers are looking for inspiration for a project they are working on, or they have been referred to ZETR by their client. They want to explore the product looks and ensure that it fits with their design aesthetic. They want to be able to feel as if they have a relationship with the brand and the product as one seamless experience.

A large and important group to ZETR are their wholesale customers. They use the website for information to understand their customer’s or designer’s aspirations. They are seeking price and building the relationship with the sales team to make it easy to order or ask questions for projects over time. They needed a way to access their discounted pricing through the website, without always having to pick up the phone.

A Gallery Experience

The ZETR range of architectural products are premium, and innovative, to appeal to those with a discerning eye and a design mindset.

Creatively, the ZETR platform is designed to mimic an art gallery to display the beautiful forms, textures and architecture surrounding each product. Minimal UI and typography is used to bring a sense of craft and reverence to the products and projects.

With such minimal interface design, we have emphasised micro-interactions and clever animations to provide the user with brief moments of delightful feedback during the experience. Smart navigation structures change and adapt to the user's choices as they navigate the website.

To help bring each product to life, an art direction based on illumination to highlight the interplay of shadows and light was leveraged. This conceptual approach envisions a design where every curve, angle, and contour is illuminated.

To minimise the manual handling of enquiries by the ZETR team, without diving into a full eComm build, we created a “checkout” which enabled customers to obtain a quote across the entire product range. All products are managed within the CMS (instead of in an eComm platform), with the “cart” being sent to Salesforce via their API, as a lead for the ZETR sales team to follow up with directly. For the user, this functions exactly as a full eComm cart, with a rich amount of data coming through to the Sales team; Name, Phone, Email. Company, Country, Notes and most importantly - the full product list. However, it was built with future scalability in mind - and by using a headless stack, the platform will be able to integrate a true eComm layer in the future.

“One of our values at ZETR is collaboration, our creativity is fueled by unique collisions that power innovation. Our relationship with Nightjar exemplifies this - we loved working so closely with the team and truly valued their design and technical expertise. The process was thoroughly enjoyable and the finished platform is a stunning representation of our brand and a tool to drive leads.”

Joseph Romano, Head of Design & Brand, ZETR

Contributor

Nightjar

Nightjar is a digital product company. We deliver transformative results for ambitious brands - at velocity.

Nightjar is located at Sydney Australia
Visit Nightjar's profile

Other projects by author

The Swaddle

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle