Lesson 3. Design process and UX designer methods

Module 1. Introduction to UX/UI design.
Free UX / UI design course for a newcomer

To start learning, take tests and track progress, you need to enroll in the course. It's free.

Imagine that you are a detective who has just received a complex case: instead of searching for a criminal, you are investigating the real needs and motivations of users. Like a true detective, you analyze the "crime scene" (interface or product), gather evidence (feedback and observations), interrogate witnesses and "suspects" (users, stakeholders), seeking to uncover hidden motives and pains. To solve this "case," you need to ask a million "why?" and "for what?", filtering out the noise and separating the essential from the secondary. When you finally piece together all these clues, a clear picture will emerge before your eyes: design solution that fully meets the actual demands of users.

Although you may not be able to delve into all the details right away, you will gain a clear overall picture and see many real examples — no "dry" theory! You will undoubtedly be surprised that the overwhelming majority of a UX designer's work is dedicated to communication and research, rather than visuals. And only when we know exactly for whom and what problem we are solving does it become time to design the interface.

Mostly in this and the next lessons we consider the role of a UX designer, although in small companies the tasks of UI are often emphasized. For example, they might say "quickly create a landing" or "update the design" in just a few days, which reduces UX efforts to a short brief. But even if a full UX process doesn't happen often, it's worth knowing it.

Who is a UX designer?

UX designer is a specialist who creates a product (digital or physical) taking into account the user experience. Their goal is to understand the needs, behaviors, environment, and motivations of people. Then, they create solutions that are convenient, effective in solving problems, and pleasant to use. To achieve this, the UX designer conducts research, develops prototypes, tests hypotheses, and improves the product based on feedback from users.

What fundamental problem does a UX designer solve?

The key task of a UX designer is to find a balance between the interests of the business and the real needs of users. On one hand, the product must align with the strategic goals of the company (i.e., be profitable), while on the other hand, it should provide practical value, helping the user solve specific tasks quickly and easily.

Why a UX designer must be able to and love to communicate?

You will have to communicate a lot. There are exceptions, but in most cases, 25–50% of the time is spent precisely on “extracting” information from various responsible persons and assembling it into a single puzzle. Let's take a closer look at why communication is so important:

  • Working with the team and stakeholders. The UX designer does not work in a vacuum: they constantly interact with managers, developers, clients, and sometimes even investors.
  • Gathering information from users. Most UX research involves communication in various formats – interviews, surveys, and so on.
  • Defending ideas. To gain team support for proposed design solutions, it is essential to clearly explain their value and usefulness, to "sell" one's own idea.

All of this makes communication a critically important skill for a successful UX designer. It is considered one of the most important soft skills. If you find it difficult to communicate, this could become a problem.

What is design thinking or the design process?

Design process is a structured approach to creating a new product or improving an existing one. Its goal is to find an effective, convenient, and user-oriented solution. There are many variations of the design process, but they all rely on sequential steps: explore, define the problem, generate ideas, create prototypes, and test to find the best solution.

Design thinking steps

Often the designer returns to previous stages and goes through some steps again. For example, during testing, it became clear that the prototype is unclear to users and they cannot solve their problem with its help. In this case, we can go back two stages to the ideate phase, taking into account the identified problem.

I want to draw attention to the fact that such multi-stage design processes, which we are going to consider now, relate to complex products and problems that are unknown how to solve in the initial stages. Returning to examples of relatively simple tasks, this does not apply to landing page design or a simple online store. After all, everything is already clear there. That is why this work is done by web designers. Moreover, this does not pertain to creating banners or brochures. This is done by graphic designers. And we are future UX designers, and we do not draw just for the sake of making things look nice (even though that is important too); we design and solve complex problems.

Stages of the design process and what are design activities?

Let's consider all the stages of the design process and see which activities are more frequently applied at each stage.

Design activities or design research – are a set of practices, methods, techniques, and tools that assist the designer at various stages of the design process: from in-depth study of user needs and behaviors to idea generation, prototyping, and testing. These can be simple techniques (sketching, drawings on paper, or short interviews) as well as specialized digital platforms (Figma, Axure, etc.). The main thing is that all of them are aimed at a deeper understanding of the problem and creating an effective solution.

For you, as a designer, to know what interface to create (which screens, input fields, buttons, other elements), you need to research what tasks the user is solving, in what context they are acting, and what specific needs or constraints they have. Here’s an example: how can you design an interface for ordering a car (configurator) if you don’t know how it works and what options exist when ordering a car? This is where the activities from the first stage of the design process come in handy.

Next, it will be very interesting because for each stage I will provide you with examples of how a specific activity can be applied and what results it can yield. Remember that depending on the project, some stages may be skipped, and some activities may be too expensive or take too much time, making them impractical to implement. We will talk about planning your own design process at the end of this lesson.

Stage 1 (Observe or Empathize). Observation or empathy. How to understand what the user experiences?

In the first stage, we try to understand the real needs, motivations, and context of the target audience. The designer needs to "immerse" themselves in the user's environment to feel the problems they face and the tasks they are solving. Popular design activities at this stage include:

Domain Research

What is it? Studying the specifics of the relevant market sector (finance, medicine, manufacturing, etc.): terminology, competitor analysis, trends, and so on. This includes googling unfamiliar terms, researching product documentation, looking for user reviews, studying the subject to fully understand why and how everything works.

When is it applied? When the designer does not understand the subject area and needs to delve into the details. For example, you are developing a web application for managing your own investment portfolio. You need to understand what types of asset classes exist, how they interact with each other, and how they affect risks and returns. Master financial metrics: ROI, IRR, P/E, dividend yield. And this is just a small part of the knowledge required in this field. You can search for information in search engines, as well as in financial books, forums, competitors (similar existing products), etc.

Result. A deep understanding of the context in which the product will exist. It allows you to communicate with specialists in this field (clients, developers, users).

Research of the subject area

Examples of Use and Benefits Achieved

  • While developing an app for ordering cleaning services, I reviewed the feedback in the App Store of competitors, where users complained about not seeing the contents of cleaning agents. Now, our interface includes details about each product and the option to choose an "eco" option.
  • When I was making a mobile app for accounting, I studied the basic tax legislation norms and simultaneously read comments from private entrepreneurs on social media, who often got lost among invoices. As a result, we simplified the interface: we created a separate section for tax payments with automatic reminders about deadlines.

User Interviews

What is it? Personal face-to-face or online meetings where users share their experiences, pains, and expectations. It is conducted according to a pre-created plan (also called a script) and consists of open-ended questions (the answer cannot simply be yes or no) about past experiences in solving the given task. In such interviews, it is important to ask clarifying questions (how, why) to dive deeper into the problem and get to the essence.

When is it used? At the beginning of the project, to learn about the "pain" points that users encounter. For example, you need to develop a system for patient accounting in a hospital. To do this, you need to clearly understand the stages each patient goes through, what information is important for doctors, and how much time it takes. Interviews with healthcare staff are ideal for this.

Result. Qualitative insights into user needs, their pains, problems, and tasks. One of the most valuable sources of information.

User Interview

Examples of Use and Benefits Obtained

  • While working on a fitness application, I spoke with people who are just starting to train. They shared that they often do not understand how to perform exercises correctly. So we added video instructions and step-by-step tips.
  • While creating a note-taking tool, I met with freelancers who work on several projects simultaneously. They said they needed a simple way to group ideas by topics. We added a feature for virtual "folders" with the ability to set a color and icon, so everyone could navigate their to-do lists more easily.
  • In the e-book reading app project, I talked to avid readers and found out that they often lack the ability to make notes or highlight quotes. Thanks to this feedback, we added a convenient notebook where users can immediately save their favorite excerpts and share them with friends.

Observation (Field Studies)

What is it? Subtle observation of users in their typical environments. They allow us to see the real behavior of people and the unnoticed nuances of product or service usage in the office.

When is it applied? In the early stages, to rethink design tasks and goals. Also in later stages (evaluation of the finished product), to check how the product is used in real conditions.

Result. Discovery of hidden behavioral patterns and problems that users may not be aware of themselves.

Field Observations

Examples of Use and Benefits Obtained

  • While working on a home recipe app, I observed people as they cooked. It turned out that their hands were often busy or covered in flour, making it inconvenient to scroll the screen. After that, we added a voice control mode and large one-touch scrolling buttons.
  • While working on a system for store managers, I visited a supermarket and watched how the administrators changed price tags and checked the stock of goods. It turned out that they preferred using a tablet rather than a desktop computer because they needed to move frequently between the shelves. So we adapted the interface for mobile devices.
  • I planned to improve the design of the electronic journal at school. I entered a classroom and observed how teachers used it during the lesson. It turned out that they hurriedly entered grades, and any extra window annoyed them. Therefore, I simplified the interface to a single table with rows for students and columns for quick grade entry.

