Day 73- Digital/Physical Prototyping Techniques- 100 Days 100 Skill Booster Sessions

And it needs to learn Ramra. Just can you share your storyboard on the paper prototyping what you created so that it would be what you call. We can have that as a reference so that we can able to start creating a newer one. Yeah, that would be better. Yeah. See if you already created solution, that's okay, no problem. I'll just be very simple and I'll tell you like how being a beginner also you can able to what you call do with this. Okay, that's great. Yes. Welcome to the skill booster sessions. Day 73, guys. Fine, so now let me share my screen so that we'll just get a small context of what we are discussing this particular topic. Okay, so we are in the day 73, it is actually digital prototyping techniques or physical prototyping. See, I'm going to even tell something about for the physical prototypes. Like let's say people are nowadays doing physical prototypes and they wanted to really understand, right? For them also it is pretty much covered. Okay, so first of all, the main context it is to convert your prototypes into digital wireframes. Like let's say Miro Figma, Adobe XT Sketch. See, software doesn't matter. Even you can do it in canva or word file or even. Even nowadays PPTs are giving you good animations. Okay, it is not about that. It is about are you communicating what you wanted to say?

Okay.

To the user. If you wanted to test with your user, if you wanted to ask your user, hey, like let's say can you interact with this and tell me whether it's working or not? If you want to ask that kind of a question, you need something which is tangible, right? You need to have something which is workable. So that is why the more better and precise communication you make, the easier will be for the people to give you the feedback. If you communicate very vaguely, they won't be able to give you the good feedback. Okay, so guide product designers to transition from paper into CAD models. Like people who are there as a physical product designers. I would say you can able to learn a small, small software stack. Let's say CAD Pro E Catia Pro Catia will be little difficult. I would say if you are a designer, you can start with the Rhino software. You can start with like let's say Adobe Fusion360. Okay, so these, these are all like these Autodesk Fusion360. Sorry. So you can, you can learn this non parametric software. It will be much easier, okay? Because you can show a very quick rough mock up model to the user customer and then you can even take a 3D printing out of it and then you can able to test it out in the physical forms.

Okay.

And also for the digital products, I would say this is the first one. Good. So why it is important? 90% of the UI UX designers use Figma for wireframes. Okay. This is a very very predominant software but it is not exactly all the industries are using it. There are many product design studios. There are design studios which is mix of both UI UX and product design. There are consulting firms all these people, okay, so they use predominantly Adobe xt. Tell you why, Because Adobe is a very strong firmware. Okay, It's a protected firmware. But Figma not many industries do trust at the earlier stages. Okay, so even though it is very less expensive one second, even though it's less expensive and it is, it is not a big deal for many industries to purchase it. The, what you call the cloud protection was a big issue. Adobe is a firmware which is protected and every industry knows they've been paying a lot of money for this subscription of Adobe and they get this Photoshop Illustrator. But figma is not that prevalently used. Okay, so nowadays it is getting a little famous. But yeah, you need to understand this, okay? Physical prototyping reduces design iteration be up to 50% Journal of Product Man Product development says that see physical prototype what I mean is not only about the actual physical, it's also about bringing that screens into a reality and putting out into a mobile and testing it out how we saw in the paper prototyping session. Have you guys remember the same like that?

Okay.

And yeah, tips using Miro reduces collaboration iteration by 35% there is another tool called Miro Invision guys okay, you can try this. It's a free tool, okay? It's an excellent tool. You, you would try that? I, I, I'm just copy pasting that in the chat box so that you guys can able to understand it better.

Okay?

Envision InVision is an excellent tool. I mean it, it was, it was in fact very equivalent to. Oh, sorry, it was very equivalent to what you call Miro. But InVision has its own advantages and disadvantages. Okay, I would highly suggest you to what you call experiment with that. Also this is, this is actually developed by Disruptive designs.

Okay.

They have actually developed this one and a lot of people also what you call know about this. A lot of people who are at the design community will actually know about this reason, the very reason why I'm telling you this Is these are little equivalent softwares, okay? If you're able to. If you're able to know one particular software like this Miro or Invision or even figjam or anything, you'll be able to navigate in the other softwares much easier.

Okay?

So that is the major objective of here. Third, converting the digital and physical prototype to help identify the usability errors at the earlier stage.

Okay?

