{"id":30885,"date":"2020-12-01T16:13:19","date_gmt":"2020-12-01T10:43:19","guid":{"rendered":"https:\/\/www.the-next-tech.com\/?p=30885"},"modified":"2020-12-01T18:59:41","modified_gmt":"2020-12-01T13:29:41","slug":"14-stages-of-user-experience-design","status":"publish","type":"post","link":"https:\/\/www.the-next-tech.com\/review\/14-stages-of-user-experience-design\/","title":{"rendered":"14 Stages of User Experience Design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Every digital product goes through certain stages before it can be released to the wider audience. What does this creative process look like? What are the most common steps of a user experience design project?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Find out from this post how a <\/span><a href=\"https:\/\/clay.global\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">user experience company<\/span><\/a><span style=\"font-weight: 400;\"> works on the creation of apps and websites that we all use every day.<\/span><\/p>\n<h2>The Complete Process of the User Experience<\/h2>\n<p><span style=\"font-weight: 400;\">The steps that are listed here are just a rough canvas: some designers alternate them in a different way, or add others, or combine them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, these steps will make you understand the logic of the UX process so that you can start to approach projects more consciously.<\/span><\/p>\n<h3>1. Interview With Customers<\/h3>\n<p><span style=\"font-weight: 400;\">It always starts from here and it is a very delicate moment: often the customer does not have clear ideas, partly because it is not easy to make them clear, partly because they may not have the skills of a designer. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">An excellent practice is not to &#8220;passively&#8221; undergo the brief but to ask very specific questions to all the people on the customer side who will have to deal with the project: the marketing director, the project manager, various partners, the investors, etc.<\/span><\/p>\n<p><em><span style=\"font-weight: 400;\">The priority right now is to know in particular:<\/span><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The business objectives<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Who are their users and what do they know about them?<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What is their past history?<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Who are their competitors?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We must be sure that all the people involved on the customer side have the same objectives and that these are clear, both to themselves and to us. We cannot afford to start working and find out later that one of the partners had one thing in mind while the other had something completely different.<\/span><br \/>\n<span class=\"seethis_lik\"><span>Also read:<\/span> <a href=\"https:\/\/www.the-next-tech.com\/review\/walmart-money-card\/\">Walmart Money Card Review: Good Or Bad?<\/a><\/span>\n<h3>2. Analysis of the Objectives<\/h3>\n<p><span style=\"font-weight: 400;\">Once we have gathered all the preliminary information, ask yourselves these questions: are the client&#8217;s goals realistic? Can we help them reach those goals? In general, do they make sense?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In particular, let&#8217;s focus on business goals.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If the customer wants more conversions through <a href=\"https:\/\/www.the-next-tech.com\/finance\/the-e-commerce-transition-a-smooth-journey-with-online-installment-loans\/\">e-commerce<\/a> and asks us for a re-styling of the site&#8217;s graphics, perhaps they do not fully understand what a UX designer does. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If the customer says they want to grow their company&#8217;s brand awareness through a viral app, they may have overestimated the potential of the network.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In general, if we notice a discrepancy between the desired result and the proposed solution to achieve it, it is appropriate to stop for a moment to reflect.<\/span><\/p>\n<h3>3. Analysis of Competitors<\/h3>\n<p><span style=\"font-weight: 400;\">This phase is crucial: when we are working on the new product of a startup or on the redesign of the website of a consolidated company, the analysis of competitors allows us to understand what is present in the market at this time and to take inspiration from the solutions adopted by other professionals.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Competitors are both products similar to what we are designing, and products that solve the same problem as ours. We have an idea of \u200b\u200bthe target market and the players at stake. Not only that: we took inspiration from the strengths and weaknesses of the work of others and we defined a first draft concept.<\/span><\/p>\n<h3>4. Application of &#8220;Design Thinking&#8221;<\/h3>\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/what-is-design-thinking-and-why-is-it-so-popular\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Design Thinking<\/span><\/a><span style=\"font-weight: 400;\"> is nothing more than the problem-based approach to solutions. In a nutshell, every solution must start with a real problem.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If a solution does not solve any problem, nobody will ever adopt it. If a startup asks for a product that does not respond to real user needs, that product will have no market. If a company wants its users to download a useless app, that company will throw money away.<\/span><\/p>\n<h3>5. User Research<\/h3>\n<p><span style=\"font-weight: 400;\">The UX designer doesn\u2019t want to risk it all taking the wrong direction. It may result in having to do all the work over again.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That is why it is necessary to consult the target users. We can do this with two tools:<\/span><\/p>\n<h5>Polls<\/h5>\n<p><span style=\"font-weight: 400;\">They provide quantitative data; information that is not elaborated by many people. They are cheap and require few resources.<\/span><\/p>\n<h5>Interviews<\/h5>\n<p><span style=\"font-weight: 400;\">They provide qualitative data; in-depth information from a few people. They require a certain amount of time (prepare the interview, target users, interview users).<\/span><br \/>\n<span class=\"seethis_lik\"><span>Also read:<\/span> <a href=\"https:\/\/www.the-next-tech.com\/finance\/what-is-walmart-credit-card-grace-period\/\">What Is Walmart Credit Card Grace Period? Explained<\/a><\/span>\n<h3>6. Creation of User Personas<\/h3>\n<p><span style=\"font-weight: 400;\">User personas should be one for target groups. In case we have three target groups, we create three different personas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User personas are useful in two ways. First, they help in seeing the customers and create empathy. Secondly, they ensure that the characteristics of the users of reference are clear to everyone, both the designers and the client.<\/span><\/p>\n<h3>7. Analyze the User Experience<\/h3>\n<p><span style=\"font-weight: 400;\">At this stage, we have a well-defined concept and a series of ideal users, validated and specified through research. The designer has to analyze the user&#8217;s journey to get an overview of how it will interact with our product or service. It can be the key to the development of the so-called opportunities, the solutions to possible problems that the user will encounter.<\/span><\/p>\n<h3>8. Identify User Stories and User Flows<\/h3>\n<p><span style=\"font-weight: 400;\">All apps have features that the team discovers at the early stages of project development. Users or target groups also have \u201cfeatures\u201d. User stories are a very simple technique that helps to explore the functionality and draw the related user flows.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They have a very synthetic structure:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a &lt;Role&gt; I want &lt;action or function&gt; in order to &lt;desired result&gt;.<\/span><\/p>\n<p><strong>Example: <\/strong><span style=\"font-weight: 400;\">As a user, I want to register with Facebook in order to do it faster.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They help analyze all possible user actions. The graphic representation of the user stories are the user flows, which allow us to have an overall view of all the paths that a user could follow.<\/span><\/p>\n<h3>9. Structuring the Information Architecture<\/h3>\n<p><a href=\"https:\/\/blog.adobe.com\/en\/publish\/2017\/11\/20\/a-beginners-guide-to-information-architecture-for-ux-designers.html#gs.lxcqmw\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Information architecture<\/span><\/a><span style=\"font-weight: 400;\"> can be defined as the science of organizing information: it helps us understand where to arrange the elements and how to connect them to each other to ensure easy use.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are several methodologies that can be used, for example, Card Sorting. It allows you to obtain the output in the form of a sitemap. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">That is a map of all the pages of a product and the connections between them. In an app, we could say that user flows are all possible user paths within a building and the sitemap is the structure of the building, which makes the aforementioned movements possible.<\/span><\/p>\n<h3>10. Wireframing<\/h3>\n<p><span style=\"font-weight: 400;\">Wireframes are the skeletal structure of a product&#8217;s screens. When we have defined the tree structure of a product and the possible actions that the user will be able to perform, we must start designing the screens one by one.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We can consider Wireframing as a Sketching phase: at the beginning, we take down the screens with pen and paper using printables like those of Sneakpeekit and then elaborate them with precision using a graphics software such as Sketch.<\/span><br \/>\n<span class=\"seethis_lik\"><span>Also read:<\/span> <a href=\"https:\/\/www.the-next-tech.com\/review\/uptrends-ai\/\">UpTrends.ai - Is It Shut Down? Rumors, Use Cases & FAQs<\/a><\/span>\n<h3>11. Prototyping and User Testing<\/h3>\n<p><span style=\"font-weight: 400;\">Building a prototype is an important step in product development that allows testing the almost-finished product on real users.\u00a0\u00a0<\/span><\/p>\n<p><em><span style=\"font-weight: 400;\">The prototype is a simulation of the product. It can be:<\/span><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Non-Interactive: the screens are drawn or printed, put one on top of the other. The client or investor can turn the page when a user clicks on the right element represented on the sheet.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Interactive: screens are made on a computer or by hand, then with software like Marvel, a clickable and usable prototype on a digital medium is being built.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">On the Nielsen-Norman Group website, you can find a more detailed classification of the various types of prototypes.<\/span><\/p>\n<h3>12. Iterations on Prototypes<\/h3>\n<p><span style=\"font-weight: 400;\">Invest resources to create a prototype and test it, as it is important because it helps to identify critical issues immediately.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you think about it, so far the work has been rather quick; apart from the research, we have studied some flows and some wireframes. It is our interest to validate the result immediately in order to continue without worries.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User tests will show us the weaker points (to be solved with top priority), in addition to the considerations of the testers, this could be a source of inspiration to make further improvements.<\/span><\/p>\n<h3>13. Develop the User Interface<\/h3>\n<p><span style=\"font-weight: 400;\">We developed the wireframes of the whole product, tested them with users and subsequently iterated them. We also showed the prototype to the customer, who was thrilled with it. Perfect! Now we move on to the User Interface phase.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The UI reflects the personality of the product: the UI for a bank&#8217;s institutional website will have to transmit certain values \u200b\u200b(safety, reliability, concreteness), while the UI for a teenager\u2019s social network will communicate with others (vitality, freedom, sharing). Learn more about how to build UI here.<\/span><\/p>\n<h3>14. Final Test<\/h3>\n<p><span style=\"font-weight: 400;\">At the end of it all, after having dressed all the screens with the final UI, you can decide to create a new prototype and perform further tests on users.\u00a0<\/span><br \/>\n<span class=\"seethis_lik\"><span>Also read:<\/span> <a href=\"https:\/\/www.the-next-tech.com\/review\/uptrends-ai\/\">UpTrends.ai - Is It Shut Down? Rumors, Use Cases & FAQs<\/a><\/span>\n<h2>Conclusion<\/h2>\n<p><span style=\"font-weight: 400;\">Now you have an understanding of the basic stages that every digital product goes through and start developing your own application or website. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.the-next-tech.com\/mobile-apps\/different-ways-to-utilize-animation-in-the-mobile-app-ui-ux\/\">UX\/UI design<\/a> is a process where iterative development, testing, and improvements are very important, so you will have to repeat the same stages a couple of times before you reach a truly successful result.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every digital product goes through certain stages before it can be released to the wider audience. What does this creative<\/p>\n","protected":false},"author":146,"featured_media":30891,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[],"_links":{"self":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/30885"}],"collection":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/comments?post=30885"}],"version-history":[{"count":5,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/30885\/revisions"}],"predecessor-version":[{"id":30959,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/30885\/revisions\/30959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/media\/30891"}],"wp:attachment":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/media?parent=30885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/categories?post=30885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/tags?post=30885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}