 Yeah, I can see that perfectly. Take it away. Okay, great. Good morning, everybody. My name is Fran McKegney I'm head of digital learning at hi Bernie college and I'm joined by two of my colleagues here Lavro Bollyat who is the UX designer on this project and Justin Staunton who is our learning technologist and all-round Moodle wizard we're going to talk about the project that involves the redevelopment of a Moodle VLE putting design thinking and user-centered design at the heart of the at the heart of the process A quick bit about how Bernie college for those of you who don't know us. We're a Dublin based blended learning college. Our focus is teacher training. We have about two and a half thousand students. They are post graduate students taking their professional master's in education We're the biggest provider of teachers into the Irish education system and we're now starting to branch out into both undergraduate programs and beyond education About 18 months ago, we initiated a project which internally is known as the digital architecture project in which we started to look ahead and say what will teaching and learning look like in a Bernie college over the next five to 10 years and from our perspective the attendant question that went along with that was You know, and what digital architecture will we will be needed to support whatever vision emerges of teaching and learning over the next Over the next period of time So we spent some time talking to the various departments in the college from the academic teams to it to really support Executive management team and so on and came up with a structure of six workshops That would explore different teams and out of that we would issue a report and then take the take the The journey on from there. You can see the teams that we had, you know first one role of mobile technologies and a brand new college's future student identity and student journey Using digital technology to strengthen community and learning in the regional groups. Again, we're blended college Our traditional model is 50 percent online 50 percent classroom or face-to-face So we have students all over the country and we group them in different ways by regions by subjects And and so on but obviously building community and strengthening communities is a huge team for us Collaborative learning and research was workshop four And then obviously the future the VLE got its own dedicated got its own dedicated space So this project came out of that work We did the six workshops. We issued a report We then did a couple follow-on more detailed workshops and out of that really we got a mandate to build a new platform It's a rare privilege To have the opportunity to build something from scratch So, you know tremendous opportunity for us on the one hand It also comes with the daunting caveat, which is since we are a digital college. It can't fall over So it has to work or we're out or we're out of business So for the past 16 months or so, we've we've been working away on on this Now there are two other components to the overall architecture that we won't get into today We have a high Bernie college home and then we have we also launched a collaboration App for staff and students at the same time, but we'll obviously focus here on the on the Moodle redevelopment As the person had the overall responsibility, I suppose my biggest worry was How would we not get lost as we went through the development process? As you know, um over the over a 16 month period you take hundreds of decisions at different levels everything from You know features to ui elements technical Decisions work about and so on and With the best intention of the world you can get driven off course over the course of over a course of a long project And two images came to my mind when I was thinking about this the first one was A an airline or an aircraft flying on a on a long distance flight say from san francisco to dublin How does it find its way in land in dublin rather than london or budapest or somewhere else? And so obviously this radio beacons flying beacon to beacon is is a key component of Of that journey and I was wondering what are our beacons? And how do we know we're on track at the various times and keep ourselves keep ourselves en route the second image Was howl's moving castle that came to mind now castle castle is one of my favorite movies The castle itself is an incredible invention for those who haven't seen the movie It has feet it can walk over mountains. It also can fly It has lots of capabilities inside amazing entrances and exits to it But you know if you were to look at it as a ui You would probably describe it as somewhat idiosyncratic a howl knows Where everything is but it's probably for an external user quite difficult to find out where everything goes and how You know how things work in there. So we know over the course of projects we get additional requests Can we have one of these can we have one of those how about this? What about that and you know, not just bolting them on but including them into the Into the overall flow of the of the project was was was key for us And my experience over 25 years is the safest Area focus is to just really focus in on the users who are the users On the system. What are they trying to do? What do we physically ask them to do to achieve? their goals and so on and at all times through the project to To have this relentless focus on the on the user experience And so We decided to sort of embed formally design thinking user design user centered design into the development process Which was not in the college's tradition up to that. So this is that was a new Step or a new part of the process So we went on the hunt found Lavro added him into the team and formalized The process now i'm not going to say much about the process itself. I'm going to leave that to Lavro When we get there, I do want to say two quick things before I hand over to Lavro one is Of course, you know, you all know there are many users on a system and it's really Particularly from a from a team lead perspective. It's really worthwhile spending time thinking about the users the relationships between the users and actually Clearly identifying a hierarchy of users in the project and there's two reasons to do this. I think one is It it really clarifies things for the team and helps, you know Define the lines of attack and how you're going to go after this The second thing is it does it provides protection to the team as well So I was fortunate enough to be on the executive management team in hibernia college So once we had decided on the approach, I could take it to the leadership group get there buy in At that level which would include the heads of the various departments and that gave space and coverage to the team to get on with the work in terms of the priorities that we had identified And the sequence in which we were going to we were going to go after it Obviously we put the students as the number one priority And everybody else was came after that, you know program and men's it and so on came came after that VLE support administrators came after that And lover is going to talk to the student journey and the student experience now in a moment Last thing before I hand over to lover. I just want to say that we're you know There were other prerequisites that you know had to be built into this project one of the things that we really wanted to do was to Spend time looking at the architecture of the platform itself in particular. We wanted to separate out the business rules the business behaviors The programmatic behaviors from the presentation layer at the top And we wanted to do this for a couple of reasons mostly to do with control so that we could continue to refine and iterate Being in full control of the of the of the presentation layer We something we didn't have with the previous version of our of our VLE And a shout out to our development partner innovation in relation to that we innovation who are one of the sponsors of this conference Worked with us on this and understood what we're trying to achieve and did a great job And so I want to give a public thanks to mark and his team for the support they gave us through through this Secondly mobile enablement as you can see this is part of a broader initiative in the college and the role of mobile technologies Has gone from being very little I would say in the past now being an integral part of how we think about everything moving forward So enablement may actually not be strong enough Mobile technologies are first among equals So you can't design for a laptop and then as an afterthought Include mobile There are capabilities mobile capabilities that That you know laptops and someone don't have that are very useful in an educational setting So to think of it as an equal client was really important was really important to us So having said that I'm going to pass over to Lavro to answer the question. What did we actually do? So Lavro, I'm going to stop sharing and let you take it up from here All right. Thanks Fran just Show me screen please I hope you can see this Yeah, we can a bit cool So yeah, as Fran mentioned I was brought in as a UX UI designer And so my job was kind of to evaluate the situation of the old my helm system and see what can be improved and Obviously made better and just to briefly touch upon this like We designers usually try to have some kind of a framework to work with So I use the usual design thinking and user set in design Which just briefly for people who might not be familiar with these frameworks Design thinking is a methodology framework which kind of sets you on a correct path Make sure that you you know Design correctly and for the actual problems It's usually represented with with a double diamond model Which actually you know has four distinct phases Which are research, analyze and then ideate and testing prototype So the kind of the idea is that you first, you know, you start with a problem And then you have to research you there's a phase of divergent thinking where you you know expand your ideas And then you analyze things you narrow them down and then you define the problem And then in the other diamond phase Your first idea to brainstorm, you know come up with a lot of solutions possible ideas Which is once again divergent thinking and then once again you converge things with testing and prototyping Well, until you get a final solution that works And now I kind of have my own variation where I have things in three phases It's this is not it's just once again, you know research and analyze because I have feelings that here you still have A bunch of my nine search questions Then you ideate this kind of is very chaotic and creative process And then once again, you ball things down to a single solution Now this is not so important for you, but My slides are gonna represent that here. So this is kind of the first phase research and analyze Okay, so one as always, you know, the first thing is One of the advantages for me as a UX designer is Whenever I come into an organization, I'm essentially a new user So I can explore the old system And so the first thing that I did was so-called heuristic analysis Which stands for like a discovery analysis where you just Or some people like to call it an expert analysis So my first task was to, you know Explore the old system all my homes and see what's wrong, you know, some intuition and experience that I have with other platforms And now I can briefly show you This is the old system. What did you look like? And I mean on the first In your first status, it's kind of clear that it's an outdated Design, uh, there's a lot of options. So things can get confusing and out of hand Now granted, this was built in Drupal But still, I mean for a new user a student who comes here, it can be very confusing And then you click on study now and this is where you actually enter a module And I mean so from the design user experience point of view, it's once again Kind of hard to find your way around. There are these courses here. You know what to do The menu is still the old menu. It's study tools a lot of options. So In the end, I kind of bought things. I think these are our main problems. So it's a complex system There's a lot of things you can do Like one of the major ones is no visibility of system status and no breadcrumbs or at least the breadcrumbs That work correctly. So if you're going through course, it's uh, this kind of changed You can't even click on this. Where am I? No visibility of the system status as I said, so you don't know where you are actually If you want to go back, you have to click home once again study now the whole journey begins again and That's kind of hard And so one final thing a big one was there's it's not there is not a match between the real world So the academic program that students are enrolled in and the design model of this system So what I mean by that is this is kind of a small graphic. I hope you can see it So this is this represent whoops, sorry represents the academic program so Here, you know when you enrolled in the college the program consists of a lot of modules So there is a bunch of them then modules contain courses courses contain sessions and sessions in young have activities Now that kind of exists in model, but it's not represented like that. I don't I don't know where my modules are You know, I can go try to find courses if you need to take an assessment something that's for a specific module I have to go to home assessments And then I have to find my modules. So these are the modules And take an assessment. So it's everything. It's mostly a problem of bad information architecture But you know to validate my findings I did a couple of other things. So one of the main main things is the user interviews or observations obviously when we talk about user standard design, this is the The main thing that we have to do so basically I talked to 10 of our students on zoom The pandemic already started. So that's kind of a must So I just you know, I gave them a series of tasks and asked them to perform them You know, it's just like, uh, it's a regular monday What's the first thing that you do when you log in to my helms? They shared their screens obviously and So I just analyzed, you know, I wanted to see What they do how they perform things and I also gave them some specific tasks Like go into a certain course activity try to do something then, you know, give them something Kind of difficult to find. How would you know, like, what's happening next to your program and things like that? So, you know, a lot of Going across the whole system just to see how they Can get around And the one other thing that was kind of useful Was using the matomo analytics, which is a system similar to google analytics Which we had in place for this platform Which actually just kind of just Validated things that I learned from users. So I found out about the most common places where users go to And where they spend the most time In the platform. So that's kind of cool. And then Just to have a shared understanding With my teammates and colleagues, I made this mental model, which is a common artifact in UX sign Where I just wanted to represent ha and my findings. So our user Usually spends most time In these three areas. So studying learning Calendar, obviously to see what's happening next and then assessments and grade book And some minor things were, you know, school placement, especially during that time here Library, especially when they were writing their research dissertation And programming for just to see what's happening in the timeline and things like that So, yeah, this was kind of a model for all of us to be on the same page. What's what's important for students and what they really need Okay, and then I also have this aspect called user journey flows, which represents Just how hard it is for users to get to A certain, you know, point in the system. So this is one of the screenshots. So the yellow of the The green line represents a correct path. So from the home page If they wanted to get to the activity So this is what they should have done But, you know, it's obviously this kind of represented. It's a long journey with a lot of steps to get there And another thing that it's kind of interesting is that not only it's a long journey There are a lot of confusing nodes where you can, you know, get off track. So if you're in the home, you can click on study now Then you don't know where to go. You can go to other pages. Then you have to go back And so in the end, this is what we have a long journey that it's both confusing and long for people So we just wanted to simplify things. That's kind of our most important, you know line here Simplifying short in the user flow with less room for mistakes So kind of this was the ideal thing that we wanted Users to be able to perform in just a few steps to get to the activity Okay, now we are kind of in the ideation phase a lot of brainstorming and thinking about things And here I came back to the information architecture Where one of the more important things was to build a match between the real world and our platform And this I refer back to the academic structure. So program has modules course Modules have courses and then you have sessions and each time back there it is So one of the artifacts was the site map here Which is not so important And here thankfully we have the Justin Stanton our Moodle expert Who stumbled upon the Moodle move theme and we kind of examined a lot of themes and things we could do And this theme perfectly fit our needs Because mostly because of the left-hand side menu, which as I'm going to show now We actually used it to map all of the most important things You know the students students need we mapped them to the menu. So, you know study learn Pat it's going to be here in the main thing calendar as well great book and so on So that was kind of neat and then we went on to Playing with wireframes testing things. So this just a small screenshot of a very chaotic Sigma file that I have Okay, so now just a couple of interesting things I can maybe show you the New platform that we have it looks like this. So this is new my house Yes, so the first thing that's interesting from a Moodle perspective is We added this study now or home page Which actually, you know, this is the first point that actually matches the real world and the platform model So we are now on this level. This is kind of your program So this contains the list list of all of your academic Modules so orientation for this education. So now it's kind of matches the Information architecture of the real world, which is cool and here on top you have recently access courses Which is a standard thing Which is obviously quite useful. So we we have three of those here So that's the first thing and then when you click on one of the modules you get into the so-called module hub So this is also kind of new in the Moodle world. So let's say, you know, I have to I got foundations of education So you have all your courses here, you know neatly in cards with pretty pictures And on top you have the core activities as we call them. Now, this is so we as I showed previously in the old system You know, everything that's concerning one single module was scattered across the whole system As I said assessments, you have to go here School placement hub and things like that. But now everything for the module foundations of education is inside here So you have module info But you know some information and breadcrumbs work so I can go back this way Live events assessments, you know, you can access everything here and it's nice and logical, which is cool All right, so this is a big one for us. We believe, you know, this simplifies things a lot and the next So we have a course and session pages an interesting thing that we did here We put sessions, you know, immediately visible And we aligned them, you know, made them here like in tabs, which kind of represents progress and the timeline So this is session one which one is which is usually, you know, visible whenever you come here session two sessions three so, you know, it kind of showcases the timeline Uh, okay, so another kind of interesting thing that we did, we obviously, you know, wanted to ask What do users really want or need? So in Moodle there were a lot of icons which represent different activities and You know, when you talk to students, they don't really care if something is a database, you know Is it a file or a book or a page? So we kind of wanted to narrow these down simplify things once again So we made as you can see, you know, some of these repeat themselves Uh, which is represented here better. So we kind of group them. So all of the interactive activities get a blue icon These are some kind of like retrieving information Supporting icons still, you know, color coded for easier You know, you can see things at a glance and it's represented here on this page or in the live system, you know Yeah, these are the activities Okay, and one other thing we designed a cleaner style for the calendar, which, you know, in the old system Sorry, it is kind of unnecessarily Full bright colors if I can show it to you, you know, like this I mean the calendar works great in Moodle, but yeah, we just want to make it nicer and cleaner And then obviously we this is just to show, you know, we played a lot of colors We wanted to stay on brand with, you know, the user interface This is just a showcase that we did a lot of research Then we obviously tested things with two prototypes in Figma, then with the skin mock-ups And then we tested the developed site for months So in the end, we have this, you know, we kind of hope we did talk to our users. They find a new thing much more usable And it's a new user experience, you know, it works and it's responsive, it works on a lot of devices So yeah, that's that's it for me. I hope Like this and thanks So for the Q&A, we have Justin Stanton, maybe he's the best person because he's a good little expert, as we said So maybe we can direct all the questions to Justin Thanks Thanks, Laura Thank you so much Thank you to your team for coming along and presenting today Sure Thank you There's one question here from Hugo He asks, how big is your team between instructional designers, developers, UX, etc? So the digital design team is 17 people But not all and not everybody was involved in this project because we do have a content development group that were not involved in that We also worked with innovation. We think we had Between this and the other aspects of the of the project that we did we probably had four Four people work with us in in innovation So and then we're obviously We have a dedicated IT team and we have a dedicated VLE support team So they also participated in the project. So it was a big group. Um, it was a big group Yeah, I'd imagine and there is another question here. What accessibility testing did you do? Using the same icon for different functional and things Yeah, so accessibility is a great. It's a great question. We You know, I accept so we We consulted on accessibility at the beginning and made some decisions on it and so we've done Preliminary accessibility work. I would say we were mindful of accessibility the whole way through the project But we we just did preliminary work on it However, um accessibility is a big project for us this year And uh, the focus on on that, you know, including on the mobile because we don't have much broader support from mobile devices as well So accessibility is a huge team for us this year. We were mindful of it as we built the project But yeah, we haven't enough work done on it at this stage Um great Sorry Did I interrupt? No, it's just one of the questions there and I um, are these improvements part of the custom team theme? Um Funnily enough, we actually the team was very light that we customized what we actually got innovations do or what they chose to do was uh, customize the um The course format so we have two Parts of it that are customized so it sits under the umbrella of academic programs But outside of that it still acts like the move team that's off the shelf So the custom format was one was the module hole, which is the six boxes that sit across the top So that's the hibernian module hope that we customize and then we have Each one of the tiles down below. That's the hibernia course format. Okay, so we had the two different types of Course format customized. We didn't really touch the overall team So and at the outside of the academic program it still acts like the move team Uh, yeah the icons, um Lava redesigned a full set so for pdf 6l um word documents. We just replaced it with a um A scalable uh An svg wasn't at laura A scalable vector uh graphic So we've replaced anywhere that it'd show a pdf icon an excel icon with the single File icon so it was easy enough to do. Um, I think And we want yeah, we want to do this as well because we have collaboration platform so students now have a Have a mobile based Collaboration platform and we we sync the moodle calendar events over to the collaboration platform And so we actually a different one to the icons to to carry over to the mobile apps. Um, they're Larger actually on the phone. So again, we had icon set in different sizes with slightly more detail But clearly related clearly related to each other Um, just one one one question there, uh, how did academics and staff feel about these ui improvements? They were very surprised very shocked and actually delighted But one of the big things I've been working on at the moment was because the Gray book was separated out at meeting to each one of the module hubs Um, I've been working with a plugin. Um called my feedback That's a really nice plugin. But what it does is it allows the assessments team or academic team to view an individual's full I would just say assessment portfolio over the entire program So it's not just giving you a snapshot of each individual module, but you can filter it out So, um, that was that's one of the big things I'm working on at the moment Hopefully roll that out in the next couple of weeks. Um, yeah, so it's still we're still building Still building and running. I know our time is up, but actually I think the question about the academic team is a really good one We Really went out of our way to work closely with the academic teams the whole way through this process So that again, they were You know, they were involved and they knew what was coming and so on but as as Justin said, they were surprised Essentially, which how we simplified the system Okay Thank you so much. There's another question there from Carl. I think Lavra was gonna answer that You can answer that in the chat as well. We won't damn make it disappear. So carly should answer Question there, but thank you so much. That's some fantastic work you're doing and thank you for sharing Thanks for an eye. Thanks for an eye. Thanks everybody Thank you