 Thanks Jamie. Hi everyone. Thanks for showing up. It's a Friday afternoon and I know you're all hanging for a drink. I certainly am, so thank you for your patience. In case you don't know me or if you've forgotten, my name is Tessa and I'm a product designer at Service New South Wales. The purpose of today's presentation is to show you some of the cool stuff that we're doing in government. We'll be talking specifically about the Service New South Wales website and what we're doing to deliver great online experiences for our customers and our Drupal users. I'm the artist. I'll be discussing how we use UX research and design to meet the needs of our customers and agile ways of working that allow us to respond quickly to usability improvements. Christine, hands up Christine. She's in our front row. She's our builder. She'll talk more about the front end features that enhance usability as well as our CMS features that deliver a better publishing experience for our content editors. And Gibran, hands up Gibran. He's our technologist. He'll end the presentation with a discussion on how the platform upgrade has increased reliability and performance as well as our contribution back to the Drupal community. So to kick off, I'll tell you a bit about Service New South Wales and what we do. We give people and businesses easy access to government services online, over the phone or in person at one of our service centre locations. Examples of a government service or a transaction as we call them is renewing a driver licence or applying for a birth certificate, as you can see in these examples. We launched in 2013 with just one service centre in Kayama. We now have over 180 locations across New South Wales, which includes service centres and digital stores. And we're recently listed in the top 10 best places to work in Australia. This is the first time a government agency has been nominated, so that's a very big win for us. And if you're wanting, we're currently recruiting, so please check out Seek or come and see me after this presentation. So can I just get a show of hands here who has used the Service New South Wales website? A few of us. Great result. Just some background info, our website was built on Drupal 7 and launched in 2013 with 426 transactions. As you can see on the right, it now has over 3,000 pages with more than 2 million users a month, which makes it the most visited government digital touch point for people in New South Wales. And we're excited. We have a variety of content pages, which includes transactions, campaigns, guides and news. So what you're looking at here is our very first website. And yes, we rocked the blue gradients. I actually heard one of our staff say that this looked like a cartoon, and now I can't help but think of smurfs. Moving on, the website did a great job at the time, but there was room for improvement, particularly around usability and performance due to an aging and highly customized CMS. Some of those usability issues included search, which had a frightening amount of quick links to transactions. This was problematic because it assumed that users knew what they were looking for from the start. And it was not easy to navigate the results either. In fact, our frontline staff found Google more accurate than our internal search, which was particularly embarrassing in scenarios where they would have to jump out of our site onto Google in front of customers at service centres. There were also issues around verb-based categorization on the homepage. What I'm referring to here is pay or new replace. We found that users expect to see content under topics and not verbs, so this was very confusing to them. And it looked our content team into a bit of a structure that excluded verbs like transfer and submit. The information architecture was another pain point. It was hidden at the bottom of the homepage, so it was hard to find. And it had 15 categories with some pretty long-winded descriptions that made it hard to read for users. As you can see, good luck getting through that in 10 seconds, right? Transaction pages were also difficult to navigate. It followed this standard format where information was hidden under accordions. And when the accordions were expanded, users saw just an overwhelming amount of content. In fact, one of our front-line staff said, and this is a direct quote, it needs to be more user-friendly. We get a lot of complaints about it being too much information and not easy to navigate. In addition to these pain points, some of the broader issues that we faced included a rapid increase in digital services. Just to give you an idea, we have added over 800 transactions to our website since we first launched. Another challenge was that customers have different levels of digital skills, which I'll cover in a minute. And lastly, user expectations and behaviours have changed, in particular around mobile usage, which now accounts for about 60% of our traffic. And this corresponds to a recent Nielsen study, which suggests a whopping 15 million Australians prefer using their phone to access online content daily. So the project objectives at a high level were around improving the user experience by really focusing on the needs of the customers, upgrading the platform to Drupal 8 to improve performance and reliability, and sharing our content and code with other teams to drive consistent experiences across all digital products, not just the website. Here are our customer personas, a broad mix as you can see, and we always keep them in mind when we're designing. The horizontal axis refers to a customer's level of digital skills, which ranges from low to high. And the vertical axis refers to the variety of services that a customer does at Service New South Wales within a year. Again, this ranges from low to high. Now, I'd like to introduce you to two of our personas, Auto Allen and Personal Pam. Auto Allen is an example of our high digital user high variety customer. He likes speed and comfort when browsing the web. Typically, he scans the page and feels comfortable clicking around until he finds what he's looking for. At the other end of the scale is Personal Pam. She's an example of our low digital user, low variety customer. As her name suggests, she prefers doing most things in person. She doesn't spend much time on the internet, but if she has to do a transaction online, she'll typically read everything before proceeding to the next step. So once we identified our personas, we established a way of working that would really benefit those customer types. We stood up a diverse team of content designers, product designers and developers, which included previous and next developers, a big shout out to them. They've done a great job. And the way that we delivered the project was through user centered design processes, which meant validating our designs with customers like Auto Allen and Personal Pam. We worked in an agile environment to respond quickly to usability issues. If you don't know what agile is, please hit me up. After the presentation, I'll be at the bar. And we continuously iterate on the website based on customer feedback and analytics. So this slide shows you just how rigorous we were in our research and design. We ran a staff survey with 126 responses. We reviewed four different data sources, including Google Analytics, staff suggestions, customer feedback and a form that customers could submit what's wrong with the page. We ran five stakeholder workshops and we tested our designs with over 90 customers and over 90 staff. And the reason why we tested with staff is because they use the website to serve customers at both service centers and at call centers. And in addition to all of this, we did a content audit of 1200 transaction pages to help us determine the IA or the information architecture. So yes, we had our work cut out for us. And this is the end result. A clean minimal design that enhances usability. It's a fully responsive site that can be used on any device. And the design is WCAG 2.1 compliant so that it's accessible to all. And I absolutely love this quote from a customer. He said, there's not a load, an overload of information when you get to the page. And everything is laid out in a nice structured way. The most important stuff is at the top of the page. Correspondingly, here's a quote from one of our staff. This is quicker, it's less typing. The way you've changed your layout is more effective for our customers. So to hear that kind of feedback where we're improving lives makes me feel like we've done a great job. The new website also has a powerful search with auto suggest to support users with their queries from the start. Just so you know, it's not Google, but it's pretty damn close. And here's a quote from one of our staff. The search bar is great and only keywords are needed. I love how it brings up what you're looking for before you click and go. Christine will talk a bit more about search in a minute. The website also has a new information architecture, which sits higher on the homepage to really showcase our broad offering. It has nine categories reduced from 15 to help users quickly find information. And we got rid of the verb based categories, which means a happy users and a happier content team. And finally, we have a cleaner transaction page with improved spacing and the removal of accordions to help scan ability. Interestingly, we took this design out for user testing. And some users thought there was less information in the new design, even though we hadn't reduced the copy. It's amazing what spacing can do. The design also includes in page links to help users like auto and navigate sections quickly. And a call to action button at the bottom of the page, which is always visible to users. And that's to help our staff as soon as follow through at any point down the page. Thanks, everyone. Now I'll hand over to Christine. Thanks, Tessa. I'm Christine, and I'm going to talk about some of our website features that were built to deliver a better and more intuitive digital experience for our customers. I'll start off with search. So, as Tessa mentioned earlier, our website is content intensive. We have over 3,000 pages, so it's imperative that we We have a search function within our site so that we can deliver better services and to help our users find information and services quickly and easily. And to help us understand the needs of our users and to find out which product worked best for us, we did some research. And we found out that customers would actually rather use search than menu links to navigate the site and that when it comes to search, they want the Google-like experience and design. So there are a number of search products available in the market. We looked at Algolia, Sojari, Elasticsearch, and Solar. In the end, we chose Sojari because it offers the features we're looking for out of the box so that means we didn't have to do a lot of customizations. We considered Elasticsearch but to find it hard to maintain and customize to meet our needs. So here are some of our search features. First is it uses machine learning technology, which means it is constantly changing and adapting to automatically improve search results based on what the users are searching for and their behavior, just like Google. We can add custom synonyms, up-weight and down-weight records through boost rules. And for seasonal content-like campaigns, we can pin them to the top of the relevant search results to maximize their exposure. This is a demo of the auto-suggest feature. So as the user types in the search term, a list of keywords will appear, suggestions. And clicking on one will take them to the results page. In terms of the design, we kept it minimal for better scanability. So we constantly review our search data to see what our users are searching for and to see whether they find it. On the average, we're getting 13,000 queries per day with a click-through rate of 77%. It's above average, so it's a good indication that the results we're showing them are relevant and it resonates with them. Next feature is our service center locator. This is the design from our old Drupal 7 site. It has a store-type filter which confused our users, so we got rid of it in our new design. The service center locator is actually one of the very first enhancements we did using Drupal 8 paired with React. The little red markers you see there are all the service centers across New South Wales. To date, there are over 180 locations. We use Google Maps APIs so the users can use the map to find a location or they can search by suburb or postcode. The result will show them the exact address of the service center as well as all the nearby alternate locations. We've included the opening and closing hours to help our customers plan their trips ahead. Coming on one of the service centers will take them to a dedicated page where they can see all the relevant information about the center and we've also included an enlarged map. Next feature is our global navigation and footer which provides an organization-wide navigation for a whole of service New South Wales. So our header and footer are embeddable technology agnostic widgets which means they can be implemented in other digital products without impacting the code. It's written in native JavaScript and it has no external dependency so it will not conflict with other JS libraries. This is how our header looks like before in our Drupal 7 site and this is our old footer. So this new design tested really well with our users. They were able to access and move to the key sections of the website from any page. So the global nav service center locator and search are three front-end features that improve the user experience of our customers but we don't stop there. We put as much effort into the user experience of our content editors and how do we make our content editors happy, simple, we make their UI easy to use. This is an example of our campaign template for active kids. It has a hero image navigation, somebody text and down below are some clickable image cards and this is how it's managed in the back end. So we've cleaned up the toolbar to only include formatting buttons that the editors will need. We've provided help text and form elements such as this one to specify the dimensions of the image to be uploaded, more help text for the navigation style and down below is where they can add the image card. Image card is actually one of the many reusable components we have in the site that the editors can use to build pages. Our editors also manage the messaging of planted and planned disruptions to our services and service center locations. This is an example of a planned disruption where we inform our customers that this service center will be temporarily closed on a certain date. And this is how it's managed in the back end. So they have form elements and form fields where they can enter all the relevant information about the outage. They can choose which page or pages the message will appear on and they can schedule when to publish or unpublish the page through the save and schedule button. So this is an example of a very simple form because for editors seeing a lot of options that do not relate to content editing is intimidating so we make it a point to always give them a streamlined, less complicated UI that is clearly designed for them. Our editors also utilize analytics to optimize the content of our website. We feed data into analytics using Google Tag Manager with data layer. This is especially useful when we have campaigns and we want to monitor their effectiveness. So the insights and data we gather from analytics as well as the feedback we get from staff and customers when we do our usability testing helps us to see what is working and most importantly what isn't. Knowing what isn't working helps us to fine-tune the website and enables us to make better decisions so that we can provide the best digital experience to our customers. That's it for me. I'll hand over to Gibran and he'll talk about our platform. Thank you, Christine. So to deliver an innovative customer experience, you need to have a stable platform and efficient website. That's why during the planning phase, we really emphasized on the status of core and contrib modules. We made sure that all the needed modules are available in Drupal 8. We asked the question like, do they have a stable release? Do they have a roadmap if they don't have a stable release? What is the core quality? Do they have the tests for the major functionalities? What is the status of the migration from Drupal 7 to Drupal 8? What steps are required if module is moving from contrib to core? Is a contrib module compatible with upcoming Drupal release? Last but not the least, what is the status of patches? Not just in the contrib, but in core issue queue as well. And where ever we can help to make them committable in core or contrib. We knew from the beginning that delivering the site of this scale and importance should not be done in one go. So we planned to roll one feature at a time. To make sure we can achieve that, we needed to make sure we can run D7 and D8 alongside each other. That is where our Kubernetes-based hosting solution skipper helped us. Our Ops team built a routing solution which sits between CloudFront and Drupal to make sure that the request is routed to the proper Drupal site. For this to work, we had to make some backend and frontend changes, like enabling the CDN module to make sure we are serving the proper assets. As we were maintaining two Drupal sites and actively working on new features, we also needed to make sure we can keep them secure and perform operation and maintenance tasks. That is why we updated our Dev staging prod working flow to accommodate security releases and bug fixes. As you can see, we added a new test environment to make sure we can deploy the security and bug fixes without interrupting the development of the new feature. During the development phase, user experience was one of the most important thing for us. We wanted to make sure UI changes are not overwhelming for the end user. And they are still according to the new design. As we discussed in search, it is important. As we discussed, search is an important feature for us. On the website, we made sure we can show Drupal 8 pages in Drupal 7 site search results until Drupal 8 search is ready. That means content reader had to maintain a copy of D8 pages in D7. During the big feature release, we didn't want to interrupt the normal usage of the website. So we added a fallback and rollback strategy to our workflows so that we can tackle the situation if something goes wrong. For the better user experience and efficient page load time, it was important for us that we can keep the performance in check. And performance is an ongoing thing for us. And we improved a lot of our custom code based on the performance issues we faced on the website. And that applies to code and content as well. After the release, we slightly changed our approach. We kept working on new features. We also wanted to make sure we can keep improving the workflows for the content editors. We also wanted to keep our code, contrib, and custom code based up to date so that we are always ready for the latest security release and keep on paying the technical debt. For us, performance improvements are an ongoing process. To have an efficient website, we perform regular checkups and try to improve wherever we can. From the security point of view, we are constantly looking into improving our standards for the things like securing API endpoints by Drupal. Moving from Drupal 7 to Drupal 8, we reduced the response time from 100 millisecond to 200 millisecond. That was the major game for us. But since the launch, we also improved our response time 60% to 70%. This includes backend and front end performance enhancement as well. One of the major things for us was contributing back to Drupal and Opera Source community. Service New South Wales is in top 10 contributor as a Drupal end user globally. We always write a code, a contrib ready code, so that if we be able to open source it, we should. That is why Service New South Wales is supporting organization for the modules like schedule transition, leak management system, and among others. As a part of continuous improvement, we also contributed to various Drupal core and Drupal patches, which we are using. As you can see, we have a long list of four-hour contributions. We are also part of Drupal 8.8 beta testing program to help community with the latest table release of Drupal 8. As our header and footer are embeddable, our front-end code is also available as NPM package for the internal teams and other agencies to use. And if you have attended Jack's session yesterday, he went into detail how we have done that. For the upcoming stuff, we'd like to improve implement personalization so that the end user can find the things easily. For this site, we use the media solution provided by core by Contrib. Media library will have a stable release with Drupal 8.8, and we want to start using core solution instead of Contrib. When this site was built, LayoutBuilder was still in development phase, so to create the flexible layouts, we relied on paragraphs. And now that LayoutBuilder is stable in core, we'd like to convert those layouts to use LayoutBuilder. We also would like to upgrade to Drupal 9 as soon as Contrib is ready. In conclusion, I just want to reiterate the fact that government is really doing some cool stuff, user research and user-centered design to meet the needs of customers, a agile way of working to respond quickly to usability for the usability improvements. Front-end features to improve usability, CMS features to deliver a better published experience, and platform upgrade and maintenance to increase the reliability and the performance for the customers, and also contributing back to the Drupal community and open source. And with that, I would like to thank you all and feel free to ask any questions, and I would also like to call my speakers, ghost speakers to stage, and Daniel and Santa as well, because they are our ops team and development team, no? Questions? No? Yeah. In your opinion, what was the biggest challenge that you faced while developing this project? Yeah, you cannot put a finger on one thing but because it was the last project. And we had many challenges. We have discussed along the way, like from the usability point of view, search and the home page improvements come to mind. From the back-end point of view, migration was the one like moving field collections to the paragraphs was a challenge for you. A big challenge for me was internally. So we're like within the organization, we were going through a digital transformation at the same time that we were delivering this project. So I guess to find an operational rhythm was a bit difficult because there were things happening in the peripheral which kind of impacted our team. And also within our team, the website team, we've got two different focuses. So we've got BAU and then we had to deliver this project as well. So trying to find a way, an agile way of working that kind of, yeah, that was efficient, took a lot of time actually. How about you, Christine? Yeah, for me, I just recently joined the team. So like doing the agile ways of working is challenging for me at first. But all the teams are supportive and really collaborative. So it worked really well at the end. Is there or was there any resistance within South New South Wales as to contributing back to the community and especially spending additional time on that, like once you've got it in the site, maintaining your patches and contributions? I think Gibran's the first person to answer that. Yeah, so at previous next, we worked with a lot of government agencies and we had worked with Transport New South Wales who has a global presence on Drupal.org as well. And that was the tipping point for Service New South Wales internal team to convince that if another agency can do it, Service New South Wales can do it as well. So given that example, we convinced our project manager and then there's a way to go. And we can see that we are now on top and globally as a end user of Drupal. So that's a good point and proves everything that contributing back to Drupal works. And this is more of a UX question. But now that the site is out there and the public is using it, what are your methods, ways of analyzing certain things that may not be working or can be improved? I know you mentioned like the feedback forms and maybe analytics, but is there anything else? Yeah, so we're continuously iterating based on just Google Analytics and a customer feedback form that you can find on several kind of pages or page types on the website. So we receive about, I think, 3,000 submissions a fortnight and we trawl through that. Sometimes it's not always related to the website but we do need to triage it and we need to find a better way of it. But we do have a business intelligence unit within the organization who we're trying to engage to help us with that because the site launched in June 2019. So we're still, I guess, yeah, trying to find a way that's efficient of analyzing that data because we're just getting, I guess, big volumes at the moment. Thank you. Just a question about the search implementation that you put in there. I don't know, Drupal seems to standardize around solar. I've worked with Elasticsearch myself and found myself have to make a lot of customizations and such with Elasticsearch. With going to another search format where there are existing modules, was there much work involved in that? Because it seems obvious it was the right choice for you that you put there like it had features that you just couldn't have but what were the consequences for implementation? So the most important thing for us was the machine learning because we wanted to make sure user can feel that they are looking for the right terms and the search results are what they are expecting. With Elasticsearch or solar implementation, there's so much you can do around that thing. And even some of the features you can control by the UI and we wanted the content editor team to have that experience so that they can boost whatever they want and without getting involved on the back and side of the search. So that offloaded a lot of our work from this ops team as well as from the development side of ours because now our search is totally decoupled from the Drupal and it's a React app. Which is working with the Sugari. So that is a win-win for everyone. Great presentation. I work for the Victorian government. I'm just interested in your service, New South Wales but then I saw you also had campaign templates. What sort of decision making process you go through in terms of what content goes onto this particular site? So we've got an embedded team, sorry content team of five within our kind of broader team and we work with SMEs to actually design that page. So they meet separately and they decide what kind of content it needs to live on the page and then our content designers I guess choose from any of those reusable kind of widgets to help create that page. So does that answer your question? Is there, I guess is there any sort of governance around like I'm assuming it's a campaign to do with a service like you're just about services, is that? Yeah, so we've got a number of campaigns live on the website such as Active Kids and Creative Kids, Cost of Living, Digital Driver License. And I guess, yeah, sorry I've forgotten the question. I was gonna come back to it but what was the question, sorry? I guess I'm just interested in sort of the governance the website and how you I guess keep its purpose, how you keep its purpose. Right, are you talking more kind of like broadly? So are you talking about like the purpose of a campaign and how we extend the duration of that or because we do a lot of marketing outside of, I guess, outside of our team and more toward the public. And that's done through I guess our marketing team which is it's separate to us. Yeah, does that answer your question? Sorry, great. I just said, just the name of the search service that you're using, I just missed that. Digital Driver License. Digital Drive. What are you asking, sorry? Sorry, so the search service that you're using? Search, yeah. Sojari. Sojari, thank you, sir. Yeah, so related to the front end, so you mentioned the search, it's a decouple. So you guys just, it's partially decouple website. So you guys just got some modules and yeah. No, so this is a proper Drupal website and the content is all managed in Drupal but there are certain parts which we have built using the React app like the locator showed by Christine is totally built on React app and the data provider for that is JSON API module. And we build that content, the landing page you have seen for the store page, it is a normal node page. And we extract that data using JSON API and serve as a direct app. Similarly, for the search, we are using third-party Sojari so we can interact with their backend and APIs using JSON, JS. So that's it. I was wondering if you could talk a little bit about how tightly integrated the website is with your CRM, like since it's such a transactional website, do you integrate with the organization CRM very tightly or is it hyping people off into it? How does that work? Yeah, so all of our CRM integration is linked through our website, Drupal website, but we are totally independent from that. The content managed by the website team is totally independent to whatever they have in the CRM. And they have some static pages which we are in talk of migrating to Drupal as well so that they can manage them. The next feature for us is section-based editorial user data workflows so that they can have their sections and build their own pages related to their transactions. So that's an upcoming feature, but that was just for connected readers. There was one in the front as well. Yeah, mom was kind of similar to the other question before about the decoupling of the search. Like, does that still let you search API to interact with the Sojari to index it and then when it's actually searching that's all just front-end JavaScript pulling in. Yeah, so Sojari is just indexing all the pages. We want on the website to be indexed and then we are using their APIs or using JS and showing the results. No, there's no, yeah, there's no communication between Drupal and Sojari. Just public rolling, yeah. Yeah, yeah, yeah. Thanks to Tessa, Christine, and Jabra.