Hi. In this video we're gonna look at user testing tools,  and in particular this thing called Envision. Now, envision is an online tool, whereas like some  of the other things like Photoshop and Sketch  and user, um, user experience designer is, um, you know,  a, an app you download and use on your computer. This thing here is an online one or a SaaS product. Okay? So what I really like about it is that there's a free option  and it's pretty amazing.

Like I love that it's so sophisticated  for an online kind of website version. A SaaS version of a website, um, tool. Now you sign up for it, login,  and what we've done is in Photoshop  and we've kind of created these three flats. Now, if you've never done Photoshop for web design  before, um, go off and do a course, you could use mine  or somebody else's, um, uh, for building, yeah, uh,  website based or app based using Photoshop. 'cause there's some really cool stuff you can do,  um, to make your life easier. Now, in this case, there's three  outboards and they're just flat.

Um, the big thing to notice is that you can see,  here's my three groups where they're actually just,  um, just flats. They don't do anything. So I've exported them as PNGs. You can see them here. There's one, two,  and three, and they don't do anything. So what we need to do is add a interactivity  and you're gonna have to, this gonna be using Illustrator,  um, or InDesign or Photoshop  because they produce kind of flat graphics at the end.

Now we need to add some interactivity. Now, why would you do it? It's so  that we can then send it off to users to get tested. Instead of building a full website,  we just design some flat graphics,  add some interactivity to get a test. The, so the user doesn't really know it's a website. Not a website, okay?

And they just need to kind of use a,  remember that MVP, that kind of like, just enough  to get them convinced that it's working. So you can work on some tests. So that's what we're gonna do. Envision. We're gonna hit this little plus button here. We're gonna call this one UX project, okay?

And it's going to be, you can see, you can test,  we're gonna do a website, but you can do, uh, apple Watch  and phones, uh, apps. So we're gonna desktop one, we're gonna drag some images in. We'll drag these three guys. Uh, you not you, you, you drag 'em in. And now what we're gonna do is  we're gonna go into this first one here. So there's my, what I've done is I've built three sites  where this is the video page.

You click on it to go to the signup page. And then once you've, um, picked a, um, you know, picked a,  uh, you know, your, what do you call it? The, the style of account you want,  you then go to the payment page. So I'm gonna go in here, I'm gonna do the  screen when you are in here. Now envision have amazing tutorials on this. I'm not gonna go through a full tutorial here.

I'm just gonna go through the basics so  that you can get running up and quickly. So down the bottom here, there are the,  your kind of four options. Now, preview mode's where it starts,  you wanna go into build mode quite easy, uh, quickly. And what we're gonna do is add interactivity. 'cause what we wanna do is when this button is clicked,  paid, membership required, I'd like it  to jump to this other. Remember here, this is the other p and g that we uploaded.

Okay? And I'm gonna click save. And maybe when this play button is clicked,  it's gonna go to a different page. I don't have many pages in this example here. So I'm gonna get it to go to the pricing page as well. Save it.

Same with this one here,  but maybe the difference between this one is  that actually no, we'll do that in a second. So let's go into back into preview. So we're in build, going back to preview. And what it does is watch this. Now if I hover above this,  can you see I get the little hand? Okay?

It just means when I click, it jumps to this one. So we're just adding this kind of like real rudimentary, um,  um, what rudimentary interactors so  that we can get our users to test it. So back to this first page. This is how you kinda shuffle  through your different designs. Um, okay, is this little option down the bottom here. So I'm back to the beginning here.

What I might do is, where else have I gotten this? I might have a signup page here. Actually, let's, uh, let's jump to the next page. So let's go to you. So when people get here, I want 'em to click this button. And when they click that button, I'd like them to go  to the last mockup, which is our payment screen.

Great. Same with this one here. When this one's clicked, you can  see I'm pretty rough with this. It's okay. Payment. Great.

So it's got a preview now. So what's gonna happen is actually I'm gonna go  and preview this first page. So they get here,  they click on the paid subscriptions required, they get  to here, then they pick annual  or monthly, they click on join. Okay? And then they get to my payment page. Okay?

