Workshop overview

In this workshop, we’ll introduce Lyssna’s newest feature: live website testing—a groundbreaking way to see how users interact with live sites and apps in real-time.

Testing prototypes, designs, and static images is a great way to start gathering user feedback, but there’s no substitute for seeing real users engage with your live product.

Using a real-world e-commerce example, we’ll show how live website testing can help improve site navigation and filtering—and how you can apply the same process to optimize your own designs.

About the host

Joe Formica leads workshops and creates educational content at Lyssna, bringing over 10 years of experience in UX and education. His practical, hands-on teaching approach has helped thousands of designers develop their skills and create better products.

Transcript

[00:00:00] ​Let's get started. My name is Joe I'm the design advocate here at Lyssna I'm gonna be your instructor and guide today.

[00:00:11] I've been a senior product designer researcher for about the past 10 plus years, and I've been teaching design research in a whole bunch of different ways. For nearly as long and in my time doing full-time product design and research. I've worked on all different types of projects, all different subject matter area.

[00:00:32] I've worked for little startups to large enterprise companies and in all my workshops, I wanna bring some of that experience and some of those examples into it. And I got a few that I'm gonna share here today. No matter what topic we're learning about today, live website testing, my goal is for you to leave this workshop with some real tangible skills.

[00:00:56] And I'd say even more importantly, confidence to improve your day-to-day work. I want you to know more things that have more knowledge after our hour together here. That's always a good thing. But more importantly, feeling like you're able to take the stuff that we did today and apply it to the projects that you're working on.

[00:01:15] At the very end of our workshop, I'm gonna ask you two questions. One, did you enjoy this workshop? You're taking an hour outta your day or your evening to be here? I admire that, I respect that, and I wanna make sure I deliver on some good material and make it enjoyable. But the other question I'll ask more importantly, do you feel like a better or more confident designer researcher than you were an hour ago?

[00:01:41] So this is what I wanna live up to in our workshop. I'll ask you that at the end and hopefully get some thumbs up. All right, some quick tips for getting the most out of our workshop. First thing I'm gonna share this link in the chat here. Gimme one sec. We just launched here at lista, our Figma community profile, where we can publish templates, workshop material.

[00:02:09] And all the stuff that we use in this workshop. And so we're kicking that off with one today. If you click on this link in the chat, oops, that will open up. Let's see the template for today's workshop. This has everything you need for the workshop today, including the, it'll have the recording the slides, the material some further resources.

[00:02:35] So all you need to do is go ahead and click on that link, and then if you want to throw it a little hard, you can do that. But you're gonna click open in Fig Jam here. You won't have to select this, but it'll open it up in your profile and you will have your own copy of all the material and templates for the workshop today.

[00:02:55] So once again, just go ahead and click on that link in the chat. Click open in Figma and you don't need to do anything else. Just when you, once you click open in Figma, once it makes this copy for you here, you have everything that you need. I'm gonna share a collaborative version of this today, but once you click on that you have your own copy and you can come back to this for all the material that we're using and discussing in the workshop today.

[00:03:22] So let me just give everyone a minute to do that. The link is in the chat and if anyone has any trouble making a copy or wants me to go through that again, just let me know.

[00:03:35] I'll refresh it to see if it's working. There we go. 25 users. Awesome. So yeah, just click that link, click open and fig jam and you will have everything you need for a workshop today and beyond if you want to come back to any of this material. And if we have people joining late, I'll share that again at some point.

[00:03:56] Alright, cool. So let's get into some other tips for getting the most out of our workshop. Everything is recorded. I'll be sharing the recording with everyone after this. Keep the chat open and active. I'm gonna be sharing links in the chat. So you'll be able to see those as I put them into some templates and videos that we'll be watching.

[00:04:18] I'm also gonna throw out some questions to the group and have you share some answers in the chat. So you've already done a great job of keeping that active. Keep it up throughout the workshop and you'll be able to see that also when you get the recording. Finally, stay comfortable, happy and hydrated.

[00:04:36] We have a one hour workshop today, so not too long, but make sure that you're taking care of yourself, that you gotta. A glass of water or something and you're feeling comfortable and ready to learn. And if there's anything else I can do to make it more comfortable or enjoyable, just let me know.

[00:04:56] Alright, cool. So let's get started on what we're talking about here today. The topic of our workshop is stop guessing, start testing, and we're gonna be exploring a new feature and some applications for it from Lyssna called live website testing. I'm gonna get into that a little bit. We're gonna see some examples.

[00:05:19] We're gonna see an actual usability test. Of me picking out some headphones and do an activity after it. But I wanna start out just with kind of backing up on the bigger topic that we're gonna be looking here at here called usability testing. Something I'm sure everyone here is either familiar with or well-versed in.

[00:05:39] But just doing a little refresh before we tie that into some of the specifics of how it's applied to live website testing and the example, we're gonna look at it here. So at its core product design, user experience design is about observing and listening to real people and observing them, interact with something and then iterating and hopefully improving.

[00:06:05] It based on what they do or what they need. This would be the, this is basically how I explain user experience design. Maybe how you do to people who ask what you do, they're not in product design or user experience design. My definition always comes back to something like this, right?

