Prototyping Phase

[00:00:00]
>> So the prototyping phase, let's look at what that is and how that fits in. So you'll get to the end of the discovery phase and you will have a pretty clear idea of what's gonna be built, who it's got to be built for, any restrictions or limitations on that, right?

[00:00:18]
So you're gonna feel well informed and empowered, which is gonna give you enough of an idea to go, okay, so this is gonna be about 20 templates, it's gonna be this kind of functionality, you'll have a rough idea in your head. That should be hopefully enough for you to cost up your prototype phase, right?

[00:00:34]
Not your build, just to prototype phase. So you will cost out your prototype phase. So what goes into that? Well, first of all, what is your prototype phase? It's where you design, set the design direction, right, and you establish the scope of what's gonna be built. This is by far the biggest design part of this overall flow, obviously.

[00:00:54]
So why is it so important to do? Well, prototyping can not only help brief the developer as to what's gonna be built, but it can also be used to validate the design approach and avoid costly changes once you've started the bill, which is a lot more expensive. Also helps to better define that build so that the pricing can be more accurate.

[00:01:15]
What goes into a prototype? We can do all kinds of things. You've got to establish the aesthetics, if there hasn't already been established. So brand and that kind of thing. You might want to do some high fidelity design mock ups of some key pages. You wanna get into some wireframing of the site and how it all the different templates interact with one another.

[00:01:36]
And you'll probably wanna do some usability testing to find out whether people can actually use an interact this. And you might wanna do some aesthetic testing, and we're gonna come on more into what that is later. So just to kind of give you again, the minimum you can get away with doing in that kind of scenario if you can't afford to do all of those things and you don't have time for all of those.

[00:01:59]
Obviously, your high fidelity mock up is kind of a requirement. The client needs to know the design direction, the look and feel. And you need to be able to demonstrate the website's aesthetics and how the website works within the site structure and that kind of thing. But I would also say as a minimum, you need to be producing a navigable what, grayscale wireframe, right?

[00:02:25]
Which is include some draft content in there, mocks up the proposed functionality. What's gonna be involved. Now you might at this point choke a little bit on this and go, well, hang on. I mean, I'm working on really low end projects here. A grayscale wireframe that takes takes time, yeah, it does.

[00:02:46]
But I think it's time you will get back through clarity about the project direction. You'll get it back to avoid scope creep later on down the line, etc. If you're really, really tight, do what I did only yesterday. I had a client with a startup idea, they only had a very couple of few hours of my time.

[00:03:08]
They just wanted my thoughts and my impressions about something and I literally created all the pages of this app as I saw it in notion, right, and just dumped in what I thought would go on each page, yeah, bullet points. That is a type of wireframe, it's a very basic one but it allowed this client to navigate around the site see what would have been on each page, interlink those pages together.

[00:03:34]
It only took me a couple of hours to do the entire site. So you really can scale this to any size project, obviously on a much bigger project, the kind of projects you work on, you're gonna want a full interactive grayscale or maybe even a high fidelity wireframe.

[00:03:53]
Although sometimes I think high fidelity wireframes for an entire application is a bit overkill. But sometimes it can be worth doing, especially if you're going to be doing very in depth testing on it. So, yeah that's another minimum thing. Also there are some other minimum things that I would do in this stage.

[00:04:10]
And again I know this feels like a lot of work, but trust me it's worth it. I would test your aesthetics, color, typography, image styling, right, all of those things are perceived differently depending on your experiences as we talked about earlier. And if you don't test your aesthetics, you're gonna get into arguments, right, with your stakeholder.

[00:04:29]
Your stakeholders gonna go, people won't like that color or that image. And then you get into iteration hell. If you test your aesthetics, rather than have a discussion about them, then that makes a world of difference. You do away with all of that in this debate, right? So I test my aesthetics even if it means I'm gonna run on a loss on the project because it's predictable.

[00:04:54]
It's a predictable loss while endless iterations and debates and discussions could cost me way, way more, right? I will get into exactly how to do that in the later section. And then finally, I would suggest some form of usability testing. Again, is equally worthwhile for exactly the same reason, that it can get rid of a lot of debate with the client.

[00:05:20]
And then of course, from the clients point of view, if the user can't find the content on the website, if they don't understand the functionality and comprehend the content, then the websites failed. So really some form of lightweight testing is really worthwhile. And you might be thinking, look, I don't have Have the time or money to test well, I would say don't have the time or money not to test.

[00:05:43]
Carrying out this kind of testing really isn't a luxury, it's essential to getting the project over the line really simply and easily. And I will show you how to test in the lightest possible way later on.