 You are everyone and good morning Welcome to our presentation today. The boss in the function Pregnant strategy for its successful website review I'm just pulling into the next thing you do a little insurer. So I'm Alex I mean what they're for about TV isn't it? Maybe they'll probably work for Pregnant for about one bit of those I How I thought it was I was a graduate From the University of Canada over the Bachelor of Software Engineering. That's where I really picked up a passion for a design or another and I've really kicked off over there, and that's what I'm going through people science and since we're based in camera A lot of those being a student science This is my second people's house last one being in Brisbane. It was really exciting and And now they're standing here in front of you and you still it's Thanks, I'm Emily mills of a magic consultant at private partners. I've been there for about two years At pregnant. I'm currently leading an agile team of developers Designers and content designers. What about? projects Also, I've been a programmer. I've lived user research content design My content strategy for a number of other Australian government services But before that I actually have a background in communications and marketing So A little bit about primer as I said, we're based in Canberra. We mostly work with Australian government clients. We do Service design solution architecture with development content design and we have three practices within our team So we have our content and experience design practice switch. I mean, we've got our digital practice Which bells in and we've also got a research and design practice. So that's scope of You know things that we can do is is quite large which is fantastic multiple projects All right, so I was going to give you a quick taste of what's become this presentation so I'm not going to give you the tools to drive and hit your own Sorry drive your own passing function or patient read with a little bit of time We'll give you take you through some of our experiences what challenges we came through how to advocate the change We'll give you tips to set up your team for success and how to stay on track. So pretty much everything And if you're lucky, you've got some tips in the end of your next project. So let's just Thanks Al so We'll be looking at a case study today. Um, so as I mentioned by our large arts in this project Essentially how we persuaded a longer triple client that tech debt is worth fixing And how great sales design and product management really enables technical excellence So we'll be talking about a case study, but really any of the strategies that we're talking about today You can implement these in your own projects or even day-to-day when working with his stakeholders So a bit of background in 2020 We were engaged by the Australian Cyber Security Centre to improve their website cyber.cofter.au If you might be familiar with this, I know a couple of pros of yesterday's work about essential aid and ISM Those things live on this website It's essentially the Australian government's one-stop shop for Australians businesses and government to really improve their cyber security and help them stay secure online So within our team, we've got some awesome experts from across disciplines So devs and designers and we all really work collaboratively to enhance the site Once we were on board with the project One of the main things that is really important to us at Proudmar is user-centered and evidence-based design So a key part of this work was testing the site with users Really to identify any of those pain points and areas for improvement So this testing led to us to create a new information architecture for the website as well as redesigning all of the site's pages to make them more contemporary and user-usable So after deciding to implement these things we're at a point where we had helped the front-end users But there were pain points from other users to consider as well and it was us and our stakeholders And yes devs are users too We decided that in implementing these new page designs in LA It would be actually a really good opportunity to rebuild the whole site from scratch Totally from the ground up start from you. So Why did we decide to rebuild instead of retrofitting it? Al will share some insights as to how we kind of came to that decision All right, so the question is why rebuild instead of retrofitting? Well before we can get into that I'll take you back in the past and I'll tell you some of our pain points And that's a bunch of themselves share from the top So first up the previous workflow of getting pieces from dev to production was a pretty small approval task This was pretty manual it could take from 30 to 50 minutes And when we're talking about a gullible client potential emergency updates and You don't really want to try them out. So you don't have to fix it then for like 30 minutes Next up we have messy repository. So we have heaps of features coming in from that thing right? And a lot of the time there's being new ones coming in and just take priority And they'll be smaller features in the bus So then our back end just gets kind of built up in all these spell branches and It gets quite tricky that way Next up, which is a personal pain point for me through the devs is disabled content And we disabled some gushy and that's just due to our own some other issues But this is really painful to develop this So when you're building like a block for example, um, usually you just be able to Export that and push that into your staging environment And it's easy to do that But we're completely disabled. We'd have to do that once twice three times maybe that's just Having so much extra work Next up we have manually compiled on CSS and JS bars. This isn't as bad But it still has additional steps to know This can add conflicts to Pushes it just adds a bunch of risk. Maybe resolving issues or even pushing the compile files up in the first place So that's just one of the best. So this is just the back end when you're already here like a pretty good picture. What's going on? So time for the client. There was like 40 content types, you know blocks, views, paragraphs and axolomies everywhere And that's like more than enough for any any application ever shortly but um Just to make it really hard to know what was being used and what wasn't so That's not really good for the end users with potential inconsistencies on the front end or For our content editors who have to navigate those 40 content types Maybe our designers who have to go through the thousands of components we have on our site Or our devs who have to fix everything or figure out what they are So why just fix one of these issues by the time we find the issue Resolve it, deploy it, and then find the next issue Probably like start up on your side by now So back to my question. Why are we building instead of retrofitting? So retrofitting would be really tricky Pulling all those content types and blocks and views and stuff all down to a maintainable now While maintaining the core design and editor experience and functionality inside would be really tricky But we could do it. It only just really fixes the front end And you also know now About the previous issues that that's not really going to help We still have all the issues in the back end the same environment the same code that's the same tools and a lot of the same other issues Um, if we want to rebuild you just imagine what you could do pretty much anything For example content editors would have less convoluted creation Uh easy navigate front ends designers have consistency across the side a maintainable amount of components And it has to really help me tools easy workflows quicker to deploy and develop things I could go on about this for a long time And I should probably pass on that now so she can tell you about advocating the change Thanks Al. Um, so After considering all of these things, um, the next step was really to advocate the change with our stakeholders So our role was to help them understand the issues that were being experienced across the site But also all of the great opportunities that would then come from implementing this idea. So To do this we needed to come to them prepared and use what I've just decided to call the three P's So the first step was understanding the problem state And gathering any evidence that we could so this is about identifying what we were trying to solve Who would affect it and what the impacts were So I planted a seed with our client Playing any issues with them and letting them know that there was opportunity for improvement We then gathered previous user research and insight performance analytics Our team documented examples of the issues we experienced and the impacts. So a lot of the things that I spoke to And then we also reviewed the site against best practice standards and guidelines The second step was then identifying possible solutions. So I input from the whole team So there's designs as well as program management just to ensure that all perspectives were considered And find out what was actually feasible when doing this For each option I outlined the key tasks to implement any risks mitigations Indicative timeline and resources that might take so how long would it actually take to do this? Who needed to be involved and if there's going to be any impact on log work items And I think something that I've learned along the way is the value of preparing solutions to take to the stakeholders Instead of just coming to them with a problem So, you know really being able to print their questions and how all their basis code goes A really long way to helping us and then get buy-in from not only their team But perhaps when they're you know raising this with the executive that really strong evidence base The final step or the third P is being proactive and sharing this with the stakeholders So we had documented the problem state, the evidence, the research and our recommendations We then shared this with our client for their consideration and then organized the time to chat about it in person And catch up once they've had some time to actually digest it and go through it It was in this catch up in person that went by their feedback and any other considerations that we should be aware of Doing it this way and kind of bringing it along the journey really helps with their buy-in And it also makes them feel like they're adding value and taking ownership of that as well So, once we had the say all the buy-in and we were ready to kick off It was time to set the team up for success So this was a 12 week project and we had a lot to do in not much time So there was some key things to establish before we actually picked up the tools both within our team and with our stakeholders So what were we doing, when were we doing it, what's in scope and what's out of scope So we worked in an agile approach in sprints and we used our agile project management tools like JIRA and Confluence But there are a couple of key things that helped us along Chothall specifically about The first one is our project plan So as a team we worked with our stakeholders to develop a really comprehensive plan Which then serves as our source of truth throughout the whole project This included everyone's roles and responsibilities It also included project milestones, the schedule of work, items in scope What we were actually on the book to deliver So this was listing out exactly every view, block, web form that would be built in Just so everyone knew exactly what was happening This may also help with setting expectations So everyone could really clearly understand what would be delivered and when How will work as a team and also what each activity looks like So for example your stakeholder might not have ever done a user acceptance testing before Or content migration So having something like this can really help clarify any misconceptions And help them understand the purpose and outcomes of each activity The other thing that we found really important and helpful was flagging risks early As well as identifying their medications So throughout the project I'm sure we are all aware that things can probably go wrong Or some things might happen unexpectedly So we worked really hard to make sure that our team felt empowered to flag risks early How did we do this? Everyone in the team was seen as a trusted expert And they were given aspects of certain, given ownership of certain aspects of the project So for example, when our team member was rich, she was in charge of content migration Al, he was our web form guy So they had the freedom to go directly to the client And how communication were they needed Without necessarily having to go through the project lead every time And I think this constant communication As well as the expectation setting and the project plan It really reassured our stakeholders that we knew what we were doing That if something went wrong, we were prepared to deal with it So those are some of the methods for setting up the project on a high level And working with the stakeholders But Al is going to get into the needy greedy of what tools we actually use to do this Alright, so I'm just going to give you an idea of the tools you use to be awesome functional So this was like a pretty quick project So we wanted to speed and improve developer experience We wanted to use tools that we, as developers, wanted to use The things we felt comfortable using and things we knew would help us get it out quick So previously we were working on Gaussian SS And we knew some limitations around deployment And the model usage and stuff like that Which is rare inside, hopefully hundreds of times, especially in production lines But these little things do add a little bit of time to the point So since we wanted to be fast We probably could do without these features So instead we used platform XH This is like a sandbox for us and it was pretty easy to set up So our prior knowledge using this Let us set up our environments really quick And it let us just get straight into our work It helped us migrate a large amount of pages on the site And we didn't really need to worry about what tools were supported and what wasn't And how would we even begin working with it Since we already had and succeeded in using this before It just gave a piece of mind to the lead in all the developers Next up is configuring the deployment This is like really big because it just fixes a lot of the pain once in the first part So we can pile paths, I think there are paths Now we just have a script that just runs during the deployment Which can pile those paths forward So there's no compiling there There's no conflicts when we compile it It saves a bunch of time, lowers risk And it just reduces the steps in total development All this all can pile paths What about the other things? So we were previously using like Webpack, SAS, Colt, Reactor, NPO And again we're only using great tools It just depends on your project But for ours we wanted to be quick and recent So we used things that didn't really have such a need So we just put a conflict files Or a twist tool for that So it really came down to three things again One, we wanted to use tools that we were comfortable with Two, we wanted to use something that we wanted It was quick and simple And three, something that we could debug and understand all the development So at first we used Wando Which is pretty much a logical environment tool It was really easy to set up And the reusability is really good So either you can go online and get a boilerplate With a conflict file and just kind of set up through that But if you're like us, you have a previous project you can use That's using that Put that into your project Renames and files, renames and things And you've got to set up And that's great, that's a breeze So next up we've got a parcel And that's pretty much worked out in the box as well We just have a few plugins You post the assets and tailor in And then everything files in the same area Makes it really simple, pretty easy We swapped out React and View This really came down to the people we were using So our previous implementation was a bit confusing We had about two different bits of code Kind of accomplishing the same thing on our site And all written in slightly different ways Which just kind of makes it hard to understand our own purpose With the features in view We thought we could reduce the code complexity And just make it easier for us to understand the channel And while we're doing it We can merge those two bits of React code into one And save that This kind of just helps maintain the site And maintain the code for the components you're using In the end it just leaves us with a A local environment that sets up in minimal steps It's really hard to manage any of these steps up And it's just quicker So these things help us And may not help you It just really depends on what your projects are Since we want to reuse all simple and quick stuff This will be used And if your developers are really comfortable Using these tools Or confident using them You don't want to do it It's even the right tool for you So, you know To have to set your team up for success You have the tools to do it now And you have a plan all the way up But How do you stay on track And adapt to the change So Teamwork Teamwork's a good one During my time on this project I ran for like five key points That helped us and I thought it helped the team So it's stuck in the top Yeah, goals and objectives So our team comprised of people Who were currently on the project Everyone knew the issues the site already had And they already had their own improvements That they wanted to make the site That's perfect The other team that's motivated They all know the previous and the original issues And they have a chance to improve their future Using the site It makes it really easy to communicate What you want out of the site And speak on future improvements And it's kind of easy to communicate So This is like a statement for any project Right? Communication is a big thing But this was no exception on our project So our slack channels were popping up constantly Our response time was really low And just everyone was jumping in at all times All this open communication Like sitting on calls for hours Asking me about What I would like out of the site Things I struggled with Tools that I would like to see on the site Really just made it easy To bring out each other's strengths and weaknesses And it's kind of easy to do Collaboration So all this communication helped everyone on the team Know each other's strengths and weaknesses It made it really easy to designate work to each other And dish out work That complements each other's strengths So for example, I was the web form guy As you know before So it was a web form question And I was a component guy Mechanic components I don't know if they even think about it The most great component Just makes it really easy to send work to people And a lot of good ideas Next up is flexibility This is one of the reasons But it really goes on the radio In a fast-paced environment You can get in there really quickly So just be flexible Even when you're not really familiar with The issues of writing So we don't exactly get it We had a web form that was broken And everyone here was a bit broken And the developers were kind of assuming That it was code related I guess And we had a manager that looked over our shoulder And was like, it's broken I don't know why it's broken Just had a brief look at it And realized that it was something 3D you are To be able to do this So it just shows that people think differently From different perspectives And it's always good to get there And put things It can just take you out of your loop And change your perspective as well But ultimately it changes I mean, ultimately it helps every time It's possible Next up is trust And I know it just wants to have a little cheese But it really brings all these positive pieces together Having trust in a team Is knowing that everyone's in it From the same outcome Everyone's working on the team At the same timeline Everyone just wants the better experience Out of the side You know that they're going to Complete their tasks And raise any issues if they run into it It just removes any concerns That you have But we're working on the team Instead it just helps you get the things done So now that you know about how to work with the team And we can take you through How to work with our team Thanks Al So as well as working fabulously As a team we have some really positive ways That help us work with our client And stakeholders So as I spoke a little bit about Before the project plan You know this is that sort of truth That we could all refer to a long way To help manage expectations A second thing that was really fantastic Was maintaining a transparent workflow So we actually invited our client into JIRA Our project management tool For visibility And also just streamline The work and review process So within this Once the ticket had been completed And was ready for review We would tag our client's dev unit We put it in a special column Called client review And they could just jump in there Really quickly and have all the context That they needed For the issue For the links And they could just go Yep, deeper than they can Then move it to a done column So it's so helpful In kind of reducing that I guess time of going back and forth With emails You know inboxes weren't flooded And you know These people weren't CC'd Into things where it was Just a lot of back and forth So having that transparent workflow Was just so fantastic in helping us The third thing as well Was yeah keeping receipts So keeping track of decisions So while you might like to use A formal decision register We just actually use a really simple method To ensure that we capture key decisions And discussion points Throughout the whole project So after all our meetings With our stakeholders Or our phone calls We would just follow this up With an email Essentially summarizing What we spoke about And decisions that were made And any action items So not only does this show Everyone how fantastic you are At keeping on top of things It can also help When you need to go back to Previous discussion Or try to remember Something that was decided previously Sending this right after a meeting While it's still fresh in your mind As well can really help clarify How you need this understanding Right away So you can shoot off the email And the client or stakeholder Can come back and go Oh you know The third point was actually Meant by that was XYZ And that way everyone's On the same page Right away So you know Perhaps pressing on to the work And then coming back That's not what I had in mind So that really helps With that The other thing as well Was having regular catch ups So of course you have Our fortnightly planning And review meetings But we would also have Add-up hot catch ups Particularly with our dev And the clients do So towards the end of the project As in the crunch time We also had Really quick catch ups At the end of each day So it's only about 15 minutes At four o'clock every day And this is a chance To give our stakeholders visibility Of current work progress And really instil of confidence Into them That things were on track And moving And it was also a fantastic Opportunity for our team To get the entire critical feedback You know Knowing that we're chatting With the client Every single day We could just kind of say Our questions looking That were burning And we could just chat about it In person Kind of In relation to this And catching up regularly I think one of my top tips In this area Is to know when to pick up The phone It might be uncomfortable For some people To get up on a call But it really helps Kind of iron things out Really quickly So you know Sometimes you might get an email Or a request from the client And you can't just Like scratching your head I'm sure it will be then In this instance It's really helpful To just pick up the phone And chat it out You know So often Things can be Quickly clarified Over the phone Instead of kind of Going back and forth Over email And again You know I'll just shoot off About Just to kind of Keep that record as well Of those things Finally Working flexibly I'll touch on this As a team How we did it But in terms of working With the client You know As much as we would Love exactly To stick to a plan Or kind of What we envisaged Sometimes things Are just out of our control Or out of our client's control So You know In these situations Sometimes It is what it is And we have to be responsive And adaptive to that But I think One of the key things To remember Is that You know We're all on the same team So us And the stakeholders Are all on the same team And you know We're all working towards The same goals You know We all want a good outcome At the end of the day So We have a packed Hole in there But I think You know Some of our key takeaways From each phase Pitching the project Or advocating for change Setting up the success And staying on track So We're looking at Advocating for change It's about Planning the seat early Being prepared And also being open To feedback Setting up the success You know Maintain that source of truth Define roles Responsibilities And clear expectations It's all the sliding risks Early Then staying on track Play with each other's strengths Communicate early and often And remember We're all on the same team So As we reflect on that I'd like to invite If anyone had any questions Or thoughts I'd like to chat about Let's sing it out Yeah So You mentioned the project's job weeks Yes Within the scope 12 weeks Okay, yeah So what was in scope The 12 week project Essentially what we did So the current site Still remained live And so what we were doing Was building a second website In the background And then we did a forklift And essentially took over That site When the time was ready So what was in scope It was literally Rebuilding the site from scratch So from From design All the way to build Yeah, so Earlier in the project We had Our UX designer Had designed Like the page And all that type of thing We had the design system So when it came to Actually implementing the project There were just a few Kind of kinks That we found out In the design system In the early weeks And it was literally Building every component Building everywhere Wasn't it It was just It was pretty intense What a long day So you did design Everything From user research To design Yeah, we designed Everything So from End to end We did the whole thing So our team We have content designers We have UX designers We have developers So part of it included as well In terms of implementing The new information architecture We actually had a bunch Of content changes as well So pages that were either Being archived Or merged Or all this type of stuff So we actually re-written As well Like over 100 pages That was also going on So while The devs were building A site We also had our content team Like Doing some really gnarly Uplift work with With a bunch of content as well Can you even look at it Out of nowhere Hey, just to clarify When you said that You were using the platform Or was that just during The development stage Before velocity Or did you finally launch On the platform? Yeah So why do we use platform Did you launch on it Or was it just As a development Set Did we launch with platform Or did we use as a development As a sandbox Yeah, we did We just used as a sandbox For development Okay, and at some stage We put it to the south For development Yeah, once we Compensed with the majority Of the site Then we did our work With the customers Yeah And that forklift occurred Probably about a week Before the site went live So we had it there Just so we could do About final UAT And protesting them All that type of thing as well So we could Yeah, be really confident That it would work Before we made the transition Was it a success To list all the problems At the beginning About the tech stuff And the editorial experience Do you think after the 12 weeks That you get a product To hit all those Was it a success After the 12 weeks Did we hit it? I think so, yes It's a lot easier in the back And it's just so much easier Quicker to do All the things we did before So, I'll go with the clients Yeah, yeah, definitely From the client's perspective They think so as well One of the things that we've been You know, some really fantastic feedback From was probably Two days after the cycle launch There was something really critical That had to be published At like 11 p.m. And the client was able to Just go in and do that Really easily Without any help from us In terms of actually doing it They knew where everything was They knew how to put the content in And all that type of thing So, that was really cool to see Just straight away You know, something like that Particularly in a time crunch That's kind of really what we're working for I was going to ask you How long you will Backload this now Is there much to take that over? Is there much to take that over? Yeah, in your life Do you have a backload Now of things for the future Or is there something to do differently? There's always features and stuff That are coming through But really like any issues That are all over It's a new thing Not really Like a lot of that Was ironed out in the first week Like just going through those U.N.T. fixes Other than that It's pretty good You can have much to fix I'll just add to that as well So in the U.N.T. process Any issues that came up We kind of had like A defect classification guide So we'd have like P1 Which was like priority one That we'd have to have done You know, before launch And then we kind of had other ones That were like Okay let's kind of get this fixed Sooner rather than later And then we had a lot of priority items Which is just like minor styling issues And minor types of things Across the site So yeah as Al said Most of that stuff got ironed out Pretty much straight away Or even before production But you know We do have a backlog We've just minded like Styling things That you know we're just kind of Working through But yeah the website Launched on the 13th of April So literally a month ago So it's been pretty fantastic To not really have a backlog Of tick time Well done Let's give her a big applause