[00:06:22] Learning about how people interact with stuff, understanding their needs, and trying to create a better experience based on that. Now, as we know in product design and research, there are a lot of different methods that we can use. If you joined our workshop last week, we did card sorting, tree testing.

[00:06:42] Lyssna has a whole bunch of other research methods that you can use from preference tests, first click tests, AB tests, design studies. So you know that first slide, I'm oversimplifying it a little bit. We know there are a lot of these more specific research methods that we can use depending on what we're trying to learn about our product.

[00:07:03] And there are even lots of different variations of a usability study. At its core, a usability study is presenting a user with a task, a prototype, a live website, and observing and listening to them and getting their feedback on it as they walk through it. But there are all different varieties of this moderated unmoderated.

[00:07:27] A live website versus a prototype, think out loud, free navigation versus specific prompts that you're giving them. So in, even just in the, world of usability studies, there are lots of different methods and variations that you can create depending on what you're trying to learn. But again, zooming out a little bit, usability testing in general, or conducting a usability study where you are in some way, watching a user think out loud and listening to them while completing a task.

[00:08:00] I would say that's one of the most efficient and valuable ways to improve a product. It's, I'd say, boils down to the most pure version of user research, even though all those other methods are extremely valuable and can be more specific to what you're trying to learn. Observing somebody do something on a website or your prototype and listening to their feedback is an incredibly efficient way to get valuable feedback and a way that really opens it up for you to learn as much as possible about their experience and how you can improve it.

[00:08:37] Getting into the difference here and what we're talking about today, live website testing versus prototypes. Let me know in the chat if you have heard or said this phrase before, test early and often. Who's heard it? Thumbs up. There we go. Test early and often is referring to a kind of a core I.

[00:09:07] Tenant of product design where you're incrementally improving your product. Testing it little by little and trying to make it better at each stage. So if we look at this example, little blurry here, we see some sketches, some more detailed sketches, some wire frames, and then maybe a prototype or visual design here.

[00:09:29] This is something where you might be testing this screen or some of the features or functionality at all of these different points. Maybe early on here you're testing the layout, putting it in front of a couple people, and seeing, what they would expect to do on this page. Other elements they would want to see or interact with.

[00:09:51] Maybe here in wire framing and visual design, you're testing the clarity of it to see if users know. How to add a new event to their trip or their agenda here. So we're seeing all the different phases from really early to more developed and getting back to that phrase test early and often. This core idea that you can improve the product little by little, rather than just building it all from the very start and then putting it in front of someone for the first time, after it's done.

[00:10:24] So that is testing early and often is a good, process to stick by, but I wanna show some of the trade-offs in doing that or testing something early. This is actually not the project, but it's from one of my older courses that's based on a client project I did that was a study guide, basically a vocabulary app for students studying for the GRE and GMA.

[00:10:53] So it was an app, kinda like a flashcard app that you, and multiple choice where a student would be able to learn words through a bunch of different modules and activities. I prototyped this app and tested it a lot when we were creating it, and I got tons of feedback, but a couple highlights here. People loving the hint feature in case they get stuck.

[00:11:17] So there was a lot of feedback on some of these little tweaks or feed features that we added in there to help students study and learn new vocabulary words. Since I did a lot of like high fidelity prototyping animation on this, there was feedback on just how it felt, right? It's really satisfying to swipe through the cards.

[00:11:37] It feels intuitive, it feels like I'm making progress on this. And of course there was a lot of critical feedback too, and things that we wanted to go back and change after running these usability studies and seeing how students use this app or this prototype to study new vocabulary words. So there was a lot of positive feedback.

[00:11:58] When testing the prototype, and there was still a lot of positive feedback once we made it actually a live app. But there were some new things that came up when students went, or users went from using this as a prototype in kind of a controlled test to a live product. Things like requesting for an offline mode I wanna study during my commute, but the service isn't always great.

[00:12:21] Would love to make these vocab cards available offline. Is there an easy way to redo certain words that I got wrong without going back through all the old vocab decks? So what we see here are, some positive feedback from the prototype and the things that were being presented to them, but then some new challenges, requests, needs that come up when people are actually using this.

[00:12:45] In the wild and you start to see certainly some consistencies, but also some new things emerge when you go from testing a prototype that's relatively contained or a smaller scope into a live product that people are using every day in their daily lives. In this case to study vocab words. So the difference is that there are a lot of different things that can come up once you're testing a live site, but the idea is the closer that you can get to that live experience.

[00:13:21] Earlier in the process, the better, right? It's gonna help you identify some of those challenges that are not just basic usability stuff that you might be able to identify in a prototype, but those challenges that come up for users that are happening as they actually use it day to day as they're, again, in this example, studying for a vocab test.

[00:13:43] So I'm gonna do a quick run through here of what live website testing and Lyssna looks like. And then we're actually gonna just see it up close. Basically with live website testing in Lyssna, you're able to create studies with testing real live websites. So previously you were able to test Figma prototypes, static designs, and more.

[00:14:08] Let's say sequenced experiences that you've created or limited experiences that you've created. But with live website testing, you can basically just paste in a URL and run a usability study on that. There are a lot of other options to collect qualitative and quantitative insights. So you can watch someone walk through the website, listen to their feedback as they go, ask them questions before and after.

