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

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

Bespoke APIs

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

unitec-website-05-mobile.png

large_unitec-website-02-desktop.png

medium_unitec-website-02-desktop.png

small_unitec-website-02-desktop.png

thumbnail_unitec-website-02-desktop.png

unitec-website-02-desktop.png

small_unitec-website-02-mobile.png

thumbnail_unitec-website-02-mobile.png

unitec-website-02-mobile.png

large_unitec-website-01-desktop.png

medium_unitec-website-01-desktop.png

small_unitec-website-01-desktop.png

thumbnail_unitec-website-01-desktop.png

unitec-website-01-desktop.png

small_unitec-website-01-mobile.png

thumbnail_unitec-website-01-mobile.png

unitec-website-01-mobile.png

Education

Drupal

small_unitec-website-thumbnail.png

thumbnail_unitec-website-thumbnail.png

unitec-website-thumbnail.png

2degrees arrived on the scene in 2009, transforming the New Zealand telco market, breaking a duopoly and driving prices down for consumers by giving Kiwis the mobile phone company they deserved.

As their customer base rapidly grew past one million, they embarked on a digital transformation which included a new customer facing website and self service portal ('Your 2degrees'). As their trusted digital partner since soon after launch, Catch Design was tasked with designing and building a brand new customer centric, mobile responsive website for existing and future customers, that delivered a world class user experience for the upfront learn and explore, end-to-end online purchase, customer engagement and loyalty, and self service journeys.

The 2degrees Digital Marketing Manager explains “We began life as a start-up. Our investment went heavily into building network infrastructure. We created an online presence using a patchwork of web and social tools, but it was time to invest in delivering a seamless experience that equally serves mobile and desktop visitors”.

For the customer facing website, 2degrees needed a solution that was robust and future proofed for growth and new technology.

2dm-website-03-desktop.png

2dm-website-03-mobile.png

The 2degrees new website was redesigned and built from the ground up through a customer-centric, outcome-focussed lens. The Discovery phase involved multiple stakeholder engagement, ideation and prioritisation workshops, with a clear view of what nirvana could look like.

A new IA was created and tested with real users, in parallel with brand new, outcome focussed customer journeys for exploring, purchasing, self-service and customer engagement.

We also worked closely with their creative agency to bring the refreshed 2degrees brand to life in digital. We created new mobile-first, component -driven digital design system.

We built the public-facing website on SilverStripe. We also built the front-end layer for the online shop and self-service portal, which was built in parallel on Oracle's ATG platform.

Numerous integrations with 2degrees core backend systems enabled a seamless user experience for existing customers, roaming rates lookup tool, base marketing engagement campaigns, help and support and coverage maps.

2dm-website-04-desktop.png

2dm-website-04-mobile.png

The result was an award-winning new digital experience for 2degrees' current and future customers. We launched 2degrees' new public-facing website in July 2015, on time and on budget. Mobile traffic grew three-fold and the bounce rate for these visitors was halved. Overall the bounce rate on the site dropped 9% and time spent onsite by desktop visitors increased. The new design was also awarded a Best Award for Interactive Design.

With the site better serving mobile visitors who had support queries, 2degrees also saw 1,000% increase in Help and Support page views. This led to a reduction in the cost to support existing customers, as more chose to access support information online rather than through Customer Care.

With its previous web platform, 2degrees had utilised multiple microsites to get tactical campaigns to market quickly. The new website build gave their internal marketing team improved control over content management (including content approval workflows and scheduled publishing), which resulted in faster, cheaper go-to-market campaigns and comms. For larger product launches, such as iPhone and Samsung handset announcements, we enabled 2degrees to consistently be quickest to market over their much larger competitors.

“Moving away from microsites is a positive move for our brand and eliminates disruption to the user journey.” Digital Marketing Manager, 2degrees.

2degrees was the first telco in the world to launch a mobile-first responsive website and was voted Best Digital Experience in the Telco industry across Australasia.

Work. Work. Work.

Annual reports