Institute of Directors

With over 9,000 members, the Institute of Directors (IoD) is the professional body for directors and is at the heart of New Zealand’s governance community, driving excellence in governance through the provision of thought leadership, an extensive network, professional governance courses, events and resources.

Remaining relevant to their members and the broader governance community is key, so in mid-2018, they embarked on an ambitious Digital Transformation programme. This was an important and timely project, with various core bespoke technologies needing to be replaced – website, finance and membership management (CRM). 

In order to provide a more personalised and engaging experience, providing members and the broader governance community with what is needed, when it's needed in a modern and efficient way, IoD undertook an extensive programme of service design to understand how to improve the value and user experience of the website for members and customers. 

Selected as their long-term digital partner, Catch Design’s challenge was to design and build a brand new, fully integrated digital experience, delivering a new ‘future state’ that placed the member and customer experience at the forefront of the services offered by the IoD.

IoD identified several outcomes for the new website and needed confidence in a digital partner to deliver on those. The website redesign and build was one of a number of core parallel work streams, which included new brand, ERP and billing platforms.

iod-website-03-desktop.png

iod-website-03-mobile.png

The challenge

As part of an initial discovery phase, we worked with IoD to clearly define outcomes and key customer journeys, defining a prioritised roadmap for delivery. Using a human-centered design approach, we worked collaboratively with IoD to design the user experience, a new information architecture, technical approach and a brand new, modular component-driven design system as part of their new brand platform

One of our objectives with this project was to create a truly reusable, modular component library that allowed for robust development and deployment of platform-agnostic UI components. We identified JSX and Twig as templating languages that could be used to render components both client and server side and would integrate well with both SilverStripe and React. This worked so well that the final website contains almost no bespoke HTML and is rendered directly using the design/UI system itself.  Because the design/UI system is truly reusable and component driven it allows us to easily develop, test, update and roll out changes with confidence.

The website was built alongside a back office transformation project and the level of coordination and integration with that work stream was extensive. The e-commerce and member management solution was built to fully integrate with their new ERP system, Netsuite, which provided CRM, product catalogue and financial management systems via the comprehensive SOAP API. While we used the SilverStripe framework as the base for the project, due to the specific requirements, extensive modifications of core behaviour had to be made which is a testament to the flexibility of the framework.

Find-ability of content is extremely important for IoD and in order to provide an world class search experience the site search utilises Apache Solr and an internal web crawler powered by Apache Nutch. This also required extensive customisation to both the web crawler and the SilverStripe application as certain content had to be searchable but not accessible to unauthenticated users.

In addition to the extensive server side work, many user interactions on the site were also complex.  React and Redux were used extensively to manage complex, nuanced user interactions in-browser which allowed us to create manageable implementations for scenarios that required dozens of calls to external user, product, financial and payment systems.

iod-website-04-desktop.png

iod-website-04-mobile.png

The solution

Designed and built with member and user input, the website went live on 1 December 2019 and included the successful migration of all members to the new platform. It showcases their new brand, a brand new e-commerce system which allows customers to book multiple courses and events more seamlessly than their old system, and features the varied and changing faces of governance in New Zealand.

IoD’s reputation is strong and they are committed to upholding the value and importance of governance in the future. As part of their rebrand, there was a desire to drive awareness for the importance of the roles directors play in shaping the future of New Zealand companies and communities. The new website has provided them with a platform to feature their first wave of ‘brand ambassadors’ which they will continue to refresh throughout the years as IoD acknowledges the many faces of governance in New Zealand today and in the future.

The component-driven design system enables IoD’s broad cross-section of content creators and business units to manage and deliver content and information to their members and customers via the SilverStripe CMS. Direct integration with Netsuite enables full self-service for members who want to book courses and events online, log Continuing Professional Development (CPD) points, manage their account and lays a platform for fully automated, personalised content and marketing automation.

This much improved experience has laid a foundation for rolling out future improvements in 2020 and beyond.

iod-website-05-desktop.png

iod-website-05-mobile.png

The results

large_iod-website-02-desktop.png

medium_iod-website-02-desktop.png

small_iod-website-02-desktop.png

thumbnail_iod-website-02-desktop.png

iod-website-02-desktop.png

small_iod-website-02-mobile.png

thumbnail_iod-website-02-mobile.png

iod-website-02-mobile.png

large_iod-website-01-desktop.png

