 Hi everybody and welcome to our session on re-platforming Victoria's Department of Health on the single digital presence So today we're going to cover The things that you're seeing on your screen there So we're going to look at some of our budget requirements the process Solutions and also the give-backs to the STP platform and also some key project takeaways First of all a little bit about your presenters today. So first of all we have Suchi Hi, my name is Suchi Gark. I'm a technical manager at Salsa digital and at the risk of exposing my village I've been working with Drupal. I've been working in open source technologies for the past 20 years And I have been working with Drupal since 2006 So that's 12 plus years experience with Drupal. I have been a developer at here a solutions architect mentor trainer pretty much everything then it comes to Drupal and And in this particular project my role was of a technical lead Thanks So my name is Philippa Martin. I'm a Salsa content strategist and also a project manager I've actually got 25 years plus experience also exposing my age in writing and editing fields and With definite online specialization even since the very early days I think I got my first role as official online content writer in 1999 I'm really excited to manage that In another life. I'm also a published author with a PhD in creative writing For this project I wasn't working as a content specialist. I was actually working as a project manager So first of all let's have a little bit of a look at the project context So the Department of Health is a very large Victorian government agency As part of their consolidation of lots of departmental websites They're chosen to move health.vic.gov.au to Victoria single digital presence For those of you who don't know I know some of you in the room know what SDP is because there are some people from the Victorian government here SDP is a whole of government digital platform that consists of three elements It has the first one is called Bay and Bay is the platform itself Then we have Tide which is a headless Drupal distribution and finally we have Ripple Which is a front-end library of components which is built in view and next In terms of some of the key challenges for this project the website was on site call It had a high cost of ownership. It was actually a very large site It had been built up over a number of years like a lot of government sites of course more content coming in And there was actually 80,000 content objects in total and that covers pages, documents and other components There's also a lot of features and functionalities and obviously during a migration project What often happened is both content and features are actually looked at in terms of what do we really need and what Can we actually get rid of? The team ourselves We're back We're quite a large team. So from the Victorian Department of Health, we had eight members in total project manager, product owner, a delivery lead, a designer, a developer And we also had three content creators on the team as well In terms of the CELSA team, we had the engagement manager, which was myself We had a business analyst, a solution architect, the technical lead, Sitchie A migration engineer, a back-end dev and also two front-end devs as well as an accessibility consultant Who is involved throughout the process and of course QA I'll pass to Sitchie for some process All right So we basically went through a step-by-step process We went through a series of discovery sessions And Sure, is this better? Okay, so we went through a series of discovery sessions and out of those discovery sessions They were we were able to identify the required features for the new site The next step was okay. This is a feature that we want But we had to map it both to the front end which was a ripple and to the back end Which is which is tied in single digital presence the sdp After that we were looking at the gas because there were so many features Which one there was no one-to-one mapping and we started discussing those features Some of them we sort of changed a bit to make sure that they map with the existing features But there were some which were absolutely needed and there was no feature within sdp Which which could map so we went ahead and create some created some custom features Then we set up and built a site including the custom features We did them so we did some migration about 17,000 pages were migrated 17,000 foot pages were identified that needed to come across and they were migrated across Of course, we had to have to migrate media elements. So around about 30,000 media elements had to be migrated We also went ahead and set up some pages manually So for example the home pages some of the landing pages etc We had to tweak them a bit and set them up manually And then we launched very easy, right? Okay So now a little bit more about the process So like all good projects we started off with some discovery workshops I probably need to make move this microphone up as I'm just a little bit taller and switching Um, so we started off with some discovery workshops and we're looking at documenting those as a feature matrix in google sheets so I think you can just move here and all right. Let's do that So this is this is actually the feature matrix that we created in google sheets As you can see we've got a legend here that looks at every single element Looks at it's got color coding for mvp nice to have phase two aspirational etc And it breaks down each element. So for example, the original header had a site switcher home link top navigation An extra net login etc. We went through every single sort of feature and functionality From everything from footer to header from top to bottom literally And on all the different pages as well and notated those so just to give you an idea though I'm just going to scroll through We don't make you see sick as I'm scrolling through you'll get an idea of how many different features there were Because we run out of letters of the alphabet And we kept going started getting bit creative with our symbols special characters. Yeah, special characters Okay So this is just a visual representation of that from there We then moved to Mapping ripple. So ripple, of course, if you remember was the front end component library So we had to look at those different features and how they would map into ripple to do that. We used figma So this is an example of A bit of a zoom out of the figma file As you can see we've actually also kept our letter a number of references. So you've got your a1 a2 etc We've used color coding again In this case the color coding is representing whether it needed to be a custom feature or whether there was something already existing In sdp that we could use To give you an idea of what's inside each of those boxes because obviously it's hard to see Uh, this is a simple example of video. So on the old website, that's what it was called the video On the health website the video feature and on sdp that mapped nicely to the embedded video feature All right Back to me So Yes, we did a lot of discovery sessions as an output of all the discovery sessions We basically got a total of over 110 features Which were identified as mvp mvp manoon who have a product but 110 features were mvp So those features were imported into jira as Ticket placeholders now remember for each of those features We actually had to create three tickets for feature because we had to have a backing ticket We had to have a front end slash ripple ticket and we had to have a migration ticket So that's exactly what we did. So three types of tickets And then back in and migration That means 600 plus jira tickets story starts Bugs, etc, etc. We also made sure that We we did a lot. We created a lot of manual test cases as well and all of them also create were also created in jira That means 1000 plus manual test cases So standard agent agent process was followed and With each sprint progressively we would look at the most important tickets slash features and we'll put them into the sprint And that's the whole process that was followed essentially That's again you So I just want to talk a little bit about The accessibility we did so I did mention that we had an accessibility consultant on the project from the start So we bought that person in really really early So for example, they were part of the design ticket So from the very start as the designer was working Tickets would be passed on to our accessibility consultant to make sure that they were Okay in terms of accessibility for color contrast, etc Then they're also part of all the front end jira tickets. So every front end jira ticket included an accessibility acceptance criteria So here's an example And you can see, you know, given I'm a website visitor when I visit any page on the website Then the footer is wcag 2.1 a compliant by I'd actually step out what those requirements meant From an accessibility point of view So this embedding accessibility early in really helped with ensuring that the website the final website was accessible So now it's on to some of our solutions So first off we had talking about some of the custom features Obviously, you know, like all good community contributors, we try and avoid custom where we can But there are times when we can't avoid custom features And so here's a list of some of our custom features that we implemented for this website Looking first at the home page We included health alerts and I'm going to show you these in a moment Some customized news cards that the client wanted and also we added in some social media cards Including pulling in the social media feed for their home page So I Just go to then If we look at the home page here, so these are the health alerts All right If we go to the home page here, these are the health alerts As you can see you can click on this to you're showing the latest one the most recent one But if you click on this it expands to show back a little bit further And you also have the ability to browse all the health alerts Scrolling down to the news pages So these were just slightly different to the normal sdp out of the box News that they wanted some customizations on and then we've also got the social media feed as well here coming in from Facebook, twitter, etc So those are the home page customizations If we look now at sidebar links, I'll hand over to sushi So yes, we keep on saying that we try to minimize customization But we did a lot of customization the next one we we wanted to talk about was the sidebar links so sdp by default does allow us to List out a component on the right hand side of the page where we can have links But there was a slight There was there was slight mismatch with the requirements So what we did was we went ahead and created a new company which was called sidebar links And as you can see in the in the screenshot, they are the right outside the red outline structure. That's what it has The way it was different with the standard ones was two things number one We could embed We can we could embed multiple sidebar links on the right hand side of a single page And we could change the background colors There were three specific colors that that a user could select So they could either have a gray background background. They could either have the A white background and the third option was the color palette of the of the site they are on So that was one customization and the second one was that with each in every link We could actually add a description as well because what I think we were offered was just links But what was needed was that with each link there were some links where we needed to add in Um descriptions so as you can see in the first and the third link there There are some descriptions that have been added Another quite major customer not I would not say major But quite useful customization was by before if you go to a city site The top navigation menu And the footer menu so the menu that we hit see here the topics about us, etc, etc They are actually set up set off of the same menu That means the top one is replicated in the footer But considering the fact that health.week site is so huge They wanted to offer the users a different way of navigating So they wanted these links to be separated out from the top Navigation so what we did was we basically went ahead and created a new menu item And a new menu and that menu was linked to the front end component here So that they could have different links showing up here as compared to showing up in the top navigation The next custom feature that we'll look at is content collections So these are basically List pages so you'd normally use views in Drupal However, because single digital presence is headless and uses elastic searched index data We needed to look at a different solution From discussions. We also knew that stp had some bigger plans for content collections Where they wanted to let content editors build these pages Which is again views are done by side administrators So to give you some of the examples we had quite a lot of content collections We did some A to Z of infectious diseases for example annual reports conviction register video audio We had lists of data pages lists of fact sheets List pages for media releases and news and in fact because we were developing the content collection as a listing page from scratch We ended up using that for the whole site search as well So i'm going to show you some of these pages now So this first one's the A to Z of infectious diseases As you can see there's also some front end theming in terms of adding in this literal abc And then we have the results are automatically displayed for all of the results They can be sorted as for items per page and in some of the other ones For example the videos you also have the ability to search by keyword We have other drop downs available as well. For example file type is available in some of them Again, this is another example of some of the front end theming with our little video icon And then the main search which is this one so that by default everything comes up. So well, that's a very even number there Sure, that'll be different tomorrow Just for us exactly 10 000 So yeah, you can enter by keyword or you can select a topic and then browse by topic Again with the ability to sort by relevance and also change the items per page And so in this way our content collections were actually built into the website from very tailored pages listing pages to the whole site search Back to the presentation let's be another thing Another custom feature was that what has that we wanted what was that within the same website? They also wanted a way to slightly change the color palette So and that could be used for campaigns, etc So I have put in a screenshot of three pages and all three have actually different subs So the sdp allows us to tag content with something called subsites But as of now sdp does not have a ability to actually color code them differently But what we did was in health topic that with each subsite that was created We could actually add a different color palette So if you look at the these three websites the health service partnership That is the core health topic palette that that has been added then the medication for patients There was a there is a subsite called go with 19 and that has a slightly different Different part and you can see that The h1 And the styling of h1 has changed and the styling of the right hand sidebar The right hand side menu item has changed and now recently they have added another color palette Another subsite called jobs in victoria And that has that orange palette. Unfortunately that orange really clashes with pink, but yeah, that's what they wanted So this is again Customization we went ahead and they did for them. What this have them is with is that They did not have to do custom development in case they needed a campaign They did not have to really go and create another site or create, you know, create another site and develop that From from scratch they could use the existing website and they were easily able to maintain campaigns Now I'll also talk about two pretty big custom features all of the ones that we have talked about as of now are very Smallish they had huge impact. Yes, but dev wise are Effort wise they would not that huge but I'll be talking about two one is the symmetry search Another one is water fluoridization And I'll just do a quick demo as well First one all right, so Tell that we wanted as the name suggests search symmetry. Yes But the content for the symmetry does not reside in Drupal They all this content actually resides on the data and what we had to do was that we had to create A front-end component which could talk to the data dot week get that content and show it We could also search so I can do something like let me just put something for something some server So we could do something like this and say radius of 10 kilometers it gave me a Perch reverse as a map we could also see a listing at the bottom So these are all the symmetries around and I could actually click And go to an individual symmetry page Now none of this content is actually inside it in Drupal. All of this is coming from the data week on the slide So in order to achieve that what we did was we create a created a front-end component In view js that's not as a player Which did all all the calling all the all the filtering searching etc etc And that view js was actually embedded within Drupal. So for that we created a very simple custom paragraph for Custom yeah uninspiringly the name of the paragraph is custom component We just went and created that and what it did what it just asked for one key And that he was basically something that would define in the front end So that would tell you like, okay I have to generate the custom component and use this key to figure out which custom component need to be added here So we did that and this is a pretty pretty powerful and very I used one in the in the similar way There is another one is my so that this data is called water fluidization Data, I think I'm correct, but this data is also not reciting in um Drupal it's also coming from apis and it has a similar kind of a thing So is that it is the is the water fluidization Fluoridated or not fluoridated that's what it shows and we can also insert and do several things with it Okay, going back to the presentation. I don't want to close it yeah Sorry, this is not my mouse. This was her windows machine I convinced her to use my windows instead of her mac Um, so yeah those ones we were just talking about was the cemetery search and the water fluoridization Uh, we also added quite a few new custom content types Uh, so some of them are here. So conviction records data page the health alert advisory Hospital circular and a record page. Did you want to say anything more about those? No, they're pretty straightforward. Yes Okay, and I will hand it over to you this one So as we had been saying that we are good citizens We try to Not we try to we were trying to restrict ourselves to the into the stp boundaries as much as possible But client requirements can't do much So we did create a lot of custom components as we just saw But the way the process was done that the stp team who's actually sitting here They were they were consulted right from the very beginning so Uh, we had involved them from the initial phases of the project and we would have regular meetings with them We would discuss the customizations. This meant that either the customizations Either it was decided that the customizations would be adopted slash adapted and would be added to sdps screen later or the we coded things in a way And anthony you can You can say no whenever you want to but that's what we try to do And we also coded things in a way that the upgrade path was not impacted a lot. In fact Sorry, how do I get this? Yeah So in fact that ever since the site was launched, we've already upgraded ripple. We have already upgraded Tied so we tried to manage things in a way that it was not impacted There was a minimal impact. All right. So next now start About migrations. So the next three slides actually can be an individual ripple sort presentation in itself They are complex but still I'll rush through them. Happy for you to come to me later on. We can discuss them out but That's what we have to do So before we start explaining the migration Explaining the process We need to talk about two main tools that we used in the whole migration the first one quant cdn or quant as we call it it's an All-in-one static web and jam and jam stack solution to generate a and serve a static representation of your existing website It is actually a bit more but for the context of this project We just used it to create a static representation of the legacy health.vic site The other tool that we should talk about is Merlin. So Merlin is an open source command line tool If I have to talk about it like short and sweet it crawls and scripts So it is basically a content migration helper tool that can be used to migrate content from any source content management system Into any target. So basically what Merlin does is it's crawls and scripts your website And emits the content of the website into nice json files and those json files can be easily then added used and absorbed by Drupal and my for migrations Now The next slide. Please don't be afraid I'll be talking about the steps and then I'll be showing you a diagram. Okay So as I said, yes migrations are a huge part of the project and we migrated a lot of pages It was not the number of the pages that was a problem 17 000 pages. Yeah, it's a bit huge, but not really We we have been part of projects where we migrate millions of pages The problem was the source of the migrations, which was the legacy cms So it did not emit content in a structured manner in a nice manner And that was a big problem. So what did we do? We extracted a list of URLs For the content that needed to be migrated. That's number one then We used want to take that list of URL and create a static static Copy of the website because we did not want our scraping tool to be hitting the production website We wanted the scraping tool to be hitting the static website instead We analyzed And collected and organized the source content into format formatted json files using Merlin This is just one line, but it actually involves a lot more Using Merlin what we did was we mapped each and every field that we needed to extract So h2 was for example h1 needs to be migrated as a title H2 needs to be migrated as summary etc etc etc And h1 and h2 are very very basic things But the moment we start going into accordions a contact us component at this component that component This thing started growing mammothly So we created config files for those mappings and then we ran it against Merlin CLI tool Which gave us pretty nice structure json which Drupal likes Then we created migrate API configs with those json files as source and migrated them into Drupal Now during this whole process because this was a huge website and because the content was that huge We made sure that we implemented a layer of validation throughout the process This is part one of the of the The diagram and let me just quickly walk through and we don't have a lot of time So I'll be very quick So I've just we just mentioned the steps export the URLs Create and then the URLs were also not very well Exported we created a drush script Which did a refinement of the other input csv? It gives us three outputs refine csv Merlin URL list and quant URL list Quant URL list went into quant we created a static site Merlin URL list we did the Merlin mapping we did the Merlin scraping It gave gave us the json's for a force redirects and duplicate content We also created a refined csv which was used in the next step For validation because refined csv made meant that we had a list of URLs that need to be Need to be migrated So what we we again created another drush script for validation and the output of that that drush script was a very Very very important csv that csv had all the URLs With their status was it migrated? Or or not was it a duplicate Was the redirect created because in within this process we also Also baked in the redirect process If it was migrated, what is the target one? What is the source URL? What is the target URL and that csv could be given to the client They had an excel file and then it made the qa for them very very easy because source Target map it it didn't work create a gta ticket if it worked great So this was the whole process that we followed And filibar So as we mentioned We were working closely with stp on those custom features and we were able to give a lot of them back into the core um So for example our give backs included the custom footer component that suit you mentioned where people are able to actually Customize exactly what how they want the footer to appear The content collections were actually taken over what we had done were taken over by stp Who have been progressing them further to make them into those? content editor experience We had also some contact dust enhancements, which were contributed back the side bar links that sushi talked about were contributed back Um, and also that embed our innovatively named custom component Was also delivered back. So that was also used for example for those social media cards We just did that in the back and the embed custom component And also the news content type was also contributed back These give backs were sponsored by celsa. So after the project finished we then worked on Well after the site went live And so the main part of the project was finished. We did hand over then to support But the give backs were sponsored by celsa. And so we continued to get those and distribute them back to stp Working them with the stp q 18 Key project takeaways very quickly in large projects It's can be difficult to allow enough time upfront to write and review and estimate all tickets before the build starts Building accessibility into the acceptance criteria earlier worked really well As we've said we had it from the design and also all the front end tickets Rather than doing as an afterthought once the website was built and then having to change things and fix things A strong product owner on the client side is essential I think everyone or the devs in this room and project managers will be going. Yes We also had the benefit of a dedicated and highly professional project manager So he was able to work Extensively on the project and really dedicate a lot of his time to managing the health team and working with us as well And that's it content migrations What sort of percentage of the whole project was that and was that a new methodology that you introduced? So the methodology that we introduced was absolutely new This was the first time we introduced this methodology and that has now been Actually, we have actually had four projects after this one where we had followed the same or similar slide with slide tweaks When you talk about the percentage So the initial So the ledge the the old website it was It was it had grown organically So if you look at so what I would the head thought we came gave us was a huge csv And with like a number of columns and then they said we have some business logic apply that business logic and then migrate That is why the first step was that we had a drug script which was visuals which did the requirement and those business logic was actually applied In to get the output. So when it comes to percentage, I would not be able to answer that because there was so much content there It was somewhere it was maybe published But it was duplicated etc etc. So it's very difficult to give me to give the percentage So part of that process was there a content lift process going on? And how did you handle that or was it just a one-for-one straight migration of there was no content left in what? There was a one-to-one migration And as all the content was extracted from the old site using the merlin scraping So we did not use the content in the in the old database and tried to go left. No Two quick questions. What search engine did you use? Elastic search elastic search and with the content collections in the views where people could see Are they used? No No And that is the best part about content collections actually so that gives the the ability to create pages like this Content creators can create both pages. It doesn't have to be a side build of purpose So we are not using views the content in the on the back end So back end in front end are two different things in sdp because it's a decouple thing in the back end We have a component called content content collections and within that we can easily add filters So filter can be a topic or this or that you know content type etc etc So as a content creator you can say for example, I need to create a news listing page So you can actually go and say let me create a content collection The filter will be that the type should be the content type should be news And I need to show that as a list not as a tile thing as an example Then I will expose the date as a filter So you put as a content creator you can do this and it automatically map up into a content collection page on the report thing So that's how strong it is I'll just add to that to clarify that We had done step one of that process Yes, but step two is done by the sdp team to take it to that level So we had done it using schemas that were put straight into the back end And then the sdp team took that and created the user interface for the content editors to make it the final process Whoa sdp team. Thank you You have a question here. Yes Yeah, we've got many pages. What did you do with sort of internal and external broken links? Yeah, so the question is with that many pages. How did we manage the internal external links? A few things actually so the migration Conflicts that we created and I'm going into a bit of a technical thing here For external links, we didn't have to do a do a lot, right? But whenever we are migrating so each content type on each source content type Let's put it like that We have two migrators to it the first one would be the base migrator And then we would have an annotate migrator The way it worked was first all the base migrators ran That means we already have stubs, etc Then the annotate will run it will look at the links try to map Okay, this is because we were also whenever we were migrating we were also saving in the Drupal three things the source URL the The source URL the source type etc etc three things so it will look at okay. This is the alias This is the old alias Let me look at the Migrated content and see what masks it to what is the new alias for it and that annotate actually changed that And this was done for media as well. So yes, it was Complex, but that's how we managed it. We also migrate. We also created a huge list of redirects So these were the two ways we managed