Lessons
Lesson Info
Introduction to Prototyping
All right, So we're going to move into the prototyping phase of this class. I want to review some of the stuff we talked about at the beginning of just why we're doing this and why it's important. So the problems you might be having or you're unsure how to convert your ideas, your focused on how it looks before how it functions, you might not be sure how to get buy in from your stakeholders. And you're not necessarily sure if those concepts gonna work in real life. On by the end of this class, we're gonna turn all of that around, and we're gonna make sure that you know the steps to get your ideas out into the real world. You know how to solve for your problems, your co co founders, your stakeholders problems and your client's needs on dure gonna be able to confidently discuss those and test your concept. So with prototyping, we're really going to focus on the testing aspect, and it's gonna be a really, really, really helpful tool for selling and talking through our ideas. So again, if ...
you are a beginning designer, if you're a developer or engineer interested in the design aspect. Maybe you're a small business owner trying to figure out whether or not you can or want to build a nap. Um, or if you're an artist or other type of creative person moving into UX and Web leg, we are going to focus on you guys and get you up to speed. So prototyping, um, we're gonna talk about what it is. We're gonna set our expectations, and then we're going to start working using envision, which is a prototyping ap One of many out there in the world today. Pretty taping itself is just a working model. Um, it's a light, cheap version of building out your idea. It's not just in Web design that it happens. You might build, you know, balsa wood bridge before you build the actual one, you might sculpt your car out of clay before you spend all the money manufacturing and out of your actual materials. It's just a way to test your ideas and see how they work without spending all the time, money and effort into the final production. So with that, prototyping is a working model. It is a tool for testing. It's not coated. We're not gonna be doing any, uh, any HTML or CSS or any of that stuff. And it's not the final. Uh, this is just important. Keep in mind when you're showing it to someone or talking through your clients that it's not going Teoh look like that. Visually, this is just how it's going toe work. Um and so what we're gonna do next is we're going to switch over to my computer, and I'm gonna show you guys an example of an envisioning prototype that I have, uh, just recently made for my job at lending home. I'm a product designer, and we have this screen for our investors, and we wanted to add in this little piece. So instead of me talking with an engineer about how this should work, we just I just mocked it up and sketch and then made this envision prototype. So what I can do is I can click this, but in, even though it's not actually a coded button, it's going to go essentially to the next lied. And it's gonna show what should happen when I click that button and then I can click in first name, and it's going to magically fill in all of this form so that you can see what it should look like. The other thing that you can do with envision is for this particular flow. It's an investor referring a friend to this investment platform on. Then there's a follow up email so I can open up this piece of envision and I can skip over to the the email piece, and you can see what we want that toe look like. So we're going to dio. Next is we're going to start building a a app in Envision a mobile app. But back to the keynote for a second. I want to show you guys before and the wire from when we were working with Farley's restaurant and we made a website for them. Uh, and when I was designing this class, I designed an app for them as well. And then I was realizing that Farley's restaurant doesn't need a nap, so we made a new use case for them. It and this is yet another reason why wire freemium prototyping are great tools because they open up realizations like that. Like, hey, if I can do this on the mobile web, we don't need to spend the time and money building an app. We can have it done with one easier to build. Convert our website just to be responsive. So we made up a use case for barley is doughnuts that they do need a nap. They want people Teoh be able to order doughnuts on their phones. The stakeholders wanted to look and feel like Charlie's restaurant. Be easy to order for you to users on the same brand voice applies because it is the same company. We're not gonna rely too heavily on this, but I just want to queue up again that you should always be thinking about this stuff. And you should always be ah, aware of what you're solving for and what your users need as you're going through this process.