Recording Remote Usability Tests with Screenflow + Invision | Maggie Griner | Skillshare

Recording Remote Usability Tests with Screenflow + Invision

Maggie Griner, Senior User Experience Designer

Recording Remote Usability Tests with Screenflow + Invision

Maggie Griner, Senior User Experience Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (16m)
    • 1. Introduction

    • 2. Getting Setup with Invision Liveshare and Notetaking

    • 3. Recording Your Interview with Screenflow

    • 4. Exporting Your Interview

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Screenflow and Invision - a match made in heaven for recording remote usability tests and interviews! Create an interactive prototype with invision and easily record the whole meeting with Screenflow with one click.

Meet Your Teacher

Teacher Profile Image

Maggie Griner

Senior User Experience Designer


Maggie has an extensive background in all phases of the design process, from user experience design and brand strategy to front-end development. She encourages a research-informed process, marrying insights from research with design execution and brand application.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: Hi there. This is Maggie Greiner. Today I'll be talking to you about recording remote usability tests with screen flow and envision app and vision. App is a great tool. If you're a designer, you you are probably already using this application on a daily basis. I knew. I dio It is a great way to quickly create interactive prototypes using static mock ups, and you can also create what's called a live share presentation. So from from your static mock up or your prototype and envision APP, you create a live share link, and it allows you to then share that link with, you know, internally or with a client. Um, and easily kind of go through your concepts and point out certain areas and drawn things. And anyway, I'll show you what it looks like. But what I really that kind of the point of this is that I'd like to talk about how you can use envision, live share and screen flow together to record usability tests. And, you know, this would be a remote usability test. Um, where you are not in person with the interviewee, Um, and so that's something that I do have done a lot of recently, and so this, in my experience, the combination of these two applications is has been the most simple way that I found to conduct and record a remote usability test, so I hope that it helps you as well. 2. Getting Setup with Invision Liveshare and Notetaking: Okay, here we have a typical set up that I would use for recording a remote interview. As you can see on the right, I have my notes set up and a a great tool that I love to use is called paper by Dropbox. It allows you to quickly spin up thes these text documents that can be there, you know, hosted with Dropbox. And you could easily share them with your team or 80 anyone that you need to share it with , Um and it has, you know, live collaboration similar to Google docks. But it has a bit simpler interface, so you'll see that I usually like to get set up with notes, have a little bit of information about the interviewee and have a little information about how to introduce the the actual usability test and the questions that I would like to ask and and then a space for taking notes in a slightly different format. So it's easy to read afterwards, Um, and maybe also a couple notes around exactly what we're going to be showing, you know, and it's something like, be sure to show the screenshot of the home page, So I know, with with each question what exactly I'm going to be presenting to the interviewee now? Uh, thes notes would not be seen by the interviewee. Uh, you know, they would only see the envision live share. These notes are only for me, but in my recording, I usually have the notes in the recording. Um, because the purpose of the recording is usually too is usually just for documentation. Eso that I can go back and review what that person said exactly, and also to if it if this is for a client project to be able to provide the client with those interviews so that they can watch um and so having the notes in the in the recording is usually fine and probably valuable. So on the left, you'll see the envision at product. And what I did was create a prototype for the specific project. This is an example project here. Uh, it's just a screenshot of the rich role website, uh, one of my favorite websites and brands and eso. You could see her that you create a prototype and you can select a variety of different device set ups of and then that you know InVision app, Uh, creates a, you know, a specific Roe's resolution template for that device, Um, and allows you to, you know, kind of view your mock ups as if you are viewing it with that specific hardware, which could be really helpful. And in this case, I makes it cool that, you know, if you need to test for an iPhone or an apple watch, but you want to do the remote usability test using your desktop computer, you could do that using envision app, um, and recording it with screen flow. What I've done is just create a desktop project, and so just gonna click into this screenshot now, I would go down here on the right to create the live share, so let's just see what this looks like. Okay, so now you can see that I can, you know, my my my pointer is available. Um, and the interviewee would see exactly, you know, they would see my name, and they would see exactly where I'm pointing, and they would be able Teoh actually use their pointer as well. Once they get in, they conflict. The arrow tool. Um, and both of us would be able to point around, which is really helpful for usability test. Um, you know, and I think is probably the primary, you know, kind of the primary thing that you need is for them to be able to point to things. And, you know, you're also capturing their voice with screen flow. Um, now, here is the link that you will share with the interviewee, and this is another great benefit to using live share for usability tests is this is a simple link that you would send to the interviewee, and they do not need to create an envision app account in order to log in and see this live share. Sam makes it really simple. You just send him one link, and then I think they see a scream where they enter their name, and then they're dropped directly into this experience. So it keeps it really simple. They don't have to download anything or sign up and, uh, just keeps it, keeps it flowing, keeps it easy. And I think I think that's all I wanted to say about the live share. Uh, so as you can see oh, also, you would be able to, um, click through. If you created a prototype with live share, so envision allows you to create prototypes so you know you can show different to interactions on your prototype, and those would you would be able to demonstrate those or include those in your usability test during the live share. So that's another great perk. And as you can see, this is a pretty simple set up, and in my experience it has worked pretty well. So let's take a look at screen flow and exactly how we would go about recording the interview itself. 3. Recording Your Interview with Screenflow: Okay, let's use screen flow to record our user interview. What I've done here is taken a screenshot of the very first window that you will see when you go to create a new recording using screen flow. I can't show you how to do this in real time because I'm actually using screen flow to record this lesson. So I just took a screenshot here, and this is really kind of the key step for making sure you get your audio not only from your microphone, but also from you want to make sure this box is checked here, record computer audio and you know so the process that I usually go through is is to provide a conference line to the interviewee and and a to come the company I work for right now low. But we have an internal product that spends up conference lines, and I can just send them a quick phone number with the dialling code. So but you can use any conference line ah, product or system that you usually use. Um and you know, send them the envision lives here link in the conference line that they should be the only two things they need to actually join the interview. And when they join that conference line, um, what what you'll do is has joined the conference line using a an application that is, that is local to your computer or a Web browser. So, for example, you could dialing using Skype or what I do is use Google voice on dial into that conference line. But you know, you want to use a program to dial into that conference sign that you know you're dialing in , um, via, ah, VoIP or voice over Internet Protocol, I believe, is what that stands for. Um, so you're dialing in over your Internet connection and your compute through your computer so that so that through screen flow you can actually capture that computer audio. So this would be checked and, ah, and also the audio from your microphone. Um, so you will get all of the audio from the interviewee whose dialed into that conference line and also from your audio. And that's kind of a tricky thing to do, um, with other applications like quick time, for example. And that's really why screen flow makes this process so easy because, you know it's just one check box to make sure that you also get that computer audio. Um, and then you would you would simply hit record. Um, and you know, you'd usually want Teoh get that recording process going before you know, a few minutes before the actual interview time. I'm and I think that that is about it. Oh, there's one more thing I want to tell you is to make sure to turn off, um, any personal applications that are running in the background, for example, I use slack on a daily basis and logged into a lot of slack channels. So you either want to make sure you mute all of those channels or close out slack completely so that you're not getting any any kind of personal notifications or work notifications popping up and interrupting your interview because your entire screen is going to be recorded. So you just wanna make sure and close out any of those applications and you will be good to go 4. Exporting Your Interview: all right, So at this point, we have recorded our interview and the interview's over, and you would use this menu at the top of screen flow to stop the recording, and you would see this window here that will show you your eye audio and screen recording in screen flow. Now, we would want to export the screen phone flow file, um, as an MP four file and and, you know, as a an MP four Heil, we can Then either just drop that file on into Dropbox and easily share that way with anyone We need to send it, Teoh, or you can also up, then upload it to, you know, another hosting platform like YouTube. For example, If you wanted to upload it to YouTube, you can easily, you know, adjust the privacy settings so that it is a private video. And then if you need to share it with ah client or internally, um, and then you know, you could use the commenting system to kind of have a discussion around that interview. You can do that, or you could just simply drop it in drop box and, um, you know, store the videos there and anyone else that did not attend the interview that you need to share these thes files with can easily access it. So what we would do here is just go to file and then export, and you'll just rename your you're in p four file anything that you'd like to where you'd like to store it. And then I usually just stick with Web high as the preset, and then you would choose whether you'd like to scale it down. Um, usually all select 75 percent scaled down or 50%. 50% is probably really good, cause you'll still be able to see all of the details. You know it'll be 12 80 1280 pixels by 720 which is still pretty big. It's big enough to kind of see the details, but it's small enough to where you can export it, and it's not going to be a huge file size. Then you would just hit export, and it's going to save to whatever folder you have chosen here and you will be good to go. So I hope that this I hope this lesson has helped you on da Please let me know how your future user interviews go and let me know if I can ever help. And I will see you next time.