 Thank you, everyone. Thanks for coming this morning and I hope you're enjoying your Drupal South so far So today we'll be talking about the challenges of designing an HCD component-based design system and Drupal thing so in this session we'll just cover a few topics and then we'll talk about the challenges and We'll talk about a quick introduction about myself what we were trying to achieve with the design system our approach and the top five challenges and Being a design system as well a bit of a quick walkthrough with that and the final result and outcomes So quick introduction on myself. My name is Akhil. I work with Salsa Digital I've worked in tech for the last 20 years mostly around the front-end UX design web design and Also a graphic designer in the early days in their last 11 years I've been living with government for eight years with the Department of Communications and Arts We have to mostly with the go-cms sites since 2014 and then the last three years have been with Salsa Digital as a digital engagement manager and as marketing as well. So pop quiz because everyone runs tests And also because I didn't write my title for my presentation, I did certainly I'm putting in jargon. So does anyone know what HCD stands for? A few hands quickly, maybe just how many front-end or designers do we have here today? a few Back-end technical and others who just might have mistakenly come into the room. Okay, a bit of a balance. Okay, cool So HCD There's three choices. You can pick a choice first one Hyperactive child disorder That happens to be my hyperactive child human certified documentation Or human-centered design. Thank you. It's definitely not the first one Okay, so humans are designed so Let's repeat. Okay, great. Is there anyone here from Victoria government by any chance? Fantastic So I found a great definition on your side about the human-centered design definition and also has a really good playbook there If anyone else is interested, but I took the definition there It's a human-centered design is an approach to problem-solving that puts people we're designing for the heart of the process as an attribution there and a design system so now a Quick question. So how many people have gone through created a really large document have typed everything out get to the end and Realize you've got to make that one change which is all the way through the document You know you have to do the search and replace and it's tedious but also really painful and scary, right? Everyone's Mostly out of that. Well Imagine if you had something like a glossary that you could just change one term there in the glossary of that document And then it would just change everywhere else. That'd be really handy, right? So a design system does something very similar. There's a structure and you've got a library of centralized components Features and attributes that you can change in one place and that propagates across the entire website or design that you have I know it's here very small, which is it's so According to the Nielsen group The design system includes Feature enhancements that can be reused UI and static it's but the design system itself is According to Nielsen group is a set of standards designed to manage at scale by reducing redundancy and creating a shared language and Producing visual consistency across several pages and channels. So it's there really to help us reproduce patterns design features If you build a website, there's a great component over on this page over here that you built for this page But now it doesn't work with the other pages It's something that you can reuse over and over and then you can manipulate and modify if you need to but it makes the Management of this across many pages hundreds of pages thousands of pages much more manageable faster and Fisher And there are various different design systems as well So when we were going out to this to design this new design system, what were we trying to achieve? and What was the problem space so the problem space that we had was that there was quite a few hard It's quite a high cost to build a design system or a website itself So there is obviously the visual design and a UX component of the work So building a visual theme for the site for any site can be a lengthy process You know weeks months and years hopefully not Validating and testing the theme accessibility testing on the theme and then also especially when you actually have to build a bespoke Design or visual elements each time you have a new website Project times can be quite long as I mentioned earlier with the design the process of validating building the site doing these repeated repeated patterns and repeated activities and tasks Can take time and add to the project itself when you really just want to build the website Having a separate project for every single site you do and starting from scratch to a point Means that there's a lot of Inconsistency is the way that you did the button five months ago two months ago a year ago slightly different to what you do now The technology behind managing some of this stuff has changed slightly so the experience is hopefully improve and evolve But it's always these inconsistencies what you hopefully picked up that was really good last time Did you pick it up in the new project and bring it over? And as mentioned before the repeated patterns of user of UI or journeys or user journeys and things that you want to Show to the user you need to build them each time you need to design them each time you need to then apply accessibility and other testing and other activities around that and As I mentioned before the repetition of basic build and development So once you have the designs things validate everything then you got to build it all over again Which you probably built six months ago in the same or similar project And then in general just a lack of flexibility of managing a site. So if you build a site Release it, then you have to be able to manage that now the not having a design system That's where I mentioned before that we have components that you have to manually update across a site and colors and components, etc So our vision for a design system was civic theme in late 2019 and early 2020 we decided to kind of come up with a design system We were conceptualizing this design system. That was civic theme The civic theme is an open source design system that aims to provide a quick easy and cost-efficient a solution to build a new website The out-of-the-box civic theme would deliver a high quality set of components and features that we used immediately web publishers and administrators can create and manage Pages and page layouts without any coding So how hard could that be? Considering that the end of life is coming up We thought that it'd be a great solution or something to have to be able to make this transition from d7 to d9 and above Much easier and especially we wanted to help smaller organizations that may not have the capability of capacity internally to run a full upgrade or project So design civic theme the concept Just found the screen and that's handy Civic theme is an office on this project It was a design system that salsa developed and the project is maintained by salsa digital It's made up of two components effectively. So there's the figma design systems Figma design files and then the actual design system as a code base So there's a relationship between the two and we effectively Did the designs and figma design and then those can be used by people or any agency or anyone And then any changes we make to the design system Made in figma and then flow down to the build and the building to represent that so the building's open source and the code is available And our approach to doing the project. So they're just a four-step approach We worked with using Customers as research talking and involved in talking with our clients and reviewing dozens of existing websites With more interfaces We also looked at the common design patterns that were frequently used in components that were there are being used on websites the former Australian government design system review had key features such as using the accessibility colors of dark and light And a font guidelines and just the font that the selection of components including styles, patterns and headers and cards that are Existing to those we also looked at the regional galsy mess gen 1 UI kit That was a really good source of information for us to kind of see what was adapted what was used and was always still relevant today And what was being used by agencies and clients today So the last part was that we had our own designers have a look and then bring in kind of an updated uplift of the Design system the patents and best practices that were around today versus when the original design system was brought out So we also looked at some of the lessons that we had from our user testing and from our customer Feedback we also focused on the the ability to have something out of the box. That was double a or triple a Tested and leveraging from the Norman Nielsen group research and business vision Australia validation of some of the work That we did to kind of bake that in if we could that was the approach so We then also Looked at different features and decided to fit to include or not include those So the top five challenges that we encountered number one Designing for the user We found out the teams that are asking questions About or like how long is a piece of string for development? Who are we building for what features do we need to build first second or even build at all so what we did is we needed to narrow down our audience so we identified key personas and Looked out the early stage at least looked at what the Visitors and users were actually using and that was based off the approach earlier Naturally the other is the visitors. It's a naturally the site visitor was the highest For the primary audience that we looked at But we also looked at it from the web administrators point of view since they'd also be managing the site and they experienced for them was quite important as well and Then content editors as well. They got a look in at the end So we proceeded using standard product development framework So building a product and there was coupled with client-led projects And this was to directly inform the work we were doing based on each of the projects the needs and the build as we were Encountering these projects and working with civic me number two and I'm born So working with our clients. We were able to use specific projects and Some of the clients that we worked with included civil aviation authority Casa and They introduced their own design patterns that were then user tested and validated with a design agency external to this process How are those designs were? Contributed back to the initial civic theme designs and then they were uplifted for the early UI patterns and informed what we were doing The next agency we worked with was Australian Energy Infrastructure Commissioner or Akali and Akali adopted the designs that we had in the Figma design files and the system itself in their early assessment to actually come across and Use the upgrade their project. So we did basically a mapping of their existing components to the out-of-the-box And to the out-of-the-box civic theme which was then used in discovery to actually build up from And last of all the government agency that cannot be named We they based their designs on the Figma designs and adapted and extended where they wanted to improve So they used the Figma designs and really tested and really pushed the boundaries on what we had there And we're able to kind of almost build out their own adapted version at the end of that process we looked at what was adapted and what we thought was quite Quite good and an improvement and uplifted and we brought that feedback into the project and into the actual initial civic theme MVP release So the second challenge we had was actually making meaningful improvement to the Australian government design system in gold So the AGDS was launched in 2018 by the digital transformation agency and it was to provide a consistent and improved citizen experience So the AGDS was also then decommissioned in September 2021 So that was decommissioned after we had started this project But the AGDS was then replaced with gold design system And this was used as a way to ensure that users who were still using the former AGDS design system Still had some support and were able to continue using that that framework The the original Australian government design system was widely used by the GovCMS Community and so therefore had a fairly large base that was still using that The other thing that we wanted to do is just make sure that we didn't build anything that was just completely Off the grid there So we wanted to make sure that we built something that was meaningful and useful not just something that made us feel good We wanted to really use Real users and solve real problems for the community out there And so challenge three was actually trying to fit in product development in a busy agency We didn't build products We don't have a dedicated product team And we decided to use Agile We decided to use Agile based product development approach And that allowed us to be able to look at what we're doing and and do that in a more Manageable approach. So we decided just go all in and build it out as a project So the fourth and fourth and most interesting challenge was the basic color palette was not simple The brand color mapping components Color mapping and a light and dark theme contrast for accessibility was very difficult we We actually found this one of the more complex parts of the project Saying that we had a brand color most agencies might have two or three colors Which is perfectly fine But then we needed to apply those two or three colors across almost thousands of components And how that worked and which components picked up the color which one didn't where did they go some of the clients didn't want the Particular component on the home page to show this color and that color so this mapping and understanding who needs what where Especially for the colors is very complex Just understanding the different variations of colors that can produce for the whole site itself from a centralized Brand color of three or four colors was very complex itself So we did end up managing to actually solve that in a way Let's actually come up to the next Challenge, but we did come up with a color mapping system And it's now just been released as of last night They made a final release with a color mapper which actually shows you the flow of where the colors can change You now have a set of kind of two colors a dark color set and a light color set You don't have to use those but if you do use components that are on a dark color They will work and you can also preview the color combinations in the site So when you build the Drupal site now The color mapping is actually built into it including and also the figment design system has that also So if you change the palette within figma, it actually shows you what that looks like through the entire design system and the figma files and The last one was you can't be everything to everyone So no matter how hard we tried you try you can't be everything to everyone So the more we added to the project the longer it was going to take to get up to everyone We have to learn how to draw a line and to kind of Say what was in core product and what was not And that was definitely one of the more challenging things as well so the top five was Recapping designing for the end user making a meaningful improvement on the design system Trying to fit in product development within a busy design agency Basic color palette was very complex and also we couldn't do everything for everyone So I'm going to try and do a quick walkthrough So the first part of the design system using figma is everyone or anyone familiar with the figma files figma system. Yes Figure in figments at all they can use kind of like illustrator or like other kind of design Program that it's a web based and it's quite powerful because we can have a lot of people working on the same design system Or we can also share that Okay, so this is the online design system you can use figma if you have it downloaded to your desktop So we have instructions built into the files. I'm not going to go through the instructions But there are instructions there are how to use it Effectively there's also instructions on how to contribute back to the design system So it's an open-source project. So if you have suggestions or changes You can put that suggest that back to the team the core team will look at it And as per open source potentially have that back in the core now for the fun bits I'm hoping they're loaded because they're fairly large. So we have a few different sections in this figment design system We have a UI kit, which basically is the menu or the library of all the components and all the variations Okay, so as you can see there, I'm Struggling to move this but you can see all the different components including typography right down to spacing grid layouts Everything is in here. So to have an idea of what there is. This is the library. You can then see what this looks like and Then apply that to your new designs but there's also Pages so you can now see them actually as what a page would potentially look like And this is really the key. So these are also designed with Mobile in mind. So there you can see the design system components built out into a page You can see there's the headers and all of these are Component-based so you can actually move these elements around and you can change the order the color that the layout even so these Components don't have to be there. These can be reconfigured. So these are nav cards. The nav cards can be changed You can also change the information the fields that have been displayed and that's all managed through the The content component itself So the few different variations some hero banners of footers So out of the box all of this is available this design is all the basic out of the box components So we have a few different examples of what those any pages look like and you can use these or you can then use This and then change yourself to whatever you need So as I mentioned before the color pallets this I can see me Our instructions on here So basically there's the color pallets so in the design system You can actually change these colors here that are hex based and that will apply to all the components that already built in the UI Kit so then you have your pages you can reminipulate the colors there and actually see what it looks like okay, so I'm going to Finish that if you want to see any more details, please let me know and get you the details Go back to the slides So what we ended with is a user focused product We were able to produce a product that was Good for content managers had greater capability to develop pages without technical development minimal coding For site builders. There was a lot of out of the box ready to use components and features and functions For designers it allowed them to focus more on the design side of things Rather than the actual technical build and having to make a compliant with certain things you can now use a design system and More focus on the layout for users and that digital experience rather than trying to build the components underneath and lastly for Agencies there's a reduction in build costs or design costs instead of having to spend months trying to validate just the basic components The button colors and the layouts you now have a base of a product which is much higher To start with and therefore you can save a cost and if you wanted to build on top of that you still could so you can use this as a base project and then build upon that so generally we were able to do Quite a few things Gonna just quickly skip over this one And that was our product so we have civic theme. It's now launched live With the design system and the code base the code base is also available Again, if you want to see any details that you can come and see us at the booth That does anyone have any questions? I don't know do you have time for questions that you? Yes Yes Sorry, I'll say that again Are there any tools or processes you use to maintain a Or to ensure you maintain a minimum level of accessibility with your design system components, yes, absolutely. So part of the process of building the design The design components was that we did both a compliance check We actually did a rationale to the original government design system Why we you built of this particular component and how that map back and so that was a rationale on the accessibility side We actually did assessments on every single component Both of those documents are available online and you can go you can actually go through and see the assessments We did for accessibility where it meets and also the tests We did the intention is that when you design something you can use the same tests to do test your Adapted or extended version of those components. Perfect. Thank you So it's one more there because you initially set up The design system if you have new projects and you have new components that are helpful Do you integrate it back into the design system or is it mostly static? So depending on how you wanted to use a design system You could either pick up the design system just for the design phase and then move into builds and then adapt it there Or if you wanted to maintain your own design system for your organization You can use that design system and kind of adapt or fork And then if you feel that those components or features functionalities are Are interesting enough a common enough they can be contributed back as an open source Process to build back in a core So ideally as much as you can get into core from cost from custom builder Adaptations would be great because naturally the maintenance is not on the project team It's on the internal core team But yes, there is a process to be able to do that both on the design level and on the build side Another question and did you both out your design system in reactor or angler or was it just more group based? That's a very good question. It's all theme based and Drupal and so That's great. So again, if you can clarify that if you like if you come to the booth, but yes It was all theme based. So we're trying to keep it out of Drupal Thank you for taking up this design system. So since the The Australian gold has actually gone away. I have so far got the opportunity to work on the NSW DDS This Australian girls CMS as well I think this also is actually Solving a piece of the puzzle which is actually still available still In the girls CMS. So what's the salsa commitment towards maintaining this? So say you mentioned that this is going to be a contributed one So what's the salsa committed commitment towards maintaining this? contributed design system so as a as a project owner as a Technical consultant to then I provide the advice to my clients I always try to put the projects on a path or on a product on on towards the projects Which are actually maintained by the healthy contributors. I respect the the contributions done by salsa So what's the what's the commitment of salsa towards is it a just a POC project or what's the salsa commitment for it? No, yeah, so yeah, interesting a good question about that Definitely, we'll be maintaining that for a long term. This is a long-term project. So we've Built the initial project. It's now live and we'll be supporting that so the next phase for us will be building the community and Generating as much as we can interest in using that and and maintaining that as long as we can Second question on it so since I have actually prior experience with the DDS so Contributing back to the DDS is actually a tough job in in terms of providing the backward compatibility. It's actually By the maintainers in in their back when whenever actually they do provide to add They are actually easily comfortable in adding more components But in terms of fixing up the existing components it it breaks the backward compatibility So so so in term so in terms of your commitments I believe that they are going to be major releases very often for this the yeah, so the release and the the ongoing Release scheduling and everything else is a little bit early for us to work out right now We are putting together an actual product team that will be maintaining and supporting the product going forward So we're kind of out of the project initial build phase now We're putting together a team that will be able to maintain that so that'll include community managers It'll include technical development and and other kind of roles to make sure that that project is able to be maintained But also can feed in feedback content contributions A quick feedback You are actually offering both cookie and coffee at the same time, but I'm interested in the DDS So you mentioned that if I'll have to actually use the design system I'll have to actually go with the team. So are these going to be the separate products or is it if I'll have to actually Install the team as well to get the DDS This design system is going to be the part of the team. Yes, if I'll only have to use the design system So you can use just the Figma design system You can also use the build as well. Is that what you mean? So you mentioned that the design system is part of the team Use only the design system not not the team. So that is possible Are these separate projects Thank you the separate projects and that question Thank you very much two questions. Yes, first one was on Just a quick one on the gold standard because you mentioned it's been Defrecated it's wondering what's the current standard now or as a civic theme now be held that standard and then the second question was Just just interested if you could briefly outline how you can like if you're using the Figma files to do your design and now you wanted to move it into your theme like if you could do a brief overview of What it's needed in that process to take your designs from the Figma and now put it into your theme and put it into your Drupal I may not have time for the second part But I'm happy to show you if you want to come down to the booth at least I'll try and start the first one is about the Standard so the shown government design system is just decommissioned The gold standard is kind of an unofficial Framework or to pick up from the AGDS But there's no official design system if you're talking about government in particular So there's none govcms had the AGDS kind of built kind of into the earlier versions Definitely on Drupal 7 on Drupal 9 they made a decision not to support kind of any built-in design system into the initial build-outs So it's we'd like it to be a standard whether it's the standard We'll see how that goes But we try to make that informed from as many sources so that it is more usable by as many people as possible Yeah, so maybe the second one may be probably be technical here that we can try to add a different like of the booth