The Blend Podcast EP017 – UX Design Case Study : Key2enable

Listen here:

Shownote links:

Transcript:

Brendan Cox  00:32

I thought we’d do a bit of a deep dive into one of our projects, because it’s something that we were quite interested in when we heard about it. Then when we spoke to the team, it was something that we really wanted to be involved in because they aligned with our values. So, I thought, let’s jump in and chat about it in a bit more detail – Key2Enable. Tell me a bit about the company.

Tom Payani  00:57

Yeah, so Key2Enable have come up in a couple of our podcasts at various points. They’re a startup based in the UAE. We got in touch with them through my brother who lives in the UAE and I got in touch with a guy called Jose, who is an absolutely fantastic guy, love him. He’s from Brazil and a super cool guy.

I remember speaking to him about his company Key2Enable, and they have created multiple devices; but their main device is something called a Key-X, which is basically a keyboard that can be used for kids with physical disabilities. Normally with cerebral palsy, but any child that might have difficulty using a standard keyboard when using a computer or a laptop.

First things first, it’s just a cool company, isn’t it? Doing something that adds real value to society. He is just such a cool guy, all his team are really great – his brother and Jenna. It’s just a fantastic group of people who work in this start up and it was, it was really lovely working with them.

Brendan Cox  02:18

It was a no-brainer, really, when we found out that they wanted to do some eLearning.

Tom Payani  02:24

Yeah, so what they asked us to do was create eLearning for the kids, but also for the parents of the kids or guardians, or teachers of how to actually use this special keyboard, this Key-X, the main functionality of it, the main way to use the mouse, how to type, etc.

It was almost like an eLearning version of a user guide or manual for this device. I think it’s interesting to talk about as a case study because we’ve never been asked to do some eLearning like this before. With the constraints of the user not being able to use a keyboard or a mouse to actually do the learning you’re designing. It sounds strange. But if you’re building some sort of elearning, there’s it’s there’s a certain assumption that the user can use the mouse use the keyboard.

Suddenly, I was in a position where I’m on the eLearning authoring tools and I’ve got to try to design this piece of learning step by step, but the user is learning to use the device as you’re building the learning itself. So, this was a new challenge and it was something really different.

Brendan Cox  03:50

Yes, it’s another level of empathy that you have to step back from the learning itself and just literally design it from scratch in terms of the user experience and the user in mind, at every single point of the design.

Tom Payani  04:11

Well, you can’t start off the learning with going – first thing you need to do click on this and type your name. Well, they can’t click on it because they don’t know how to use the mouse. You have to teach them how to use the mouse before they can click on anything. So, it’s almost like this catch-22 of trying to design this eLearning when there’s zero knowledge of how to use any of the tools they have in front of them to start with.

Tom Payani  05:07

In the show notes, we’ll put a visual of the device. And obviously, a podcast is not the best way to show how cool this device is. But it’s a larger device and you have various quite big buttons on the device. Depending on which buttons you press, and in which order, that has an output of a letter or a function or something like that.

So, you have a combination e.g., press the orange button, and then the red button, and then a certain letter comes out with that combination. That’s basically how it works.

Brendan Cox  05:41

Yeah, this eLearning is a continuation of a very well thought out solution that lets you use the entire keyboard with just nine buttons.

Tom Payani  05:53

Yeah, and it has to be like this because otherwise the kids physically won’t be able to use it. This is the beauty of their startup and Jose and his team have massively thought about the ergonomics and the UX of this device. That’s why it’s such a great invention. It is really creative. From an eLearning point of view, it comes with a set of challenges that you’re not going to find doing something else.

Brendan Cox  06:18

Yeah, we have to we have to approach it like they approach the device.

Tom Payani  06:21

Yep. So we obviously did all the discovery phase with them. We went over what they wanted, their needs analysis, what they wanted the user to be able to learn, learning objectives, all this stuff that we would with any other project. The tricky part of this project was the development side of it, as we’ve just explained, on top of that, you’ve got eLearning authoring tools themselves, not naming any names. But they have their constraints regardless. And we’ve mentioned this in other podcasts as well. Making sure the technology doesn’t dictate the learning that happens. That issue is exacerbated in a project like this and was a key challenge.

