Prototype testing

In this how-to video, we walk through Figma prototype testing. Discover how to set up task flow tests for your designs and get valuable user feedback. Learn how to navigate your prototype results, analyze user paths, and gain insights into user interactions. Whether you're new to Figma prototype testing or want to enhance your skills, this tutorial has you covered.

Transcript

Introduction

Hey everyone, this is Matt here and today I'm going to walk you through a quick demo of Figma prototype testing using Lyssna. Now, before we get started, I just want to note that there are two ways that you can test your prototypes in Lyssna. We call these task flow and free flow. Task flow is ideal for when you have a specific task or goal in mind.

So, for example, you might want to test out the checkout process of an ecommerce app. In that case, you would have your participants add an item to their shopping cart, go to the checkout, complete a purchase, and the goal screen in this scenario would be something like your purchase is complete, if you have an interstitial message like that.

The alternative is a free flow test. And these are more suitable when you want participants to explore a prototype without any particular set goal in mind. So, you might use this option when you're in the discovery phase of your project and you just want to get some initial feedback on your designs.

So these are the two options that you have, and in this demo, I'm going to show you how to set up a task flow test.

How to create a prototype test in Lyssna (1:11)

So here we are in the Lyssna dashboard, and I'm going to go ahead and create a new test. And the first thing I'm going to do is set my test name and this is going to be called Animal Recruitment Testing.

This will hopefully make more sense in just a second. Cool. Now we're going to scroll down to our sections and we're going to go ahead and add a prototype test section. So, as I mentioned, we have task flow and free flow. If I wanted my participants to just navigate my prototype freely, I could select this option, give them an instruction, just a prompt for what we would like them to explore.

But in this instance, what I'm going to do is I'm going to select task flow. Now in order to set up a Figma prototype, all we need to do is enter the flow link.

How to set up a Figma prototype flow link (1:56)

So I'm going to switch over to my Figma prototype here. And we're in the prototype mode. Now, it's important to remember that in Figma, you're actually able to have multiple flows within a single prototype.

So, in order to specify exactly which flow you need, you go into the prototype tab, and then you scroll down to this flow section. I only have one, but you might have more. And then adjacent to the name is this copy link button, and that's the thing that you want to click. So, we'll go ahead and copy this link, and then go back to our prototype test section.

And simply paste that in here. Now, the first time that you do this, you might get prompted to authenticate with your Figma credentials. I've already set this up here, so I'm not being prompted to do that. But just keep in mind that that's something that you might encounter.

How to pick a goal screen (3:22)

Okay, so for this particular demo, what we're going to want to do is have people interact with this prototype and complete a particular flow.

That flow is: please try and complete the process of hiring the patient panda. And let's see what we're referring to here. So, uh, we're going to go ahead and pick a goal screen.

And our Figma prototype is going to load up. Okay, so what we have is an example application of a recruitment platform on mobile devices, and there are a few different animals that you can select from and recruit them. So let's have a look here. We've got Concentrating Cat, we've got Determined Dog, Magical Monkey, very cool, and Patient Panda.

Patient Panda is the animal that we would like people to recruit. And so what we want them to do is click this Hire Patient Panda button. Okay, and then confirm. And this is the stage, or rather this is the screen that we want our participants to land on. And that's going to be considered our goal screen.

And when they hit that, that's going to be, the completion of the test. So we'll go ahead and set this as our goal screen.

Okay, a couple of other things that we can do also when setting up, we can obviously change our scaling. So this is set in Figma, but you can override it here. Scale down to fit is the default, and that's probably what you're going to want to do 9 times out of 10. So we'll just leave that as is.

And then we also have the option of showing people a success screen or not. In this instance, we're going to leave this on, but sometimes you might want to leave this off. And what will happen in that case is that when participants reach this particular screen, they're not going to get prompted that they've actually completed the test successfully, and they have to manually specify when they feel like they've completed the task.

In this instance, it's a really simple test. There's only really one flow. So it's okay for us to have this explicit success screen displayed. The last thing that we want to do is set a follow up question. It's always helpful to have an additional bit of context when you're getting people to complete tasks.

So here what we're going to do is we're going to ask people how easy did you find this task to complete. And this is going to be a linear scale question. Very difficult. And then five is going to be very easy. Okay, as you're probably aware, Lyssna is a modular test builder, so this is just one section, we're able to add others as well, so we can add, you know, a five second test or some questions. We might want to follow up with some preference test sections to evaluate, you know, which animal they, they like the most. There are a bunch of different things that we can do, but in this demo, what we'll do is we'll keep it really simple and just have the prototype test section. Another thing that you typically want to do as well as preview the test before sending it live. In this instance, we, we know what this is going to look like, because we've just played around with setting up the goal screen.

So we're going to go ahead and save and continue.

How to recruit participants for prototype testing (6:27)

Okay, so in Lyssna you have two options for recruitment. You can recruit your own participants with a unique link, and that's really easy to set up. There are some additional options in terms of setting up your link. But basically you just enable it and then you can share it with your users through email or social media, however you want to share that.

