High Fidelity Mockup or Prototype

[00:00:00]
>> So, let's talk about creating that high fidelity mockup for a moment. So, there are there are various ways of going about this. But what the one little thing that I would say that you wanna keep in mind is that you do wanna pass this via developer before you show it to the client right.

[00:00:20]
And get their feedback and their thoughts on it. And as well, I will say, as you are creating your high fidelity mockups. If you are not gonna be the person building it, I would highly recommend that as you build it in something like Figma sketch, you keep the developer in mind, right?

[00:00:42]
I know I'm speaking to the converted here, because I know that vast majority of people that will watch this video are actually developers as well. But one of the great things about tools like Figma and Sketch these days is they've got really powerful developer tools if you use them.

[00:01:01]
So just by way of example, In things like Figma and Sketch, use their components and styles in there, right? Don't set the font every size. Don't pick the color every time you'll end up picking slightly different colors and slightly different fonts but instead create a library. So that there is consistency for the developer when they come to do this kind of work.

[00:01:25]
Also another more recent tool that's began to emerge is auto-layout features it's particularly strong in Figma. So instead of positioning all your elements by eye, all that looks about right. Have a robust underlying layout system and then use auto layout to position elements rather than just dragging it around to design.

[00:01:48]
It's gonna make it so much easier when it comes to the build for developers because they can just look at this has got this amount of padding or this amount of margin without having to go well. On that side, you've got 13 pixels because you've just kind of positioned it by eye.

[00:02:04]
And at the bottom, it's eight pixels and it's all a little bit out and they have to kind of create rules around this stuff do it for them use auto layout. So I just wanted to say a couple of little things around that and think of won't anybody think of the developer because they're the ones that have to pick up your horrible mess.

[00:02:26]
Name your layers kids, as well that's another big one that often gets overlooked. Anyway, I digress. Let's talk about quickly to sanity checking your mockups. So I mean, we've done a lot of testing already, and I don't wanna make it any more complicated for you guys, cuz I know time is often limited when it comes to doing this kinda thing.

[00:02:45]
But there is one little glorious tool that is worth its weight in gold right, and it's called a tension insight. And what you can do is you can take your Figma mockup of a page. And you can do I upload it to this website and it's dirt cheap I think it's about $18 a month or something like that.

[00:03:04]
It's not very expensive and it's worth it you'll see why in a minute. You upload your design to it. Now it takes hundreds and hundreds of hours of eye tracking studies to predict with machine learning where people are gonna look at your design right. And this clients lapped this stuff up, [LAUGH] It's only I think of it as a spell checker for for a designer.

[00:03:27]
So it's okay to ignore some of it what it shows you because it's It's not always a 100% right. But, it will give you a heat map, that will show you where people will look on the page, okay? With a 90 plus degree of accuracy, right? Percent degree of accuracy.

[00:03:46]
So you can then show this to your clients and you can prove to them that, if the person is facing in this direction, they're actually seeing the call to action. But if I replace that image with the rubbish when you suggested, then they won't see the call to action.

[00:04:04]
You've got evidence to back up your design decision. And it cuts through so many arguments I cannot express it, you show them this and they'll shut up. So yeah, check that out as it's a really useful tool. Now oftentimes, it's enough to stop at this point, right? You've got your design mockups, you've got a grayscale wireframes you've got evidence to support both of those, it could easily move on to presentation time now.

[00:04:32]
But it might be that you wanna go ahead and create a high fidelity prototype. So that's instead of it being a single mockup of one page, you're creating an interactive experience from end to end. Now this depends on the size of the project and its complexity and stuff like that but it can be a good way of working.

[00:04:53]
But in my opinion, there is very little point of creating a high fidelity prototype of the whole thing, unless you're gonna use it for testing purposes, right? Really, the wireframes should be enough for a developer to be able to see all the different functionality that the mockup is gonna be enough for, to set the aesthetics and stuff like that.

[00:05:17]
So I only do a high fidelity prototype if you wanna do lots of testing. And if you are gonna be testing, we're talking about things like remote usability testing most of the time here. Testing a prototype with a small number, probably no more than six people to see if they can complete critical tasks.

[00:05:33]
You can normally get away with carrying that out just over Zoom. There are specialist tools if you want them. And then there's also some unfacilitated usability testing, where you're gonna test the prototype with larger numbers of users. By asking them to complete critical tasks, and then you're gonna watch back the sessions afterwards right?

[00:05:51]
They're both valid approaches in the first approaches when you're one to one and talking to people, you can ask a lot of questions, which is really good. But if you want large numbers of people, you don't wanna be able to sit in through every single one of those sessions, so instead you do unfamiliar, facilitated usability testing.

[00:06:11]
Again there's some great tools out there for doing that kind of thing. Things like Lookback Maze will help with that. So let's just do a quick checklist on your kind of design and prototyping phase. What you need to keep in your mind and then we shall move on and start talking about presenting.

[00:06:28]
So first of all, identify and draft your content. So don't start with the design start with your content. Run card sorting to help you create your site hierarchy and stop your client putting stupid jargon in navigation and making there too many top level sections and all that kind of stuff.

[00:06:49]
Create your wireframes at least for critical pages and interlink those pages together into an interactive experience which you can then to lightweight testing on. Then produce your style tiles based on those agreed keywords and again, do that very lightweight testing. And then bring your aesthetics and wireframing together into a prototype or a mockup so we can see the complete package.

[00:07:14]
And then just do a little bit of sanity checking on that final design using that attention's insight tools. Or do some last round usability testing, if you've got the budget to do that. So that's a little bit about the process that I personally use for creating design I'm not saying it's the only way of doing it but it's the one that I find manages and controls the design process the most.