So now I wanted to tell you one major important thing is before we go into the concept, okay, listen to me very carefully. People like Ramraj Jain and they all did once kind of a small stre Balaji in fact Anju did and who else Sharath. I've seen he did. So I would like you to take your prototypes guys. Okay? Paper prototype, whatever you created. I don't know whether you guys created a small what you call a sketch pen or maybe a paper mockup prototype or maybe what you call. I would say, I don't know how did you guys finally implement it. But what I wanted you guys to do is can you take that screen now and bring it to your laptop. I'll give you two minutes time, okay? Second is you should find some possible errors what users can do. According to you, you have not tested with the user. According to you, maybe user can make some mistakes. Jagdish here. Can you try to find out that. I'll give you two minutes time, okay? And other people who have not yet tried. That's okay. Just observe what's happening.

Okay?

Just give me one second guys. Yes guys. Were you able to find out something? Ramraj, other people just give me a quick heads up. If in the WhatsApp or maybe in the zoom chat itself I can just check it out. What are the possible use error which you think maybe you don't have to go very perfect just according to you See I'll tell you what are the impact and importance of doing this prototyping. Because you will know only once if you find one mistake consciously around you. Okay? Just give me one minute guys. But I'm not able to see any chat over here.

Okay?

Missing storyboard conversation frame to frame. It's okay, no problem. Ramraj. Conversation is okay in the storyboard. But can you just take that as a screen? See a lot of people have yesterday built it as a screen also. I'll take one small example, okay? One of the student has shared this. Just a second. Can you take one screen or maybe one particular solution or frame or anything and then try to find some usability error or. Or something like that that's what I'm trying to ask you.

Okay.

One second guys. I'll just take one solution, what people have did it and share it with me. Okay? Maybe I just lost it, okay? Or maybe I'll Sharath or I don't know, Sharath, Ramraj and some people just shared with me Yesterday in the WhatsApp. Can you just quickly re forward it, guys, so that I can able to take that example and help you? Guys, guys. Okay, Ramraj, can you just. It is, it is. Actually what you're sharing is a storyboard. But did you try to take a prototype, paper prototype out of it? That's what I'm trying to ask you. Did you do that? That's okay, J, you can share it with me, no problem. That's a good example. It's no problem. Okay, just keep sharing guys. Whoever wants to share, do it. Meanwhile, I'll take basic concepts, then we can able to jump on to the building the screens. Okay, fine. So I told you three reasons. Industry relevance, seamless collaboration and testing and feedback. This is what I mainly wanted to do because ultimately you should understand why we are doing prototype. It's not to build solution. Prototypes are here to help us understand how this is behaving in the market. How people are able to react to this. That is the most, most, most important thing.

Okay?

The. The way in which you visualize a prototype may be little different than what other people think about.

Okay?

Yeah. So first of all, section one is paper. Traditional prototypes, like let's say now every people has paper prototypes, right? In fact, J, Nandini and Ramraj, Padmavadi, Sharat, I think few people, even Venkat Shashank, a lot of people also sent me the prototypes. But what I would like you to now see is how this is converting into a digital prototype.

Okay?

It is paper. Okay? Maybe in the paper level you. You can think little roughly. You will put some ideas, you will be very raw. But when it comes to digital prototype, there are a lot of restrictions for you, okay? With respect to software, with respect to usability, with respect to the technology. And there is a screen size for each and every web responses. And the mobile responsive screens, you'll have to create accordingly. So that is how you will be able to create a restriction out of it.

Okay?

Yeah. So for collaborative whiteboarding and low fidelity wireframes, Miro is really good drag and drop UI elements to create a basic layout. To create mid level to high fidelity. You can also use wireframes and interactive prototype in Figma. In fact, there is something Called libraries. You can build libraries and create components. And also you can able to easily scale up your design by creating auto layouts. And also you can have some product prototype links to smaller. Do a small, small prototyping.

Okay?

Basic, Basic, very, very basic sketch. This is also a scalable vector based design focusing on precision. Okay, so these are like very important softwares and I would say even you can in fact, you can include Adobe xt.

Okay.

You can in fact use in vision you can't do, I would say in vision you can't do this extensive level of prototyping, but you will get some idea. Okay, fine guys, got it. Fine. Okay, so meanwhile, from converting this into digital into paper prototype, there are multiple steps to do it. Okay, first of all, take clear photos of the paper prototype. I'll tell you what to do in. That's what I told you. Bring those prototypes. Guys, like the paper prototypes. What you want? Can everybody share with me in the zoom chat immediately? First, whatever you did already switch on your camera. Pay focus and close attention. Guys. See if you're here, you need to be full attention and focused.