[00:14:35] A lot of different variations we can do. But the key here is that you're going from testing kind of a prototype with limited functionality to being able to paste a URL in and almost immediately watch how and observe how people are interacting with it.

[00:14:52] And as I was saying here, the key. Benefit of this is when the experience is more real or realistic. It's a live website, not just a click through prototype. The insights are gonna be more reliable. So with live website testing, you're not asking users to imagine things. You're not asking them to fill in the blanks with what they think would be useful.

[00:15:17] Now, there can be some value to that, but when you're testing a live website, they're seeing the exact experience the exact same way that they're gonna use it in the wild. Everyone, every link is clickable. Ev the screen adjusts to whatever browser size they're on. All of those variables that you maybe fast forward through or skip over when, or deprioritize maybe when you're testing a prototype.

[00:15:46] Those all come to light when you're testing a. Live website and it allows you to collect feedback that's gonna be more reliable, insightful, and ultimately just allow you to, in identify some of the challenges and improve them even quicker. Okay. So here, this was my first question when we were started talking about live website testing as a feature in Lyssna, how can this benefit you if you don't have a live website?

[00:16:13] Live website testing is a game changer if you already have a product and want to test it out there and not have to go back to prototypes or recreating things in Figma, but. That brings up the situation. What if you don't have a live website? What if you're creating something new, whether that's a website or a feature, and you got a blank Figma file like this one here.

[00:16:38] You don't forget about even having a live website that's built and functional. You're still in that early phase of trying to define, what this is gonna look like, how it's gonna function, and what you want to test to make it as good as possible. You have an idea, but you have no website, no designs, no prototypes.

[00:16:58] What do you do? And this is the example we're gonna get into with Sound Peak, our fake headphone website that we're gonna work on in a little bit. But the answer is, you can test competitor websites, and this is a huge benefit of live website testing. If you have your own website live, obviously that's a great use case.

[00:17:20] You can see how people are interacting with it, collect that feedback. But if you don't, if you're trying to get a new feature designed, if you have a bunch of ideas for maybe different valuable features or layouts or design choices that you want to create, but you don't really have anything to put in front of someone, one of the best things that you can do is test competitor websites.

[00:17:44] There are lots of different methods for competitive analysis and basically learning or borrowing, stealing, however you wanna put it from other sites that are out there. But actually running a usability test and watching, observing and collecting feedback on how people use it is a really quick, really efficient way to get some valuable insights that can.

[00:18:08] Give you a head start on whatever you want to create for your site. So in this example that we're gonna be using with our headphones we would and are going to look at a couple competitor sites, see how a user interacts with those and use that and use that live website testing feature to start to get some direction for our own product.

[00:18:30] When you're testing competitor websites, you don't need your own product to gather insights. You can have a blank Figma file, no website, maybe just some sketches or an idea, but you can still begin to learn how people interact with similar products or processes. Competitor websites give you real world feedback on similar examples, and this can inform your design choices before you even create something you don't need to wait on or test a million variations of things before you actually put pen to paper.

[00:19:03] And, and start designing something, you can test out competitor websites and already get, like I said, a huge headstart on creating your designs. So here's the scenario that we're gonna be working on. We're gonna transform into designers slash researchers for Sound Peak Audio. A totally made up version of a made up startup that offers affordable high quality headphones and earbuds.

[00:19:34] We're gonna imagine that we have a blank website like you're seeing here. We got the basic layout, but other than that, we're just getting started on designing, what this e-commerce experience is gonna look like and how it's gonna feel to browse and purchase headphones on our site.

[00:19:54] The problem is that we wanna design these product cards, the list view of all the different headphones that we offer, and we need to decide what information we want to include on each card, basically what we want that shop page to look like. That's gonna help users make a quick informed decision and be able to browse through our headphones based on the criteria that matters to them.

[00:20:23] So this is what I'm talking about with the card here. I just used, I think these are just AirPods, some generic headphones here. But we're gonna be working on designing this card based on some feedback that we see in a live website test of a competitor. In this case, we're gonna be looking at the Bose site.

[00:20:44] I wanna open this up for a minute in the chat. So I want you to just gimme your off the top answers for this one. If we're designing a product card like this for, let's say each of the, I don't know, five headphones that we offer here at Sound Peak Audio, what information could, let's say, maybe could or should go on this card?

[00:21:08] In this example, we have a photo, we have the title or the name of the product, and a quick description and the price. Let me give everyone a minute right now. Drop in the chat. Any other ideas, good or bad, of what could go on this card? Imagine a user's browsing for headphones. They're looking through a big list of cards like this.

[00:21:30] What other information could we put on here that might be helpful for users browsing? Drop that in the chat now and then we'll take a look at your answers.

[00:21:40] Nice. Okay, so I'm seeing add to cart button, color reviews, rating dimension, sound quality, other photos bullet list of features instead of paragraphs. Good rating. Recommended for working out nice Gareth. Specifics such as battery life, dimension, weight, color options, good reviews, product reviews. We had the three DI like that cath.

[00:22:10] Yeah, that looks nice for headphones for some reason. I always see that as like a mockup where it's like the rotating 3D version of it. I like that one. I think we had pretty similar ideas here. Here's my loaded up product card with a title, ratings description, what it's good for, what it includes battery life.

