A digital home for a transformational Auckland development.

Commercial Bay opened in June 2020; a place where world-class retail and food & beverage experiences lie beneath a striking space for corporate business.

Our brief was simple - create a website that tells the story of the precinct, promotes events and profiles retail and food and beverage tenants.

But, as every seasoned designer knows, achieving a simple outcome is always a little more complicated than it first looks.

Desk research showed that websites for similar precincts were terrible, with few exceptions; full of noise, uninspiring and poorly built.

There wasn’t the time or appetite for a more expansive research process, so we tuned the rest of our discovery accordingly.

Our first challenge was to align different client teams and the brand agency behind a shared understanding of the site.

This took the form of a simple discovery workshop, where we divided people into groups representing different personas.

We then sketched out and discussed a set of paper wireframes.

This worked really well. Everyone had some face time. Everyone’s voice was heard. The user (albeit not real ones) was at the centre of everyone’s thinking.

It was also efficient, allowing us to quickly move to a refined prototype, with minimal friction.

Designing the UX may have been straight-forward but designing the UI, not so much. The identity was still being worked on at the time we needed to start.

The deadline loomed.

While the situation was not ideal, sometimes things like this happen. We stayed close to the client and the agency, kept a flexible attitude and stayed focused on our goal - creating a great website for a new Auckland icon.

To introduce more certainty and support the design, we built a hi-fi prototype in Invision and used Principle to produce examples of how the UI would animate.

This allowed us to establish a tangible foundation, while we worked through changes to the UI as the identity evolved.

We tried to reduce visual complexity, so that the flow to finding a shop or a restaurant’s was unobstructed. A key insight from our research.

Behind the scenes we were busy creating a full set of template designs in Sketch, across five breakpoints, so that our development team were ready to go.

The website is responsive and built on Craft CMS. We’ve used Algolia to drive the internal search engine, Mapbox to power the precinct map and Cloudflare to help optimise and protect.

Creating a multi-level map of the precinct was a good challenge. We needed to work out what to use and how, to make an interactive map from an architectural floor plan.

We chose Mapbox. After learning its API, we painstakingly plotted the coordinates of the spaces and enabled them to be connected in the CMS with shops and restaurants.

The overall result is a website that moves people to visit Commercial Bay, by making it easy for them to find out who’s there, what’s going on and how they can get there.