Joint session with Vercel: How to build intelligent storefronts (May 15th)

ZETR

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.

By Nightjar


Project Shots

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.

Editing environment

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

Related contributions