medium_iod-website-01-desktop.png

small_iod-website-01-desktop.png

thumbnail_iod-website-01-desktop.png

iod-website-01-desktop.png

small_iod-website-01-mobile.png

thumbnail_iod-website-01-mobile.png

iod-website-01-mobile.png

Professional services

Content strategy

Product strategy

Technical strategy

Information architecture

CMS training

Design systems

Experience design

UI and interaction design

Responsive web design

Web development

API integrations

Web services / middleware

Cloud infrastructure

DevOps

Managed services platform

Accessibility

Security

Performance

Functional testing

Automated testing

Proactive support services

Reactive support services

Search engine optimisation

Analytics

SilverStripe

React

NetSuite

NZPOST API

NZBN API

Solr

WindCave (Payment Express)

Google Marketing Platform

JSON Web Tokens

Catch Managed Platform

Gather Content

small_iod-website-thumbnail.png

thumbnail_iod-website-thumbnail.png

iod-website-thumbnail.png

Website transformation

Websites

Digital Transformation

2degrees

Christmas and Summertime is the time of year when up to 40% of the mobile market considers competitive offers from other telcos and ultimately churn.

The challenge presented to Catch Design was how to engage an audience of high value Mobile customers across the country in a way that was unique and fun, to not only entice new high value customers to the network, but encourage existing high value customers to stick around with 2degrees.

Image showing the steps to play Data Hunt

2dm-datahunt-03-desktop.png

2dm-datahunt-03-mobile.png

Partnering with Special Group, we turned the entire country into a game and allowed kiwis to go hunting for data.

We dropped 200 million MBs of mobile data all over New Zealand and made an interactive, GPS based, augmented reality (AR) mobile app to help people collect it.

Over 1,400 ‘Data Pin’ GPS locations were scattered all over the country. 2degrees were able to carefully select and self-manage these locations directly in SilverStripe, the CMS platform we integrated for them in 2015.

Each location had a live-time data value of up to 1GB, which proved to be a summer phenomenon.

Using the map, players could hunt and locate pins throughout the country and collect a randomised data prize by spinning the 2degrees location pin. Pin locations were set in the CMS using a Google Map GUI to allow exact, and safe placement.

Data would instantly be applied to their account, or if they weren’t a 2degrees customer, it would be stored against their account and only usable if they ported over to the 2degrees network. Players could also take a selfie and share their winnings on Facebook, Twitter and Instagram.

Our direct connection to the 2degrees core network enabled instant authentication, allocation of data, SMS notifications and push notifications.

Image showing how to share your Data Hunt prize on social media

2dm-datahunt-04-desktop.png

2dm-datahunt-04-mobile.png

An incredible 201,000 people (double the stretch target) downloaded the app, rocketing it to number one position on both the App Store and Google Play. The game itself was played more than five million times.

It created vital cut through in a busy retail period, reducing churn, and built credibility as a network provider.

What’s more, the game was attracting the right kind of players—big data users with higher than average monthly spends. In other words, high value customers.

Data Hunt won many awards, including multiple Gold, Silver and Bronze Axis Awards, Gold Effie, TVNZ Marketing Award and a Best Design Award finalist.

Image showing a collection of all the various Data Hunt screens

2dm-datahunt-05-desktop.png

2dm-datahunt-05-mobile.png

Image showing the Data Hunt pins across Auckland city

large_2dm-datahunt-02-desktop.png

medium_2dm-datahunt-02-desktop.png

small_2dm-datahunt-02-desktop.png

thumbnail_2dm-datahunt-02-desktop.png

2dm-datahunt-02-desktop.png

small_2dm-datahunt-02-mobile.png

thumbnail_2dm-datahunt-02-mobile.png

2dm-datahunt-02-mobile.png

large_2dm-datahunt-01-desktop.png

medium_2dm-datahunt-01-desktop.png

small_2dm-datahunt-01-desktop.png

thumbnail_2dm-datahunt-01-desktop.png

2dm-datahunt-01-desktop.png

small_2dm-datahunt-01-mobile.png

thumbnail_2dm-datahunt-01-mobile.png

2dm-datahunt-01-mobile.png

Telecommunications

Digital strategy

Mobile app design

Motion design

User testing

Mobile app development

React Native

Native iOS

Native Android

WSO2 Enterprise Service Bus (ESB)

AWS SNS

Serverless

