Ep 309| Mistakes in Digitalising Prototypes (Digital/Physical)

Many people struggle to make their prototypes into a digital products. Many people have a problem in understanding what is mean by low fidelity, wireframe medium and high fidelity. The very reason why I'm recording this podcast is to understand it's a iterative product lifecycle development. If you are not able to get this point over the time, you will be wasting a lot of time in executing the projects in real time and a lot of iterations will not be able to capture and the effort will go, time will go, budget will go, but you won't be able to end up in a product which is usable for most of the users.

Okay?

So in this podcast I'm going to break down the mistakes. I'm going to tell you how we can do it and how we can able to increase your productivity being a designer.

Okay?

So take a lot of notes, just jump in. Welcome guys. Welcome guys, welcome. Welcome to this episode. Thank you for staying tuning here. In this episode we are going to cover how to digitalize your paper prototypes or prototypes, whatever you have into digital solutions.

Okay?

If you wanted a live breakdown of this, I would recommend you to go to my YouTube channel and watch the live section what we have. Okay, first of all, let me tell you why the skill is important before going and understanding the mistakes. First of all, this is actually 90% of the UI UX designers are using this Figma or Miro or other things to do some kind of a wireframes. It is very, very relevant particularly in this Skill set.

Okay.

UX Design Tools survey says that second, physical prototyping reduces design iterations by up to 50%. The very reason why I told you it saves lot of time is by doing a meaningful prototype and testing it with the user, it would be much easier for you to reduce your time to the market. Journal of Product development says that second, it is more seamless in collaboration like let's say applications like Miro, InVision or maybe Figma. So these are like superb tools where you can collaborate in real time with your teams whether they are working remote or physical. It reduces your iteration time up to 35% if the tools is available for you.

Okay.

And it helps you to do a very, very efficient testing and get a user feedback from your user whether it's a digital or physical product, guys, it helps you mainly get the usability, particularly in the earlier stage of your career, I mean earlier stage of your design process. Why? Because when you get to forecast these things in the earlier part of your product development, it would be much easier for you and your audience to also resonate with. Okay, this is what is really expected in this product. Okay, this is what this design application is really meant to be. Okay, now the functionality is not meeting. Now let's go and change it in the basic wireframes itself or basic prototypes itself or basic paper prototyping itself. Right? It is much lesser cost and lesser time when you change it in the initial stages rather than changing at the last point of time. Okay, so you need to understand now let's talk about physical, let's talk about the digital tools. First of all, I'll tell you, you can take a tool called Miro or Figma or Sketch or Adobe XT or InVision. I would say any tool is. Okay guys, not a problem. Okay, Try to understand whatever sticky notes you have, whatever paper prototype you have, you can able to scan a neat picture out of it.

Okay?

Even in Miro there is an option called capture stickies. The moment when you capture those stickies and put it into the gallery automatically, Miro will take the text out of it. Based on the text, you can able to easily convert that into a wireframe. So it'll be much easier for you when you start doing it in a more easier way. Okay, so there is a tool called Lizard. Okay, you can also search out in the, in the Google. It will be much easier to understand how it is going to be useful when it comes to taking a pictures and uploading it in your, in your Miro file or maybe, maybe in your Figma or anything. It can be much, much useful. Okay, so I'll tell you the basic functionality of Lizard, what it does. Okay, See uizart. In fact it is not Lizard, it's a UI Z actually it's an AI powered design tool. What happens is the moment when you put your pictures or scan the, what you call the stickies, it will automatically take that into a text prompt and automatically it will give you a wireframes how we have created. It will create a flow, it will create an arrow, it will create a basic wireframe model. See, by using this guys, you can able to convert all your text into a quick visualization. Particularly when you are iterating lot of concept and accelerating your prototyping phase. Super, super useful. Majorly when you are using design exploration, this UI Z will be extensively useful. Okay, so you can do it in Miro also. But this is one such tool you can to try. Particularly when you're presenting, when you're collaborating, particularly when you're even educating your team. This is the most, most, most interesting tool okay. So please take care of it because this tools is very, very prominent among the design world.

Okay.

Maybe your, your company might not use it, but yeah, you can able to ask your company to invest on this kind of a tools so that it is much easier when it comes to real time prototyping.

Okay.

Yes. And let me tell you the people what mistakes they commonly do. This is what mainly this podcast is about.

Okay.

