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.