Stage 2. Defining Problems (Define). What tasks and goals does the user have?

In the second stage, we formulate clear problems that need to be solved based on the information we obtained in the first stage. Here, we structure the ideas and insights gained during previous research. There are many methods to structure, describe, and document the problems and tasks of users. Additionally, a separate important part consists of prioritization methods, which means identifying the most critical problems. We will not cover them in this lesson, but know that they exist. Here is a list of some of them: RICE, Kano, MoSCoW.

Problem Statement

What is this? A brief description of the essence of the users' "pain" that needs to be solved, based on previous research. Usually, a few sentences are enough to describe one problem. Within one project, several problems can be formulated.

When is it applied? After conducting interviews with users, observations, subject research, and analysis of all this, a general picture should emerge. This activity is conducted based on that.

Result. A specific "what" and "why" we are addressing along with important details.

Problem Formulation

Examples of Defined Problems

  • Subscription Management Tool for Various Services. Users forget about their active subscriptions and continue to pay for unnecessary services. The problem is that there is no single place to control all subscriptions and their costs.
  • Career and Vocational Guidance Platform. Future applicants have no idea how their choice of profession relates to the job market. The problem is the lack of a clear comparison of specialties, future predictions, and necessary skills for each field.
  • Mobile App for Ordering Medications. People who need to quickly buy medical supplies do not always know which pharmacy has the needed product and what its price is. The problem is the lack of a convenient way to check availability and place an order without leaving home.

User Stories

What is it? A brief description of the value that the product provides to the user (in the format “As a [user role], I want [action] so that [benefit]”). This concise format allows for describing both general tasks of the product and small features. Such stories are often used not only by designers but also by managers and product owners.

When is it used? When gathering requirements to help the team understand the usage scenarios.

Outcome. A list of stories that helps maintain focus on what is valuable for users. Typically, during the development of a project, you may have several dozen user stories to cover the main functionality of the product. Remember that each story addresses a specific problem or enables the user to achieve their goal.

User Stories

Examples of User Stories

  • I as a city dweller want to book a parking space in advance through the app so that I don't waste time looking for a free parking spot.
  • I as a student want to view comparisons of majors and university conditions to choose the best option for continuing my education.
  • I as a gym visitor want to receive reminders about my workouts so that I don't miss classes and stick to my schedule.

User Personas

What is it? Conditional "portraits" of different types of users with descriptions of their characteristics, needs, motivations, and pain points. It allows for the creation of distinct user types based on their characteristics, such as age, gender, profession, marital status, hobbies, and so on. It can include specific parameters that are important for your product. For example, body mass index for a fitness app or the presence of a pet for a pet-sitting service.

When is it applied? After collecting a sufficient amount of data and when it becomes clear that users can be categorized into one or more categories with unique characteristics. And while this is a very popular method, sometimes UX designers forego the use of personas in favor of, for example, Jobs to Be Done. This approach describes not users, but specific tasks. Here are a few examples.

  • If we are developing a product for a broad audience, for example, a social network, it becomes obvious that our user can be anyone, and applying personas here will be difficult.
  • However, if we are developing a tool for teachers and students, personas will help delineate basic and advanced usage scenarios: what is needed for conducting interactive classes, how to best set up homework checks, and so on.

Result. Visualization of target users that helps the team understand for whom they are designing.

Persons

Person Examples

  • Denis, 21 years old, IT faculty student
    Motivations: to learn new technologies, to improve skill levels for future work
    Needs: convenient courses with real cases, discussion of tasks with mentors
    Pains: unstructured information, lack of practical application of theory
  • Maryana, 56 years old, history teacher
    Motivations: to make learning interesting for students, to use modern methods
    Needs: a platform with structured material, ability to add interactive tasks
    Pains: excessive technical complexity, inability to quickly adapt content
  • Max, 34 years old, sales manager
    Motivations: to increase deal volume, to quickly obtain fresh data about clients
    Needs: CRM with a simple interface, quick access to contacts and interaction history
    Pains: unstructured client lists, data duplication or loss

User Journey Mapping (Journey Mapping, Customer Journey Map)

What is it? A schematic representation of the path that a user takes while interacting with a product, service, or company. CJM helps to understand the user experience, their emotions, needs, and pain points at each stage. The main goal of this map is to identify issues faced by users and find ways to resolve them to improve the overall experience with the product.

It displays the key touchpoints of the user with the product in the form of a step-by-step table, as well as the emotional states and actions that the user takes at each stage. The map may also include data about the context, user goals, and barriers that hinder the achievement of these goals.

When is it applied? When it is necessary to see where in the interaction chain the user encounters barriers or emotional peaks. This research allows for a very detailed examination of what exactly a person does when trying to solve their problem. If a product is being developed for multiple personas, such as a teacher and a student, then we will have multiple paths for each role. In complex cases, there may be several journeys even for one role.

Outcome. A list of touchpoints, pain points, and opportunities for improvements.

Customer Journey Map

Example of user journey mapping for ordering food through a delivery service

  1. Step: Choosing a restaurant
    Action: The user browses the list of restaurants in the app.
    Emotion: Anticipation.
    Pain: Incomplete information about the menu.
  2. Step: Choosing dishes
    Action: The user adds dishes to the cart.
    Emotion: Satisfaction.
    Pain: Lack of photos of the dishes.
  3. Step: Payment and confirmation
    Action: The user enters card details and waits for delivery.
    Emotion: Anxiety.
    Pain: Long waiting time.

Stage 3. Idea Generation (Ideate)

After identifying significant user problems and tasks, we move on to brainstorming ideas on how to solve them and evaluating those ideas. At this stage, there are numerous methods. Let's consider the most interesting ones.

How Might We…?

What is it? A method of posing creative questions that help find innovative solutions to specific problems. The phrase "How might we" creates a positive mood and stimulates idea generation, emphasizing the possibility of achieving results. For example, instead of stating "Users cannot quickly find the needed feature," one could formulate the question: "How might we make access to the feature quick and convenient for users?" This method helps the team focus on exploring options and expands the boundaries of thinking.

When is it applied? After the problem has been clearly defined.

Outcome. A set of tentative directions to "dig" for idea generation.

How can we?

Examples of HMW Questions and Ideas

  1. Language Learning App

    HMW: How might we integrate gamification elements and social interactions so that users feel progress and do not lose motivation?

    Example Solutions:

    • "Quest" lessons with difficulty levels: users earn points or coins, advance to higher levels, unlock bonus tasks.
    • Group chats / challenges with friends, where everyone receives a daily task and can compare results.
    • Automatic level assessment based on test results, so challenges are always "a bit harder" than current skills.
  2. Balanced Meal Delivery Service

    HMW: How might we offer a balanced menu, built around users' dietary preferences, without complicating the ordering process?

    Example Solutions:

    • Smart diet filters (vegetarian, keto, gluten-free, etc.) that immediately create a set of dishes from various restaurants.
    • "Try for a week" — users subscribe, and the service automatically selects a daily diet considering calorie intake.
    • Loyalty system with personalized discounts (for example, if users support local establishments).
  3. Personal Finance App

    HMW: How might we help users establish healthy financial habits by making expense and savings tracking simple and even enjoyable?

    Example Solutions:

    • Automatic categorization of expenses (groceries, transport, entertainment) with real-time infographics.
    • "Financial challenges": challenges like "Save 10% of income" or "Spend less on coffee".
    • AI tips and suggestions: the app analyzes spending patterns and offers helpful habits (for example, paying bills on time).

Brainstorming (Brainstorming)

What is it? A collective "storm" of a problem, where everyone can propose an idea without criticism from other participants. The main goal of brainstorming is to generate as many ideas as possible in a short time, avoiding criticism and evaluation at the initial stage. Participants can freely express even the boldest or unconventional ideas, fostering creativity. The process usually consists of two phases: idea generation and the subsequent selection of the best ones for further processing. The method is effective in solving complex tasks and stimulates teamwork.

When is it used? At the beginning of the idea generation stage.

Result. A list of diverse (sometimes even unusual) ideas, which are then evaluated and grouped.

Brainstorming

Examples of ideas generated during brainstorming

  • Create an interactive map to display user locations in real-time.
  • Integrate gaming achievements (badges, trophies) for successfully completing tasks or goals.
  • Add a personalized recommendation feed based on user behavior and preferences.
  • Implement integration with a chatbot for quick consultations or customer support.
  • Utilize a voice interface so users can execute commands without manual input.
  • Introduce a "daily challenges" mechanic with automatic statistics and result analysis.