Okay?

If you wanted, if you're in some other work like let's say if you are still in other activities or sleep or anything, it's okay, fine, you can, you can drop off, it's totally fine. You can watch it later if you're live. I needed to make you do certain activities. Okay, so that's what I want. That commitment I need. I needed you to take a clear picture of it. I'll show you how we can able to create in Miro very, very easily and how we can able to take it into a. What you call actual real building the screens. Okay. It's much easy. There are very good tools available in Miro which can help you do that. Okay, can you share it with me fast? A very good picture. Or maybe this is. This is the quality of camera. I got Jagdish. It's okay, take it. No issues. Yeah, I'm still not able to see. Go ahead fast. Yeah. Okay. Sri Balaji has sent something.

Okay.

Jain Andre has sent something. Okay, fine. So let me take one example. Okay, fine. So now what happens is I'm just dragging and dropping the Jain and the screen whatever she has built. Ramra just also sent a picture. Ramraj, I'm looking for a yesterday's work. Ram Raj, not the day before yesterday. Did you do it on yesterday? I don't think you did it on yesterday. No, no, I didn't complete that actually. Okay, okay, okay. Field work to control no issue completely. Fine. Okay, fine, okay, fine. I got some, some solutions. Guys, just listen to me, okay? See, I'll just share my screen.

Okay.

This is a software called Miro. Guys, I don't know like many people might know it, okay, so most people think it's only for doing brainstorming and all these things. There are much more capabilities what Miro can do. I've recorded a separate podcast and I've also recorded one short video for our students. It's a 40 minutes to 50 minutes video explaining all the features of Miro. In fact, if you needed that, you request me, it's there in a learning management portal. I'll tell you how to access that.

Okay.

In fact, from end to end we have, we have discussed all the features and Miro is capable of doing almost close to what you call high fidelity prototypes itself. Okay, that's being said. We can just now see a small example. Okay, so J has created one solution. You can say like let's say a sign up page. Okay. To create password. So now to do that, what we need to do is we'll have to go for this option. Like let's say there is an option called Tools and media and integration.

Okay.

You can bring certain tools here. Like let's say if you wanted to bring wireframes, you can go and type wireframes.

Okay.

It's a very simple option. See, if you want to build a screen in the phone or tablet or browser or anything, it's up to you.

Okay.

What you have to do is just drag and drop here.

Okay.

If you want to create another one, just drag and drop here. That's enough. Okay. Or if you want to create like let's say what Jnandini is saying. Some, some, some picture is there, right? Okay, so let's take about a small picture. Okay, let's do this picture. And she's saying there is one sign up option.

Okay.

Some text is there. Maybe we can keep something like this. I'm just creating a rough digital way of visualizing the solution.

Okay.

And then she's saying name, Email ID for that name. Email id, phone number, get otp. I think it's a login screen.

Okay, okay.

Name. So you can have something like a. What you call. How we can have name here? Yes. Wait, case. Okay, you have a lot of components here. And then you can have some kind of a solid button. We'll have a name for this. Not a problem.

Okay.

And you have something like a text field. Have a text field.

Okay.

It's Just a drag and drop, guys. Okay, Jagdish. I must. I was looking for something else. It is not available. What you can do is you can go to. Let me first use this guys so that we will know like. Okay, this is what she's trying to build.

Okay.

It's a very, very simple tool. Drag and drop only you can just go to this icons. Check this. I want something else more to explicitly explain here. Okay, so I. I'm not only happy with this. So I want some kind of a profile for my user. You can just drag and drop this icon. Okay, you can use. I want to keep some kind of a homepage for my user. Simple. Whenever he's feeling lost, he can able to go back to this.

Okay.

And I. I needed to actually show what's the second screen like OTP verification. Right? So you wanted to create some kind of OTP verification. A header like this. Okay, you can type out whatever you want. Like let's say if you wanted to use password, you can use this button, right? Maybe it'll be useful for us. Fine. See you can use this password later we can rearrange it. But what else other one. She said enter your code which is sent to your email id. Okay, so we need some four. Four boxes. How she created these boxes. Okay, so we'll try to take something like this. We will try to create it as an empty one.

Okay.