[00:22:31] And this is, if you look through the chat, you'll see I'm just scratching the surface here with what we could include in this. We could spend forever coming up with new ideas of, or assumptions of what would be helpful on this card. We could sketch it, wire, frame it, test it, and iteratively try to improve it step by step to make sure that we're showing the most relevant, most important information that our users wanna see upfront when browsing through headphones.

[00:23:03] We can do that. And in some cases, that wouldn't be the worst idea, but it's not really the most efficient way to do this. And what we're gonna do here is skip ahead or give ourselves a little boost rather than starting from scratch by looking at the Bose website and learning from a competitor.

[00:23:21] The idea here is what if we didn't have to guess? What if we didn't have to just throw out a bunch of ideas in the chat and say, I don't know, let's pick the top three or four that we want to test out. Instead of doing that, we can watch a live website, test of a competitor, gather some insights, and then go ahead and design our own cards.

[00:23:40] So that is what we're gonna do for the rest of our class. We're gonna take a look at a usability study of me walking through it on the Bose website. We're gonna hear and learn a little bit about what I would be looking for, and then also look at some other feedback snippets about what would be useful for users.

[00:24:02] And for basically the last 10 minutes of our workshop today, you're gonna be doing a very lightweight redesign of that card based on some of the information that you learned from our live website test of the Bose site. All right, so let me share this in the chat. Gimme one second here. Okay, so this is almost exactly what you just made a duplicate of at the beginning of the workshop, but I made a collaborative version here so I can see everyone's work and we can share some of these at the end.

[00:24:41] So I'm gonna put this link in the chat and. Go ahead and click on it and then find a section for yourself. You'll see there are all these sections here that say your name here, open up that file, click into one, and just put your name there. That's gonna be your little workspace. For today, again, this is exactly what you have in the file that you duplicated, but I wanted to create a version where we could all see it together and compare.

[00:25:12] So open it up. Double click in your name here. Write your name in there. You can change the color here. I'll do it over here. This is gonna be my board. So shows board. You can change the color if you want. Make it your own. And can people not edit this? Let's see. Oh, no. Looks like we're good. Yeah.

[00:25:37] There we go. Lemme give everyone a minute to do this. Every spot is exactly the same. I have way more than we need here, but I just wanted to be safe. So drop your name in there, change the color, and that's gonna be your workspace. As we get into this last activity here,

[00:25:54] I have all the workshop material over here to the left too. That's all in the file, you duplicated. But I have my example here that I'll walk through as we get into each of these activities.

[00:26:03] If you don't have a Figma account or having trouble accessing this, let me know in the chat. You don't need you don't need this. I could put a screenshot or something in the chat too. But everyone should be able to access this, so let me know if you can't. But it looks like everyone's doing pretty, everyone's set up here.

[00:26:21] So lemme give you another minute for that and then we'll get back to. Our slides and get into this first activity.

[00:26:30] All right, let me check back on that and see how we're doing. All right. Awesome. Everybody's got a spot, I think. Okay, so keep that open. We're gonna come back to that in just a second. But I'm going to give a quick intro of what we're doing here. Okay. Let's start running a live website test with Lyssna.

[00:26:48] So I'm gonna show you a live website test of me going through the Bose website. I was gonna get another person or user to do this, but since I'm actually in the market for earbuds, I thought I'd be able to give a reliable user study on this one. So hopefully it'll be helpful. I'm gonna play that it's about four or five minutes.

[00:27:06] I might skip through a couple parts and all of you are going to watch and listen to me, basically think out loud about how I would, what I would look for when browsing for headphones or earbuds on the Bose site. And you're also gonna take some notes on it as well, some notes and some things to listen and look out for while you're watching the study.

[00:27:34] Number one, what information was helpful in deciding on a pair of headphones? What information was missing or unclear and what details made Bo's products cards feel useful or maybe not useful in this usability study, there's a section in each of your boards that I'll zoom into up here that has these questions and a little spot for you to take notes along with some post-its under it that you can add to.

[00:28:06] You don't have to take notes here. It's whatever's easiest for you. If you wanna, watch the video and then take 'em on pencil and paper, that's totally fine too. But I wanted to set this up for you where you can get just a couple notes and bullet points down as you're watching the five minute study that you'll be able to come back to and use after to eventually redesign our little products card down here.

[00:28:31] So feel free to take notes in that fig jam. Alright, cool. So lemme just show you before I play the test, I'll just show you the background here. This is where I set up the listen study and it's really simple. I'm setting up a task here. It's a live website test and I'm giving the user, in this case myself, a task that you're shopping for, a new pair of head headphones.

[00:28:57] Scan the page, click around and think out loud. What details do you typically look for when choosing headphones? What information would help you decide? And then to set up the test, I plugged in this URL, not our Sound Peak website 'cause we don't have one yet, but our Bose website here. And you'll see that there are some recordings and some follow up questions that we'll check out in a bit after we watch the video.

[00:29:24] So a super simple setup for the test. That's basically gonna get us some really good insights on how user. Browses through a competitor site with a couple questions at the end, and of course, a recording to go along with it. All right, so let me copy this. All right, so I'm gonna play, let me share this tab.