Google Maps

Fastlane

Firebase

small_2dm-datahunt-thumbnail.png

thumbnail_2dm-datahunt-thumbnail.png

2dm-datahunt-thumbnail.png

Data Hunt mobile app

Mobile apps

Games

Campaigns

Mercury

It was early 2016 and we were sitting on the floor of a corner office at Mercury’s Greenlane offices... “We’ve got 4 months to design and build a brand new website that combines the content from Mighty River Power and Mercury Energy, allows customers to join and self serve, and showcases our new brand - which doesn’t exist yet!” That was the first time we met Mercury’s Head of Marketing, Ben Harvey-Lovell. 

What followed was one of the most energising, satisfying and collaborative projects we’ve ever worked on at Catch. 

We were part of a huge team of passionate people and partners who delivered one of New Zealand’s most successful large Corporate rebrands in recent years. Energy was made Wonderful over the course of those 4 frenetic months, but it wasn’t without its challenges...

mrp-website-03-desktop.png

mrp-website-03-mobile.png

Mercury had worked with Dick & Jane on the design of their new visual identity. When we first got the website brief, the logo, colour palette and brand strategy were still at the research stage but we had a pretty good idea of what we’d be working with. Dick and Jane had also designed a homepage template that Mercury loved so we had a wonderful starting point for the design. 

Our first challenge was to research, test and design a new IA that would bring together the consumer and business retail content with the generation and shareholder content that traditionally sat on the Mighty River Power site. The brief here was to make the site structure cohesive, to bring together two stories into one coherent narrative that would allow customers, investors, analysts and employees to find the content they needed.

The second challenge was the detailed design. Our design and development teams worked on a new Digital Design System—building a modular, reusable, responsive pattern library that would be re-used across multiple digital environments.

We rapidly integrated the new design system into Mercury’s incumbent Kentico CMS, giving Mercury’s Digital Team full control of the site structure and page layouts.

Multiple API integrations were required to enable customers to join and self-serve, and to access third party data for modules like share prices and lake levels. Given the timeframe this required a smart, pragmatic approach. Where appropriate, a new React layer was developed to lay the foundation for the future.

As part of the project, we designed and built Mercury’s full suite of marketing, billing and system-related emails. Leveraging the new Digital Design System we created for the website, this allowed us to approach this work in a similar way — modular, reusable, mobile responsive components that were integrated into Marketo and their core internal systems.

The whole project really was like building a plane in the air. As we were designing and building the website alongside Mercury ICT and Digital Marketing, TRA were validating the visual identity by engaging thousands of customers and shareholders. Dick and Jane were iterating the visual identity from this feedback while FCB were developing the campaign launch content. Meanwhile the Mercury marketing team were re-writing and rebranding hundreds of automated customer letters and emails, while designing new office fit-outs, station signage, and vehicle liveries. We were all bouncing off each other, and it was wonderfully collaborative. 

mrp-website-04-desktop.png

mrp-website-04-mobile.png

Despite the time pressures, the long days and the late nights, the website launched on time, on budget and was... well, wonderful! It was a finalist in the 2017 Best Design Awards, and an important part of the story that helped Mercury win the 2017 Grand Effie and the Supreme Award at the TVNZ Marketing Awards.

The success of the project forged a long and productive partnership with Mercury and we’ve since worked on multiple digital transformation initiatives together - from designing and building new Join journeys, updating the self-service portal - My Account, to designing and building the Mercury mobile app.

From a wonderful brief, a scary timeline, and some genuine collaboration we not only built a website to be proud of, we established trusted relationships that continue to this day. 

mrp-website-05-desktop.png

mrp-website-05-mobile.png

large_mrp-website-02-desktop.png

medium_mrp-website-02-desktop.png

small_mrp-website-02-desktop.png

thumbnail_mrp-website-02-desktop.png

mrp-website-02-desktop.png

small_mrp-website-02-mobile.png

thumbnail_mrp-website-02-mobile.png

mrp-website-02-mobile.png

large_mrp-website-01-desktop.png

medium_mrp-website-01-desktop.png

small_mrp-website-01-desktop.png

thumbnail_mrp-website-01-desktop.png

mrp-website-01-desktop.png

small_mrp-website-01-mobile.png

thumbnail_mrp-website-01-mobile.png

mrp-website-01-mobile.png

Utility

Conversion rate optimisation

