The Product Design Process

Testing Mockups

Paul Boag

Paul Boag

The Product Design Process

Check out a free preview of the full The Product Design Process course

The "Testing Mockups" Lesson is part of the full, The Product Design Process course featured in this preview video. Here's what you'd learn in this lesson:

Paul discusses using mockups to test different visual approaches and to address disagreements among stakeholders. He also introduces the concept of semantic differential surveys, which are used to gather feedback on design elements based on agreed-upon brand keywords. Additionally, Paul mentions the use of comparison tests to demonstrate the superiority of their design over competitors' designs.


Transcript from the "Testing Mockups" Lesson

>> Mockups are another one that I test when you produce more kinda high fidelity mockups of individual screens and that kind of stuff sometimes I will test those. Really what I'm after is basically shutting up stakeholders at this point. Stakeholders tend to be a right pain in the ass when you show them a design, especially if it's a design with new or different branding in.

So stakeholders often disagree as to what the best visual approach is, so I use a bit of testing basically to break that disagreement. Cuz you'll get one person say, I'd prefer if it was green and another person would say, yeah, but it can't be this shade of green because I don't like that shade of green because it looks horrible and it just devolves into rubbish.

So the way I get around this problem is right the front of a project I tend to get into agree on a list of brand keywords. So these are words that represent the brand that they wanna communicate. So do you wanna be conservative or liberal? Do you wanna be friendly or formal?

Do you wanna be, whatever. And actually there's an excellent brand deck the physical card deck you can get or an online tool, you can do it either, which has got loads of words on and they can say whether which words they wanna be. All right, so you get all of that out of the way let them decide what it is.

And then essentially once I've produced the design that hopefully represents their words, I'll run it through a survey. And it's officially called a semantic differential survey, which I love because it sounds really pretentious and like it's fancy. So it must be good personaly if it's fancy. So but actually, it's a very simple thing, so you upload the design to it and you could say something like on a scale between formal and casual, how would you describe this design?

And then they can vote which way they think it is and hopefully it ties up with whatever you've said. And the fact that the CEO doesn't like the color suddenly becomes less important because we know the design is the appropriate keywords. I mean, there are other ways of doing it as well.

I quite like this way where I'll take all the words and dump them into a list and also words other people use. So you'll get situations like, they'll see the design and they'll go, it's a bit uninspiring, right? Let's shove the word uninspiring in there, or it's a bit bland, Shove the word bland in there.

And let's see whether anybody agrees where the real users agree, right? And of course they don't cuz we're not incompetent at our jobs. So, they select the right words, not the wrong words. And now you suddenly told the CEO to go and show them but without being quite so rude about it and having some data.

Sometimes, of course, the other option is I do a comparison, especially if it's a very competitive marketplace and everybody keeps banging on about their competitors. Have you ever heard that? We'd like it to be like so and so. They do it really well, right? Okay, yeah, let's just copy the competition cuz you always win in a marketplace by copying the competition, don't you?

So I've got to the cynical and bitter part of the day, haven't I? I've just noticed. [LAUGH] So essentially what I will do in situations like that is we'll show them our version of the website and we'll show them the competitors version of the website and you'll say, which which do you consider the most trustworthy?

Or which do you consider the most friendly or whatever words you wanna communicate. And hopefully they're picking my design over the competition and you kind of prove the point. And again, these kinds of tests are super easy to set up. And the results basically speak for themselves. So setting them up, you basically just upload the different versions you ask your question.

They get to see the different versions, you just click on the one they like, and then you end up results like that at the end that tells you this version is better. And then as I said it earlier, if you wanna get super fancy with mockups and really wow your stakeholders and shut them up with the whole, did they see it?

You make the logo bigger? Why? Cuz I'm worried people won't see it. Well, they will. Yeah, but I'm worried they won't, right? Okay, fair enough. So, in that kind of situation, I'll either do a five second test and hope that people mentioned the logo. Or alternatively, maybe even sometimes I do eye tracking.

There you can actually do eye tracking now with just a webcam using a service like rely. It's a bit of a faff, and often times I don't bother, and instead I use that eye tracking simulation software I mentioned earlier, which was called Attention Insights. And it's enough just to kind of prove, look at that big red blob over the top of the logo, we don't need to make it bigger.

So that kind of works pretty well in most situations. So that's how I deal with mockups. Mockups are less of an issue in product design, so hopefully, you won't spend too much of your time faffing around with that kinda thing.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now