 Hello everyone. My name is Thomas Bell. I'm actually from Floriam, but Floriam owns a home learning college, that's what I'm talking about today. It's the end of the day, so basically I'm going to show you a lot of screenshots. Because of the projector, that might be a problem. Actually, while I'm going through this, we did a site for Christmas, which was... In fact, Christmas is about 270 days away, so if you got your browser out, you can go to christmas.floriam.com, and this is basically the same theme, bit of rebranding. So as I'm going through, play with that. So Floriam, it's a bit of a hard one to explain, but we start partnerships. We sort of incubate them and we make them grow. And some examples are squared online, which is a partnership with Google, selling digital marketing qualifications. We've got a partnership with CIPD, selling HR courses, L&D courses. We have a partnership with United for Wildlife, which I presented last year. And we've started the Academy of Bid Digital Business Leaders and a subscriptions site called .native. There's a couple of others as well. But the main business with most users is home learning college. So we've got about 15,000 active students. And home learning college is... It delivers professional accredited qualifications, so in accounting, in bookkeeping, HR, L&D, marketing, and has about 15,000 active students. So this is our biggest user-based site. And basically what I'm going to talk about is I'm going to talk about a campus refresh, a refocus by taking a step back and really going, okay, well, what's the campus for? I know that sounds like a simple question to ask for, but we want to take a step back and go, right, what are we doing? So it was about halfway through last year, we had the opportunity to... Well, we had a bit of a time window, really, where we had some developer resource, front end and back end. So we took that opportunity and we said, okay, what are we going to do with this? So that's what I'm going to talk about. Okay, well, opportunity knocks, too, because it's Thursday. So this is what it looked like. And you know what? The sites are pretty good. Can we actually see it? It's in contrast. So the site's not that bad. The theme we had was a pretty standard theme, had the standard layout for Moodle, rebranded. It's pretty nice. But we'd done a few sites last year and a year before that were just visually stunning and we learned a lot doing them. We did a lot of work on sort of the UI and the UX. So it was time to sort of bring this one back. Again, okay, ignore the little squiggles there. Couldn't find many screenshots. But a course page, you know, it looks very much like Moodle. Yeah, quiz. There we go. So I'm just going to talk about a few of the way we went about it and hopefully that you can maybe apply to your own projects. So the first thing to do was to look at our, well, make some user stories, looking at our users. Not just tutors, not just students, but what we did is we went, okay, we've got students. There are the people that are paying. We've got community managers and tutors that interface directly with the students. So any attitude that they have with the campus is going to go straight to the students. So we, yeah, we spit it down into students, tutors, community managers, and learning technologists because they're also the guys that are dealing with a campus on a day-to-day basis. We did student surveys, student focus groups. We did the same with tutors and the learning technology team at Floriam did a lot of like going around and talking to a lot of staff members, working out what's important. And also they work on all of our sites. They've got a big, they've got a good overview. From that, and we didn't do this perfectly, but from that we created a bunch of user stories. They described the platform that we wanted, that our users wanted. We didn't do it right because we didn't, you know, we're supposed to get into a room collaboratively, all these stakeholders. One or two of us did that, so it was a bit prescriptive, but that's something we're going to do. We'll do better next time. The other thing which was, which I think was really useful is just taking a step back and going, okay, if we want, we don't want to do like three or four things, pick three or four things that you want your visual design to achieve and then look back at those as you go through the design process, looking at your drafts, looking at your, your wireframes, and we wanted these. So we wanted to have a mobile first design, and by that I mean when we look at a different, a specific context, when we look at a login page or a course page, what does a mobile user want was that question, like you're on your mobile, what do you want? And then when we scale it up to tablet, why are we adding features, you know, the principle was to design for mobile. Contextual consistency, may not make sense straight away, but what I mean by that is we want a consistency across all of the different contexts, so the user feels comfortable when they go through them. It doesn't mean that they all look exactly the same, but it means the same UI layout is there so that they know they've got fallbacks if they get confused. Material design, this is Google's material design principles, it's a whole framework, and I'm not going to go into much detail on that, you can Google it and have a look. So we're taking some of their core principles. We don't want to create an Android app that looks like a Google app, but we want to take some principles that would have sensible. And subtlety on the bottom there is just about delighting users with subtle things. Don't need to put loads of flashy things on the site that make it maybe visually appealing. For our users, maybe that wasn't important, it was to put the learning there, but have subtle functionality and subtle bits of information that help them. The next thing we did was, like I was saying, about focus, it's about looking at a context and saying, why is a user here? So you didn't see our old login page, but it was loads of information, it felt a bit like a marketing site, but it wasn't marketing site. You were there to log in, that was the only reason why you were there. So what we did was the primary action here was to log in. So it seemed simple, but we did that. And also the other action is if you are lost, you need to be able to call our student services and ask for help. Secondary actions went into the draw, which is that hamburger menu, and you'll see that on another slide in a second. So another context, we're asking the same questions, why is a mobile user here? And the main thing that came out of the feedback was they just want to get on with their learning. They've logged in and they want to get straight into their learning. They also want to see where they're at in their programme and continue off where they left off. So what we've got here is a regime button at which we developed. So when you click that, it just takes you to the last thing you touched, just simply the last thing you touched when you were last logged out. And also we've got progress indicators with next step buttons next to your course. So you can have a look where your progress is at, and then you can go and jump in where you left off. The secondary navigation here is this draw feature. And this is where all our moodle blocks go. So actually on the main bit we don't have any blocks. The dashboards are a bit different because it's all blocks. But this is where secondary information goes. So in here we've got resources, policies, logouts there, because you only need that when you're finished, and other blocks go there. So another big thing is the course format, obviously. How's the contrast? That's a good sign. So we developed a course format last year. I'm not going to explain it here. It does break the concept of a course format down a bit. But what it basically provides, I'm going to read those articles for more detailed information. But what it does is it breaks it down so that we can choose a layout for sections. So in this case we've got a collapsed topic, which we've seen quite a lot. And inside there we can choose various different layouts. So here you can see a grid layout with some labels inside the collapsed topics. And here's the same course format, but we've chosen to show tabs off, and we've chosen the core modal list layout. So we can combine those as well. It's a funky look. Go and have a read of that. The other thing we did was we said, okay, and this is really important because it focuses you in. Choose a set of activities that you really want to change, that you really want to make really good. So the ones that you use the most maybe. And then for the others just will make sure they look good still because you don't want to give a tool to your tutors or your learning technologist that is, well, not suitable or buggy or. So, yeah, we chose, it wasn't actually small. It was about 10 to 15 activities we wanted to style a lot. I'm just going to show you a few of those. So with Book we wanted to actually make it kind of a delight to read. So like you would go onto your Kindle and that you could sit there for hours. We wanted the same sort of thing here. So we just designed it with the typography in mind and the sort of no distractions. And this is the book module here. Oh, the on-demand navigation there is this. It's the same, you know, it's just styling. So it's the same book module and core. But what we've done is we've made the navigation when you start scrolling up, like to suggest that you want to go to the top, the navigation appears for you. So it's a bit like when you're on your Chrome browser on your mobile and the navigation appears. Forums, okay, this is just a bit of, this is fairly normal styling for a forum. This is probably one of those minor activities if it's in with the brand. Quiz we did, we focused on quite a bit. So we're thinking about, okay, I'm on a mobile and I've got big thumbs. So what I want to do is I want to be able to sort of smash the screen with my fist to choose. But really, it's just reordering it. The draw here, I haven't got a screenshot, but the draw will give you the quiz navigation and it will show you the flags. So if you flag things here, it's going to give you a nice flag. Yeah, I haven't got any more screenshots. So the key things for me were choose some design principles, like how you want to focus in on the visual design. And that's going to be different for everyone that pick those, work with your graphic designers to do that. Work with your different users, come up with user stories, hopefully work together to make them, what's important for your platform. And then look at each page that you want to focus on, the different contexts and choose, you know, well for us it was mobile first, but for you choose what 80% of the people are going to be doing. And it was really for us, it was don't give them too much choice, give them what most people would want. With that, those second reactions, we obviously put that in the draw and people go search for that because it was consistent, like because if they'd failed to find what they want on the main bit of the page, they use it, I use it always now to go to the draw. And that's there, that's where they go after that. And then drill down your key activity. So that's just really focused on a set, it doesn't have to be small, but a set of activities. 80%. That's a question, so. Thank you, Thomas.