Brendan Cox  07:03

So talk about some of those specifically.

Tom Payani  07:06

Do you get the user to learn the mouse functionality first? Or how to type first? If you want the user to learn how to type first, then you can’t use text referencing boxes in something like Articulate Storyline. I don’t want to get too boring here on this podcast about the ins and outs of Storyline but to enter information in a text reference box in Storyline you have to click inside it.

That’s fine for any normal project. But if they do not know how to use the mouse, how are they going to click inside the box and start typing? There’s no point teaching them how to type if they can’t use the mouse, if you’re going to do it that way around. So, if you want to teach them to use the mouse first, then you’ve got to go through that process before you even mention the keys. Whereas if you don’t want that issue and want them to type without having to use the mouse first, you can create letters that already exist on a slide that are hidden. And when they type that letter, the letter comes up. Does that make sense?

Brendan Cox  08:12

So you have to basically decide; do you want them to be able to make mistakes and learn from those mistakes? Or do you want them to not be able to get stuck?

Tom Payani  08:22

Exactly. If you have a text reference box, and the user knows how to use the mouse, they can type the letters into that text referencing box, and can delete those letters etc. Whereas if you don’t want them to learn the mouse first but be able to like type the letters, (because that’s actually easier than using the mouse on the device) then they can only type a letter that is hidden, that becomes visible when they type it.

If they type the incorrect letter, nothing happens. It comes back to this idea of technological constraints versus how you want the learning to progress. The client just wants you to do what they want. They don’t care about the technology and don’t care about how helpful something like Storyline is, they just want you to do what they say.

Brendan Cox  09:20

They shouldn’t have to worry about it and to be honest, as the instructional designers, we shouldn’t be in a position where the software does constrain us. That’s one of the things that is hopefully is going to change over time. There’ll be new things that come into play, where we have that freedom to do what’s always best for the learning.

Tom Payani  09:40

My challenge then, from the elearning development side of things, is giving the client what they want. Plus, I want the kids to learn in the way that is most effective and what we’ve agreed upon. Regardless, I don’t want to change what I have to do because of Storyline for the reasons you just outlined.

So, then my challenge is to find a workaround. Everybody’s happy and the learning is scaffolded in the correct way and the learning is getting more difficult in the right way. Therefore, I just have to find a solution that works on the software. We did that in various ways.

I did that by building up the mouse tutorials very slowly. And breaking those down into pieces of micro learning that had many assessments as you went throughout the process, to a point where clicking in a text reference box was easy, because they’ve done these micro learning steps beforehand. Therefore it didn’t seem like a massive learning leap.

Brendan Cox  10:44

Yeah. So you broke the more complex pieces down and then reinforced it as you went through by repetition?

Tom Payani  10:52

Yes, exactly. Then there’s other things you can do alongside that. For example, making sure that the instruction that goes alongside the learning is effective in a UI or a UX point of view. Again, this is where I’ve been influenced by you a lot since we started Blend, in terms of design thinking, and how to visualise learning in maybe a way that you don’t necessarily have to do as much in an education institution.

Something I thought of was because that each function is a combination of pressing different coloured buttons, you can have the words themselves colour-coded in that way. For example, let’s say the left-hand side of the letter B is red, and the right hand side of the letter B is blue. So, just by the user looking at that letter, as part of the instruction, there’s a subconscious piece of teaching there that goes, OK, I need to press this colour first, and this colour second, because that’s what makes the letter B.

There’s things like that you can do to reinforce the learning in a subtle way, rather than throwing it in people’s faces.

Brendan Cox  12:25

I wish I’d thought of that.  When there’s more complex sequences of instructions, traditionally, it’d be in a manual with a ton of text. But we approached it as, how much of this can we animate, so you can follow along.

Tom Payani  12:44

The advantage of colour coordination is that it can make the actual learning look cleaner and slicker. The other major issue or challenge we had was trying to teach this type of learning with these technological constraints. The other thing fitting in a narrative, and fitting in a story that was engaging for the kids, because it’s normally going to be kids who are learning it.