And it's just a way of adding in interactivity to flats. And where it gets, you know,  a little bit more sophisticated is  you can fake it quite well. Like watch this. I can go up here  and say, actually this is a, it's on my nav  that I've faked up the top here. So what I'm gonna do is I'm do the same thing. I want to go to my pricing page,  but I wanna say I want to include it in a template  so I can create a template here.

I'm gonna create a new one. Um, and this one's gonna be called my UX project template. Um, project. There you go, click save and it goes green. Then what you can do is you've got this template  and you've gotta go through all the pages and apply it. Now is the weird bit.

As you go to this page, you say,  I would like the same template applied to it. And you see the green button there and I go to this one  and I wanna apply the template to this as well. Okay? So it just means that, um, when I start adding things,  say it's this, uh, courses page, okay, I'd like this  to go back to my first page, the video, okay? I want to include it in my hotspot, uh,  in my template, the UX project. Click okay?

And it means it's gonna be on all  of these flats now, okay? You can see 'em there and he's on this last one as well. Okay? So it means let's go to preview. Now let's check it out. So I can go back  to courses, then go to signup page.

Okay, I can click on this, go with my payment page. You've adding this lovely bit of interactivity. Now let's go into tiny bit more detail  only 'cause I think it's so awesome. Um, you can have a fixed header  and you can decide where this fixed header is. Can you see, I can decide this line on slide here. What it means is if I go back  to preview now, can you see watch this?

Can you see it slides up underneath. Whereas before it was sliding all the way up. If you didn't see it before, if I turn fixed header off  and go back to preview, can you see the courses disappear? It's really common now to have a fixed heading. So you can do this in just in  this quick little mock up here. Fixed heading.

You have a fixed footer as well. All right? Okay, so you've added some basic interactivity. Now what you wanna do is often share it. Now we're gonna go through more official user testing,  um, ways in a second. But let's just look at the basics here.

Click on share the really nice thing about it,  you can just send somebody your URL watch this. I can just copy that and what I can just send it  to people, okay? In an email and they open it up  and this is what they get, okay? They get to see this user experience built into  a website, okay? And it's nice and clean without all the junk. And what happens is they can start working with it.

They can go to the signup page  and click on this and start working through it. So if you're working internally with teams  and you don't have to really present it, um, as a site,  you kind of just showing people where you're at, um,  you know, they can use this quite easily  using that sharing function. And go back to this. You can share it by email. I can send an SMS maybe if it's a mobile version, you want  to SMS it out the link  or you can download it embedded on your own site if you  really wanna take control of the hosting of it. Okay?

So sharing is cool. There's some options down here like the history this will go  through if you've made updates to it. 'cause what you can do is you can, um,  download a plugin for Photoshop. So when you update the Photoshop file,  it actually connects in here  and updates the graphics in this. And this can be quite cool as well. And what will happen is you'll end up  with this version control.

Another nice thing is live share. So if you are say gonna do a Skype call between you  and a couple of the stakeholders, instead  of sending them off a link and you all trying  to do it together, just go to live share. It's like share screen, okay? Share my screen, watch this, click okay. And it means that I can now call everybody  on Skype, share my screen. Actually no call.

You can call everybody  within this app here. So you can send a link  and they arrive here and there's some cool tools. Watch this. I can go through and point to stuff  and they will see your mouse with the you next to it  and the other people on the team you'll be able  to see without waving their mouse, okay? And you can all be talking about it,  you can start drawing on it as well. Okay?

You can say, actually we  need to call this something else. So we're just gonna call it, um, paid subscription. Not this. Um, this is what I'm talking about, Dave. Okay? Why is this red?

It should be green. Okay? You can add type boxes and you can add comments  and at the end of it you can save this thing,  which is quite handy as well. Now there are lots of other features in Envision,  but those are the real core ones. Just adding functionality to them. If you're doing, um, an app rather than a website,  there is a really cool app you can download from Envision  that help you do the same thing  where you can add interactivity,  but it's, it's kind of like a native iOS app.

There's nothing for Android at the moment. Check that might have changed since I wrote them,  you know, recorded this video. But there's an app, um,  that you can actually turn into  interactivity into that as well. Okay? So that's Envision  and that's one of the kind of like, especially one  of my kind of key tools when I'm doing a user testing  before I go off and make the thing.