NSW Gov — React development to create taxonomy term landing pages

NSW Digital Channels’ challenge

NSW Digital Channels needed to build topic-based pages. However, the existing process to update content on the pages was manual and very time-consuming. 

NSW Digital Channels’ transformation — topic-based pages using automation

Salsa Digital kicked the project off with a one-week discovery focusing on the current taxonomy terms (that would drive the topic-based pages) and the requirements for the landing pages. 

For the landing page requirements, NSW Digital Channels’ UX designer had already created draft designs. These designs were more complex than we’d originally anticipated, with multiple components on every page (rather than a single automated listing component). We shifted our focus based on the new requirements, working closely with the designer to create the best solution without too much technical complexity. Another change was a move away from Vue.js to React, which required an adjustment of resources. This project is a great example of how an agile approach and working closely with the client to manage the budget gives us the flexibility to react to unexpected changes in scope.

To meet NSW Digital Channels’ needs, we created one new content type called Term landing page, with four different templates. Content authors can choose the template they’d prefer. Some of the templates use existing components from the NSW Design System, but instead of them being manual components, we automated them. 

The four templates have different variations of components, for example, the number of components and order of components. 

Once the author selects the desired template, they then select the topic. This automatically populates the page with a combination of manual and automated components. The automated components pull content tagged with the selected topic, and automatically display that content.  

In addition to the manual components on the page, content authors can also feature content by making it “sticky at the top” within a listing. 

Default layouts for topic-based pages

We’ve also set up default topic-based pages. If a topic page (based on all the taxonomy terms) hasn’t been manually set up, then topic-based content is displayed using a default page layout. This layout shows a list of all relevant content displayed in the order it’s published on the default listing. And then contextual in the order of Grant closing dates or Event dates once filters are set to those content types. The user can also search the listing by keyword.

React work

Nsw.gov.au currently uses React for various interactive features across its website. There is also a React component library based on the NSW Design System.

Salsa Digital created two generic React components, a Carousel and a Featured Listing, from existing components in the NSW library. From there, we built an additional three wrapper components for the Carousel and two wrappers for the Featured Listing. These wrappers take a taxonomy ID and perform an Elasticsearch query using that value. The Elasticsearch results are then passed to the inner component to display the results, either as cards or links.

This is currently unique on the nsw.gov.au site, as most cards or links you see are manually created. However, by using Elasticsearch to source content,  we create pages that stay up to date with content changes without the manual process of curation.

Tag automation

All of the development work relied heavily on topic and sub-topic tags. NSW Digital Channels has put a lot of thought into a set of tags to be used across their content that will group content in a meaningful manner. The challenge was to update the existing content with the new set of tags. Salsa Digital helped by automatically updating the tags across the thousands of pages on the nsw.gov.au website based on their URL structure. 

Future work

We’re currently working with NSW Digital Channels on further enhancements of the automated features. The goal is to automate all components, so content authors can choose a component and populate it using automation rather than manually entering content, links, images, etc. 

The outcomes — automation with control 

We worked closely with NSW Digital Channels to deliver on their requirements within budget. The main outcomes are: 

• Topic-based landing pages that can be created quickly and easily through automation (saving NSW content authors a lot of time)
• Four templates to give content authors choice and control 
• Templates that include manual components so content authors can highlight important information 
• A fully automated default term page
• Salsa Digital also added each of the automation components in blocks that can now be flexibly used across other already existing landing pages
• An easy way for citizens to find information related to specific topics that interest them