The innovative Commercial Bay website is a place for storytelling and wayshowing. In this Fresh from the Field The Space In Between Founder Brendan Jarvis tells us while the UX design was relatively straightforward the development had its challenges. The result is a bold and compelling website that moves people to visit Commercial Bay, by making it easy for them to find out who’s there, what’s happening on and how to get there.
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 to tell the stories of the billion-dollar precinct, promoting its events and profile the amazing range of 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 seems.
The Design Response
First, we needed to align multiple client teams (commercial, retail and marketing) behind a shared understanding of the site. Personas were created, prototypes were made, problems were overcome. Alignment was achieved with relative ease.
While designing the UX may have been straight-forward but the design of the UI was not. The identity underwent several significant revisions, and the brand agency changed, throughout the design and development process.
The deadline loomed.
To introduce more certainty and support the rapid evolution of 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 present and evolve a believable view of the end-result, as the identity evolved.
Sketch also received a solid workout.
The website is completely responsive (so… many… breakpoints…) and built on Craft CMS. We used Algolia to drive the internal search engine, Cloudflare to help optimise and protect, and Mapbox to power the precinct map.
Creating that interactive precinct map was a good challenge. First, we had to work out what the best tool was. Then we needed to wrangle the architectural map. We settled on Mapbox and worked with its API to connect spaces with content.
A bit of self-praise, but we believe we delivered what we set out to achieve, a website that moves people to visit Commercial Bay, by making it easy for them to find out who’s there, what’s happening on and how to get there.