Illustration

Bespoke APIs

Kentico

Nuance Chat

Marketo

small_mrp-website-thumbnail.png

thumbnail_mrp-website-thumbnail.png

mrp-website-thumbnail.png

Rebrand

2degrees had recently launched their new broadband offering and needed a cut-through activation campaign to drive engagement, amplify their Neon content offer and drive sales throughout the crowded summer market.

The game needed to be simple, relevant to their product offering and give customers instant mobile data prizes, which meant we needed to be able to credit peoples' mobile accounts with data, as soon as they'd played the game.

2dm-quiz-03-desktop.png

2dm-quiz-03-mobile.png

Working with Special Group, we designed and built a mobile responsive web quiz where current and future customers could test their knowledge of popular TV shows and movies (content all available on Neon).

We built the game in React and integrated in SilverStripe so the 2degrees marketing team could continually add more quiz content throughout the summer.

A rolling leaderboard enabled players to compete for large prizes, however anyone who played was a potential winner. By answering multiple questions in a row correctly, they instantly won mobile data.

Working closely with 2degrees engineers and network teams, we built a direct connection into 2degrees' core systems, which enabled us to instantly credit 2degrees customers account with the data they'd won and send a text message telling them their new data was now available.

Any non-2degrees customers were given data credit and the moment they joined 2degrees, we credited their account with the data they'd won.

2dm-quiz-04-desktop.png

2dm-quiz-04-mobile.png

A Best Awards finalist, Play the Quiz was played over 1,500,000 times and became a standout performer across the market driving traffic, engagement and new customers for 2degrees over a busy summer retail period. Quiz questions were everywhere, driving people to the website. We even created an interactive quiz banner advert that was placed on the NZ Herald homepage.

2dm-quiz-05-desktop.png

2dm-quiz-05-mobile.png

large_2dm-quiz-02-desktop.png

medium_2dm-quiz-02-desktop.png

small_2dm-quiz-02-desktop.png

thumbnail_2dm-quiz-02-desktop.png

2dm-quiz-02-desktop.png

small_2dm-quiz-02-mobile.png

thumbnail_2dm-quiz-02-mobile.png

2dm-quiz-02-mobile.png

large_2dm-quiz-01-desktop.png

medium_2dm-quiz-01-desktop.png

small_2dm-quiz-01-desktop.png

thumbnail_2dm-quiz-01-desktop.png

2dm-quiz-01-desktop.png

small_2dm-quiz-01-mobile.png

thumbnail_2dm-quiz-01-mobile.png

2dm-quiz-01-mobile.png

Silverstripe Cloud

Sizmek Ad Suite

2degrees core systems

small_2dm-quiz-thumbnail.png

thumbnail_2dm-quiz-thumbnail.png

2dm-quiz-thumbnail.png

Play the Quiz campaign

Unitec

Unitec Institute of Technology's website was outdated and in urgent need of a rethink from the ground up. Unitec needed an experienced and skilled digital partner to help them launch a new user experience and robust CMS platform within six months.

With a diverse vocation-focussed student base, Unitec needed the new website to cater to current and future students, (both domestic and international) their family and influencers. The new website needed to make information, news and resources easily accessible, with clear pathways for people to register for events, seek assistance from Unitec staff and apply online to one of their many programmes and short courses.

unitec-website-03-desktop.png

unitec-website-03-mobile.png

Our Discovery involved research with a number of internal stakeholders and real users. This enabled our team to clarify and define business goals and requirements, customer goals and needs, technical constraints and project risks.

A new Information Architecture was designed and tested with real users, along with key prioritised customer journeys. Initial concepts for content and design were collaboratively refined with the core Unitec marketing team, along with a prioritised backlog of features and ideas for reimagining the new customer experience.

A new, fresh mobile responsive design system was created, along with page layouts and core user journeys.

Drupal was selected as the new CMS, hosted on Microsoft's Azure infrastructure. The build also included various data integrations with core Unitec platforms, content loading, UAT, training in Drupal and support for Unitec's IT team as they stood up their new multi-node database and web clusters infrastructure environment.

unitec-website-04-desktop.png

unitec-website-04-mobile.png

The website was launched on time and on budget. Unitec's marketing team now had full content management control and the result was an award-winning new user experience for Unitec, their current and future students.

unitec-website-05-desktop.png

Work. Work. Work.

Annual reports