Search
Close this search box.
Search
Close this search box.

Stages of UX prototype development before design.

UX design development

Share on social media

We will look at the stages of creation UX design, we will describe the usability development processes in stages. 

Design Usability (UX) often consists of the following main stages:

  • Determine who the user (client) of the service is
  • Define the problem (define the needs of users)
  • Creation of design ideas
  • Creation of Prototypes. Types of prototypes
  • Testing conversions, user paths, time and other parameters

The first two steps (discussing and defining the problem) are often grouped under the term "user research". That is, understanding the nature of the users. How it affects their needs. 

A number of tools and techniques can be used at each stage. Each tool or method can produce different types of output (UX).

Here, we'll focus on some of the more commonly used types to give you an idea of what you might expect from UX design development.






User research results.

A persona is a fictional character that designers build as a kind of user stereotype. It represents typical users, their goals, motives, frustrations, and skills. 

Other information, such as demographics and education, complements the personality. Depending on the scale of the projects, designers will generate several different characters to reach as much of the audience as possible. 

Character creation helps designers empathize with users and demonstrate a deep understanding of who they are and what they want to achieve.

Site Usability Report

Storyboard.

The storyboard is an idea borrowed from the film industry. Basically, it consists of a comic strip describing the user's actions and the circumstances under which they are performed. 

The strength of this idea is that it not only demonstrates what the user is doing, but also reveals the environment that can influence how or why the user does something.

Usability

Storyboarding helps visualize user actions as well as the environment in which they occur. While storyboards are primarily used to empathize users, they can also be used during the idea development phase to help illustrate some design choices.

Customer journey map.

A customer journey map (also known as an experience map) is a diagram that represents the steps (that is, the process) taken by a user to achieve a specific goal. 

By placing the process along a timeline, designers can understand changes in context, as well as motives, concerns, and needs along the way. 

By identifying major stumbling blocks for users, designers can better relate to their concerns and begin to understand where a product or service might be appropriate to help the user.

Usability Audit

At each stage of the process, designers talk about the user experience by looking at what actions they take, what they think, and how they feel as they progress. Finally, opportunities for improving existing experiences are also outlined.

Search for ideas for a prototype.

Brainstorming is the process by which the design team generates ideas on how to solve the problems and opportunities identified during the user research phase. 

The concept here depends on generating as many ideas as possible (even if they are completely wild), so that designers can later analyze them and reduce them to the ideas that seem to be the most promising. 

The central point is that team members are free to explore everything corners and spheres; in fact, the best decisions can sometimes come from the craziest sounding performances.

Brainstorming is often done with a lot of notes where designers write down all of their ideas. You can then discuss the notes, sort them hierarchically, group them by topic, and organize them to provide a visual map of the best ideas generated to solve a design problem.

Custom flow.

A user flow diagram is a simple diagram that describes the steps a user must take with your product or service to achieve a goal. 

Unlike a shopping map, a user flow diagram only takes into account what happens to your product (that is, all external factors are ignored). 

These diagrams can help designers quickly gauge the effectiveness of the process required to achieve a user's goal, and can help determine the “how” (that is, execution) of the great ideas identified in brainstorming.

Usability diagram

A sample user flow diagram showing user actions in an application.

Prototyping results.

Sitemaps display the structure of a site's navigation. Such maps are also often created for mobile applications. They serve to show how content will be organized into "screens" or sections, and how a user can navigate from one section of your service to another.

An example sitemap showing how website content is organized and how users can navigate from section to section. Here the developer shows the hierarchy of content sections.

Low quality UX prototypes.

Once you have your sitemaps ready, you can start drawing how the content will be placed on each screen.

A low fidelity prototype skips any visual design detail and serves as a rough guide to help designers understand how and where they should place content. 

Low fidelity prototypes can start with hand-drawn sketches. Which is great because they are quick and cheap to produce, so you can easily throw them away if you change your mind.

Wireframes are then refined to represent the information on a real screen, but the visual design details are still lacking.

UX Site Prototype

Examples of drawn computer prototypes with low reproduction quality.

High quality UX prototypes.

These prototypes are a step up from low quality prototypes. They are often referred to as pixel perfect prototypes. They try to show all the visual and typographic details of the product design as it would be shown on a real screen. 

They take into account the physical dimensions of the screen and are manufactured in a size that matches the size of the physical device. While they take much longer to produce than low-fidelity prototypes, they are often the type of illustration you would like to show to a client or stakeholder.

Usability UX design

Examples of high-precision (pixel-perfect) prototypes for a mobile application. Even though they look like screenshots from a finished, real application, they are just a mockup! 

Unfortunately, many clients seem to feel that at this point you should be really close to actually completing the entire project. So be careful to make it pretty clear that these are just pretty visuals with no code behind!

Interactive prototypes.

The low and high fidelity prototypes discussed above are nothing more than a collection of static images. 

To better evaluate your projects, you can turn these prototypes into an interactive demo aimed at demonstrating how interactions can work with them. 

Commercial prototyping software allows you to define interactive prototypes, transitions and events to create an interactive prototype that captures the user flow process, without having to write lines of code. 

In some cases, you can use a much simpler tool like PowerPoint or Keynote. Moreover, you can use these interactive prototypes in early user tests before any code is written. This way, you can ensure that your design is likely to perform well before embarking on the costly and painstaking coding process.

Estimated results of UX preparation.

Usability analysis.

Once you have a project that is implemented (even if only as an interactive prototype), you can start doing some evaluations of that project with users. 