[00:29:48] Actually, I'm gonna play the video on my shared screen. I'm hoping the volume is gonna be good for this, but if it's not, I'm gonna put the link in the chat and everyone should be able to watch this. And you can, if the audio's not good, you can just follow along and watch it when I click play. But let me try to share it so we could all watch it together.

[00:30:11] And you guys can take notes on it. Gimme one sec here.

[00:30:16] Do share screen. Share this tab. Tab. Audio share. I'm gonna lower the volume on this a little bit. Put our captions on. Okay.

[00:30:29] Take two versions of me off. We'll just have my tester camera up there. All right, I'm gonna hit play. Let me know in the chat it how the audio's coming through. I put the link in the chat if you just wanna watch it on your own. But I'm gonna click here, let it play through for five minutes, and you guys should be taking notes on the following criteria.

[00:30:49] What is information was helpful in me deciding on a pair of headphones, what information was missing and what details made Bo's product cards feel either useful or not useful here? All right, I'm gonna hit play. Let me know how the volume is and we'll debrief after you have some notes on this.

[00:31:08] Okay? So I have my task here. Your shopping for a new pair of headphones. Scan the page, click around and think out loud. What details do you typically look for when choosing headphones? What information would help you decide? Alright, so I'm on the Bows website here and it looks like I'm just looking at all products here and that includes like some speakers and some other stuff that I'm not really interested in.

[00:31:39] But I'm gonna go over here to earbuds. This is what I would be looking for 'cause I'm looking to get new earbuds. I have big over ear headphones that I, those ones that I like a lot, but I don't have really great in-ear or earbud ones. So I'd go over to this. I'm looking through here. So there's quiet comfort earbuds, which I don't see a price for.

[00:32:07] And then ultra earbuds. These ones I'm not, this is a set, which I'm not really interested in, so just scanning here. Bose, ultra Open Earbuds. These ones look interesting. So just as I'm scanning through this. Okay. I guess the price is on this one here. I missed that. These all look pretty similar.

[00:32:29] These ones definitely look a little bit more unique. The things that I would be, that I am looking for here first is the price, especially with Bose. I know some of them can be really expensive. These are 1 49, some of them are on sale. These ones are 2 99 here, which is probably more than I wanna spend since I, I lose headphones quite a bit, so I'm just getting the names of them aren't really that helpful.

[00:32:56] They're all similar, like what's the difference between Ultra and just the regular quiet comfort ones. In terms of the ratings, they're all, they all have a lot of ratings and they're all pretty high, which is good. The colors I don't really care about as much 'cause I pretty much know that they're all gonna come in like black or white or, a simple color.

[00:33:19] I'm not looking for any really unique color. I probably just get 'em in black or white, although that's white smoke. That's a pretty nice color there. I don't really know which I would click on first. This has time best in vengeance. I'm gonna click on these 'cause I'm just curious about them.

[00:33:35] But I don't see really anything here that, other than the price that is that relevant to me or my decision making. The price is important. The colors don't really matter. This one, I would wanna see the look the fit. 'cause I've never used open earbuds like this before, so I would definitely come in here.

[00:33:57] And see how they look, which, that's actually cool. I've never seen those before. I would definitely wanna see some reviews on that, which I'd probably just look up on my own just to see how they fit. The main things that I care about, besides the stuff I already mentioned of price is definitely like the battery life.

[00:34:17] So this one has up to seven hours of playtime. I would probably go click into the other ones and see what they have. I wanna see if it's good for being active for wearing to the gym or for a run. It doesn't say anything like that here. Let's see what's in the box. Thi this would be pretty interesting to me.

[00:34:38] I don't know if I would need to see it on the listing page, but seeing if there's an extra fit or earbuds for it. I guess these ones don't really need it. Lemme see the FAQs here. The battery lasts long enough, recommended for exercise. So this is something that I would want to know right up front, like that they're good for being active, they're gonna stay stable on my ear.

[00:35:03] So that's something I would wanna see along with the pictures of someone actually wearing it up front. Battery life would be an important thing. And I guess I could look at, oh, this is cool. This is way buried down. This is something that would be really interesting for me to see when I was scanning the page.

[00:35:22] Sound quality, comfort, durability from actual customers. This is way, way down at the bottom of the page, and I had to even dig to find this. This would be really, this one I'm most interested in is like how people are wearing these. One, how they look, but also just like real people saying, Hey, these are great.

[00:35:39] I wear them to the gym, I wear them for this. I never had a pair of these open year ones. So I would say overall, just going back to this page, some of the things, there's not a whole lot of information here that gets me interested in any of these other than just clicking around. And I think the fit and actually seeing it someone wear it is important.

[00:36:04] Some of the technical things like the battery life are important and like what it's good for, right? Does it have a mic? Is it good for taking calls? And as I mentioned, is it something that's good to wear actively to the gym?

[00:36:18] Alright, everybody so let me share back to our regular screen. Take a minute to jot some notes down. Sorry about the captions there. For some reason they weren't popping up. Usually they that's the exact type, same recording that you'll get from a a Lyssna study that you'll be able to download.

[00:36:38] I wanted to put it in Descrip to get the captions working, make sure the volume was good just for the presentation here. So I'm sorry the captions didn't work, but I'll upload a better version of that with the captions, but hopefully you guys were able to hear that and get some notes down on some of the stuff that I mentioned going through it.