Additionally, you're able to access our inbuilt panel of over half a million participants and that's what we're going to do here. This is also super straightforward, so you're able to specify the number of participants you want. So let's say that we'd like 25 participants. And then there are a number of demographic targets that you can choose from.

We have over 30. And, in this instance, given this is sort of like a, an HR sort of recruitment type app, maybe what we're interested in is, is folks that actually work in human resources. And so what we can do is we can target based on industry and occupation. And the department that we're after is Human Resources.

Now, as we add our demographics and specify the number of participants, all of that information is summarized on the right hand side and it gives you an estimate of the price and the turnaround time. In this instance, 25 folks in Human Resources is going to take about 19 hours to complete.

Obviously, we're not going to wait around that 19 hours. So, what I've done is I've recruited 25 participants already on a separate test. So we'll jump into that and have a look at some results.

How to analyze and share prototype test results in Lyssna (7:59)

Okay, so here is our test. And, the first thing that you'll see is an overview of how many people actually completed this test and reached the goal screen. In this case, 84 percent of our participants completed this test, which is actually pretty good. On average, it took four clicks to complete, and around 9 percent of clicks made were misclicks.

So that gives us sort of an error rate, an indication for, you know, how many steps it might take to actually complete this particular task. We also have a summary of the average duration time as well for completing this task as well. Now, if we're interested in going into some more detail, we can see show paths and click maps.

And what this gives us is an overview of the actual paths that people took from the start screen to the end screen. Here, what we see on in this tab is the most common paths. Now, it just so happens because our demo was really quite simple, we only have the one. But for more complex prototypes, you might have several common paths that people took.

And the common paths are ones that kind of, on average, occurred the most frequently. And we can drill into the specific screens as well. So, for instance... If we're interested on, interested in the homepage, we can see this particular screen and we can take a look at all of the clicks and heat maps that occurred on this page.

In addition to that, we're also able to filter down to specific clicks. So in total, people spent an average of 16 seconds on this screen, and there were a total of 21 clicks and 5% of those were misclicks. Now, if we're interested in looking at just the first clicks, we can turn this all clicks filter off and select the first clicks.

And so now we can see just the clicks that were the first ones that people made. If we're interested in second clicks, we can see the ones that occurred here. Now in this particular, on this particular screen, people only made a maximum of two clicks, so we can see that in the first clicks, there were two people that actually made clicks here.

And then, they sort of corrected themselves and clicked on the Patient Panda one. Okay, one other thing to point out is that you're able to actually download this particular image with the relevant clicks that you have selected as an image. And that allows you to embed that into presentations, such as, you know, Keynote presentations or PowerPoint presentations.

So it makes it really easy to kind of leverage these reports in your other tools. And obviously we can cycle through the various screens and see the different steps that people took. If we want to drill into even more detail, we can go down to the individual paths. So this will show the paths that all 25 participants took, and we can filter these by various attributes.

So whether the goal screen was reached, the time to complete, or various misclick rates. So let's, for instance, say that we're interested in filtering, or rather sorting, by people that reached the goal screen. So now, right up at the top, it's going to be all of the folks that actually completed this test or completed this task.

And you can see, some folks just kind of took the direct route. But others, kind of explored in a little bit more detail. So this person, for instance, actually went from the homepage, looked at the cat profile, then back to the cat profile, to the dog profile, and then eventually, the panda profile, at which point they completed the task.

Okay, and if we're interested in specific details about the participant, we can look at individual responses, we can get their demographic attributes, and in this case, we can see all the different steps they took and their answer to the follow up question.

Now, because I have only one common path here, it's not as interesting, but you're able to actually filter by these common paths as well. So, for instance, if we had multiple paths, what I could do is I could select all the folks that completed this process, and this is actually going to do some filtering because, only 19 participants follow this path exactly of the 25. And if we're interested in just those, we can filter down, and now we're looking at the results for just those 19 participants, and we can see that actually, the percentage of those that flagged this task as very easy to complete actually increased a little bit when we did that, and so we can know from this that the folks that didn't complete the task actually did struggle a little bit in doing so. Now I've shown this in other videos, but I'll demonstrate it again here. Not only are you able to filter on various responses, so for instance, I can filter on this common path here.

I can also filter on just the folks that selected this particular answer here for this question, and we can view just those four participants. Two of those did not actually, reach the goal screen in this case. So we can filter on the responses, but we can also filter on the demographics as well.

So we've got an almost even split between males and females here. And so if we're interested in males we can filter on those responses as well. Actually, the split between these is fairly similar. Okay, so that gives you an overview of how to set up a prototype task. And it also gives you an overview of the result page as well.

That's really prototype testing at a very high level in Lyssna. There's a lot of things that you can do to test various flows, and a lot of analytics that you can dig into to help improve your products. I hope that this little overview has been helpful. And if it has, please feel free to give us a like and subscribe for more updates.

If you're looking for more advice, just general advice on prototype testing, I've linked to a bunch of resources in the description below. And we also have some prototype test templates that you can modify to suit your own needs. If you have any questions, please feel free to reach out to us.

Thank you so much for watching and we'll see you again soon. Cheers.