Institute of Directors Website transformation

How do you successfully bring a new personalised customer experience to life, integrating with multiple third party systems, as part of a large multi-stream transformation programme of work?

Project details

Client

  • Institute of Directors

Visit

  • iod.org.nz

Industry

  • Professional services

Role

  • 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

Technologies

  • SilverStripe
  • React
  • NetSuite
  • NZPOST API
  • NZBN API
  • Solr
  • WindCave (Payment Express)
  • Google Marketing Platform
  • JSON Web Tokens
  • Catch Managed Platform
  • Gather Content

The challenge

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.

The solution

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.

The results

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.