So, there’s one thing making sure the learning works, the learning scaffolded progresses in a rate that is effective for the learner to grasp each micro task etc. But then on top of that, the story and the narrative itself can’t be boring.

Brendan Cox  13:38

Yeah, we started with a script guideline from the client. Then we basically had to come up with scenarios that would work to reinforce the learning with the actual method that we wanted to use. So that was interesting, because we had to lead them on a journey, we wanted to tell a story. Were there elements of that you found different to normal when we produce a project?

Tom Payani  14:02

Well, some things are always the same. Because we believe in storytelling being a massive part of learning. That’s a massive USP of Blend. We always bang on about it all the time. We will talk about our influences playing video games, Choose Your Own Adventure Books etc.

We’ve mentioned this multiple times on the podcast, when we talk to clients. I think that is always ingrained in every project. With this one the difficulty was having an effective story, having a story that makes sense, having a story that engages the user, whilst at the same time making sure the user can move forward in their learning. It was it was extra difficult this time round.

Brendan Cox  14:47

Basically embedding a technical task in a narrative task.

Tom Payani  14:53

Yeah, because normally you have more freedom with the storytelling because you know that the user has more options in terms of what they can do. With the content detectives, for example, we know the user can explore the room, they know how to explore the room, they’ve played video games, they understand RPG video games, they understand getting clues and uncovering things to go to the next part of the story. So you’ve got more scope for an in depth story there. If someone can’t use the mouse, or it takes a long time for them to even type a letter; that’s an extra challenge to make the story engaging.

Brendan Cox  15:29

Yeah, there’s a level of established foundation or knowledge that you have when you come to play a computer game, or you come to do a bit of eLearning. You wouldn’t design a computer game about how to use a computer.

Tom Payani  15:41

We didn’t want to only succeed in the learning side of it, solely in terms of the instructions being clear, (the kids knew how to use the Key-X by the end of this learning) but there was no narrative, there was no story there. Because that isn’t what we’re about.

Brendan Cox  15:59

It is not what helps the learning.

Tom Payani  16:01

It’s not what helps learning. People get bored anyway. So, this was a real challenge, but we managed it because we made the tasks that the user had to do move the story along, for example, they had to type a number, they had to learn how to use the numbers. Instead of a random task saying, type this number in, there was a birthday party that the character was going to.

They had to count the candles on the cake of the person whose birthday it was. Then that’s how they typed the number. So, it’s this concept of making sure the learner wants to complete that task, because they want to see what happens in the story. Not because they’ve been told to complete that task.

Brendan Cox  16:45

Yeah, no one’s invested in typing the number seven. Well, maybe some people are.

Tom Payani  16:52

So, we had to try and make sure that all the tasks were like this. For another example, they had to find a certain place and they get lost, the character gets lost. There’s lots of snakes around, and they’re scared of snakes.

One real challenge for us was how do we fit in the repeat function? How to press one button, and then that button just repeats? To make it make sense in a story. What we did was have this backstory, whereas if you made a snake sound, it scared the snakes off.

Now it makes sense to prototype ‘ssssss’. Because you need to know how to use the repeat function. It makes sense within the story. It is challenges like this we had to think of that maybe sound quite straightforward when we’re explaining it now, but within the constraints of what the user knew how to do, had that extra layer of challenge there.

Brendan Cox  17:51

We mapped it out. The goal is to be able to use the keyboard. The key actions they need to be able to do are type a letter, type a number, press delete, use the repeat key, put capital letters in, put a space in. Then what we had to do was think of scenarios that gave it a context and gave it a flow. When building it we had to then use the workarounds and be creative within the software itself to solve the technical problems. It’s interesting.

Tom Payani  18:22

Something that I personally learned on this project was when you design and play something yourself so much, you’re testing it, testing it, testing it – you’ve got to be very careful to not forget that other people are looking at this for the first time.

