Client

Natural Hazards Commission – Toka Tū Ake

Work

Website Design, Online Branding, UX/UI, Responsive Design, Effective Visual Language

Brief

The Natural Hazards Commission (NHC) Toka Tū Ake engaged us on behalf of the sector to develop an industry portal of resources designed to support engineers in creating buildings that go beyond ‘code minimum’ standards. The portal acts as a knowledge repository, for all documents and guidelines that are presently scattered across the web.

By bringing them together, the portal provides a vetting process for the material and gives assurance to the engineers seeking them, by aligning them behind credible brands, of which NHC Toka Tū Ake and its project partners lend credence to.

A laptop displaying a webpage about Design Resilience with an image of construction workers in safety gear. The page features sections on performance, an advisory group, and contributor opportunities, set against a gradient blue background.
A digital brochure displaying examples of how the brand toolkit could be applied to a website design. Presented on a gradient background.
A computer monitor displaying a website homepage with the text "Design. Resilience." and a search bar. A keyboard and mouse are positioned below the monitor on a white background with a yellow geometric graphic behind the setup.
Three smartphones displaying different screens. The first shows a "Become a contributor" page, the second has a search menu, and the third displays a resource list. The phones are on a surface with an orange, textured backdrop.
A branding design board featuring graphic elements like chevrons, logos, and gradient rules. Includes button options for "Submit a Document," "Read More," and "Download," and tags like "Design Guidance" and "Seismic Assessment.
A laptop and smartphone display a document titled "Assessment and Improvement of the Structural Performance of Buildings in Earthquakes." The screen shows a cover and text about seismic assessment standards.
A smartphone displaying a website page with the message: "Can't find what you're looking for?" encouraging users to submit a request. The background shows a blurred view of similar webpage designs.
The objective

A publicly accessible, open-source platform that empowers designers and practitioners to confidently exceed "code minimum" requirements – consolidating existing resources and providing the opportunity to commission new materials that address specific challenges in the sector.

The goal

NHC engaged us to create a simple yet credible brand, logo device and brand toolkit for smart recognition of Design Resilience NZ. The goal? To develop a reliable, user-friendly industry portal that streamlines the search process for engineers and practitioners aiming to exceed code minimum standards. The website needed to serve as a centralised hub for recognised non-regulatory design resources, providing clarity and accessibility. It consolidates existing materials that were scattered across the web and provides the opportunity to request new resources to address sector-specific challenges.

The process

The project required a staged delivery, starting with a temporary site to meet the immediate needs of an upcoming conference shortly after briefing. While the brand and interim site were rapidly developed, work continued on the fully polished brand and content-managed portal.

Wonderlab’s expertise in brand creation, web UX/UI design, and development was critical for the end-to-end execution of the portal. This included collaborating with NHC on the brand identity, UI/UX implementation, technical design, CMS specifications, and the final development of a fully functioning platform.

The outcome

A clean, responsive, and user-friendly site designed for ease of discovery. With filters, tags, and a robust search system that works seamlessly now, AND scales effortlessly as resources grow. The design future-proofs the platform — clearly distinguishing superseded documents while allowing new resource submissions & ensuring a smooth and intuitive experience for all users.