Sketching (Sketching)

What is it? Quick visual capture of ideas on paper or in digital form. In UX design, sketching is used to quickly depict interfaces, page structures, or key product features. The main goal is not to create a perfect design, but to convey a concept and provide a foundation for discussion within the team or with clients. Sketching helps to quickly explore different options, reducing time and resource costs on complex layouts. It is a simple yet effective tool for the initial stages of design, fostering creativity and collaborative decision-making.

When is it used? During or immediately after brainstorming to quickly illustrate possible interfaces or concepts.

Result. Initial visual concepts that are easy to share and discuss. They may resemble very simple wireframes.

Sketching

Stage 4. Prototyping (Prototype)

After selecting the best ideas, we move on to their implementation in the form of designs with varying levels of detail for further testing. Depending on the available budget and time, these can be low-fidelity static mockups with few details or detailed interactive prototypes that look like a finished product.

But even before creating simple wireframes, it can be useful to create a conditional diagram and show which screens the user will encounter to complete their task. For example, to buy something in an online store, you need to find the product, add it to the cart, provide the shipping address, and make the payment. That's at least three screens (product page, cart, checkout).

In the next lesson, we will become very familiar with the types and nuances of creating user flows and wireframes, but for now, here is a brief description.

User Flow

What is it? A visual diagram of the sequence of steps that a user takes within a specific scenario. A user flow can have branches, meaning the user can take different paths and see different screens. For example, if the payment is successful, there will be one message, but if not, there will be a completely different one with buttons to resolve the issue (retry payment, enter a different card).

When is it used? Before or during the creation of wireframes to align the logic of transitions between screens.

Result. A clear structure of transitions between the product screens.

Task flow on paper

Wireframes

What is it? Layouts of screens that show the placement of key interface elements (buttons, form fields, image placement, and so on). There are Lo-fidelity (low detail) – simplified diagrams, Hi-fidelity (high detail) – which resemble the final design.

When is it used? Lo-fi – at the beginning, to quickly test ideas; Hi-fi – when the logic has already been refined.

Result. A set of screens understandable to all team members that can be quickly adjusted.

Task flow on paper

Interactive Prototypes

What is it? Clickable mockups created in Figma, Protopie, Axure, etc., that simulate a real application or website. Such a prototype can be run on a computer or smartphone. It will function like a real website or application. However, it is very limited in functionality.

When is it used? When a good idea has been chosen and it needs to be thoroughly tested. It allows checking the logic and usability of the interaction before involving real developers, which significantly saves the budget.

Result. Almost a "live" experience, where you can navigate between screens, fill in fields, etc. It allows testing the chosen solution and ensuring that it effectively solves the problem.

Interactive prototype

Step 5. Testing (Test). We check that it works

At the final stage, we check how well the created prototypes meet users' needs and whether they truly solve their problem. They allow us to understand what changes need to be made to further improve the product. Therefore, after testing, designers return to the prototypes and refine them, as it is usually very difficult to create a perfect solution on the first try.

Guerrilla Testing

What is it? A quick and informal method of testing prototypes or designs "on the go" with random people (often in crowded places like cafes, shopping malls, etc.). This can include paper prototypes where you show sketches on paper and ask what a user would do to solve a given task, as well as interactive prototypes in Figma.

When is it used? When there are initial prototypes for testing and significant time constraints.

Result. In a short period of time, you can check how understandable the interface is, whether there are issues with interaction scenarios, and immediately gather initial ideas for improvement. Of course, Guerrilla Testing does not replace full usability testing with detailed scenarios and carefully selected participants, but it is a great way to get initial reactions when the product is in the early stages of development or when time and budget are limited.

Partisan Testing

Usability Testing

What is it? Usability testing (usability) or ergonomic testing is a study to check how convenient it is to use the interface to perform a specific task. Such tests are conducted on real people using interactive prototypes or finished products.

In most cases, the UX designer provides a device with the prototype running, explains what needs to be done, and observes the user. Everything is then carefully noted and analyzed later. Sometimes a recorder is used for comments. After conducting numerous tests, conclusions can be drawn about how successful the chosen solution is or which hypothesis worked better.

Users perform real tasks with the prototype/product, while the designer observes where difficulties arise. Each task is performed multiple times by different users to measure the effectiveness of the solution (how much time was spent, how many mistakes were made, and so on).

There are special services for remote usability testing. There, prototypes are launched on users' computers, and a screen recording is made with voice comments from the participants (sometimes video from a webcam is recorded, so you can even see the user's facial expressions and emotions).

When is it applied? After creating the prototype, before the final development. Or already after the product is created, if we want to improve it and identify issues.

Result. A list of issues and a table with metrics on the effectiveness of solving user tasks. As well as recommendations for improvement.

Usability Testing

If Repetition is Needed

As already mentioned, in the design process, there is often a need to return to previous steps to review or improve the developed solutions. For example, during prototype testing, issues may arise that require changes to the initial concepts or even to the problem formulation. If users exhibit unexpected behavior, designers may return to the research stage to better understand their needs, and afterwards adjust ideas or create a new prototype. This approach ensures that the final product meets users' expectations as closely as possible.

Double Diamond Concept

If we analyze all the stages we have just reviewed, we can see that the problem-solving process has a two-step structure: problem exploration and solution creation. Each step includes two phases: divergence (idea generation, exploration) and convergence (analysis and selection of the most important problems and the best approach to the solution).

The model helps to avoid common mistakes by ensuring a deep understanding of the problem and a focus on user needs. It fosters the creation of effective and innovative solutions.

How to Build Your Design Process?

Your design process should be flexible and adaptable to specific conditions, taking into account time, budget, and resource constraints. Not all the stages we covered are necessarily needed in every project. For example, in small projects with a limited budget, the research and analysis stages can be shortened or combined, relying on existing knowledge. At the same time, complex projects may require a more detailed approach with a full cycle of stages.

A key factor in building the process is the balance between the quality of the outcome and the available resources. If there is not enough time or funds, it is important to prioritize the stages that will make the greatest contribution to achieving the project goals. For example, in the case of a limited budget, particular attention can be paid to rapid prototyping and user testing, which allows for quick feedback and product improvement.

The flexibility of the process and the ability to adapt to conditions are key to the successful completion of the project, while maintaining a focus on user needs and core business objectives.

Typical Day of a UX Designer

A typical day for a UX designer consists of various tasks that depend on the stage of the project development. The morning usually begins with checking emails, planning tasks, and meetings. Next, the designer may conduct research: analyzing user data, reviewing analytics, or communicating with users. Part of the day is spent creating prototypes and mockups in specialized tools such as Figma or Protopie. Regular team meetings are held to discuss work results, get feedback, or clarify project requirements. At the end of the day, the designer may engage in testing their solutions, work on improving functionality, or prepare materials for handover to developers.

Homework

From now on, this course is designed for independent study and completing homework assignments. I understand that some tasks may not be easy for you.

For additional support, use the chat in Telegram. Here you can ask questions related to the lessons or view examples of correct completion from other students.

The chat is not available for citizens of Russia.

We will practice conducting user interviews from the first stage of the design process (observation). To start, we need to choose a project topic that we will work on. This is a fictional product, but imagine that you will be working on it as a UX designer. Here is a list, choose what you like the most (or you can come up with your own product):

  • Mobile fitness application. Tracking workouts, meal planning, motivational reminders.
  • Ready meal delivery service. Various diets, subscriptions, personalized recommendations.
  • Budget (finance) planning application. Expenses, savings, expense diaries, payment reminders.
  • Foreign language learning application. Daily lessons, gamification, social interactions between users.
  • Online platform for finding tutors or courses. Teacher ratings, class schedules, reviews, search by specialization.
  • Mental health care app. Meditations, stress relief tips, mood diary.

Great! Now you need to create a list of 5–8 key questions that you will ask potential users. Here are a few tips on how to do this correctly:

  • Formulate open-ended questions. An open-ended question encourages the respondent to share details, examples, stories. For example, instead of asking "Is it convenient for you to use such a service?" ask: "Tell me how you usually perform this action?".
  • Focus on past experiences and real scenarios. Avoid questions like "What if...?". Instead, ask about what the user has already done or is currently doing. Example: "Recall the last time you signed up for a gym. How did that go?".
  • Avoid leading questions. For instance, don’t ask: "You probably love shopping online, right?". Instead, it’s better to say: "Tell me about your experience with online shopping. How does it differ from offline shopping?".
  • Ask clarifying questions. If the user answers briefly, make sure to find out more: "What exactly was difficult about this process?", "Why did you make that decision?".
  • Structure the interview. Introduce yourself, talk about yourself and the purpose of the interview. Start by asking something general ("What apps/programs do you use most often and why?"). Then move on to specific scenarios related to your product/idea. Finally, thank them for their time and explain why it’s important.

