UX process, part 4 of 4: Digital Prototyping
Now that we have articulated our idea and mapped out all the possibilities and testing has been done for the same, Wireframing / low fidelity mockup is done. All we need to do is present that idea with an authentic feel, a digital prototype. We are on the stage where UI & UX meet. Now is the time to decide the look and feel of the object. Design as if it is a real app. The actual content and interface design as close as possible to our finished app should also be considered, not only layout. It means UI skills for the look and feel of the object and UX skills for the prototype to be interactive, just like what we anticipated in our minds while researching in our previous stages. It should also include a platform for its interaction with users, and it means to have a prototype that needs to be running on an actual physical device but without programming. Digital prototyping is essential for testing. I have already discussed the importance of testing in my previous articles. Testing is critical, but how to do this critical work efficiently and quickly? The answer is straightforward — Digital prototyping. Since it’s digital, that means it can be tested remotely. You have to give access to the links, and then prototypes can be tested anywhere, anytime, and on any device. Of course, it’s best if it is used by the device for which the prototype has been made. It can be made easily accessible to the target audience to know their experience about the design. You can do video conferencing and then present it to the user; you can provide an accessible link to the user, you can tell users to record their reaction, and so on. All of these techniques can be done online, unlike paper prototypes. Digital mockups have more to do with UI, but it is a significant step in the UX process.
When you evaluate things on paper and on an actual device, the experience is entirely different. The motive of paper prototyping has more to do with designers and researchers being clear about the goal of an app and getting to know about users’ requirements. But digital paper prototyping is more about what are the things that are not working smoothly and in harmony; what are the things that have to be changed or improved; what can mislead users from the path of sitemap; what is the content that might create problems to users. When digital prototypes are approved, it increases the probability of the stand-in market of the app. Have you ever noticed how Facebook sends you notifications? It tries to attract you so that you can spend more time there (because that’s how they earn). In the same way, you can anticipate more definite benefits in advance by looking at users’ experiences through digital prototyping. It depends on you and on your app to know which platform is suitable for its development.
So, what are these platforms where you can design these prototypes and test them? There are many platforms, but to name some of them are :
- Figma
- Adobe XD
- Sketch and many more.
Choose the program according to what you find easy for you to understand and what you want to prototype. Of course, you would have to consider many things while building this prototype, like color theory, Typography and size, White space, content, icons, symbols, and their consistency, scaling, and most importantly, they should match when put together. Finally, the design should maintain harmony and look pleasant to the user to make it visually compelling. It’s not always about how many and what kind of elements you’re using in your prototype but how you’re using it. The page’s structure as a group and as an individual should be consistent and look like they belong to each other on this page. Also, remember that your design screens should match among themselves and match as a group. For example, if you’re making any navigation bar placed at the bottom of the home screen, it should be present in the same space, size, color, and weight on the next screen, just like in the picture. Then you can say that you have got all the screens that fit together in harmony.
Prototyping is the next step that you want to focus on. Once you’ve designed the screens, half the work is done. After designing, you have to connect arrows between screens and buttons like we did in sitemap and mapping content. You can also control how you want to go from one screen to another screen like; you want to smart animate it or dissolve it or keep it linear or animate it at different curves and lengths. Finally, test your prototype in the testing area of whichever program you’re using.
While creating your designs, make sure your layers are organized and named appropriately. You can manage your screens according to your sitemap and wireframes. Then, you can use them as your blueprints for your digital prototype screens. Spending time organizing your layers helps a lot because this is still the testing phase; there can be changes and improvements that have to be made, and at that time, you cannot just sit the whole day to find which layer is what. Try making your app look like a real app and do as many detailings as possible. The closer you can get to the finished thing without programming, the better. Choose and try all the possible options because that’s how you learn. There are so many videos and guidance available on youtube, google, and so many other platforms to learn and excel an app in minutes. The closer you get to the actual app design, the more accurate the feedback will be. Since this technique of digital prototyping takes more time than a paper prototype, try to give your best possible design on the first go. Anyway, the blueprints will help make that possible for you, but it still might have to go through many changes and improvements. Nothing in this world is made in the first go; otherwise, everyone would have done it.
Remember, this is not a field of rigid principles and steps to be followed. You can always start from anywhere, but eventually, these steps are kind of a circle. No matter where you start from you will always end up doing all of them.
This concludes the last part of this article. You can see previous parts on my profile.
