 Hi everyone. Thank you for coming to hear our talk today. You need this when using design systems to achieve success. I'm Amber Henry. I'm a project manager at Mofft. I started off my career as a UX designer and worked in Drupal. I'm sort of a website development for 19-ish years now. Today I'll be talking about the core deliverables, challenges and outcome of this project. As you can see, I'm co-presenting with Matt today, so I'll hand over to you. Hi everyone. My name is Matt Commons. I'm a UX UI designer at Mofft. I've been in the Drupal space with design and front-end development since about 2009. I'll be touching on the design phase of this project that we're about to discuss. The project we're talking about today is for the National Office of Child Safety, which will often refer to as NOx throughout the presentation. The National Office for Child Safety was established in response to the Royal Commission into the institutional responses to child sexual abuse. We would like to thank NOx today for letting us showcase their site for this presentation. NOx engaged Mofft to uplift the site's information architecture, visual design, user experience, search enhancements, improvements to their resource library, and to create a support services directory. In this presentation, we'll be covering the restructure of the information architecture, which also included first-hand user testing and the new visual design using a design system. The challenge was that the phase one core deliverables, including the new IA tree testing with first-hand users and the redesign of the site had to be done in a tight, immovable deadline of just three weeks due to a campaign launch. The campaign was still being created and the content was embargoed. So how did we achieve this successfully in just a short timeframe? Next, we'll be breaking down these phase one core deliverables and how we achieve it. The NOx website is rich in useful information and resources that needed to be updated and extended with new content to support the national campaign and NOx's broader work. NOx received feedback that the information could be difficult to find and key information and resources were often nested deep in the hierarchy of the site. So one of our first tasks was to review and improve the IA and test it with first-hand users. We reviewed the current IA, made some logical modifications and then run a discovery session with the client. The discovery session was quite insightful. It helped us to define the top tasks for each audience group and get into consensus about the changes to these labels. So we started defining the top tasks. Each task was derived from the perceived priority action derived from the audience needs and pain points and the site content also needed to address these. Tiny tasks are considered the least important and therefore could be adding clutter and confusion for the user. Top tasks should also be set for a range of audiences. So for a site such as NOx, their audience ranged from survivors and victims, concerned family, friends, educators, colleagues, our support or service providers and researchers. Tree testing is a research method used to evaluate the findability of topics on the website. It consists of presenting the site architecture and plain text labels organized hierarchically. Participants are asked a set of tasks we defined earlier to find something on the site using a deconstructed outline of the site. In this case, we use Optimal Workshop's Treejack for the tree testing. The test helped the project team understand if the labels selected for each page of the site can support users in navigating the content and finding the relevant information. The test challenged users with a set of tasks asking them to locate information by navigating through the site tree. By recording the pass, they took to complete these tasks. We were able to work out how users interpreted the tasks and what labels resonated with them to help them find the nominated destination. Based on the results, we reworked the labels and placement of pages within the site structure. And we also supported some of the users who went down the wrong path by adding links back to the nominated resources. You can see on the screen here that we also introduced a mega menu into the new design. We supported the improved IA and reduced the friction user flows. We created layouts for the priority landing pages with placeholder content, links and promotions. And we kept these unpublished until the release of the content in the campaign material. We'll cover these further in the rest of the presentation. Implementing the IA presented a challenge. As we had a short timeframe to work in, we started the modifications and firsthand user testing of the IA in parallel to kicking off the design process. This was to ensure we could deliver the project on time. Some of the content was embargoed as the national campaign was being prepared and other pages deemed important in supporting the campaign were being reworked. This meant that with the new structure, Nox had to rework the content based on the new labels and the purpose of those pages. We implemented the new IA and kept new pages and draft ready for content to be added. My turn. So let's talk about the design brief. The client was extremely helpful, clear and easy to work with allowing for us to get this job done on time. Today we'll be covering some of the clear direction that they provided to be able to make this meaningful website for Nox. So one of the things they were very clear on is that what they wanted the design to embody. They wanted to be clean and modern, bright and approachable, or bright and positive, approachable and inviting, as well as most importantly trustworthy and safe, which is for a sensitive topic like child safety, of course this is a main concern. They were also very clear on what they wanted the website to incorporate. So they wanted to introduce the national strategy branding across the site in engaging and in creative ways. They wanted to focus on some text hierarchy, as well as visual consistency, depth and movement. They're also clear on what they wanted the site to avoid looking like. So they wanted to avoid a corporate static feel. They wanted to avoid blacks and grays, sharp edges where possible, and text in all caps. The clients applied us with a branding style guide, as we're all sort of accustomed to having provided with us with any established organization. And they outlined the colors exactly that we would be incorporating into this new design for the website. You can see some quite vibrant colors, as well as some new campaign colors that were provided to us. We needed to take some careful consideration for accessibility, so we did alter some of those colors from the original color palette just to make the whole color palette from their branding style guide work harmoniously together. We were also provided with some assets, these beautiful watercolor textured assets from the national strategy, which as you heard me mention before, they wanted us to incorporate in engaging and creative ways. You can see that with a document like this, it was largely inspiring to be able to have this beautiful artwork to sort of incorporate into the website. So it was a sort of dream project when we first got shown this content. So with that information, how did we approach the design uplift for this project? As mentioned, the project was completed within three weeks. The first week was for design sign-off, and two of those days of that first week, I was unavailable. So you might be asking yourself, how was I feeling? There's a photo of me. But all jokes aside, I'm a designer. I'm used to working under pressure, I'm used to tight timelines. But you may be asking yourself also, why am I sharing that information? And it's just a testament to working with an existing design system and being able to achieve such a tight timeline. So what are design systems? I'm sure most of us here are quite familiar with that, but it's a collection of reusable components used to assemble any number of applications in today's situation. We're talking about a website, but we see design systems constantly in our day-to-day lives. We see them on operating systems. We see them with Uber Eats. We see it with DoorDash. We see it with Spotify. All of those apps have design systems in place. And that's just to create a consistency across the platform or the identity that you're interacting with. So we're able to achieve this design uplift by using an existing design system. So taking the guessing work out of the equation and basically we had an existing foundation structure to work upon and tweak. Design systems are informed and they have consistency in place, which ultimately saves time if it's already an existing design system. If you were building it from scratch, to save you time, it's going to take you time. But in this situation with a design system already in place, we were able to keep things moving quickly. So let's look at the first steps of updating this design system. We started by looking at the existing color palette from the previous, like the old version of the website. So covering some of the areas mentioned earlier, these color palettes are lined with some of the areas that the client wanted to avoid. It had that corporate and static feel. It had blacks and grays, mostly sharp edges. And as you can see here, clearly along the way, somewhere accessibility became a major concern with some of these darker palettes. The headings you can't even read on the dark versions of these color palettes. Some of the button colors have some accessibility concerns as well. You don't need a contrast checker. You can just see visually from a visual test that these wouldn't pass accessibility standards. So using the color palettes, the colors that we were provided with, we were able to establish these new color palettes with careful accessibility consideration involved as well. You can see that we're achieving this, avoiding this corporate look and feel. We're applying this clean and modern look for the website. Bright and positive look. And also allowing for that approachable and inviting all parts of the brief. As on top of that, we avoided the sharp edges concerned by introducing quite a lot of rounded corners for this specific design. And you can see we've also added some depth with some drop shadows as well. Then we started to look at the text hierarchy. So that just jumped a step. So to address the request of giving some extra attention to the text or the typography, we applied the new font family that was outlined in the brand style guides. I always trip up trying to pronounce that one, so I'm not even going to bother saying it. You can read it on there maybe if you're close enough. But an extra bit of consideration was looking at font sizes as well. And a clear example of how much just tweaking your typography can actually uplift your design. Here's an example from the previous site at the top was the previous footer. And on the right hand side, there were two meaningful texts called actions. To contact triple zero, if you are a child, they're in danger. And another one to get support. Below there is the updated version of the footer that we implemented. And you can see with just a simple treatment of taking that text call to action out of the footer, placing it above the footer and giving it more prominence. And just a simple treatment of improved typography, font sizes and font family, those call to actions are far more clearer and meaningful. We also looked at the various view modes and components available in the current design system, and we gave them an uplift. I'll walk you through some of the key ones that were most commonly used across the site. We improved the icon card view mode and by providing rounded corners and adding a more subtle, softer drop shadow to address the request for depth on the site, as well as some improved padding and obviously just the change in typography to improve the overall view of the image card. I duplicated that slide and didn't remove the last one. Ignore that. We made minor styling improvements to the stack or image card. Basically, same sort of treatment as before, keeping some consistency across the site. Rounded corners, improved drop shadows, padding around the content within the card. Once again, rounded corners, drop shadows, consistency. And then, after reviewing of the site, it became apparent to us that teaser images were not being used the same way across all different view modes and certain areas of content were only being used with a specific type of view mode. For instance, they were using big teasers to advertise news content in this scenario where we have a specific crop. As some of us are familiar with Drupal, we use image styles, we have specific crops applied. In this example here for the small teaser, we had a square crop, which is maybe not ideal if certain bits of content are using a certain image in a certain way. So we actually found that images on every single view mode was not actually adding much value and was cluttering the interface. So we actually made an informed decision to suggest that the small teaser was to remove the teaser image that was assigned to it. We also were provided with a special use case for teasers, or we suggested a special use case for teasers, the regular teaser view mode, for resources. So we're all familiar with clients having documents, PDFs and PDFs are not really designed with the mind of what we were talking about before about that square crop treatment for a website. So we actually made an informed decision to display resources with the full view of that document, because obviously a designer that's creating a PDF cover is not thinking about a cropping of a square section of their cover to be used on their website. So we actually made that informed decision to display regular teasers for resources as the full version of that image. And also just here is a very clear example of just improved typography, spacing and rounded corners. There are very minor changes to this big teaser here, but you can see that the right has a far more stronger presence on the page than the one on the left. The following example here is what we refer to as section content. Now the version on the left-hand side here is actually from the old site, however I don't think it was actually being used on the website, but that functionality existed within their current design system. So you can see here that we're able to actually with the use of the new colour pallets, some improved padding around the container elements and using background images we were able to make this very bland looking component that wasn't being used on the site and create something far more striking and impactful and as we get further into the design you'll actually see this is used quite strongly across the project in the uplift. We also made some improvements to fast facts and statistics, so you can see here on the left quite a sort of reserved, more subtle approach. On the right-hand side here we made the statistics larger, more bold, we improved some spacing as well as introducing a button for the read more section of this component. Another thing that was not being used across the site was buttons, buttons were not being used at all and I believe that was probably an accessibility concern like we touched on with the colour pallet section previously. We also introduced a new component to the website which was an image gallery, you know, not amazing WISBANG new technology but it was a new feature to the site and you can see where we covered with previous components and view modes, that helped inform how this was going to be designed. So, the rounded corners and just introducing the colour pallets into this new component that was coming into the site. So, you might be thinking, that's all great. The design, the components, they looked very simple and how are we going to incorporate the national branding that was outlined in the brief? Now that the fantastic watercolour assets. So, we were able to incorporate these assets by means of background modifiers. We at Morfter using a module known as Modifiers and they have different types of modifiers in particular this one used is a background modifier, a really simple easy module to use that allows the editor to upload a background image. You can choose background size, position, all those sort of CSS properties all sort of built in and just easily configurable with the UI. And so, we came up with these creative ways to introduce the background images. You can see on the right hand side was a more subtle toned down version of these watercolours to allow for accessibility as well as coming up with creative ways using this sectioned content component on the top left here that incorporates the colour palettes to create separation from the more vibrant versions of these background images. And again, using that drop shadow to create depth and sort of make the content in these sectioned areas, you know, heroed MVP, well, I say MVP. I now realise that means minimal viable product but I live in a sports world where I think of the most valuable player. And so, you can see these different assets that just used in creative and subtle ways to help break the page up and take some of that blocked sectioned design out of the equation, making this site look a bit more approachable and inviting, as well as some more additional treatments here of just positive looks and making it look very bright and interesting when you're on the page. To address the request of movement, there's many, many different types of solutions and with time constraints involved, we decided to suggest using what is known as a scroll reveal modifier. Just like the background modifier feature we were using, we used the scroll reveal modifier, which again, very simple UI for the user to create a scroll reveal event when you scroll down the page, reveals these components in creative ways with various different settings available to the editor where you can choose the direction that the item comes in from on scroll, the distance, the duration, delay, opacity, scale, quite a robust set of features. So this was how we suggested incorporating movement into the website. So the campaign, going into the project, we knew that the new version of the site was launching with this new campaign and Amber touched on this before where the content was embargoed. We had no idea what the content was going to be but we needed to provide the client with this campaign page on launch day and we were thinking to ourselves, we knew the type of content but we didn't know exactly what the content was. So we knew that we were dealing with video, we knew we were dealing with imagery and resources and campaign messages but nothing specific beyond that. So it was quite a challenge to sort of think of how to approach that initially at first when we're thinking about it. However, we were able to take the components that we had already redesigned and just build a page out using those components. And so the solution was to just provide the client with an example of what a campaign page could look like. So you can see here various different components. Also with a campaign page, sort of really highlighting how helpful sectioned content could be to really bring home a certain message with a powerful image and using those color palettes to eliminate any concern of accessibility. So what was the outcome of the design uplift? A reminder of the old site and what it looked like. It had a corporate and static feel to it. It used a lot of black and grays. And so the final result speaks for itself, I believe. It's adhering to the brief and delivering a clean and modern website as well as being bright and positive, approachable and inviting, and trustworthy and safe. Incorporating the branding, the national strategy branding in creative ways and just completely reshaping the website for the National Office of Child Safety. So a bit of a conclusion here is using the design system in place that really allowed us to get the project done within the timeframe, which was not a lot of time at all. Using a design system from scratch, as I mentioned before, would be a very long drawn out process. So whenever you would be tackling a project with a design system that you don't actually have yet, using a foundation like Bootstrap or the Google materials design or something along those lines would be a great starting point as there's already sort of informed decisions for you to build upon from there. A bit of context was this was my first client project with Morft since starting. And there was definitely hurdles to sort of jump through or jump over with regards to understanding the design system, understanding, you know, different, how the impact of suggesting a certain change to a certain component and how that impacts theming and sort of the way that we sort of overcame that solution was having, you know, lots of continuous meetings and just sort of talking it through and working together, you know, some good old-fashioned teamwork. And one final note I would say with working with design systems, which I've found is a bit of a problem. It's not a problem, but it's a challenge is you can find a design system sometimes when you're looking at it is not flexible. And it's, you need to, as creatives, you need to try and look at it and find creative ways to make it different because you can get stuck in this rut of looking at it and going, I can't see past this box. In this project's example, we were able to overcome that sort of boxy-looking sharp edge feel by using the background modifiers and creating this sort of clean flow on the page. So, yeah. So the uplift was completed in time for the national campaign launch. Yep, there was some early morning starts and late nights to get it done. But by utilizing the design system and extending the components and modifiers already available, we're able to achieve a visually appealing result for NOx and their users. Added a QR code here if you want to visit the site. As the campaign was launching on a Sunday, we approached the delivery of the uplift in stages. So we launched the look and feel onto production four days prior to the campaign launch. This allowed us to have a bit of time for any final changes as well as we're able to, like, update and create the page layouts ready for the new content. And these pages were kept in draft until they were ready for publishing on the launch day. So the national campaign that was the big secret throughout this project was one talk at a time, that successfully launched on Sunday, the 22nd of October 2023. The campaign could be familiar to a lot of you in the audience. It's been broadcasted with a lot of media outlets, such as TV, commercials, cinema, social media. And in the three weeks following the launch of the campaign, the website had over 120,000 views, which was an increase of 745%. So Moffat is extremely proud to have been part of this project as it's such a critical topic. And while I know I was, it certainly is a project manager, very grateful for the teamwork between Moffat and Knox who accomplished this in such a short time frame. So thank you for coming to listen today. Um... APPLAUSE Any questions? Oh, Julia! LAUGHTER I mean, I guess how in three weeks? I guess a more serious question. In terms of design systems, how important is it with your own internal design systems? You've got something that you're working with. But having, you know, prototypes internally that you can look at and code, okay? You know, we could use these things coming up. Or just looking at what the client has and saying, what can we do with that? Well, I mean, we... Oh, sorry. Um, we... Like, the example of the campaign page is, like, sort of speaks to that, right? Is creating the sort of design out in Figma and having that ability to lay the page out and sort of have that informed. We also were able to, once the theming was implemented, we're able to build out these pages in the existing site, right? And showcase the page and showcase the page and go, here's how it was built. And then you have that informed decisions for the client to look at and review and go, oh, okay, so I can build this page out by looking at it this way. Um, so I've got a couple. Um, and I guess my first question is, um, the design system that was that, like, was convivial or was it actually an already established site with design designers? The Australian Government. Okay, so, there were two familiarity developers, right? But it wasn't tool that they used. So when I look at your presentation and you say it was five days to complete the design and you launched four days before the three-week period, that means the dev team built the site in six days and made all those changes, right? And we did the user testing with the IA2. So, how did so, um, I want to know, I want to know who built it, right? Like, out of the team, but I'll ask that privately. How did you prepare the dev team to do this amazing amount of work on such a critical non-negotiable deadline? Because I know, like, the Minister had announced there was no way for that to move. Um, how much time have we got? So, the it all just had to start or like, I mean, normally kind of follow a bit of a process as you kick off a project. We had to just start everything all at once. So, the updating the IA had to be done as quickly as possible so that we could get the user test to happening. Um, the design had to start once that was back and available. Uh, we got the dev team working on it as well, like making some of the changes that, uh, we knew had to happen. Um, you know, for content types and things like that. It was just super fast and pretty busy. Like, yeah. I don't know, there's a lot of detail, I guess, went into it. We just had to work, uh, a lot together. There was a lot of stand-up time and with Knox and they were amazing. They were just, like, reacting super quickly. Um, which it wouldn't have happened if they weren't on the ball like that. So, because we had to get them to approve and make decisions, you know. Like, we need this done today, yeah. It's going back to that question. Pretty amazing for three weeks. Just wanted to know how large the thing was. So, how many people were involved and also how big was our website and how many pages that you're talking about and you had to change? Um, so the team was five of us. Um, pretty much working on it full time during that time where it's, you know, everyone's in the team spread across a few projects. Um, hi. I'm curious about the background of the client. Don't worry, I'll do it. Because I suspect we can't have done that. It's lovely. When you, when people are now um, using that site and from an editor's point of view, getting new content, is that background modifier just automatically built in so that when they build up a page or so the time they get the right background, or how does that work? So, the background modifier can be applied to pretty much any of the components on the page and there's probably uh, you can probably add it to multiple different sections on the site as well. I believe Knox has it um, as part of the uh, header section as well. So, we actually used this uh, look and feel um, set up to dictate different pages in the navigation so it actually applied the one background for its children pages as well. Um, but yeah, the the modifier could be applied to any of the components and it's quite um, easy to use and not very difficult to set up. Just wondering how many development you had to work on that project in the short? Uh, just the one. Yeah. I provided some um, front-end assistance as we were going along. Um, just sort of identifying things that needed to be changed so I would just provide you know, suggested CSS rules and stuff like that just to help him because I knew that time was so short. Well, I wasn't doing the front-end work but I was providing assistance for him but it was the same person doing the back-end was doing the front-end. That's an amazing work. Um, did the site already have a design system or were you sort of analyzing it? Yeah, so the design system was already in place um, which was why we were able to do what we've achieved in such a short time. Adam, you just even heard there being a little more legacy side with our design system. In terms of weeks how many during that? Too, sorry, what was the question again? Uh, if it, if you didn't already have a design system on the website, how long would it take? Um, how long is a piece of string? Yeah, the deadline. Was the current design system or the previous design system based on technology like a bootstrap? I believe it was bootstrap. Well, thanks everyone. Thanks, um, Adam.