[00:36:56] I usually don't like to use myself for even an example, usability study, but again, since I'm. I'm in the market for some new e earbuds. I thought it would work. All right, so there were a couple questions at the end of the study that I answered. I didn't put this in the recording just so you didn't have to watch me type out answers, but what details were most helpful in choosing a pair of headphones?

[00:37:18] I said this throughout, but photos, price, battery life, good for the gym activity or not, and seeing them in ear. And the other question in this study that I answered at the end, what information do you wish had been included to help with your decision? And I said I really had to dig into the details, FAQs to find like the battery life, the photos from people, some of those key features and reviews what comes in the package.

[00:37:45] Whether or not they're good for activity. Still not sure about reviews. They have a lot of positive reviews, but couldn't find any testimonials. I think I wrote, I did see them, the reviews thing at the bottom, but I didn't actually go deep into the testimonials on this one.

[00:38:00] Okay, so I see there are some questions in the chat, which I'll get to. What did you notice? Just drop one note that you took after watching that usability study. Maybe something that you thought was a key. I don't know, a key takeaway or something that might be useful for you to rethink and use from that study.

[00:38:20] Again, going back to our scenario of Sound Peak and designing our own cards for our website. Take a minute and drop answer to any of these or any observations that you had in the chat and we'll take a look at those.

[00:38:33] To Mary To answer your question, I believe live website testing is on desktop only right now. 'cause of the recording aspect, I can check on that for you to make sure. And I know that mobile, like recording on mobile device is a top priority or addition to this. I'll get the specifics of that for you.

[00:38:53] I believe right now though, when you're doing a think aloud with the live website testing feature, it's doing it on desktop mainly. So it's using your camera and also being able to record your activity and like where you're clicking around. But I know that's in high demand to be able to do that on mobile as well.

[00:39:11] All right, let's see Some of the answers here. Information between products available on the cards is very similar. Nothing really to differentiate between them. Customer ratings were useful. The website was uninspiring. Would've liked something more aspirational when buying a luxury item. Yeah. I think I don't know if I like said that specifically, but I did feel a little bit like that where I was like, okay, this just they're all just plopped on here with they prices and really similar names and they're pretty damn expensive too.

[00:39:36] So maybe I, you got that outta my feedback a little bit, even if I didn't say it explicitly. Good. Bethany said, include more detail before clicking into the product page. Battery life, ideal use, workout, noise canceling, et cetera. Good. Cool. So keep all those in mind 'cause we're gonna use them here for our last activity, putting our findings into action.

[00:40:02] We've got some findings, some insights, some feedback from my usability test. Now I'm just one, one person, right? My criteria isn't or any one person's criteria shouldn't be the main thing that you're, making every design decision on. But we've definitely got a head start. We're not guessing anymore.

[00:40:20] We've got some real data, user-driven feedback that can help us start to narrow down on what's helpful and what's not. For this last activity, you're gonna get a little bit more of that as well. If you come back to our Figma file, which I'll share in the chat one more time.

[00:40:41] You will see you might get sent to my board there, but you go back and find your own board and you'll see that we have some additional feedback here. Basically just some other highlights. Still based on the Bose site. So the idea here is that you have some feedback from me and watching the live website test and also some additional feedback for from other users here.

[00:41:07] What we're gonna do in this next activity is I'm gonna give you 10 minutes and you're gonna have, there are more than 10 Post-it notes here. Guess we got what? 15 of them? 15. Post-it notes. I'm gonna give you 10 minutes to take a look at the additional feedback here. Read through it. Take a look at some of the feedback that you took on the usability study and some of the notes that you took down after watching that.

[00:41:36] And. Finally for you to use those together to do a very light redesign of our sound Peak audio card here, since we're doing this in 10 minutes, this is not meant to be high fidelity. This is not meant to look amazing. You can use some basic shapes here, like a button, something like this. Sorry if I'm writing on anyone's card here, but you could use something like this as a button.

[00:42:03] You could draw, I don't know, some star ratings here doing this with my track pad, so it's not good. But the idea is not to have a beautiful card. The idea is to look at the feedback that you got from my usability test. Look at some of the feedback here. See if any themes merge, and use that to create a redesigned version of this card.

[00:42:26] I see there are some questions in the chat. I'm gonna get to those in a second, but I wanna make sure everybody's good on this activity first. Once again, go back to this collaborative fig Jam board. Check out your notes up here, check out the feedback in here, and do some super fast, super rough redesigning of this card down here based on some of the feedback that you're looking at.

[00:42:54] All right, I'm gonna start our, here, we'll go nine minute clock and then I'm gonna do a very quick wrap up after this, just an extra two minutes if you wanna stick around. But get started on this, get some of those rough ideas down. I'll let you rock and answer some of the questions in the chat while you're all working on this.

[00:43:13] All right, so while everyone's working on that, if you wanna mute me and you're just working, go for it. But if you had a question in the chat or wanna hear them answered I'll go ahead and answer those now. So Viv said, how many live website tests do you think might be needed for confidence? Great question.

[00:43:30] It depends. I know that's not a, probably the answer you want to hear, but it depends on, number one, the scope of what you're testing out. And also, I guess with any research initiative, how confident you wanna be with it at, to give you a specific number though, I would say in a study like this where it's relatively.