Examples of questions:

  • Tell us how you currently track your finances/physical fitness/nutrition?
  • What are the main difficulties that arise in this process?
  • What motivates you to continue or, conversely, what would prevent you from using the app?

And now for the most interesting part! You find a few people who can be potential users of your app and conduct interviews with them. These can be your relatives, friends, acquaintances, and even unfamiliar volunteers that can be found in the chat.

After the interview, you need to write down insights, meaning facts and non-obvious things that allow for a deeper understanding of user needs, things that were not noticeable on the surface. Insights allow you to look at people's experiences in a new way and identify significant "pain points" or hidden opportunities for improving the product.

Next, you go to the chat, find the appropriate lesson, and publish: the product topic, a list of questions, and a list of insights. At first, I will check homework assignments on my own, but later I hope for experienced students. Also, ask questions there and share experiences. Good luck!

Conclusions

Hello! You have just completed one of the most challenging yet exciting lessons of the course. Now you have an idea of what it means to be a UX designer in real life — with all the new terms, challenges, and discoveries. Remember that without practice, any theory loses its meaning, so study the material and be sure to complete the homework. Ahead are even more exciting topics before we move on to Figma. I promise, it will get even more interesting!

Follow me on Instagram @frusia.pro, so you don't miss announcements of new lessons and receive useful tips for UX/UI designers, including portfolio creation and job searching. In the feed, you'll find a lot of practical posts, which will help you improve your design skills every day. Join and develop your professional skills together with me!

Take quiz

To pass the lesson and check your knowledge, you need to correctly answer 80% of the questions from the quiz. To do so, you need to login and enroll to the course or signup, if you haven't done so yet.

Take quiz

Leave a comment

Place the handle into the purple zone

Comments

скажена черепашкаUkraine flag підтримує ЗСУ 7 November 2023 14:53  
Цікаве завдання. Дякую за таку круту можливість прокачати нові навички і побачити себе з іншого боку.

https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=0-1&mode=design&t=iFwMGBcfNgKScjtH-0

Коментар frusia.pro:

Залишила коментарі до усіх завдань у фігмі, переглянете. Якщо коротко – добре справились з усіма завданнями, треба лише виправити деякі нюанси.

Валентина18 November 2022 22:55  
Дякую за роз'яснення. Побувала на уроках 1,2,3. Працювала по уроку 6. Вийшла на маленькі результати.
Сама собі ставлю запитання, а у Вас отримую відповідь. Це велике задоволення. В уроці 3 сподобалось: прототип,
Figma і прототип, адаптивний дизайн,види графіки.
ВарвараUkraine flag підтримує ЗСУ 15 October 2022 22:43  
Завдання 1-2
https://www.figma.com/file/NptFdbyeF77wJ79xFR2xUH/1-2-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Завдання 3-4
https://www.figma.com/file/QIwTSpFf9pMvfRDCs0z1Rp/UX%2FUI-Frusia?node-id=0%3A1

Коментар frusia.pro:

Завдання 1-2.Дуже класно, що ви самі дійшли до того, щоб використати FigJam для проектування флоу. Все дуже зрозуміло, молодець.

Завдання 3-4. Вилка. Вайрфрейми також зробили правильно. Переходьте до наступного уроку!

Yuliya LepenkoUkraine flag підтримує ЗСУ 3 September 2022 15:13  
https://excalidraw.com/#json=Kxc7EBhd7Nq04Wn5E3VKs,Ft976jzReSZDNXVmZCTF1g

Коментар frusia.pro:

Завдання 1. Відмальовка таскфлоу для двох сценаріїв. Ви обрали інтернет-магазин та правильно відобразили кожен із сценаріїв. Супер!

Завдання 2. Таскфлоу з новою функцією. Тут також все добре та дуже цікава функція.

Завдання 3. Вайрфлоу для перших двох сценаріїв. Все чудово, єдиний момент, що напевно в другому сценарії (другий екран), де результати пошуку зазвичай не демонструють банер категорії, а просто виводять знайдені товари.

Завдання 4. Вайрфлоу для нового сценарію. Все правильно, відповідає вашому таскфлоу. Так тримати!

Окремо хочу похвалити вас за те, що використали дуже зручний та підходящий онлайн-інструмент для створення флоут та вайрфреймів.

Дана Ч.Ukraine flag підтримує ЗСУ 19 August 2022 21:44  
https://drive.google.com/drive/folders/18jSb5FgUgUYsPHQMJIUBCUV-h-amH8L-?usp=sharing

Коментар frusia.pro:

Те що я змогла зрозуміти зі скрінів, бо надіюсь ви не образитесь, але вони місцями незрозумілі, це те, що ви почали свій флоу із гугла, а потім перейшли на інший сайт. Правильне виконання цього завдання передбачає, що ми розробляємо флоу тільки для одного сайту. Тобто або це мав бути гугл (і при переході на інші сайти, його флоу закінчується), або вже сторонній сайт (з фільмами). Спробуйте перобити завдання, згідно цих умов.

Вікторія Грищенко Ukraine flag підтримує ЗСУ 5 July 2022 12:35  
Добрий день! Дякую за відповідь, все виправила!)

https://drive.google.com/drive/folders/1PqXad4A9UNY-tcR38-ZKVqWErnXcIe-G

Коментар frusia.pro:

Добрий день!

Тепер все правильно, чудово попрацювали! Сміливо переходьте до наступного уроку

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 4 July 2022 13:39  
Добрий день!

https://drive.google.com/drive/folders/1PqXad4A9UNY-tcR38-ZKVqWErnXcIe-G

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Створити таскфлоу для двох сценаріїв. Бачу сценарій відправки листа та налаштування двофакторної авторизації. У першому сценарії після входу йде два однакових шляхи для відправки листа, які дублюються. Достатньо від прямокутника «Підтвердження номеру телефону» провести стрілочку до лівого прямокутника «Створення листа». А два прямокутника праворуч забрати. Також, зверніть увагу, що прямокутник «Ввід усіх данних» – не є окремим екраном. Це дія, яка виконується на екрані «Створити обліковий запис». Тому треба прибрати прямокутник «Ввід усіх данних», а під прямокутником «Створити обліковий запис» додати текстове пояснення «Користувач вводить усі данні та клікає "Створити"». Так само треба зробити для решти дій, які ви позначили прямокутниками, адже ними позначаються лише екрани.

Аналогічна ситуація з другим сценарієм. Тобто прямокутниками позначаються тільки окремі сторінки, а те що там робить користувач описується текстовим блоком під прямокутником.

Завдання 2. Створити таскфлоу нової функції. Дуже класна ідея. Тут треба виправити по аналогії з першим завданням. Також, якщо користувач не зареєстрований, то треба додати екран «Логін». По решті все супер!

Завдання 3. Створити вайрфлоу для сценаріїв з першого завдання. Все добре, бачу екрани для сценаріїв першого завдання. Можна ще додати текстові пояснення, що саме робить користувач на кожному екрані.

Завдання 4. Створити вайрфлоу для нової функції. Все супер, молодець!

Чудово попрацювали, але треба допрацювати завдання 1-3. Чекаю на виправлення

Yana UsachovaUkraine flag підтримує ЗСУ 30 June 2022 11:20  
Добрий день, дякую за зауваження, все виправила
https://www.figma.com/file/7Z0xbW946RwE9dSnzxWM9q/Untitled?node-id=0%3A1

Коментар frusia.pro:

Привіт! Тепер все супер, рухайтесь до наступного уроку

Марія СUkraine flag підтримує ЗСУ 29 June 2022 23:56  
https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=0%3A1

Коментар frusia.pro:

Привіт!

Завдання 1. Створити таскфлоу для двох сценаріїв. Бачу два сценарії: відтворення треку і створення плейлиста. Все добре, але є одне зауваження. Зверніть увагу, що прямокутник «Вибір композиції» – це дія, а не окрема сторінка. Дія виконується на екрані «Улюблені». Тому треба під цим прямокутником додати текстове пояснення «Користувач клікає на композицію», а відповідний прямокутник «Вибір композиції» видалити.