And in this case, they also have a disability. So, I’m testing this game all the time. For someone looking at this the first time, this is going to be 10 times more challenging, or it’s going to be completely new to them. I always had to keep that in mind as I was designing it, I had to be careful not to go off on some crazy in-depth narrative that I thought was really fun and interesting, when the user wouldn’t even get past the first stage of that.

Brendan Cox  19:17

The fact that having two of us working on it meant that I could leave you and could be the fresh set of eyes to come in and test it and play it. The other good thing working closely with Jose’s team was they then tested it with the actual keyboard itself.

So, things that we didn’t want to take for granted were testing the speed at which you can do the tasks; but we’re using our technology that we are used to using. So building in that timing aspect of how long things are on screen you could have things like a timer to give someone plenty of time to read a piece of text.

When I was doing animation stuff with text and explainer videos, you read it as slow as you possibly can as the person designing it, and then double the time, because you’ve read it hundreds of times and someone else is reading it for the first time.

It will feel too fast if they’re reading it for the first time. It was a perfect scenario for testing that. Understanding that we need multiple levels of proofing and testing to ensure that it’s spot on for the end client.

Tom Payani  20:42

One of Blend’s USPs is our combined skillset and our experience of different industries, that we’re greater than the sum of our parts. But we wouldn’t have said that you being a fresh set of eyes, or making sure that I don’t go off on these tangents or rabbit holes (because you can you have taken a step back from the eLearning itself) and can look at it in a way that I’m not looking at would have been an advantage at the start.

It came out in this project that actually that was another advantage – one individual Freelancer doesn’t have that luxury.

Brendan Cox  21:18

Also, the fact that I’m from a different background. I’m looking at it with fresh eyes from a different angle as well. Rather than all agreeing on the same things, we actually balance everything out, so we get a good sense of overall functionality working across it all.

Tom Payani  21:43

yeah, and I’m looking at it very much from a point of view of learning design, and the structure of learning and how the user is progressing through that learning. Even though we’ve helped each other in our respective ways, I think I’ve become much more proficient in design thinking. I think you have vice-versa with learning design. At the end of the day, you’re going to look at it much more from that visual perspective, the UX perspective, from a design point of view, and see things that I wouldn’t. That was also advantage in this project.

Brendan Cox  22:16

Yeah, definitely. It’s amazing that something as simple as aligning things makes a difference to the order in which people look at things. The positioning and the placement of objects in proximity to others, the order in which something pops on. I mean, you don’t even have to change much in the way that it animates, you can just have a fade on something very simple.

The order in which it fades on is very powerful in terms of leading the eye around a piece, and that really helps the learning process as well. It’s funny how little touches like that really make a difference. What worked well with this is that you built a great foundation, and then I was able to tweak the position.

Tom Payani  23:07

It was just more validation that we are like greater than the sum of our parts and that really came across in this project. It was really useful feedback for us as well, where our strengths and weaknesses are, and how we can improve those and help each other out.

Brendan Cox  23:23

Is there anything from this project that you would like to continue using going forward? Are there any ways in which the way that you’ve worked changed?

Tom Payani  23:33

It confirmed to me how important the storyboarding process is. The reason why I say that is because of the constraints that certain eLearning authoring tools have. You need to make sure the way you want the user to learn the journey and go through is really thought about before you start any of the development phase of a project.

Otherwise you could really trip yourself up. If you’ve cheated or skipped that bit. That was massively important. Also, learning from a more design thinking point of view, how I can integrate those sorts of concepts in the learning itself. The example of that is the colour coordination. That was something that I like I’d be stronger at in the next project.

Brendan Cox  24:23

Okay, great. That was really interesting. And hopefully on one of the other podcasts, we can maybe get Jose in for a chat to hear it from the client side and talk about more about Key2Enable in the wider context of what they’re doing as well.

Tom Payani  24:40

Cheers, mate. Speak to you soon.

Intro/Outro  24:47

Thanks for listening to the Blend podcast. It’s available on Spotify, Google and Apple. You can find blend interactive content on LinkedIn, or www.blend.training. Don’t forget to like and subscribe. See you next time.