[00:43:54] Small, relatively contained. We're not testing everything on the Bose site, we're just getting some ideas about the the cards and people scanning and browsing. I would say starting with five to seven usability studies or live website tests with a competitor would be, you'd start to see some themes emerge.

[00:44:14] Again, I'm not saying this is gonna be the case for every single study, but the idea here is that it's probably not gonna be 25, 50, 100 studies until you're starting to see some themes. And typically once you start getting into those numbers, especially with a usability study, you are gonna see some diminishing returns, basically getting a lot of similar themes and feedback, things that you could make decisions on.

[00:44:41] So really more so from my experience, starting with, I'd say five to 10 is gonna give you really a lot of qualitative data and feedback that's. Fifth, that's almost an hour of footage of watching people navigate a website that's gonna get you somewhere and a pretty good headstart.

[00:44:59] Whether that's the con gives you, makes you confident enough to make that your final design is a different question, but certainly would help you refine in on a couple directions that you could even test further. Let's see. How can you quickly consolidate all insights across all participants within Lyssna?

[00:45:21] Yes, you can. That's something that is still in the works. I'm improving. There are some features that'll be coming soon for synthesizing using AI to generate a summary for. Questions that are answered. You can get a transcript for the videos that, and the recordings that you're watching. So there are tools and we're working on more tools to help synthesize it across studies.

[00:45:47] Right now, there are a lot of things to do that with the written answers and more being discussed and on the way for the actual recordings. Let's see. So Hubert, you don't need, technically need to, oh I'd say you should go through all of them to draw conclusions. Even if you do have tools that are helping you synthesize it.

[00:46:08] But it's gonna be useful in a usability study or more open qualitative study to actually hear and see people navigate. So while there are some tools to make that easier and more efficient, it still is a good use of your time, let's say, to actually go through the study and and observe it. All right.

[00:46:29] Leo said, how should we handle apps that require sign in for access? Yeah, you could share test credentials that would work and provide feedback on key features. Yeah, you could provide test credentials if you have a staging site or something where they don't need to log in or like a sample profile set up, as long as it has a URL, you could test that as well.

[00:46:50] But in the way you do that, Leo, or the way I would do it, is creating a,

[00:46:57] in the task that you're giving them, or in the welcome screen, I'm not gonna edit this test, but in the task or the welcome screen, you'd be able to provide those credentials for someone, some to log in, or you could just give them a link that's already skips that process. Those instructions would be right up there, just like you saw in the recording.

[00:47:15] So they'd be able to copy and paste those in, say,

[00:47:19] oh, I don't think anyone messed up the Jamboard. This is looking good, Viv, don't worry about it. There's tons of extra boards too, Viv. So if you find one the point of fig gem is not to be neat. It's to just have everyone's stuff all in one place here. Good questions everyone. Thank you for those. We got about four more minutes on this.

[00:47:41] I'm gonna just scan around and see I. What everyone's working on. If you don't finish these in the next couple minutes, you can come back to it at any time. But I wanted to take us full circle in this workshop to seeing in a very abbreviated example, how we can go from, those learnings, insights, and basically a blank slate into live website testing and actually putting it into action and getting some ideas and directions for our card.

[00:48:11] So do not stress about your final product here, but I do see some good stuff you guys got cooking. So we'll take a couple more minutes and then I will do super quick wrap up and get you outta here in the next few minutes.

[00:48:26] Give out some gold stars while I'm browsing around here.

[00:48:30] Adam, here's got those ratings. Nice.

[00:48:34] I'm gonna delete some of these that don't have and aren't being used.

[00:48:38] Lisa, there you go. Doing screenshot or something there. Nice. I'll get outta your way, but want to give you a gold star. Looking good everyone. Question in the chat here. Would you say the ideal process to use, listen with website testing, run a live website test to discover potential blockers, improvements, run a pre preference test to validate the test idea is good?

[00:49:01] Yes. That is a great process right there. And whether you he were, whether you were using that exact process that you have there, which would be a real for this example, that'd be an awesome start. But even if you weren't using that exact process, the general idea of what you have there is exactly how I do use less on projects, which is to run a more qualitative test, whether it's a live or prototype test, and then start to move into some more evaluative tests putting ideas forth like these cards and running a preference test, some kind of split test, getting feedback on it.

[00:49:38] So yeah, what you outlined short answer is what you outlined there would be an excellent way to tackle this enlist. N and just that overall idea of going broad with the live website test, finding some of the red flags or issues and then zoning in and testing out those solutions. Any combination of that is gonna be a really good setup for actually getting a final design or something that you wanna launch with that's based on user feedback.

[00:50:04] Yeah. Great Hubert. That is spot on. Cool. We're gonna take 30 more seconds, everybody. I know we're at time right now, but I'll do super quick wrap up and I'm gonna come back to this board to check it out. But if you have a minute after the workshop go look at some of the examples that your classmates did.

[00:50:25] All right, I gotta give a gold star here, Gareth. This is looking nice. Got see this. Gareth, I'm going to shout out yours. This is what I needed when I was looking for earbuds. We got the name Premium wireless earbuds designed for all day comfort. Crystal Clear audio, voted best earphones by for working out by tech review, waterproof, noise canceling 18 hour battery life.