Схожа ситуація з другим сценарієм. Під прямокутником «Списки відтворення» можна додати текстовий блок з описом, що саме має зробити користувач «Користувач клікає на посилання "Новий список відтворення"». Наступна сторінка таскфлоу буде називатись «Новий список відтворення» (як у вайрфлоу) з текстовим поясненням під ним «Користувач вводить назву списку, опис і доступність ».

Тобто прямокутниками позначаються тільки окремі сторінки, а те що там робить користувач описується текстовим блоком під прямокутником.

Завдання 2. Створити таскфлоу нової функції. Тут треба виправити по аналогії з першим завданяям. «Редагувати список» – «Редагування списку». Про додавання обкладинки написати коментар.

Завдання 3. Створити вайрфлоу для сценаріїв з першого завдання. Дуже добре, видно як користувач має взаємодіяти з елементами інтерфейсу. Було б добре ще розділити кожен екран в окремий фрейм, а не все в одному. А також додати текстові пояснення.

Завдання 4. Створити вайрфлоу для нової функції. Все добре, тут ті самі зауваження, що і в попередньому завданні.

В цілому все добре, але вам треба зробити правки

Yana UsachovaUkraine flag підтримує ЗСУ 29 June 2022 15:19  
Добрий день
https://www.figma.com/file/7Z0xbW946RwE9dSnzxWM9q/Untitled?node-id=0%3A1

Коментар frusia.pro:

Добрий день!

Завдання 1. Створити таскфлоу для двох типових сценаріїв. Бачу навіть три сценарії: логін, реєстрація, відправка листа. Схоже, що ви не в тому місці підписали текстовий блок «так», він має йти після блоку «реєстрація». Адже, якщо користувач зареєстрований, то він вводить логін і пароль.

Завдання 2. Створити таскфлоу для нової функції. Бачу функцію для налаштування нотифікацій про нові листи. Тут аналогічний коментар про текстовий блок «так», як у першому завданні.

Завдання 3-4. Створити вайрфлоу для першого і другого завдання. Все добре, але є важливе зауваження. Прямокутники з перехрестям позначають малюнки й фото, а ви використовуєте їх для позначення кнопок. Також, не треба використовувати заокруглення або інші ефекти у вайрфреймах, це зайве на ранніх етапах.

Чекаю на виправлення 3-4 завдання

Ірина С.Ukraine flag підтримує ЗСУ 15 June 2022 12:07  
Доброго дня! Надсилаю ДЗ по 3 уроку.

https://www.figma.com/file/pMDcTmxGrUkgCfO9SVfUxv/Homework?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Намалювати таскфлоу для двох сценаріїв. Дуже добре, все вірно! Можу порадити використовувати коротші назви екранів. Декілька прикладів:

  • Вікно можливих результатів на головній сторінці → Результати пошуку;
  • вспливає вікно, що підтверджує оформлення підписки → Підтвердження підписки;
  • відкривається вікно з можливими варіантами сповіщень → Налаштування сповіщень.

Завдання 2. Намалювати таскфлоу для нової функції. Правильно.

Завдання 3. Намалювати вайрфлоу для сценаріїв з першого завдання. Все вірно, молодець! Щоб показати, з якими елементами взаємодіє користувач можна використовувати аннотації, дивіться приклад в коментарях нижче. Але ваш спосіб з тінью теж зрозумілий.

Завдання 4. Намалювати вайрфлоу для нової функції. Цікаве втілення потенційно корисної ідеї. Все правильно.

Ви добре засвоїли матеріал, переходьте до четвертого уроку

Анна СмірноваUkraine flag підтримує ЗСУ 4 June 2022 11:52  
Доброго дня!
Надсилаю своє ДЗ, зробила усе в одному файлі в фігмі)

https://www.figma.com/file/WZYUghaAiaHMwQ0a1957Md/UI%2FUX-Home-work?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Намалювати таскфлоу для двох сценаріїв. Бачу сценарій закріплення файлу і відправки листа у Gmail. Все добре.

Завдання 2. Намалювати таскфлоу для нової функції. Бачу сценарій для відправки повідомлення групі людей. Також правильно.

Завдання 3. Відмалювати вайрфлоу для сценаріїв першого завдання. Все добре. Можна ще підписати кнопки, з якими йде взаємодія користувача. Наприклад, у вашому випадку Compose, Send.

Завдання 4. Відмалювати вайрфлоу для нової функції з другого завдання. Дуже добре, молодець! Мені все зрозуміло.

Гарно попрацювали, молодець, що одразу в Figma почали! Рухайтесь далі

Юля К.Ukraine flag підтримує ЗСУ 3 June 2022 15:58  
https://docs.google.com/document/d/1OUykeygDiUWXkY5t4Y-bJsUV-9x04V5fnS4evpoShP8/edit?usp=sharing

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Намалювати таскфлоу для двох сценаріїв. Бачу два сценарії: 1) покупка проїздного 2) складання маршруту. Все правильно.

Завдання 2. Намалювати таскфлоу нової функції. Бачу сценарій для налаштування зовнішнього вигляду дошок, на які підписаний користувач у Pinterest. Теж правильно.

Завдання 3. Намалювати вайрфлоу для сценаріїв з першого завдання. Все добре, бачу екрани для двох сценаріїв.

Завдання 3. Намалювати вайрфлоу для нової функції з другого завдання. Бачу, що налаштування фіда розмістились в окремій вкладці (остання праворуч) налаштувань. Було б ще добре показати, що ж там за налаштування з'являються після кліку на Edit

У вас добре виходить, переходьте до наступного уроку

КатеринаUkraine flag підтримує ЗСУ 19 May 2022 17:31  
https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/Untitled?node-id=0%3A1

Добрый вечер!
Внесла правки)

Коментар frusia.pro:

Доброго дня!

Завдання 1. Ви додали пояснення до екранів, все супер.

Завдання 3. Також ви додали екран оформлення замовлення з оплатою, чудово.

Дуже добре, рухайтесь до четвертого уроку

БогданаUkraine flag підтримує ЗСУ 19 May 2022 07:38  
Вітаю!
Дяка за чудовий урок і цікаве д/з ;)

Завдання 1-2. Скористалась FigmaJam для відмальовки блок-схем.
https://www.figma.com/file/fyKZq6WInoJ3zLK59XjNyS/%D0%94%D0%97-%E2%84%963-Frusya?node-id=2%3A414

Завдання 3-4. Маю надію, що правильно зрозуміла логіку малювання вайрфлоу.
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7-4-(3-4)?node-id=0%3A1

Мирного дня!

Коментар frusia.pro:

Привіт! Будь ласка

Завдання 1-4. Чудово попрацювали! Все правильно. Декілька рекомендацій до вайрфреймів:

  • Уникайте кольорових фігур і дотримуйтесь чорно-білої гамми;
  • якщо потрібно виділити якийсь елемент, то використовуйте анотації. Просто числом (починаючи з 1) на фоні кольорового кружка відмічайте елемент, про який хочете розказати. Під вайрфреймом ставите такий самий кружок і додаєте пояснення. Ось приклад:Приклад аннотацій до вайрфреймів

Продовжуйте навчання

МаргаритаUkraine flag підтримує ЗСУ 18 May 2022 19:52  
Доброго вечора! Зробила правки, перевірте, будь ласка.

Завдання 1-2:
https://www.figma.com/file/E37DssBVZ6FWvHSHHBEkhM/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2.?node-id=0%3A1

Завдання 3-4:
https://www.figma.com/file/IIs2yFFB24Y9ozdShQ3xB5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3%2C-4.

Коментар frusia.pro:

Привіт!

Завдання 1-4. Дуже добре, тепер все правильно, переходьте до наступного уроку

МаргаритаUkraine flag підтримує ЗСУ 17 May 2022 20:30  
Доброго вечора! Зробила виправлення у завданнях, дублюю.

Завдання 1-2:
https://www.figma.com/file/E37DssBVZ6FWvHSHHBEkhM/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2.?node-id=0%3A1

Завдання 2-3:
https://www.figma.com/file/IIs2yFFB24Y9ozdShQ3xB5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3%2C-4.?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір! Вже набагато краще, але є ще пару моментів.

Завдання 1. Прямокутник «Зареєструватись» відповідає за дію, тому його можна видалити і додати підпис до екрану «Реєстрація» (за бажанням, наприклад: користувач клацає кнопку «Зареєструватись»). Решта правильно.

Завдання 2. Все правильно.

Завдання 3-4. По списку:

  • Зробіть кружки для анотацій одним кольором;
  • додайте у третьому завданні на другому екрані зліва текст для двох анотацій (жовтий і зелений);
  • замініть фіолетовий і червоний кольори у вайрфреймах на чорнобілі;
  • змініть текст анотацій на іншу форму. Було: Слід навести мишку на будь-який товар, тоді з'явиться віконце. Має бути: Коли користувач наводить курсор на товар, з'являється віконце.

