\n
\n Chapter 6
\nHow to Conduct Effective UX Research?
\n\n Before venturing into UX prototyping, it is worth explaining what a prototype is and what\n business benefits it brings. A prototype is an elementary design that has the potential to\n turn into the final product. It is a basic version of a product that enables you to conduct\n initial product testing and collect feedback from potential users.\n
\nNow, let us investigate its various benefits.
\n\n UX{' '}\n
\n Source:{' '}\n
\n Now that we know the benefits of prototyping, let us discuss the different prototyping\n methodologies available.\n
\n\n Prototyping is not a monolith - there are various methodologies, which can be used in UX\n prototyping. Depending on the types of ideas you are trying to serve, or the types of\n problems that need to be solved, here are a few major ones that should be incorporated into\n your UX process:\n
\n\n
\n No special skills required: Even a novice UX designer can create paper\n prototypes as they are simply made of paper. No special skills are required but a great\n imagination goes a long way.{' '}\n
\n\n\n They are inexpensive: Paper is very inexpensive and since these prototypes\n are made from paper, they are very budget-friendly as well.\n
\n\n\n Low fidelity: Paper prototypes are low fidelity – or so-called limited\n function prototypes, but that does not make them any less valuable. These wireframes are\n normally concerned with what goes where in a design rather than how it looks or the colors\n that will be chosen. Due to this reason, they are faster to create than their high-fidelity\n counterparts and aid in expediting the UX design process.\n
\n\n Source:{' '}\n
\n Digital prototypes are interactive and quite robust and are mainly used for app prototyping.\n You can see the functionality, usability, and realism all come together with these\n prototypes. Here are the key features:\n
\n\n\n They are realistic: They are clickable and respond to actions, therefore,\n they provide a complete and realistic visual picture of your mobile app or website to the\n stakeholders before it goes into production.\n
\n\n\n Can reduce development time: Studies have shown over time that digital\n prototyping allows developers to catch design problems upfront which reduces development\n time. Early digital simulations in the product development cycle can expedite the\n development process as most digital prototyping tools have drag and drop interfaces and no\n coding is required.\n
\n\n\n A useful reference source for developers: Digital prototypes can be used to\n understand the functionality of a product in a way that paper or screen specifications\n cannot deliver. As an example, if a developer needs to understand how a specific widget or\n control should work, they can use the digital prototype to easily answer functionality\n questions.\n
\n\n Source:{' '}\n
\n
\n Can be viewed in any browser: All browsers support HTML. Since this\n prototype is coded in HTML, it can be viewed in any web browser.\n
\n\n\n Inexpensive to create: You do not need any special tools to code a\n prototype in HTML. There are many free HTML editing tools that you can download free of\n cost. This makes this prototype very cost-effective as well.\n
\n\n Sets the technical foundation: HTML prototypes set the foundation for a\n product and that foundation can be iterated upon. HTML prototypes also go into the coding\n stage faster since they have already been partly written in code.{' '}\n
\n\n\n In the next section, we are going to glance into the steps required before creating a\n prototype.\n
\n\n Source:{' '}\n
\n Irrespective of whether you are building an app or a website prototype, there are several\n steps you need to take before creating one:\n
\n\n\n The first step before bringing your idea to life is to{' '}\n \n figure out what problem it is going to solve\n \n . For example, if you are trying to build a mobile app that lets users create a to-do-list,\n you need to ensure your app is unique in terms of solving the problems of your target\n audience. This idea might seem basic at best, but most successful apps always pay attention\n to this step before moving forward with the prototype and design phases. To you, your idea\n might seem revolutionary, but for the end-user, it must offer real functionality as they\n will be downloading, sharing, and using your app regularly. Questions like{' '}\n “how different is your app compared to similar ones?”,{' '}\n “does it offer extra functionalities or integrations with other apps?” or{' '}\n “does it provide an appealing interface?” should be addressed beforehand.\n
\n\n Once you have identified the problems your product or app will solve; it is time to create a\n list of the cover features and prioritize them. Start by creating a list of main features\n your app should have and then move on to shortlisting the ones that will form the core of\n your app. The prioritization of features should be addressed next and should align with the\n needs and preferences of your target audience. It would be best if you divide the features\n into “must-haves” and “nice-to-haves”. Take the first 3-4 features on the priority list and\n begin crafting your prototype with them in mind.\n
\n\n\n This step is all about the user experience. To keep the features of your app visually\n organized, start by sketching the primary screens of your app. Once the sketches are ready,\n you can start adding details and keep building the screens further. The initial flow should\n already consist of one potential user flow that you can keep on refining as you venture into\n developing your app.\n
\n\n Wireframing is the next step in developing your prototype. A wireframe is a basic outline of\n your product and is normally based on elements like boxes, words, and lines. It is wise to\n add a few descriptions in those elements to communicate your concept better. The idea behind\n wireframing is to not create the final look for your app but to create a framework that sets\n your app in the right direction.\n
\n\n Now it is time to employ your wireframes to create a prototype. You can either put them\n together to create a basic prototype or help transform the initial ideas into interactive\n prototypes by using specialized tools. These tools build prototypes that have the look and\n feel of real apps by using fake content.{' '}\n
\n\n Prototypes are the essence of any design project. They bring immense advantages to the\n entire UX process – from the ideation phase to the completion phase. In this article, we\n provided a comprehensive insight into the types of prototypes, their benefits, and the types\n of methodologies used with them. We discussed that a prototype is an elementary draft that\n provides many benefits of verifying the product-market fit, improved user experience, and\n shortened development times and costs.{' '}\n
\n\n We also glanced over the main types of prototyping methodologies that include paper,\n digital, and HTML prototyping. Lastly, we discussed the various steps involved in the\n creation of a prototype: a) develop and perfect your idea b) come up with product\n requirements c) draw sketches of your app or web primary screens d) build wireframes based\n on your sketches e) build a prototype.\n
\nChapter 6
\nHow to Conduct Effective UX Research?
\n