Prototype Creation
Why should you create a prototype?
Creating a high-fidelity prototype that comes close to what the final product will look like, is necessary for so many reasons. Developing an app takes both time and money. It is important to work out any kinks or changes fully, before beginning the development. It costs much less money and time if any issues are fixed in a prototyping stage compared to after developing the app. A prototype also allows for further user testing. It is important to do user testing before beginning a design, but it is also important to have included in the design process. Creating a prototype is a great way to see what the users would do when interacting with the app. Prototyping is also great for sending the client a clean and polished glimpse of what the app will look like and a great way for them to experience its functionality.
“They slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such as becoming too complex too early and sticking with a weak idea for too long.”
Tim Brown, CEO and president of IDEO
Where to begin a prototype
Depending on where you created your comps can impact where and how you decide to put together a prototype. There are many great programs to put together prototypes in, and many also allow you to use them for wireframes and comps. It is easiest to stick with the same program you made your comps in for the prototyping stage, as well, but not all programs have that capability and personal preference could have you lean more towards one or another. Some great options for prototyping are Sketch, Figma, Adobe XD, Marvel, and InVision.
My Planty Prototype
Never be afraid to change your designs. Since I created my final comps, I changed the layout of some pages, along with the sizing of icons and the menu bar. Even while creating the prototype I realized there were some pages I needed to add to the design. It is important to always keep an open mind and never be set on a certain design. In keeping an open mind, ideas will come to you as you are working that can make the designs even better.
Since I created my comps for the app redesign in Adobe XD I also used that same program to create the prototype of the app. What I love about putting together the prototype in XD is the ability to go back and forth between the designing and prototyping sections. Because there were new thoughts or discoveries I had while creating the prototype, I was able to simply go back and change the designs and have them automatically updated in the prototype.
While creating the prototype I also performed user testing and set the prototype link to some people for feedback. Unfortunately, I was not able to watch them interact with it, but I did ask the question about the layout, functionality, and more, in order to create the best experience for the user. After that, I went make and made more changes to the designs, which also included adding some pages.
Prototyping is a valuable step in the design process and for sure, is one that should not be overlooked. My designs have changed for the better because of the feedback I received from not only having the user test out the design but also from my own experience navigating the prototype.
Sources:
Casacuberta, Judit. “Perfect Your UX Design Process – A Guide to Prototype Design.” Toptal Design Blog, Toptal, 18 Jan. 2018, http://www.toptal.com/designers/prototyping/guide-to-prototype-design.
Dam, Rikke Friis, and Teo Yu Siang. “Prototyping: Learn Eight Common Methods and Best Practices.” The Interaction Design Foundation, 2020, http://www.interaction-design.org/literature/article/prototyping-learn-eight-common-methods-and-best-practices.
Gillespie , Christopher. “How One Designer Prototyped Prototyping: Inside Design Blog.” Invisionapp, Inc., 24 Oct. 2017, http://www.invisionapp.com/inside-design/designer-prototyping/.
Mardita, Rizki. “Creating a High-Fidelity User Interface & Interactive Prototype in 1 Hour.” Medium, UX Planet, 18 June 2019, uxplanet.org/creating-a-high-fidelity-user-interface-interactive-prototype-in-1-hour-f0550dfc966a.
Ueland, Sig. “13 Prototyping Tools to Create Web and Mobile Apps.” Practical Ecommerce, Practical Ecommerce, 30 Sept. 2019, http://www.practicalecommerce.com/10-Prototyping-Tools-to-Create-Web-and-Mobile-Apps.