Evaluation can take many forms and forms. Some users may try out your design and then interview them or work with them in a focus group: this is an example of a qualitative assessment. 

You can invite users to the lab and ask them to complete specific tasks with your prototype. While you are measuring things like the number of errors, the number of clicks, or the time it took to complete a task. 

In the lab, you can use specialized equipment such as eye tracking cameras to see where your users' attention is spent navigating through a particular design. You can also ask them to complete the same task using prototypes that offer alternative project implementations,

There are many ways to evaluate a design. Regardless of what you end up doing for the assessment, you will need to summarize your findings in a usability report. A complete usability report typically contains the following sections:

  • General information: what you tested, where and when, the tools and equipment you used, and who took part in the study
  • Methodology: how you passed the assessment, what tasks you asked users to perform, what data was collected, what scenarios were used, who the participants were and their demographics
  • Test Results: An analysis of all collected data, including illustrations such as bar charts and text descriptions of results, as well as user comments, which can be particularly descriptive or instructive. Depending on who you are communicating the report to, this section may contain some technical details such as the type of statistical analysis used.
  • Conclusions and Recommendations: What do you recommend based on the data you collect and your findings? Write down what worked, what didn't, and why. Indicate what should be done next to improve the design or continue the process.

Remember that a usability report may be sent to a number of other professionals in your project. 

Managers probably just need a report on how the results affect the overall timeline of the project. Designers will be more interested in how you conducted the assessment and would like to know all the details. The developers are probably only interested in your conclusions, recommendations. Make sure your report is structured and phrased appropriately for its audience.

UX analysis of the site

Analytical Usability Report.

When a developed product has been released and has been running for a while, your company may provide you with some usage analytics. 

Examining this data can provide excellent insights into how to improve usability, especially if the data contains changes and user behavior in your product.

For example, you may find that many users on an e-commerce site do not register to make a purchase. Does this mean that the registration process is not straightforward enough? Does this mean that they do not see such an opportunity? 

The analyst report contains information from this data and highlights areas where the design can be improved. While it's tempting to just add beautiful visuals and graphics automatically generated by products like Google Analytics. The UX designer's job is not only to state the facts, but also to interpret them. Therefore, your report should contain data as well as plausible explanations and recommendations on what to do. It is also a useful post to see the impact of design changes on your website after you have identified problems and tried to fix them.

Website Usability Assessment

An analyst report is more than just data and visuals. It should contain your own explanations for the observed behavior of new users and recommendations for improving the design.

What are they ordering now?

In a 2015 article for Norman Nielsen's team, UX specialist Page Laubheimer analyzed the type of UX outcomes that UX designers most often report that they are asked to create as part of their role. Wireframes and prototypes were reported to be the most commonly produced, followed by flowcharts, site maps, and usability / analytics reports.

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0

Analysis of the most frequently released UX materials, according to Norman Nielsen's group. This shows the frequency with which UX professionals are asked to produce and share a specific outcome. Products with a lower demand frequency are still produced, but generally not shared much with others.

These are what we consider to be "classic" UX results, but it is important to remember that although these results are generated and passed on to others, many other types of results will be generated but never passed on. 

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0

This chart shows the types of results that are most commonly used by other members of the development team and external clients. An interactive prototype is a result that everyone wants to see!

As a UX designer, you will definitely have to create deliverables for each design stage. Whether you keep it to yourself or share it with others, you need to practice your skills in as wide a range of tools and methodologies as possible, and become familiar with all types of UX outcomes.

Frequently asked Questions. FAQ.

✔️ What are UX prototypes?

These are prototypes created by a UX specialist as a result of market and business needs research.

✔️ What is Website Usability Audit?

This is an assessment of indicators of user behavior, user loyalty and conversion.

Depending on the objectives of the audit, this can be a report on the results or suggestions of a usability specialist for improvements and improvements.

✔️ Why make a UX prototype?

To increase the number of visitors, traffic and conversion on the future site.

✔️ Do you need an analytical Usability report?

The report allows you to see the impact of design changes on your website after you've identified the problems and tried to fix them.

✔️ What are the stages of UX design?

The Stanford School of Design's “design thinking” process includes five stages: empathy, definition, imagining, prototyping, and testing. The UX design process consists of five key stages: product definition, research, analysis, design, and validation.

✔️ How to write a usability report?

The executive summary should contain a brief overview of the report, discussing your main findings, the purpose of the study, how and where it was conducted. Start by mentioning how you tested the product, what methods you used, and then detail the age group and geographic breakdown of your testing group.

✔️ Why is it so important to make a UX prototype?

The most important advantage of the prototype is that it mimics the present and future product. This can help attract customers to invest in a product before allocating the resources required for implementation. You can validate a project before it goes into production and you can spot design errors.

Share on social media

5/5

1 thought on “Этапы разработки UX прототипа до дизайна.”

Leave a Comment

Subscribe Now

Exclusive offers and premium cases

how to create an ico listing website
All Cases

How to create an ICO LISTING website?

Blockchain is becoming extremely popular. First of all, thanks to cryptocurrencies. But before cryptocurrency comes into play, a few things happen. One of them is ICO. The number of ICOs is growing rapidly, and, of course, only a few of them really deserve attention. We are going to explore the following questions:

how to create a successful ICO website
All Cases

How to create a successful ICO website?

While you should hire professionals to help you build your site, you can still do the preparation and planning a lot. This will simplify the design process and save money. Start by creating all the relevant content your site needs.

Looking to take your business to the next level?

Email us now

Conversion Growth

Back call

Write to us