 Thanks. So here's my lightning produced session, I kind of quickly whip something up. We've been working on just in time presentation. It is yes. I've been working a few different on a few different things and in particular I thought this might be interesting but instead of talking about the technical side of some of the stuff we did is more of the genesis for it. So today's topic that I've selected here is how we designed the design system. So we built something called specific theme which I'll talk about in a second and this is more about the precursor steps to how we got to this kind of place that we have a product and a design system. So today I'll try and cover some of these topics as quickly as possible is not as many pictures but there is a demo of a Figma design file and a design system itself which I really want to kind of show you more so than this is kind of the interesting but yes less boring. Maybe less interesting I don't know depending which parts you like more there's some background to it and then we'll go through a demo towards the end feel free to maybe keep questions at the end. I don't know how normally works. Okay, so a design system so the problem we were trying to solve it was that we had. There were a lot of projects that we were obviously working across with government in particular that we're all kind of doing the same thing and specifically trying to come up with design patterns for new sites and that was a repeated pattern that we were seeing across all the projects working on and it was kind of things that are kind of common that we found these patterns across many projects are working on and there's always a cost involved in developing every single time from scratch from the base right so there are high development costs and you do have to build these things over and over again. And each of those things as you build them takes time as well so having to do the process coming through kind of a visual design with the design agency, building the visual theme itself then getting it validated and tested and building it out then also doing accessibility and compliance and other things takes time and cost. And especially when you were kind of building bespoke visual designs or themes in the earlier especially with govcms in the earlier versions. There was kind of a UI kit, which was very useful but with the D nine govcms D nine version D nine for govcms didn't come out with a visual theme at all so we were looking at you know what can we do to kind of potentially help with that so some of the work that we were doing. And also if we found there was a lack of consistent user experience, as I mentioned with the accessibility standards and other kind of UX standards and best practice. And with some of the solutions that were out there, there is a lack of flexibility and potential scalability for what there was. So, we kind of came up with a vision for a design system, and we call it a civic theme. And civic theme is an open source design system, which aims to provide a quick, easy and cost effective solution to building new websites. So out of the box civic theme will be able to deliver a high set of components, high quality set of components and features that can be used immediately. And web publishers and administrators so non coding people can create and manage page designs and layouts without encoding. And some of the things that we found or we kept hearing from a lot of government agencies, specifically that they needed to always engage or not always but quite often engage a design agency or a development partner to be able to make changes to their sites and whether that's a template change or a layout change or something else. And the flexibility within the design or the website itself was very limited and very difficult for them to manage ongoing. So, we decided to do the civic theme as an open source project, and the design system itself is developed is developed and has been developed by and maintained by salsa. We're about to go live with the first version which will then be fully open source right now there are elements of it that are open source a lot of things are available. We have a site at the moment, so we've been dot IO which makes the code base and the pigment design files available online as well so all that's kind of open source at the moment, and we're on a kind of a pre launch version. And these versions have been used by some projects and we're testing everything out. So, how do we go about designing this we did a kind of a four step approach to this, so we did some work to do some customer research, and also do some user experience testing and auditing of existing God see this websites. They kind of give us an idea of what what we were trying to look for and what patterns as I mentioned earlier that we were looking for as well and what would be common for the design system to be able to serve the client base or the audience. We also found it was quite important to kind of ground all the work we were doing and using the Australian government or the now decommissioned government Australian government design system. That's kind of a base that was already used and well built, well designed, thanks more to the old kind of help out with some of the UI kits stuff there in the earlier versions. And it was and it was quite a good base for us to kind of look at what is there now and what components can we uplift and build into this design system as a common for the common library. And so then we also used our UX expertise and kind of uplift the design patterns that were there that we could find. What we did is we did user lead user research based on project led development so we were able to create standard product development approach and then we coupled that with project led development so we have several kind of early stage or initial clients that worked with shaping civic theme. And the clients that we kind of worked with quite a while ago this would be almost two years ago now is CASA, so the Civil Aviation Safety Authority, and they did probably the earliest work with user research designs. And so they worked on these designs had them tested with their design agency at the time. And then we also use the feedback that we got from updating these designs and then fed them into what civic theme could potentially look like as we went forward as far as the design goes. To probably mention that the civic theme system is built on atomic design. So it's kind of a modular approach, but I'll kind of show you that once we get into the demo itself. The other one of the other clients was the Australian Energy Infrastructure Commissioner so the Ackley site. And this adopted the designs kind of in their early assessment and discovery phase which we then refined and then fed into the frequent designs that we end up using. And one of the other larger more robust sites that we were able to test it was where there was the Office of National Intelligence. We used user research designs that we worked with an agency so design agency to kind of validate some of these. And at the end these were actually contributed back as and built as a part of a theme for the site itself, which was quite an intensive process to do kind of iterations of testing and kind of implementing and then refining. And so those final refinements were kind of collated and put into civic theme MVP so that was quite a good process that kind of battle tested some of the things that we're trying to do. I'm kind of scheme kind of through these a lot of words on these but basically this was just what we ended up designing for the Figma design tools so in Figma we used Figma as the online tools that was available for everyone eventually to be able to use as open source. And within the kind of initial outputs we just thought that it was quite important to have kind of a set of outputs to drive the project as far as the design system goes so we built design templates. These are desktop and mobile ready and responsive and publicly available in Figma the app and we have the actual design systems as I mentioned before we've got the atomic design based system with structures components. And we also use storybook and I'm not sure how many people are familiar with storybook, but it was a this this way we can actually kind of show and get anyone to kind of use and play with the components and structures themselves without having to spin up a site. So storybook allows these components to be able to be viewed previewed and tested in kind of an online environment without having to run up a separate site so it's kind of a library of all the components available in the design system that you can use and see and actually play with and I can show you that later well. The usage and adoption guidelines for the open source project. We also put in a contribution give back guidelines again for open source getting started pack components in the library itself it's a CMS agnostic UI component library for the dreamers and theme is out there. And we also have the actual Drupal theme as well so the first iteration that we built was a Drupal nine theme. And it was obviously to meet as many of the Drupal govc mess compliance that we had clients that we had in all the projects for the the impending end of life for Drupal seven. So I'm going to jump over to the demo in a moment. And what we have is we're not sure how many people are familiar with Figma Figma is kind of an online tool that allows you to do designs but also allows you to build prototypes and it's quite a powerful system. And we use that as a the choice to be able to work collaboratively on this particular project so we have a version of Figma that you can view and use but you can also kind of comment and tag and their instructions on how to actually contribute back. So I am just going to quickly switch. So it will run in a web format as well I actually have the download of this so we have the design system. And here we have a few different pages the pages are down the side there, but in particular we have how to use this particular library, what's in this library, and how to kind of get oriented to, to how it works. Now this is an earlier version that's a new version coming out imminently which is the next week or so. And actually does change this around quite a lot so I'm not going to dwell too much on how this looks at the moment it as it is actually being changed considerably, especially how the color palette is set up. So it is quite different now we've done quite a lot of testing and both with clients and different projects and the way that it works the definitions and everything else has been kind of evolved quite a lot. And so this is just the instruction so I'll kind of skip over that there's also instructions on how to actually contribute. So, what I make this is open source and community friendly as possible so the instructions and drum roll. Design system. I can. Okay, so you can see there's quite a few screens so each of these kind of tabs I will zoom in the second contains different elements that we have in the atomic design system so something design system breaks down things in the atoms. We've got molecules and organisms so you kind of have a build up of individual atoms that go into building up the organisms and molecules themselves so got structure we've got spacing and grid so if you have the design system it already has all this built in and consider it in considered. So the components themselves kind of do comply with these kind of basic setup things in the actual designs as well so. In the newest version which was soon to come out you can actually change these colors. And this will actually flow through the design files themselves so you change this color and your palette and you can actually see the components and test out the components and see how that actually works so kind of flows down from the palette self here the primary So that way you can test and apply your own palette or a new palette so good for projects that may not even be designed yet. The designers can actually use this download the files. We actually did have client ask for the design files for their projects so they have an in house design team and they're actually using the design system and the figure files to actually build their own and design their own project. I know you said questions at the end but could I ask a quick question. I don't want to interrupt your flow too much. Just on that so that's really cool like you know I'm you know agency X and I've got my own color palette and I want to configure civic theme for my colors. If I was to do that and start building out my my version of the civic theme. Am I at that stage forking to figure and why I asked that is you know salsa develops civic theme as we go along and if I fall to how do I sort of get the new features that are downstream or later on. Is that actually not sure if I have to play my question well enough but no no it's a really good question I am going to get a confirmed answer I guess when we go live with the latest version. So at the moment I guess what you would do is take a copy of this and then retain what you have for that and it depends on how that design. If you need to use it again for another project or whether it's a one off like once you get a copy it's for that particular project. In the code base it's different in the code base the changes that go to the core figment designs filter downstream so they'll filter through from the designs. As things get accepted through the open source project. There are contributions made once they're made to the original core design files they go down to the code base. But from a from a design file point of view if you take a copy of that it's up to you whether you want to keep maintaining it or whether you need to. Or whether you to take another copy so it kind of depends on how the project gets used from a client point of view. Okay, thanks. I'm not sure the actual linkage right now as far as how you can get an update on it. I'm going to find out once the new structures built because I think some of those linkages may or may not be there. So in the typography you can adjust this. It gives you an example of different types of. Once that are there and how they look specifically. And I'm going to scheme over to this icons but more importantly what we do have is the components themselves so. What the buttons would look like in different states. And this is still the atomic design it's lots detail in here. And it goes over all the way across to headers and footers and menus. And bottom menu so you can see what the photo menu could look like. And these are just the molecules and organisms as we're moving through so you can see there's the typography is being added to the next part of the next part building up these functional components. More importantly probably most useful with these kind of cards components so we now have promo cards and kind of preset designed functional components that you can just turn on and off. Or even configure so you can pick a card. And then you can make it in or select it as a news card or a event card. Or a project card or a service card or a topic card. And then there's another set of navigation so if you depending on what you select. You can actually adjust the input within the cards themselves so in. Now that we've actually built the design system as well in the design system in Drupal you can pick hey I want to use a card. You then select the card and then it gives you the fields that you can put in there. And then it will actually display them so you can actually change these and use not all of these necessary so the way that this is also built is that there is a concept of kind of slots within the card itself. And within the card itself you can choose to turn on and turn off particular slots. What that does is give any developer or even the managing team that the web content team to actually change and adjust the actual content of the navigation tiles and components themselves without needing a developer. Just trying to find where it is here I think it's further down but. I'll explain that. Yeah I'll show you in a particular one so. So in the back end you can actually go in and change that you don't need to show that. All this or the state for instance and you can switch those around it gives you the flexibility to adjust and kind of customize some of these cards to suit your site. That way there's a bit of customization and flexibility within the cards without having to go to a developer and add new fields for instance. So what we also did is lots of lots of items there there's also alerts message global alerts navigation items. Now the other thing we also did is create is a kind of a flipped version so a dark version of dark variants. So if you needed to use. Any of the old colors or variants you can actually see what that would look like as well. Now these are all the molecules and components individually. What we also did is we put them together in kind of preconfigured states to show as an example what the pages would look like once they're actually in place. So again if you were to take this design file adjust the colors and palette to your own. This would actually flow through and change the buttons and the components here in the design system itself so in this kind of figure file environment. Which makes it much easier for you to actually test what you're looking at. You can also move these around these are actually components and they've been designed in the same same way or similar way to how the component system would actually work on a page. So here we've got a white header with a banner component and some cards here. There's an old version with the dark background and light colored cards. There's the same two variants with light and dark theme to show what they could look like. And we have lots of variations of page headlines mobile version and then the actual footer itself variations of the photo. And components on a page hero components nav card components. This one's also got some secretary buttons on there. And there's quite a few pages so nav cards upon nav cards listing pages listing components different types of listing components all the different variations. So this is all available in the actual design system itself but also in the code base so when you get civic theme build. You have all of this out of the box. So the intention here is that you can start up a site very quickly with minimal development and coding and start at a pretty high level to then just replace the images obviously add your content or migrate the content in. And the design and the visual theme and accessibility is all being covered. So part of the project that we had we actually do have accessibility compliance statements. So part of what we did is we looked at the individual components there and did a test on each of those which you can replicate and try yourself if you make a variation to it. But also says what it was but also there's a rationale against the Australian government design system about why we listed it. Why we think it's important and what the differences are potentially with each of the components. So all of those compliance statements and other details are actually on the civic theme.io site if you want to have a look at it. But the Figma design files are all here. There's quite a lot of componentry. I think there's about 60 different components and then there's variations that you can configure without coding in the actual site itself in the admin area. So then you can actually see these pages in context of the desktop. So home page. That's what a home page could look like. You could have a kind of a landing page there. So this has no content. The category of pages. What a content page would look like with a side nav and content. You can even sign up to newsletters. You can actually connect to whatever EDM or email direct marketing system you want as well. Social icons. Navigation. In mobile. So the same thing. You can see what it looks like in mobile. So all of these considerations are kind of pre-made within the design system at this stage. And then these all flow down to the code base. So when a client uses or adopts or uses civic theme itself, they can use this as a base. If they're happy with that, they can just keep using it as is. The open source nature means that any updates to the core will actually get flowed through. The way it's architected is that any changes that are made up based on a sub theme, I believe, and CSS changes. And then the base where it's updated, but your changes don't get overwritten. So it makes it a much smoother flow for updates. But then again, on top of that, if you really wanted to build or extend the components, you can do that as well. And if you wanted to fully customize or create your own, that's also possible as well. So the intention is that civic theme provides a really high base for you to either keep or build upon. I think that's pretty much it as far as the demo goes. Are there any questions that does anyone want to see anything specifically? Everyone's really happy. It's great. So I will switch back to presentation. Almost over. So the outcomes and bigger picture as I mentioned, we've got, we've produced the design system as figment designs. And now we have a chance for high quality, consistent, compliant designs. We have a lower delivery cost. The designs that we have much quicker as I mentioned is out of the box. All of those are available. Greater consistency and consolidation for user experience. Low as a gap in cost for adaptations. And there's also greater adoption for default design. And this is the key one is reduced maintenance burden. Because if it's an open source project, then there's a lot of the maintenance is managed by the house or the community. As far as it goes for different groups, content managers specifically can get developed a site that's quite sophisticated with pages without needing a developer to build or manage templates or even pages. They can literally build a page, configure it, move the components around on the page. Either make it a standard content page, make it a landing page, etc. And they can change things around and even with the way that this built that you can actually have content and you can have even the components within that page as well. So it doesn't just have to be content or a component based page. It can be a mix or a blend of whatever you need to have on there for site builders. It's easy and simple to assemble with that large library of components ready to go. And for designers, let's focus on customizations and more on user research and UX. So you can use the design system here to actually modify components to look at the IA specifically and not worry about actually trying to build the components themselves. From a design point of view, as far as movement goes, but even in rapid prototyping, we can actually build civic theme in about 20 minutes in a sandbox environment. So you can kind of put in your site details and it will spin up in 20 minutes. And then you have basically a rapid prototype. You can build out the IA, you can adjust the menus and do what you need to. You can create kind of variants and you can AB test them as part of the user research before the actual site gets finalized. And then for agencies, there's a large cost reduction and agencies in this case government agencies in particular that we've been working with quite a large reduction cost. You don't have to build the site from scratch every single time. This is a high base to build with. You don't necessarily have to do all your design and UX from a design agency. If you want to move things as is quite an easy way to update the design. So the branding them pretty quickly within the design system itself. As I mentioned before, so the design system is linked to the actual build itself changes and figure design system files flow downstream to civic being code base when they're made. And the current system is kind of pre release and it will be released very shortly. And we've already used the civic theme design system in six projects with several more and developed at the moment. And it's based on open source community so they can contribute back to either the code base or the design design file system design system files. Thank you. Any questions? I've got some questions again. Yes. Okay, if I just dive in. Absolutely. Okay. Cool. So question number one is, are you then using the Drupal implementation for your sort of prototyping? In terms of programming as in the design system itself. Yeah, we've actually built. Yeah, we built it in Drupal. So it is, although it's CMS agnostic at the moment, the first iteration is Drupal. And we've already built a GovCMS version. So it's kind of optimized for GovCMS. But we have got it's basically just Drupal. So it is agnostic from programs per se. Okay. And like I've noticed on some of the other Celsa presentations that you guys have been leaning towards like a single sort of mega content type. Is that still the approach or? It is. Well, it's debatable. We've had many discussions. And what we have done for Civic Theme at least in the design system itself, both in the design pigment designs and also in the build, is there is just one content type. However, you can actually modify the content type and what we're working on as part of the release is kind of a profile builder. So you can kind of pick and choose the components you want as a preset. So if you want it to be news, you can kind of preset elements. That optimize that for a news type or another type because it is quite flexible. You can kind of just switch on and off different components and elements in there. And okay, so then my next question is, are you using like a base framework like Bootstrap or is this something completely from scratch? That's an excellent question. I may have to lean on Alan to then help. I believe it's Bootstrap. From scratch. Okay. Very interesting. And do you have any comments about the sort of retirement of the Australian government design system? General comments. It's interesting. I mean, yeah, so that was interesting to see how, I guess, when it moved from DTA to extra and design system, they decided to retire that. And it's also interesting that govc mess decided that they didn't want to put anything in place because there was obviously maintenance around that. And they wanted to let people as in their customers and everyone else choose what they wanted to choose. So I guess what we were looking at as well, this at least helps with at least our clients and hopefully others to kind of maybe build upon what the DTA of the joint government design system was trying to do. Okay. And in terms of the civic theme because clients can change the colors, like the background of cards and the front colors. How do you enforce WCAG contrast compliance and things like that? So there's really a few different discussions on that, whether we can put a color checker in there, et cetera. But there's not really a force of compliance. So there is a degree of designers probably as far as the design system in the palette goes, you either bring a preset palette. But if you're designing from scratch, including the palette, then I guess there would be some testing that you would need to do to ensure that that actually works. The normal kind of testing once you have the designs, you do your normal checks for accessibility color contrast, et cetera. So there are no preset color sets per se. But yeah, it would be the normal kind of design process to ensure that that works. Okay. And are you following like the primary alt, dark alt approach, or is it not that rigid? It was initially, I think in the demo that I did show, it kind of displayed that. And the new version is very, very different. We kind of just weren't completely different from the primary, secondary, tertiary. Now the mapping to the colors is very, very different. It took weeks of testing playing. Yeah, imagine. Because we even went from this and did variations of this and just test it out, but it's actually completely different. So what this originally did was we, you had a primary palette. So this kind of primary, secondary and accent color and it would apply it. But what it would do also is kind of apply variations, automatically apply variations from the primary color and add neutrals to components. It did make it very tricky to kind of nail down what the colors were for particular components. So although you've got these primary component colors over there in the palette, when you look at the components, where am I going to look at to show the example. The banner is what I'm trying to find. Actually, the banner was a different color. It's not on there now. Oh yeah, these dark ground. This is it here. So the banner, for instance, to make it easier to read was a variation, a darker variation of the original color. But then people are going, hey, but that's not my color. You know, it's not my palette color or my brand color. It's off brand. So just that kind of experimentation of how we do that. So the color mapping is completely different now, but you can override it. So this is kind of a starting point. So as far as the components go, you can override components individually and kind of map them to work better with your palette. Thank you. It's really exciting. Thank you. I can imagine there's a lot of work that's gone into this. Yes, great to see. Okay, maybe I missed it, but did you, did you announce the release date tentative? I haven't mentioned a date. Imminently was, I think it's next week. What is the date actually? Because I've tried not to look at the date. Yeah, next week 19th is what I've heard. Yeah. So rumors are that the official release date is the 19th of September for the new version. And that's the remapping of the design system, but also we should be releasing the code base update as well. This version of civic thing as well. So how much time do you think this approach is saving you guys when you're doing a new build? Like in terms of percentage? Oh, as I mentioned, we can spin up a civic theme site in 20 minutes. And that's in hosting sandbox environment, fully stood up. So you can use that as a base. So it takes 20 minutes to spin that up. And I can even show you what that could look like. So here's the civic theme. I have kind of a marketing site as a very early stage. But for instance, the default. So in the process, we have another product called launch pad. And that allows you to kind of set one up. But once you follow launch pad, it spits this out. This is basically the site that you get. This is the standard out of the box site from here. You can modify obviously the palette, the background and other things and start adding your content. So there's no build per se. So you kind of save as much as it takes you to build. But in particular, what takes time is these kind of components where you have you've got listing or cards and other things. So you don't have to build those. They're all pre-built. Including the menus. Yeah. Julia worked on a GovCMS project with civic theme. I can just say that the initial team implementation becomes super, super, super easy. I don't have a percentage. But what we did, for example, there is a project that is about to go live tomorrow actually. And it's a GovCMS project with civic team, civic team team. So we just went ahead and install civic team. Of course, then we created a sub team, which was the project team. And that's where we started applying changes. The client was pretty much happy with the default core civic team stuff. Only some of the things needed to be changed. So that was super, super quick. So I'm trying to understand the connection between the Figma file and this. Do you make the card, for example, the card changes in Figma and that then flows through into the install? So there are two components to this project, this work thing. There's a Figma design. So the Figma designs feed into what the actual code base will end up using. But to manage the design part of it, we test and kind of implement it in the design system, the files, the Figma files, and they flow through. So if people have improvements to make or we find improvements from a project from the implementation, we add it to the design system in Figma. And then that flows down to the core. Right. Okay. So the Figma design files are the kind of source of truth for the design look and feel. Yeah. I want to play with it. Can. Let's go to civic theme.io. I will do that. And you can also, I think the civic team, the GovCMS team is also open source already. So you can just go and download that and play with it if you want to. Can I have a question? Yes, sure. I come from like Bootstrap. So I worked on a site where I was, the client was really concerned with keeping the footprint of the CSS and JavaScript pretty small. Right. So in Bootstrap, there's a whole bunch of like components that you can use, but if you don't use it, you can just not load the CSS for that. So can you do the same thing instead of being like, if you don't use some components, can you just not load the CSS for that? Do you want to overgo this one? Yeah. Yeah. So I haven't seen the civic theme code for a while, a couple months, but last time, I think everything split into SAS files, but there is a single web pack, which is going to put all the components together. I ended up with one CSS file at the end of it. So I think it would package all the components together. I guess if you want to use, the other thing is it's got an interesting base theme sub theme implementation whereby you've got your base theme and you extend it, but then you can create your own components. So part of the build step, it's going to get all the twig and CSS and JavaScript from the base theme and then overlay any of your customizations and then compress it afterwards. So yeah, I think chances are at this stage, it probably has, if you only use a few components, you'll probably get the whole set. But that's something that we're always looking to. Okay, cool. Thank you. And what are the lighthouse reports like on these sites that you're building? That is an excellent question. I would have to look back and I guess there'd be another, there'd be a later or a newer set of reports because the latest design file design design files. That's a good point. I need to check what that is. But it is, we try meet double a accessibility. I'm not sure if anyone else is going to answer that better, but yeah, they're, they're, they're made to be compliant with double a accessibility. So we will test them and make sure that they comply to that. Lovely. Thank you. I'll stop asking questions. That's good. I'm actually trying to think of where it would be on this site. I know there's compliance in here. Compliance. I tell you, I'm making everybody dizzy by just. Yeah, trying to find something on the page. Okay, I'm going to leave that page for now. But yeah, there's a compliance statement on here as well. But I don't know if you're not sure if you noticed in the background I was playing with the storybook so you can make the adjustments on the flyer there. Yeah. Specifically because you wanted to play with it. Did you look at that storybook thing that like it was doing. Yeah, yeah. No, it looks good. It's great guys. Thank you. It's been blood and tears and sweat. Huge. Alrighty, any other questions from anybody else. Thanks a lot. Okay, then I'll stop recording now.