 Hi, everyone. Everyone's here. Welcome to my session. The title of my talk is Improving UX with an Interactive Decision Tree. And that's a challenge that we have had internally, and we talked about how to resolve this problem. I'm going to take you through the journey we had with it. New story here. My name is Hugo Hauman. Take lead at Morphed. I'm based in Western Australia, in part. And I've been working in the Drupal world for roughly eight years, eight or nine years now. I'm working at Morphed. And if you have been to any previous sessions today, I'm sure you have caught the Morphed tagline on what we're doing. I shouldn't bore you too much with that. We should try to get on to what we want to show you today. So I divide my talk into four, which actually five parts. So we'll do a demo in that, but run through the steps we took and how we worked with it. And often, when I have built websites in the past, who is going to write the content? But when you're working with government websites, you often face another challenge that you essentially have too much content. You have lots of documents, lots of information. Well, the problem is instead of getting the content into the website to guide the visitor to the right spot, so the visitor website can find the right information. And we needed to integrate with the Gulf CMS project as a service and software as a service. So we couldn't use custom modules in this case, because we want, while we needed to work in both ways. And it needed to be easy for a content editor to work with. If a product is not easy to work with, no one will use it, and no one would like it. It was really important for us how can we get the content editor to like what we're doing. We put a few hard requirements, things we needed to fulfill. We have other ideas as well, but these were the four hard requirements. The first one was must be manageable by a Drupal editor without any further training, or very, very little training, at least, because otherwise it defeats the whole purpose. It must work with Gulf CMS, both versions. It must instantly be no service site loading, no waiting. We want to make it easier and easy for the visitor. Easy to work with, it should be fast. And it shouldn't require an extra code. Once it's deployed, you should be able to do essentially everything, all the change you can without getting a developer on board. The solution we picked was to use the taxonomies in Drupal. They are already there. People are familiar with them. So to get any content editor or Drupal admin on board, it should be easy, and it will be easy. We opted to build it in React.js, because that's something we internally have experience with, and it seems very suitable for this use case. We have also added a handlebar, the JSON, into the compile template if needed. You don't need to use it. If you want to extend it with code, it's possible. So you don't have to touch the React code. Instead of touching the React code and compile, you can just work with a handlebar template. It can be added as a block, as a paragraph, or inserted manually in the code. And as was one of the requirements, every item can be customized in the template from the back end. This is a screenshot from the back end. I will come with a full demo yet. I just want to run through a few things that decisions we made. I have opted for a COVID symptom checker, just as a demo. As I say, I'm based in WA, where we don't have much COVID, but I can see that it's a problem in the nation in general. And it feels like everyone can identify the problems, and I've been nervous about it. So this is a screenshot from the experiment review, and those are the other steps. We have the, you can edit the terms, and we have one editor, the name is for the editor, and the option is what the user sees. And then for every step, you can display something towards the end of it. This is how it looks like in our case for the user. One thing that was important for us this door, you should get a minimum amount of coding. Like if you have a design system, it's fitting, and we can feed in the CSS. So what you see on this one is three different design systems. At the same time, we get the new design system, get the Australian design system, and bootstrap. One component is, which means you can send in your classes, and it works out to the folks. The installation is fairly simple. You create a taxonomy with the required fields. There's a few required fields and a bunch of optional fields that you don't really need, depending on if the user wants to get started. The timeline is commonly, it needs to be done yesterday, and that's what's one of the focus here. And then you create a block or a paragraph. Then you need to do a little bit of code just because we cannot have it in a module. But this is the minimal implementation. We add one div to the template, and then we require three JavaScript files. That's all we need to do. I'm not going to run through a little demo of it. And if anyone has any questions, just send them through. You got the, I may be showing a little bit, so everyone can see. This is what the user will see when they first come into the page. They will get the question, how are you feeling? Thank you, they choose if they have any of the symptoms or they're not feeling too well at all, having more serious symptoms. This can, of course, be expanded, but I should keep it very simple so we can run through the whole journey. In this case, I choose the first option, and the next question I'm getting is, which state are you based in? Because it's likely that depending on which state you should take different actions. If I were to choose Queensland, in this case, I get the next question, where do you live? What's your closest city? And I pick one on them and get a little bit of information. During this, I can always go back, either with the bottles or by clicking in this one. If we can also see, we can either present the information here or we can choose to, if I choose use in this case, it will redirect me to another page on the site. So one of the things that was the main thing with this was to not only provide information, but also getting the person to the right page. So in many ways, many times, you are testing, it was faster for a person to do maybe three clicks than to work the way from manual and read a lot. But here we can get a question south, there is no wait time, click, click, click, and it takes you straight to the right spot. Can reset, if someone feel that they haven't done it wrong, they can reset and we'll start from the beginning of the journey again. And sometimes we need to, if someone is really not feeling well, have serious symptoms, we want them to contact the emergency services as fast as possible and then we just present them with a link. So this is the front, what we'll see when we're working with it, or as a user. I will now redo that, show you back in and how easy it is to work with things in it. I'll start with just one of the terms which is the most common symptoms. This is the view for the editor. So you can set a label on one of your items, but you can set something else that are shown to the user. And if you need more information, as is so on the more serious symptoms, we can put extra, we can also put pictures. Anything you can put in a with a backend, you can put here. And once you click one, we decide to, we can show information that often we show the next question. So we show a little bit of information and then the next question, we're next step. We have a few more things that I want to divulge in now. We can choose a template depending how we want to display. So we can pre-design templates for each step. We can have a default one and for each step. You saw on the screenshot earlier, we just work our way through, essentially we can move around things and we can also do something that we call a jump. So say it's many, it could be in a case like this, it could be many different paths that should lead to that. It should contact the emergency services. And instead of adding them by the end of each step, we can choose to load here in the advanced setting, we can choose to, okay, here, when you click this one, you shouldn't go to the next step, you should be directed, you should jump through the system. The visitor will never see that, but then you can have one item. Maybe she never has to write any content more than once. And as you saw for new such ways, we can also put a redirect. So we can redirect someone to another page. And if you redirect someone to another page and choose to keep the journey on that page, you have been added as a block. That can be used with keeping, with keeping it as saving it through local storage for every click. So no matter where you are on the page, it will always remember where you are. I'll now just go quick here. If I add one term, say I add the WA here, I just write a little bit of info for this one. We don't hear much. And then I of course want to choose where in the tree. Either I choose it here or I will move it around while I create it. Once it's added, all I need to do is to reload the page and pick one here. And I have these steps. I can move on to the next step. And normally you need to clear the cache, but this is my local testing environment, so I don't have to be saving a little time there. So this is our idea. It should be easy to create this decision tree either to provide information or to guide the person to the right spot on the site. If you want more information, you can either just ask me now or send me an email or contact more. We get the exhibition both here at the conference. Any questions? Yeah, I have a question here. How many levels of nesting and rules will be possible? And I don't think that I guess if we will have a practical limit somewhere, how many nesting levels? I never managed to nest out Drupal in the economics, but if there's not a hard limit in Drupal, it would not be a hard limit in this one. But if you have 300 levels, it might be a bit heavy. So I wouldn't recommend that. You can insert multiple journeys on the same page. So if you have that much, you might be an idea to divide it. And another question is, if you go to an external URL, you can still show the navigation, et cetera. Once we go to an external URL, we cannot control it because then we have less, but we can put any kind of link. So if we have an external site where we can put a query string and tell them we're coming from this site, that's the way we can. And of course, when you're coming back to the Drupal site, it will remember where you left, no matter where you're coming to. Good question there. How to flag that a particular taxonomy is for driving a journey. You don't really need to flag them in that way. The taxonomy is a taxonomy. You could use it for other things as well, even if it's, of course, best used for the journey, because otherwise it might not make sense. I might have missed to explain that part in the head. In this case, I have used to embed it as a paragraph. And in the paragraph, I specify the name of the journey. I have stated that the full template should be displayed as a card, doesn't look that much as a card since we're not using pictures in this case. And I have a limited amount here. I display, I set the classes. I can set the classes for the button navigation buttons as well. So if you add more fields here, they will fill in. So, rather than to specify this one for a journey, a taxonomy is for the journey, you specify in your component which taxonomy you would like to use. So if a taxonomy table allows up to nine levels, that's the limitation of the system. I haven't made it that deep, but yeah, if you were to reach that limit, you will, I will create another journey. When you reach that far, after nine levels, it will also be hard to overlook for a content editor, I would say. If you don't have any questions, I guess you're just gonna leave it to count down here. And as I say, like, if you're coming up into any questions further down the track, feel free to hit me up. I'll be available in the morse code during the afternoon here, or at least someone will be there with you in contact with me. Yeah, I should have mentioned that this is built with a JSON API. JSON API is what's feeding it to, feeding it out to the React app. So that's why we can use it with the, with stock throughput. All we need to do is to enable a module. Running out of time here. So yeah, just picking up if you have any further questions. Keep.