Prototyping in Product Design

[00:00:00]
>> So welcome back, everybody. We are now moving on to the subject of prototyping. Prototyping is absolutely essential to the product design process. And so I wanna really dive into that and look at it in this session. But I will say that Steve has done an excellent course that is a deep dive into Figma and how developers can use Figma and kind of teaching developers that.

[00:00:26]
So you might wanna check that out as well cuz it's very relevant and I'm not gonna get into the logistics of how Figma works. Cuz of course Figma is not the only tool for doing prototyping, there are lots of options available to us. So let's start off by talking about the role of prototyping and how it fits into the product design process.

[00:00:47]
And that begins by answering the question, well, why do we even bother with prototyping? And by prototyping, I'm talking about doing stuff that isn't in code. You can almost prototype in code and I used to do that a lot more than I do now, actually just build things out in code quickly and easily and now I think there's a place for that, but we're not gonna get into that right now.

[00:01:12]
So why do we prototype? Well, we can test is the big one. Prototype provides us something tangible that we can put in front of users and gain feedback, but also reduces risk. And this can be a big selling point internally within organizations, especially if you work for larger organizations that are often very risk adverse.

[00:01:33]
Saying, look, if we create a prototype and we test that prototype, then we can potentially avoid costly mistakes further down the development process. Because for developers to change things at a later date is a lot more time consuming and a lot more expensive, because developers cost a lot more than designers cuz they're just more talented and it's what I've heard.

[00:01:56]
I don't know if anybody else has heard that. Yeah, so already a question
>> Only Figma prototyping, is that enough? What about HTML prototyping?
>> Well, this is what I'm saying, yeah, that no, not just Figma prototyping at all. Figma is just one of the tools that are available for us to prototype and I'll explore a load others.

[00:02:15]
The one that I'm not exploring is HTML prototyping, but I've got nothing against HTML prototyping. In fact, I used to do a lot of HTML prototyping, and I would argue that is yet another reason why it's good for designers generally to know how to do some basic HTML, and CSS because it means they can build out things in HTML.

[00:02:37]
And actually, it used to be quite a preference of mine to prototype in HTML because none of the other prototyping tools of the time really supported responsive design very well. Now it's a lot better, of course, cuz Figma has got responsive design built into it. Although, interestingly, most designers don't use it to its full potential in Figma, right?

[00:03:06]
They still have a desktop version and a mobile version. And that doesn't really make use of a lot of the power of prototyping in Figma, but we'll come on to that in a minute. Yes, yeah, you first
>> Yeah, I just wanted to share a story about prototyping that did not use like a UI type.

[00:03:24]
>> Yeah.
>> Showcase, but as you may or may not know, connecting to bots or AI is a two-way communication. It's not a typical HTTP put go get post. So it's two-way, and you have to do pings and pongs, make sure it's always up and running. So I had to do a prototype to make that connection to a bot.

[00:03:43]
>> Yeah.
>> And propose that solution to cybersecurity to make sure nothing was interjecting in between that,
>> Yeah.
>> Particular communication. So prototyping sometimes doesn't, I think you're alluding to, doesn't always have to have like Figma for an Adobe XD.
>> Absolutely no, and I think there's kind of product design prototyping but there's also a development prototyping or proof of concepts and that kinda thing.

[00:04:11]
Which are really important because to make something work at scale and with all the security and stuff like that, well, before you spend all the time doing that and that complexity, let's make sure the fundamental thing can work first. So yeah, there's absolutely a role for it there as well.

[00:04:29]
You were gonna ask a question.
>> I was just curious what changed for you.
>> Really improvements in the software. So once Figma started supporting pretty much fully responsive design, then it made more, it was quicker for me to do it in Figma than it was in HTML.

[00:04:50]
Also, I'll be honest, I suspect it also correlated with the slowly declining coding skills on my part. I was quicker in Figma than I was in HTML. But I mean, I'm a great fan of ways, if you are good with HTML and CSS, it makes sense to prototype in the medium that you're gonna be building in.

[00:05:13]
So there's a lot of value in HTML prototyping, a lot of value in it. So yeah, so the second reason to do prototyping is reducing risk, but the third is communication. A prototype is a very powerful tool in helping us communicate better with our colleagues and making sure everybody is in agreement about what we're producing, etc.

[00:05:36]
So what are different types of prototyping are there? I mean, we've just literally been saying that we could use HTML, which I haven't gotten the list, which is really annoying me now. I wish I'd put HTML on the list, but I haven't, I apologize. So there's basically kinda two types.

[00:05:52]
There's low fidelity, so things like paper prototyping, grayscale prototyping, that kind of stuff. And then there's high fidelity, which are clickable prototypes or fully interactive prototypes. Well, not necessarily fully interactive, but more interactive. So broadly speaking, that's kind of how I split it. I guess you could claim that HTML prototypes counts as a type of interactive before clickable prototype, so I did put it in there even if I didn't realize it at the time.