Рухаємось у правильному напрямку, чекаю виправлення

МаргаритаUkraine flag підтримує ЗСУ 17 May 2022 11:08  
Доброго дня! Дублюю завдання.

Завдання 1-2:
https://www.figma.com/file/E37DssBVZ6FWvHSHHBEkhM/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2.?node-id=0%3A1

Завдання 3-4:
https://www.figma.com/file/IIs2yFFB24Y9ozdShQ3xB5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3%2C-4.

Коментар frusia.pro:

Добрий день!

Завдання 1. Пам'ятаємо, що у таск флоу прямокутниками позначаються екрани, а дії підписуються текстом біля стрілочок (переходів між екранами) або під прямокутниками. Тому деякі прямокутники треба прибрати, а саме: купити, оформити замовлення, забули пароль, увійти. І додати відповідні текстові пояснення. Також деяким екранам можна дати більш зрозумілу назву: нагадати → відновлення паролю, обраний товар → деталі товару, вхід до кабінету → логін.

Завдання 2. Аналогічно деякі дії треба замінити текстовими поясненнями, а саме: подивитись на моделі. Також назва останнього прямокутника схожа дію, хоча це по суті екран, тому треба перейменувати: протестувати обраний товар → тестування товару на 3d моделі обличчя.

Завдання 3. Все добре, але щоб було ідеально, до екранів краще зробити пояснення через анотації замість ліній. Тобто малюємо кружечок і вписуємо номер в місці вайрфрейму, де потрібне пояснення. Далі такий же кружечок ставимо під вайрфреймом і додаємо текстове пояснення справа. Це дозволить нам прибрати лінії. Виглядати це має приблизно так:

Приклад аннотацій до вайрфреймів

Завдання 4. На останньому екрані напевно не треба кнопки протестувати товар. Адже ми вже його переглядаємо на моделі.

Гарно попрацювали (ще і одразу у Figma), чекаю на виправлення

КатеринаUkraine flag підтримує ЗСУ 14 May 2022 18:30  
https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/Untitled?node-id=0%3A1

Доброй ночи
Ответ на третье задание

Коментар frusia.pro:

Добрий день!

Завдання 1. Бачу сценарій реєстрації і авторизації. Є декілька незначиних моментів, які було б добре виправити:

  • Початковим екраном я б зробила головну сторінку, а не привітання. На жаль, ви не вказали повну адресу сайту, можливо там дійсно якийсь екран привітання;
  • екрани введення даних та логін і пароль я б видалила, а замість них доповнила б коментар під екранами авторизації й реєстрації відповідно, тому що по суті ми заповнюємо данні на тих самих екранах.

Завдання 2. Бачу сценарій замовлення друкованої книги, все правильно.

Завдання 3. Все добре, ви навіть зробили мокап з планшетом

Завдання 4. По цьому завданню не бачу ваєрфреймів, точніше лише кабінет користувача, але так як багато тексту замінено на Lorem ipsum, то мало що зрозуміло. Було б добре допрацювати пару ваєрфреймів і спробувати додати такі екрани:

  • Оформлення замовлення;
  • оплата покупки.

Також хочу похвалити за те, що почали працювати одразу у Фігмі. Виконайте правки і можна переходити до наступних уроків

Світлана 14 May 2022 17:48  
Велике дякую за можливість навчання :)
https://www.figma.com/file/JDL8m3w1i3C6cZUSCasHDi/%D0%A3%D1%80%D0%BE%D0%BA-%E2%84%963?node-id=1%3A17

Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.

За реквізитами пишіть в дірект Інстаграму @frusia.pro

Аліна12 May 2022 08:22  
Добрий день) Допрацювала завдання по Wireframes. Зкидаю посилання знов: https://www.figma.com/file/kMqt2HB0uLfBckslagcTd5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B4%D0%BE-%D1%83%D1%80%D0%BE%D0%BA%D1%83-3?node-id=0%3A1

Коментар frusia.pro:

Добрий день!

Завдання 1-2. Завантаження забрали, супер.

Завдання 3. Бачу екран з деталями товару, все добре.

Завдання 4. Дуже добре, вже видно як додавати групи і назначати їм фільми.

Стало набагато краще, переходьте до наступного уроку

Дар'я11 May 2022 13:17  
Доброго дня
це було хард, поки не дуже зрозуміло як налаштувати свої руки для роботи з Figma. Цікаво, ваєр флоу малюють від руки, чи більшість все ж використовує "UI kit"
Надихаючись попередніми роботами, вийшли ось такі роботи:
1. https://www.figma.com/file/gQBVwZKxfVPXpx76Uyo791/1-%2F2-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F?node-id=0%3A1
2.https://www.figma.com/file/Wk0gSOPkLzjbDTrBPqtCfX/3-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F%2F4-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F?node-id=0%3A1

Коментар frusia.pro:

Добрий день, так, починати дуже важко, але головне не зупинятись і продовжувати практикуватись. Ваєр флоу малюють від руки на папері або на дошці маркером (частіше коли працюють командою, наприклад на воркшопі). Також часто використовують і готові набори компонентів для Figma (як ви вказали UI Kit). Існують і спеціалізовані програми для цього, наприклад, Balsamiq Wireframes. Кожен з цих варіантів має право на життя, я частіше роблю ваєрфрейми в Figma.

Завдання 1. Бачу два сценарії: перегляд новин і серіалу, а також анонси нових серій, що вийдуть незабаром. Все добре.

Завдання 2. Є нова функція по визначенню типу шкіри і стану волосся. Правильно.

Завдання 3. Все добре, але я би дала відступи між екранами, тому що вони зливаються і виглядають як одна довга сторінка. Також було б добре замінити деякі тексти, наприклад, "Special Feature" на назву серіалу. Я так розумію, що ви використали якийсь готовий набір, бо бачу компоненти. Дуже добре!

Завдання 4. Тут ви дали відступи між екранами, чудово. Тексти також поправила б у списку рекомендацій.

Гарно попрацювали, продовжуйте навчання

Аліна10 May 2022 17:00  
Добрий день)
Ось моя робота: https://www.figma.com/file/kMqt2HB0uLfBckslagcTd5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B4%D0%BE-%D1%83%D1%80%D0%BE%D0%BA%D1%83-3?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір

Завдання 1. Супер, бачу два сценарії для покупки і входу/реєстарції.

Завдання 2. Схоже на можливість групувати фільми по категоріям. Тільки ви не вказали, що це за сайт. Вказувати момент завантаження сайту не потрібно, тому блоки «Відкриття сайту» можна видалити для обох перших завдань.

Завдання 3. Все добре. Але для повноти картини я би ще додала екран з деталями обраного товару. Також замість «Обрати товар» можна написати «Деталі товару».

Завдання 4. Тут ще треба домалювати декілька екранів, які є у таск флоу але відсутні у вайрфлоу: сторінка фільму, список переглянутих фільмів, створення нової групи.

Будь ласка допрацюйте вказані моменти і напишіть мені знову, щоб я доперевірила цю домашку.

Ангеліна8 May 2022 19:58  
https://www.figma.com/file/BdnN7wxtHTeBqtPOtrrPst/Untitled?node-id=0%3A1 https://www.figma.com/file/nBjT3B7RcZicdD9XP0QwmR/Untitled?node-id=0%3A1

Коментар frusia.pro:

Завдання 1. Бачу декілька сценаріїв користувача для сайту UaSerial, все вірно.

Завдання 2. Є новий флоу для перегляду своїх замовлень для якогось сайту, нажаль ви не вказали назву. Можу припустити, що це щось типу Розетки.

Завдання 3. Все добре, але схоже, що ви пропустили екран логіну.

Завдання 4. Правильно.

В цілому все ок, добре попрацювали, переходьте до наступного уроку

Aліна5 May 2022 16:50  
1,2, https://www.figma.com/file/zppRoSu3qqKz5AXRvJ5RK6/Untitled?node-id=2%3A279

3,4 https://www.figma.com/file/ymcooWEcMhr61oYGfezM95/Untitled?node-id=4%3A151

Коментар frusia.pro:

Добрий вечір

Завдання 1. Бачу навіть три сценарії: оформлення замовлення, реєстрація і логін. Все правильно.

Завдання 2. Ви обрали досить складний новий функціонал по створенню власного дизайну. Молодець.

Завдання 3. Ви дуже старались і можливо зараз це виглядає не дуже акуратно, але головне передати суть екранів і у вас це вийшло добре.

