 Hi, everyone, my name is Candace Dima. I'm the UX Lead here at Moodle. Today, I'm going to be taking you through the latest UX designs for Moodle elements. And that's why 4.0 release that is happening at the end of this year. Really exciting. We're going to cover quite a bit in this session. We do have some prototype links that I will be able to share with you after this. So you can walk through the demo yourself at your own pace. Just a word of caution about the prototype links. Do you understand that we have actually created these in prototyping software? The ones that the one that we are using in this demo is Figma. So these prototypes don't behave as much as they look very much like a simulation of a real website. They don't necessarily behave exactly like the website does. So just understand that there might not be things that work as typically a website would do. Just a demonstration to show you what the concept is going to be like. Obviously, you will be able to interact with something that will be much more reflective of the actual experience when it's being programmed using the code. So this is just to tell you about how navigation is going to work, some of those behaviors around certain things. So when you do use the prototype, just be mindful of that while you're using it and you're clicking around and wondering why doesn't this behave the exact same way it would do on a website? Because it's not and it's just the basic prototype to show you the direction of what we're going. Bearing that in mind though, if there's something unusual or strange or doesn't work, do let us know. Let us know in the feedback because that would be interesting for us to understand. Some of the stuff isn't always hooked up completely like a website would be because we're only showing you key parts of certain things. And if there is stuff missing, it's always great to understand and learn from you what it is that you would expect to be there. So do leave us comments on things that are missing and say, hey, what about this? You know, we could learn a lot from you guys through this process. So do give us your feedback and enjoy the prototype links. So as I said, we'll be kicking off with navigation, looking at different parts of navigating around the site using our new components and a brand new component that's going to help you navigate through your course content a lot more easier called the course index. So we'll get started. Right, so we'll get started and looking at the desktop experience. And the first thing we want to show you is that new primary navigation menu. So as you can see at the top, we have our four new primary navigation items, some of them looking very familiar. You've got your site home. We've got dashboard. We've got my courses and site administration. So you'll see a new addition to the default menu, which is my courses. And this is a standalone dedicated page that we have now included as part of 4.0, which is there to help you manage your courses. So we've included the course overview block on this page. And this is going to really set you up for the future when we want to do really extensive search and organization tasks around your course content, your courses themselves. So we felt that this was a huge improvement from having this whole block on the dashboard. So we really want to dedicate the dashboard space primarily for dashboard tasks, which is going to be things like, what do I need to do next? How should I manage my time better? And all of those lovely things which dashboards should be able to help you with. And leave the course page dedicated to helping you search, navigate, find, and organize your courses. So that's the thinking behind that. And this is the new addition to the primary menu. So you can still get to the dashboard. And as you can see, it's under construction. So we will have a release update for you next month around what these new blocks will be looking like as part of that new dashboard. So we're working on, as you can see, timeline and calendar. So those will be the dedicated blocks. Obviously still customizable, your dashboard. You can swap and change and move around your blocks as you would. And the same with my courses. If you go in here, you can still click from ListView. All the same functionality is still there to CardView. And back to ListView. Obviously, we have changed the UI quite a fair bit. It's taking a whole new personality and shape and flavor across the new 4.0 experience. A lot more modern, a lot more clean, a lot more fresh. And yeah, primary navigation still operating as normal. You'd be hovering over these tabs, which would indicate which one that you are hovering over with the underline. And then you could tab within to that page. Primary menu is still going to be customizable. So you will still be able to add menu items to this primary menu list as well as anything behind potentially a dropdown from this menu as well. Great. So you might have been noticing while we were going through some of that primary menu, a new page menu that has been presented on the page itself. So there's one inside administration. And there was also one. We'll take you down into the course page and talk a little bit more now about what that menu is. And that is what we are calling the secondary menu. So if you come down onto, say, for instance, a course page, this is a new course page. And this is the layout and the new design for 4.0. And you'll see, again, there's this element on the page, this navigation piece. It works and behave exactly the same way as the primary menu does. So as you roll over, the object highlights in the menu. These items have been reprioritized in the order of the list from most to least important. And we based this off some data that we gathered from a research piece of work that we did with our users. So thanks to our users for telling us what they wanted to see in this list from most to least important. So as you'll see now, if you started from the course tab, this is everything within your course. And the most important thing our users wanted to see right after the course was the settings. So you can navigate through to the next item in that list. And it's right there. And all the same elements are still there for you to update your settings and so on. And you have that with participants, grades, reports. And then also we have, because of the limited space within our fixed width columns and the core content, the main content on the page, we don't have a wide enough screen to put all of those menu items. And because they are least important to our users based on that data, we have decided to put them in an overflow menu called More. So you can still access content, bank, course, completion badges, competencies, and course admin. They are just behind the more buttons. So they are there within this menu over here. So you can tab between any of these items. And if you were, for instance, to go through to course settings, you could go through to grades. And then if you get to grade reports, you also know that there is a way in which we need to navigate through the different sections of grades. And we'll be using a component such as this in order to select those different parts of grades. So there's two new components you would have also noticed that have been included on the course page. And that is two little icons on either side of the screen. So if you tap on the first one and you open that up, you'll see a component called the course index. And this is a new feature we're adding to our courses. It allows our users to be able to navigate through sections and activities by opening up the sidebar. So all of your activities are labeled here. And the one that is highlighted is the one that is in view. So this is an item that is presented by opening up the side draw. So that means if you didn't want to see that and just wanted to focus on the course content itself and scroll down to your activities, you could remove that information. But as you can see, they stay sticky. So they're in a fixed position in the screen. So you can always access that course index wherever you are within the course content and then be able to navigate up and down between those different sections and activities. So you will also see the blocks button on the right-hand side now is the new button component that reveals the blocks. So within relation to the course index and you wanted to open the blocks side panel, you click on the button and it will reveal the blocks that automatically close the course index. So the two items work in relation to each other, but you can both switch them all on at the same time. So revealing blocks or revealing the course index, revealing none of them and being able to toggle between the two and still focus on the beautiful course content that you see in front of you. And as you can see, we have our lovely new activity icons and activity cards on display within the course itself. So that is a little demonstration of how to open and close your new blocks and course index side panel. Now the most common way that we'd normally be navigating down to a activity is by clicking on the link of the activity itself. So if you were to open up here, we'd be seeing that we've clicked on the book activity and now that that is open, we could navigate back to the course using the breadcrumbs, but with using the blocks at the course index on the left-hand side, we can now navigate down to that particular activity using this component and by clicking on that, that now opens up the book activity. You will see in this instance that the course index automatically closed and the blocks opened by default. And that's because this particular activity we're showing you book relies on the blocks to be open because it uses a block called chapters, which is a fixed block for this particular activity that allows our users as well as the buttons to be able to navigate through the different sections of those chapters. So for this instance, we have a rule that says open the blocks by default. So we can close them here. We can still open up that same course index component on the activity level as well. Here's your blocks and we open it up here and we're able to navigate back up to the course level, not only just using breadcrumbs, but we can also use this course index component. So you are able to navigate through any of these course index items whether it be sections or activities, whichever level you're on within the course from the activity or the course page, you can get back to the course level itself in that section which will anchor you back at general as we sit that was the section that we chose from in that list. So the last quick demo that I wanted to show you was just around course confession and this is around improving the student experience. So as you navigate down through to the activity assignments, you'll see an example of how we've introduced some important information for our students if this is enabled on your course that they are not able to see submissions, dates, due dates, open and closed dates depending on what the activity is. We also have included these new badges which show the students and the users what is the activity completion requirements. So we've surfaced that information on the course level as you can see it now. And then as you can see for this particular assignment what you need to do in order to complete this assignment is view the assignment and make the submission. So if I was to click into this activity assignment I'd go in here and you can see that badge is now automatically updated on this level to done because you have viewed it. So the color changes and the wording changes and now the student is able to know that this activity has been completed. If they were to navigate back to the course level you'll now see that is also updated on that level too. So for everything that we've shown you on the desktop experience we still wanted to give you a quick overview on and demonstration on how that works on the mobile browser experience too. So as you can see here we have that same homepage that is mocked up. We are now using a hamburger menu that slides out to full screen that will allow you to access that primary menu those primary menu items. So from here you can still get to the dashboard my courses, site admin. We have been talking about putting notifications, messages, my profile and the language button which obviously you can see there's not that much space in our horizontal bars. Horizontal header for the mobile experience. So we have been talking about potentially positioning them within the sidebar. We may put them back up in the header just because obviously those are really critical for our users to see when they have notifications themselves when something changes. So the alerts are really important and you may be putting that back in the header. And so what would happen is if you slide up on this homepage screen and you click on to any of these items again it will take you to those pages. So we still also have the secondary nav which I showed you in the desktop version presented in this component as well as the blocks button. So on the pages where you can preview the blocks this now slides up from the side rather than them being components that are buried at the bottom of each of those pages. So you can access them really easily just by clicking this button and to find that secondary menu and just click on that homepage list and it comes up with your settings for tobacco store and all those items which are part of your site home menu. So as we click through to the dashboard exactly the same. We've got your blocks that you're accessing being able to access from there and your primary nav from here. When you get through to my courses and mobile view again we have the same experience your blocks are available from here and when you click through to the course experience you still have that secondary menu so you can get from course to settings, settings back to the course using this mobile menu and here you can see we've introduced our new table of course index component which is available next to the blocks button that you can access and find the rest of those items so that you can click through to your activities using that same component and click back up to the next level using the user breadcrumbs all your course index component to be able to do that. Well I do hope you like that very quick demonstration of some of the new navigation aspects of the 4.0 experience. Next time we will be focusing a bit more on the edit mode so if you have noticed we have a new edit component right at the top right of the screen and it's switched off for now so next time we're gonna switch it on and show you exactly what the new course creation experience is gonna be like and how that universal editing button is gonna help you understand what mode you're in and what are some of the cool new things that we've introduced as part of create a course in the whole new interface. We're very excited to show you how that works. Obviously the course index is gonna play a major part in helping our course teachers and administrators and course designers be able to easily move, drag, drop and interact with course content using this component. So really excited to show you all those new user journeys for the next part of that. So watch out for that. That'll be available in about a month's time.