They focus too much details on the first level of wireframe concepts or prototypes itself. It is not really required. It is required for the user to understand what solution you are seeing. It's as simple as that. The moment when you make it, like let's say if you're making a transaction page, like let's say if you're making an educational application or anything, you just have to tell, hey, by clicking this, you will be able to get the concept of this particular topic. You'll be able to do the assignment here, you'll be able to create a summation here, you'll be able to get your scores here. Simple, right? Let's say if this 4 option is there for you to communicate with the user to get feedback, it is your responsibility to put that four screens and build it and show it with just a basic level of information. If your customer or client or maybe your audience is saying, hey, I did not like this concept way of learning, I would like to learn in a more interactive way. See, if some kind of a feedback comes like this, then you will have to spend all the time to reiterate again the moment when you do it in the earlier wireframes and prototype stage. It is much easier for you to scrap that sheet and then you can take a new one and do it even in the digital way, it is much faster to do it. Imagine if you build this solution and then if you also detail it out and then if you also made a full high fidelity wireframe and then you go and ask the user if he says any feedback or your client doesn't like it. You will have to reiterate all these things. And making these three types of wireframes will take huge amount of time and effort. Okay, so think about it. Because low fidelity wireframe is a very rough way of paper sketching. Or maybe you can do it in tool or anything, no problem. It's just to communicate. What is the point you want to say? Medium fidelity wireframe means it will have some more complexity, it will have some placeholders, it will have some logo, it will have some details, it will have some proper what you call Flow for the user, high fidelity is close to the reality, close to the real prototype. Imagine guys, to build this kind of a three stages. It takes time in order to reduce this and make it even more faster. That is why we do this kind of a user testing and ask the feedback at the very, very earliest stage. The moment when you do it, you will be able to get a proper input. Then you come back to your come back to your wireframes and then you create a flow like let's say in 10 steps. If the user is able to achieve this, can I make it in only eight steps? Can I create the call to action, but a little easier, can I ask the customer, hey, instead of you telling that you wanted to learn in some kind of an interactive way, what would you suggest? You can ask your client, you can do some benchmark study. You can also always go back to the earlier process and bring what could be the most optimal way to put this project into it. And then you brainstorm and build the project. The moment when you do it like this guys, you will be able to speed up your process like anything. You'll be able to classically go and you will be able to even iterate faster. The more iterations you make, the better usable the product will be. The better user centric the product will be Airbnb. I'll take very case study. I guess they do a complete iterative testing with the user cycles and they make it usable for all the people. Particularly with respect to login, with respect to admin login, with respect to people login. Airbnb has two logins, right? So you can able to use it very very easily because they have iterated it multiple times by doing this kind of a low fidelity and medium fidelity wireframes. And you can see this n training club app. It's a beautiful app. They did the workout navigation and they created some Figma prototypes and it's also available in the online. You can able to see it okay. And also Spotify discover weekly app. Like let's say if you say a Spotify application music, what kind of a discoverability is there for each and every week list of music? You can build some kind of a medium wide fidelity wireframes in Figma to do that. But you can also compare with what people have did in the online. It's available in the online, you can able to navigate guys. Okay, simple Google search or YouTube video will give you that. But you can understand why people have did that kind of a medium fidelity because they have to make a lot of iterations, they have to make it more usable and friendly so that people will be able to use it much, much, much faster.

Okay?

And then once with this clarity, you started building your solution, it will have no iterations. Guys, can I tell you something? People who do this kind of additional prototyping improves the design clarity by up to 70%. Cognitive Design Journal says that. Why? Because people will understand very faster what you're trying to say. First, you will itself be clear being a designer. Prototypes boost ideation by up to 60 percentage. Because the moment when you have some prototypes, let's say if you're doing a physical design, if you're an industrial designer or something, you will have a much more clarity. Guys, you will have a much more clarity in showcase what people like, what people do. And you will also develop more ideas if people are liking this. If people are not able to interact with this button, can I keep it even more bigger? Can I keep it even more smaller? So you will take that sides to understand how this is happening in real time.

Okay?

Particularly collaboration efficiency improves. Figma reduces your iteration time by up to 40%. I would say any tool, not just FIGMA tool, okay? UX tool survey says this. So understand guys, it is not just to create some prototypes faster and put it in your portfolio or maybe submit to your management. It is all about building that patience and making some prototypes and testing with the user and iterating it before you go into building a full fledged prototype.

Okay?

The time when you do this and you understand this, your development life cycle will come down like anything, okay? Teams who are using it, they are like 40% saving their time. I already told that you have to think about it. I hope this podcast would have been a great value and importance for you. So next time when you're building screens, please take care of all these things. Next time when you're building prototype into digitalized solution or physical solution, please think about using the right feedback from the user with a very low level of prototype and then test it out to get the feedback. Then you develop the full one.

Okay?

So thank you so much guys. I wish you all the best for your career. And if you want to attend my upcoming webinar to know the six step formula, how using this particular thing you can get your land. You can let your dream job in just 90 days. And particularly if you're already a designer, how you can able to 3x your paycheck in just 90 days. I'm going to break that down in my upcoming webinar using my six step magical formula. Because learning wireframes prototype, all these things are fine, but you should know how to connect the dots. Finally. So I highly recommend you to come and register for our upcoming webinar. The link is given below. And also you can watch this live video live stream what we did in the description, which has been pasted here.

Guys.

Okay, thank you so much guys. Drop me a best start rating in Spotify and Apple. I can see a lot of people are listening, but people are not able to rate it. Okay? So I would highly recommend you to do it because that improves our visibility and also spread this word to your friends, whoever wants to learn. It's completely free in Apple and Spotify. You can listen to that.

Okay?

So thank you so much guys. All the best. Bye bye.