Using the Digital NSW Design System as a foundation, NSW Government sites are consolidating onto nsw.gov.au to create a consistent user experience. Applying custom development, we have developed multiple features under the OneCX banner as part of this amalgamation. So far, this includes the Transport NSW Contact Us form, the Youth Week Events Finder, and the Births, Deaths and Marriages Micro Weddings Planner.
Highlights
- Multi-step, multi-path React forms
- JSON data
- Salesforce integration
- Search API
- Redux store
- OpenSearch
- Design system components
Context
The NSW Government OneCX program is improving how people find, use and understand information.
There are over 750 websites across several NSW Government agencies. These sites are a proliferation of designs, user experiences and platforms, resulting in a disjointed and often confusing user experience.
OneCX aims to bring these disparate sites into one place for one experience that everyone can easily navigate.
About the Client
The NSW Government Department of Customer Service comprises over 30 agencies, entities and business units. Its vision is to provide the people of NSW with a great experience at every touchpoint with the NSW Government. Its mission is to deliver excellence in customer service, digital leadership and innovation in government services and safe and secure markets.
The Solutions
Contact Us form - Transport NSW
https://www.nsw.gov.au/transport-for-nsw/contact-roads-waterways/online
The Transport for NSW Contact Us form is a multi-step and multi-path form built using React. The result is a streamlined and easy-to-use interface backed by a complex back end.
Users can quickly and easily report issues, file compliments or complaints or ask for support with issues such as licensing or toll roads.
- Multi-path: The user’s answers determine the number of steps they take and the following questions they see.
- JSON Data: The application's data is populated from JSON data provided compiled and processed through data pipelines. This approach allows changes, such as copy and field, to be pushed without redeploying and also means that changes to external data points (such as in Salesforce) can be automatically incorporated into the app without needing to manually update a JSON file.
- Salesforce integration: Integrating with Salesforce allows teams to update and manage new tickets. The app uses a fallback queuing system to ensure data is still submitted to Salesforce during outages or other issues.
- Accessibility testing: We improved the app’s accessibility thanks to two rounds of testing using screen reader software and real-time feedback from Vision Australia.
The key outcomes for this feature were ease and speed of use. Having achieved these goals, users now experience a more straightforward path to reporting everyday issues like broken street lights and potholes.
Events Finder / Filter - Youth Week
https://www.nsw.gov.au/youthweek/events
This Events Finder uses Search API. During Youth Week (held annually in April), users can filter events according to their needs, including by area and date.
- Proximity-based search results:The search functionality allows users to input their postcode, suburb or local council name. This information is then translated into coordinates and used for a proximity search, specifically looking for the nearest, next-occurring events to provide real-time information to users searching for events during the week.
- Specificity algorithm: Related events have a gradually reducing specificity algorithm to determine the most related events. These are initially based on factors such as distance, same category, and age group. These filters gradually remove if not enough events are left to fill the specifications.
- Expired events listings: After Youth Week concludes each year (with the specific date configurable in the admin), the expired Youth Week events are re-listed back on the listing page for reference. They automatically remain in the listing until content editors begin publishing new events the following year, at which point the old events are archived.
Micro Weddings - Births, Deaths, and Marriages
https://www.nsw.gov.au/family-and-relationships/marriages/micro-wedding-venues
Micro Weddings is a multi-step React app developed and onboarded onto OneCX. It provides an interactive way to connect with customers who want support building their wedding wish list.
Not only can customers talk with over-the-phone consultants, but they also have the option to book unique venues they might not otherwise have access to, such as the Sydney Opera House. Planning can also include celebrants and flowers.
- Redux store:
- Allows users to save their progress in the browser.
- Users can leave the page, return, and pick up where they left off.
- Vital for multi-step forms like this one
- Other React apps built by OneCX can now use the Redux tooling we built.
- OpenSearch back-end:
- The app ingests JSON data served from an OpenSearch backend.
- Data can be authored in a standard JSON format by content editors.
- The OpenSearch backend doesn’t need to communicate with Drupal making requests very fast.
- Design system:
- The application was built using NSW Government Design System components.
- The library of design system components was converted to React components, so we could utilise existing work, only needing to develop a handful of custom components.
- Drupal webform submissions:
- The finished form submits to a Drupal web form via Rest API.
- This provides the benefits of the webform module for storing and managing submission data.
- Not having to develop a complex multi-step form like this using Webforms UI tools meant we could use a custom React web application.
The Results:
Consolidating sites on nsw.gov.au provides users with a seamless, recognisable and easy route to the services, support and information they need.
The features we have developed so far under the OneCX program also offer more personalised and responsive interactions with the NSW Government. Stay tuned for more amalgamations to come.