Завдання 4. Тут трохи не вистачає елементів інтерфейсу, які дозволили б створити власний дизайн, ви просто позначили область. Але є іконка скрепки і можу здогадатись, що ви хотіли додати можливість завантажити власне зображення і нанести на нього якість додаткові графічні елементи, наприклад, текст. Це хороша задумка.

Гарно виконали усі завдання, молодець! Переходьте до наступного уроку.

Вероніка5 May 2022 14:27  
Добрий день! Дуже дякую Вам за можливість вивчати все це у вільному доступі, Ваші пояснення чудові і дуже зрозумілі, завдання робити дуже цікаво!
Дякую, якщо зможете подивитись та прокоментувати завдання)) Цікаво почути Вашу думку. Я трошки відійшла від завдання і замість якоїсь нової функції на сайті зробила шось типу доповнення як Ютуб Мьюзік у Ютуба)

https://www.figma.com/file/Gv661ICkCkQEbDCqFOfNhP/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1-4?node-id=8%3A742

Там завдання 1, 3 та 2,4 в різних pages за одним посиланням)

Коментар frusia.pro:

Добрий день, будь ласка, дякую вам за відгук

Завдання 1 і 3. Дуже гарно зроблено, ще і одразу у Фігмі та в одному файлі. Все правильно, у мене тільки зауваження до пошуку. Я не бачу сторінки з результатами пошуку у третьому завданні.

Завдання 2-4. Дуже добре! Навіть повторили стилістику Youtube Music.

Домалюйте екран у третьому завданні і переходьте до наступного уроку

Alona Hur29 April 2022 19:09  
Добрий вечір. Дякую за Ваш курс, надзвичайно цікаво та корисно і заздалегідь дякую, за перевірку домашніх завдань!
Завдання 1, 2 - https://www.figma.com/file/NwBZHqL7hkyZ6xhijoBn4U/ДЗ-3.-Завдання-1%2C-2.?node-id=0%3A1
Завдання 3, 4 - https://www.figma.com/file/EBDMtkJTwc34vjXVI1PH8p/ДЗ-3.-Завдання-3%2C-4.?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір, будь ласка

Завдання 1-2. Дуже добре справились, ще і використали FigJam, який добре підходить для подібних задач.

Завдання 3-4. Все супер! Для останнього завдання я би ще додала список локацій, клацаючи по яким можна отримати уявлення про усі кімнати.

Молодець! Переходьте до наступного уроку.

Іра28 April 2022 17:24  
Завчасно дякую за перевірку та фідбек - https://excalidraw.com/#json=JPoct0mmCSGLPWC0Kq6pl,8UmJPF81Ed8RulVHQ1c01g

Коментар frusia.pro:

Хочу похвалити вас за підхід, дуже класно вийшло! Все зрозуміло та чітко структуровано. В цілому грубих помилок не було. Єдине на що вам варто звернути увагу, ваш таскфлоу з новою функцією завантаження пдф файлів завершується на вікні загрузки, а вайрфлоу повертається на профіль з уже завантаженими файлами. Оці моменти, що відбудеться при успішному або не успішному завантажені файлу також треба демонструвати у таскфлоу.

Эльвира16 February 2022 00:48  
Люба, большое спасибо за урок! Это была сложная катка)
Пользуясь опытом предшественников выполнена на excalidraw.com
https://excalidraw.com/#json=A0KYSOrjIWQtGsIyzCC0B,4wcArO92HVvmh136EnxVMQ

Комментарий frusia.pro:

Молодец, что подметили и воспользовались удобным сервисом. Вы хорошо справились с заданиями. У вас есть одна ошибка, вот тут вы зачем-то замкнули путь оформления покупки главной страницей. Этого не нужно делать, и так понятно, что из каждого шага с помощью меню можно выйти на главную страницу. И то, что мы размещаем в конце кнопку "На главную", уже не имеет особого веса, так как пользовательский путь завершен Кстати еще одна небольшая ошибка: у вас есть два экрана "оформление заказа" и "чекаут", но по сути эти названия обозначают одно и тоже. Экран, который вы назвали "чекаут", лучше назвать "Уведомление об успешном оформлении".

Дарья12 February 2022 03:35  
Домашнее задание https://cloud.mail.ru/public/HLTi/GCDuPph2D

Комментарий frusia.pro:

Все отлично, вы очень понятно отобразили и таск-флоу, и вайрфреймы, но есть небольшая ошибка. "Просмотр ленты" – это действие, а не экран. Нужно оставить просто квадратик "Лента", а то, что её можно просматривать и так понятно.

Лилия19 January 2022 12:54  
Домашнее задание
Добавила ссылку на сервис и если не работает, то гугл ссылка
https://excalidraw.com/#json=kqTb-yxwl_JxNtQWKXRUQ,Wd3XY685ZY2votFNfbfuPg
https://drive.google.com/drive/folders/1hfUyG3PvJkKwq40isnRQORJhOnJFRn8g?usp=sharing

Комментарий frusia.pro:

Все идеально, по всем заданиям, даже не к чему придратся. Хочу вас похвалить, за то что нашли сервис, в котором можно так аккуратно и удобно продемонстрировать флоу. Вы сделали намного больше, чем от вас требовалось, молодец! К тому же, умение гуглить и находить новые решения – незаменимые качества любого айтишника. Флоу такого уровня можно было бы смело демонстрировать заказчику!

Диана4 November 2021 12:13  
Спасибо за обратную связь, добавила экраны
https://drive.google.com/drive/folders/1v3UW0u8T0GfDctGSRY11lbTtG4YXHh-H?usp=sharing

Комментарий frusia.pro:

Хорошо, что вы добавили экраны, но к сожалению связь между ними потерялась. По-хорошему надо перерисовать флоу, чтобы не терять связь (переходы) между экранами. Также было бы неплохо показать какую-то строчку или отдельный экран поиска.

Диана3 November 2021 15:18  
Вот корректная ссылка:
https://drive.google.com/drive/folders/1v3UW0u8T0GfDctGSRY11lbTtG4YXHh-H?usp=sharing

Комментарий frusia.pro:

Задание 1-2.

Хорошо и акуратно выполнили задание, молодец!

Задание 3–4.

Ваш вайрфлоу не доконца соответствует таскфлоу. В таскфлоу у вас указано, что мы попадаем к вакансиям через поиск, а в вайрфлоу вы не показали это отдельным экраном. Также у вас есть еще сценарий создания резюме, как отдельный, который начинается на главной странице. Вы не показали его в вауйрфлоу. Тут нужно выбрать: или убрать эту часть сценария из таскфлоу, или показать в вайрфлоу и его.

Диана3 November 2021 15:16  
Посмотрите пожалуйста, очень жду Вашу обратную связь
https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
Люба Фурсеева20 October 2021 13:21  
Валерия, здравствуйте, в ближайшее время проверю
Валерия20 October 2021 10:47  
Люба, добрый день.
Отправила Вам мое ДЗ в Инстаграм)
Машка)7 September 2021 16:47  
Проверьте пожалуйста :
1, 2 задания https://www.figma.com/file/8WBjJBpPMOHONoYeQHjFkm/Untitled?node-id=0%3A1
3,4 задания https://www.figma.com/file/ILCBhNDc72IsXgUWuzmUSs/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 1-2.

Очень понравилось ваше оформление, всё довольно понятно выглядит, молодец! Нашла несколько ошибок: (1) Вот этот путь http://joxi.net/KAgVjl5TNJXqW2 должен идти линейно. Даже если вы будете разбивать заполнение информации по шагах на разные экраны, все равно нужно чтобы каждый из них шел один за другим и в конечном итоге привел к успешному оформлению заказа. Та же ошибка в задании с новой функцией. (2) Видимо забыли подписать шаг "нет" http://joxi.ru/KAxkaPphvQ1la2

Задание 3–4.

Вы все сделали правильно, такое оформление вайрфлоу вполне допустимо. Но для собственного удобства возможно было бы лучше там где текст ставить вставлять блоки с реальным текстом или текстом-рыбой.

Полина12 August 2021 22:03  
Добрый вечер!
https://drive.google.com/drive/u/2/folders/15NEzwTB819MoswZXrByFKSh6XuGjl01q
Поправила ссылку из предыдущего сообщения, вроде должно работать:)

Комментарий frusia.pro:

Проверила домашние задания. Вы большая молодец, что взяли несколько разных сайтов для проработки таск- и вайр-флоу. Небольшой момент, который заметила в флоу с вакансиями Золотое Яблоко. Если у вас предусмотрен дополнительный экран с подтверждением регистрации в виде смс-кода, то можно указать его выносным коментарием в таск-флоу. Все остальное – супер! Продолжайте в том же духе!