[00:50:48] That sounds pretty good. Got our price and our ratings down below this. Here. Let's see. Is this Garrett's here? Yeah, Garrett. Two gold stars for that one. That's what I needed on the Bose site and also some of the stuff that's coming out of this feedback here. Really nice job on that one. And quick design work there too.

[00:51:09] All right, everybody, so step away from Fig Gem for a second. Just from looking at some of the things that you designed, I saw a lot of battery life as the most important detail. Real life use cases, just what I highlighted with Gareth. Great for working out top pick for active wear. A few of you leaned into social proof, like reviews and testimonials.

[00:51:33] Saw a couple of that, a lot of them that had the star ratings and a few that said, see more reviews or link looking for those pricing key features here. Popularity tag. And a direct link to the reviews on it. Nice. We don't know exactly what needs to go on these cards, right? We don't have the final absolute definite decision of what the ideal layout for these cards is going to be, but we are way in, way better shape than we were, even 20 minutes ago on something like this.

[00:52:11] So you can see just from the usability tests, you watch some of those the feedback and answers to questions that I left in there. You hopefully can see how not starting from scratch or I guess seemingly starting from scratch at the beginning, but using a competitor site, using live website testing can be a great way to kickstart and accelerate some of those decisions rather than manually working through and testing every single possibility.

[00:52:40] So I was happy to see some different stuff in the redesigns, but also some similarities of all of you following the themes and some of the key points that came out of our research. So the big lesson with all this, we're not guessing, I. Anymore, right? We didn't have to design anything. We didn't have to prototype anything.

[00:52:56] We didn't have to have a live product, but we're not just guessing and making assumptions about what should go on these cards. We did a little review of a live website test, looked at some feedback, pretty light research, right? But still enough to get us going in a direction and get us feeling more confident about, let's say, the short list of helpful features that we might wanna see on these cards.

[00:53:21] All right, since we're over on time, I wanna get to some key takeaways and next steps. I hope you learned a lot here today, but I like to break down everything into just my three big takeaways that hopefully you'll keep with you after this workshop. Competitive research is a shortcut to better design if you do it right in the past.

[00:53:44] I know that when I was doing competitive research, I was a less experienced designer. I was just browsing through other sites, taking screenshots, getting ideas. This isn't a bad thing to do, but it's not gonna be as helpful as actually watching, observing, and listening to someone navigate through a site, complete a task, and collecting that feedback from it.

[00:54:09] So competitive research in general can be a really great way to kickstart your design process, especially if you don't have anything. But doing it with something like live website testing is gonna make it even that much more impactful. Second key takeaway. Testing, a real experience will get you more reliable.

[00:54:27] Actionable findings and insights. It is good to test early and often. But the closer you can get to either simulating or testing that real live in the wild experience, that's gonna bring you that feedback that is gonna be more reliable and you can more confidently put into action to improve it because you can be sure that you're observing and understanding the challenges that people have in the way that they're actually using it.

[00:54:58] And similar to that one, new challenges will pop up when you move from testing prototypes to live products. And the sooner you can identify them, the better, the sooner you can start to understand how the differences in behavior or goals that shift when people go from participating in a study on your prototype to actually using a website or shopping for headphones in their day-to-day life.

[00:55:23] If you can identify those things sooner that. Correlate to the real user experience or the live user experience that's gonna help you identify and improve some of those so that you don't have a big bunch of surprises when you launch your website live for the first time. All right, quick wrap up everybody.

[00:55:45] My two big questions, you can just gimme a thumbs up or a thumbs down in the chat. I hope you enjoyed this workshop and thanks for sticking around with me for a couple extra minutes here. I hope you felt that this was a good use of time outta your day and that you have some stuff to take forward from what we looked at here.

[00:56:03] My more important question, do you feel like a better, more confident designer than you were, I don't know, an hour and five minutes ago? Like I said at the beginning of the workshop, my goal is not just to give you more. Knowledge or understanding of UX research, but to give you tools, confidence, action items, stuff that you can look at and say, oh, that's what I need to do for my project.

[00:56:25] That's how I'm gonna crack this question that I've been working on, on, on at my job or on my side project for a while. So hopefully you didn't just learn a little bit more, get introduced to the new feature, but that you're feeling more confident to put this stuff into action. And that's why you have the template too, so you can come back to this anytime.

[00:56:44] Check out those files. Keep working on your card, review the slides recording, and come back to the stuff from this workshop as needed. All right, my last thing here, I promise, is the feedback study. I'm gonna put this link in the chat if you enjoyed this workshop, if you have constructive criticism, if you have things that you want to learn next in upcoming workshops, put them in this feedback survey.

[00:57:09] It takes two minutes. You can skip questions if you don't feel like typing something out, but I read every single response to this feedback and I use it to create new and better workshops. And this is actually the last workshop we have on the calendar right now. I'm gonna be going through scheduling and creating a bunch of new workshops for the spring and summer.

[00:57:28] Finally, thank you guys so much for joining. Thanks for taking an hour plus outta your day and for the great participation. Great questions and great and very quick redesigns in the Figjam file here. Really nice work on those. Really appreciate you all being here and I hope it was enjoyable for you. 

Workshop transcript