We'Ll create like this.

Okay.

Three digit otp. Let's. Let's call it like this way. Whatever colors you want, you can change it. Guys. Not a problem. Okay, some three boxes is there Then what else? Then she started verifying. So we'll have a small button. You don't have to design any buttons. Guys. Just. Just follow this.

Okay.

See if you're beginner, if you don't know anything, it is highly recommended to just follow what's happening in this. Okay, you don't have to confuse much because first the major objective of doing prototype is to communicate to the user what are you really doing? That is the major objective here. Okay, so you can write some sentences here. You can add some text like let's say something like this as a text and you can type what she has written. Enter your code which has been sent to your email.

Okay.

Enter your code which has been sent to your email. Okay, so now you got the text as well. I'll keep it like this.

Okay, I'll keep it like this way.

Maybe I'll create a bold for this.

Okay.

It'S fine font and I will keep this. Fine. So now what is happening is.

How.

Do I reduce this font? Okay, maybe I have to do like this. Okay, we'll have it like this and then we'll. We'll put a small icon here. This is like a password. It is showing like a password. We don't have to worry much about it. We'll just put a small detail around it. Okay, so here we need to create it like a. Like. Let's say we wanted to create it like. We'll try to what you call space it in the center. We'll also try to put it like a. Like let's say horizontal. This means this are like alignment tools. Basically you can create this. I think a lot of people might be knowing about it.

Okay.

I'm just trying to put this as a protection symbol so that it's a password. So you can able to do one thing. You can also create some kind of a basic, very subtle icons or something like this. And also you can do a state here. A very, very small state. Okay, so you can. You can set icons and you can able to even set a state here. It's not possible in icon. We can do it in this call to action buttons. Can you see this? There is something called state which is like disabled. See, it feels like disabled. That means user will not be able to interact with it. It's a very simple basic animation and interaction. Guys, because you don't have to go for big softwares before first we can start with building some ideas what we have into mind. So same like what Jayanandani has a idea. We're just trying to build it in the mind. Okay, so what we can do, you have to click.

Click here. Okay.

And once this what you call once the screens. You can also create a small button for this so that it will be much easier for me to show that it's a. It's an empty box. Just a second. Maybe I'll take this one. Okay, let's remove this. Maybe if it is having any kind of a. Okay, is this fine? Yeah, I think it will be better.

Okay.

Something like this. You can press this Windows D automatically. It will duplicate. Okay, so you can have this. And then if you wanted to really space it properly, just align the first and fourth element and then click this and go for this alignment option. You will be able to do it perfectly. See, it came. And also you can click this. You can make it horizontal so it will be spaced. So now this is somewhat. My login screen will look like. So what does this really mean? Is this Means that once my user puts all the four digits here, then this click this button will operate here. Okay, I will put like let's say enter here. It's a very attractive call to action enter here. Okay, so here some basic profile picture will come here some home screen will come. If they feel completely numb, they can able to go to this home screen and operate. So this is what is my actual screen. Okay, here I can also bring some fancy images. Like let's say here some names and other things are there.

Right?

Like let's say what. What is. What is her. Like let's say sign up. She wants to create something like sign up. Wait, I'll just. He wants to put a button here showing sign up. Okay, so I can able to go to this icons and add some elements. Like let's say for name. What should I do? I'll try to put one icon. Okay, for name. There is nothing we will try to see in the. In the interaction. Do we have anything? There are a lot of interaction guys. Try to use first of all what is available.

Okay.

Yeah, we can have something like. Like let's say this. We can have something like status. Okay, so once the user completes this, maybe it will show the loading status. Okay, so you can have something like this. You can put it like a very, very subtle screen so that it is actually showing loading.

Okay.

See when you're making digital prototype, you can able to create another shape here. You can do a time animation in the figma that we can do it later. Okay, first let's try to understand how this is happening in real time. See, without even testing with. Even testing with the paper. If you're able to understand little bit. Imagine if you test it with this, you can just show the screens and you can ask hey, do you feel that this action. This option is actually looking like sign up. Will it be comfortable for you? Just a basic level of question you are asking the user. It will be much easy for the user to give you a feedback. This is the. This is the purpose of doing some kind of a physical prototype so that you can able to show the user. Hey, this is what is the screen will look like. Hey, if I'm able to create this, will you be able to type out your name properly? Just a basic question. Okay, you can just modify this one.