Полина7 August 2021 18:02  
Здравствуйте!)
Прошу проверьте мою домашку)
https://drive.google.com/drive/folders/15NEzwTB819MoswZXrByFKSh6XuGjl01q?usp=sharing

Комментарий frusia.pro:

Здравствуйте , пожалуйста откройте доступ по ссылке, потому что сейчас пишет You need access.

Люба Фурсеева7 July 2021 16:15  
Aika, здравствуйте, хорошо, скоро перепроверю и отпишу вам
Aika7 July 2021 14:54  
Люба,здравствуйте,отправила вам задания ДЗ№3. повторно,исправленные
Люба Фурсеева29 June 2021 11:53  
Айка, хорошо, ждите ответ в Инстаграм в ближайщее время
Айка29 June 2021 09:21  
Здравствуйте,Люба,таск флоу и вайр флоу фото отправила вам в инстаграм
Александр25 April 2021 18:21  
Добрый день, проверьте пожалуйста.
1 - 2 задание - https://drive.google.com/file/d/1cE_Xz-h5up5aw0A4nuc5gAcoF9Jrdf63/view?usp=sharing
3 задание - https://drive.google.com/file/d/1SBtnZLPnWPxQhvzE8udFVzZKYygpaQuZ/view?usp=sharing
4 задание - https://drive.google.com/file/d/130EE10nisp5ZNTboY24Otqb4UbKsZTkp/view?usp=sharing

Комментарий frusia.pro:

Добрый день, вы отлично справились с каждым из заданий, молодец! Пожалуйста переходите к следующему уроку.

Единственное к чему я могу придраться – это точки, которыми вы отмечаете мелкий текст. В следующий раз можете пропустить такие детали, ведь вайрфреймы это очень грубое представление, которое лишь передает суть экрана.

Сергей9 February 2021 18:08  
1. https://drive.google.com/file/d/1_eOo_ylddOikia03RM9nnVJXvKR4_JS2/view?usp=sharing
https://drive.google.com/file/d/1XuzCSSgRKW6jKCTpb4BzQk9HU82b_abE/view?usp=sharing
2.https://drive.google.com/file/d/1XCj_hg9jskBUmRti8DzZRURSUyEB89YD/view?usp=sharing
3.https://drive.google.com/file/d/1TKgE1Kv_09EDSlOgcGiNy_zuIx4VXz30/view?usp=sharing
https://drive.google.com/file/d/15dhQIsTeB7MPwsbUmo5kjpKfL5C0GX4H/view?usp=sharing
https://drive.google.com/file/d/1_JF0r5gP4OnnG8OCQ74OECvY22JO8Ve9/view?usp=sharing
4.https://drive.google.com/file/d/16wzYApkfnvW63S5dqL69p-9W10uMjBAa/view?usp=sharing

Комментарий frusia.pro:

К сожалению картинки по ваших ссылках больше недоступны. Если для вас еще актуален фидбек по этому уроку, можете оставить новый комментарий с выполненым заданием.

Oksana4 December 2020 12:29  
Проверьте, пожалуйста:
https://drive.google.com/file/d/1HR41Pz_BINPMuJBZmD3fNnSpRG5k0mvk/view?usp=sharing
https://drive.google.com/file/d/1dN4ZIE7uFC36nlnZz3ZbQ8r95EUevnSm/view?usp=sharing

Комментарий frusia.pro:

Задание 1.

Я увидела два сценария по второй ссылке: 1) выбор и просмотр акции, 2) покупка товара. Очень хорошо. Лишь одно замечание: когда соединяете экраны стрелками-переходами старайтесь размещать их строго вертикально и горизонтально. Вы же используете диагональные линии, которые могут немного запутывать восприятие.

Задание 2.

Вижу новую функцию для сравнения товаров внутри категории, отлично.

Задание 3–4.

К сожалению, по первой ссылке получаю сообщение "Sorry, the file you have requested does not exist". Подозреваю, что тут были решения по остальным заданиям. Пожалуйста, загрузите файл еще раз и предоставьте рабочую ссылку.

Анастасия1 December 2020 01:33  
Не понимаю, как так вышло, что снова не открыла доступ.

Доступ открыла
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Комментарий frusia.pro:

Все правильно. Еще совет: давайте каждому таскфлоу название (текстовый заголовок сверху). Например в первом случае, как я понимаю, таскфлоу «Просмотр видео», а во втором – «Добавление в вишлист»

Анастасия30 November 2020 12:25  
Переделала первых два задания:
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Комментарий frusia.pro:

Откройте пожалуйста доступ по ссылке.

Анастасия9 November 2020 16:47  
Открыла доступ по ссылкам
1) https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
2) https://drive.google.com/file/d/1v0XVOZbpZ9LWK8R9Un9E_gtyS01WYgeq/view?usp=sharing
3) https://drive.google.com/file/d/1XRdkkMfIbnXIQrHSra7BaHDTziEv7GDG/view?usp=sharing
4) https://drive.google.com/file/d/1mo7ZJHAR8aCIQt8i9iCkMDO3bsraU1eq/view?usp=sharing

Комментарий frusia.pro:

Задания 1–2

Вы немного недопоняли принцип построения таскфлоу. В каждый отдельный квадрат мы выносим экран, который дальше будет отображен в вайрфлоу. А вы в свою очередь просто описали путь пользователя, его действия, а не экраны. Чтобы было понятнее я распишу как должно было выглядеть первое задание. 5 квадратов, в том же порядке: (1) поиск на главной странице, (2) результаты поиска, (3) страница товара, (4) корзина, (5) чекаут. Закрытие/открытие сайта вообще не упоминается, это понятно "по умолчанию".

Задания 3–4

Вот вайрфлоу как раз нарисованы хорошо, и отображают страницы сайта. Но они должны соответствовать таскфлоу, аналогично примеру, который я вам привела. Буду рада если вы переделаете 1-е и 2-е задание.

Анастасия4 November 2020 15:20  
1) https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
2) https://drive.google.com/file/d/1v0XVOZbpZ9LWK8R9Un9E_gtyS01WYgeq/view?usp=sharing
3) https://drive.google.com/file/d/1XRdkkMfIbnXIQrHSra7BaHDTziEv7GDG/view?usp=sharing
4) https://drive.google.com/file/d/1mo7ZJHAR8aCIQt8i9iCkMDO3bsraU1eq/view?usp=sharing

Откройте пожалуйста доступ к этим ссылкам. Сделать это можно в настройках, когда "шарите" ссылку.

Люба Фурсеева14 September 2020 23:00  
darya, пожалуйста. Отправляйте картинки мне в директ в Instagram @frusia.pro, проверю.
darya14 September 2020 22:56  
Люба, спасибо вам за урок! но отправить сюда картинки не получается совсем :(
darya14 September 2020 22:41  
задание 1
/Users/dasha/Downloads/photo_2020-09-14 22.38.48.jpeg
Люба Фурсеева24 August 2020 23:40  
Lana, проверила и ответила. Переходите к следующему уроку
Lana24 August 2020 13:23  
Отправила задание 3 в директ, пожалуйста проверьте
sergo21 April 2020 15:36  

1, 2 текфлоу на одном фото Ответ на домашнее задание 1 и 2 от Sergo

3. Вайрфлов на первое задание Ответ на домашнее задание 3 от Sergo

4. Вайрфлов на 2 задание с новой функцией Ответ на домашнее задание 4 от Sergo

Комментарий frusia.pro: Это домашнее задание отправили в директ в Инстаграм и согласились опубликовать его.

Вы молодец, в целом справились с заданием, и, кстати, хорошая идея с таймингом. Замечания от меня:

Задания 1–2

Вы вынесли функции «поставить лайк», «оставить комментарий» и новую «тайминг» в отдельные квадраты. Это неправильно.

В таскфлоу каждый квадрат – это один экран, а эти функции находятся на экране видео. Если вы считаете, что они важны, можно просто расширить область квадрата и расписать список функций текстом внутри или под квадратом.

Функция «поделиться» спорная, так как вызывает дополнительное всплывающее окно. Поэтому её можно вынести в отдельный элемент таскфлоу (или расписать текстом).

Задания 3–4

Сделаны правильно. Как раз в случае с вайрфлоу мы можем демонстрировать один и тот же экран несколько раз, показывая разный функционал.

sergo13 April 2020 18:44  
Таскфлов и вайрфлов нарисовал, фото скинул вам в инстаграм.

To start learning, take tests and track progress, you need to enroll in the course. It's free.