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.

SketchingSketching

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 paperTask 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.

Lo-Fi WireframeLo-Fi Wireframe

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 prototypeInteractive 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!

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

skazhena cherepashkaUkraine flag підтримує ЗСУ 7 November 2023 14:53  
An interesting task. Thank you for such a cool opportunity to enhance new skills and see myself from a different perspective.

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

Comment from frusia.pro:

I left comments on all tasks in Figma, please take a look. In short – you did well with all the tasks, just need to fix some nuances.

Valentyna18 November 2022 22:55  
Thank you for the clarification. I attended lessons 1, 2, and 3. I worked on lesson 6. I achieved some small results.
I ask myself questions, and I get answers from you. It is a great pleasure. In lesson 3, I liked: the prototype,
Figma and the prototype, adaptive design, types of graphics.
VarvaraUkraine flag підтримує ЗСУ 15 October 2022 22:43  
Task 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

Task 3-4
https://www.figma.com/file/QIwTSpFf9pMvfRDCs0z1Rp/UX%2FUI-Frusia?node-id=0%3A1

Comment from frusia.pro:

Task 1-2. It's great that you figured out how to use FigJam for flow design on your own. Everything is very clear, well done.

Task 3-4. Fork. You also did the wireframes correctly. Move on to the next lesson!

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

Comment from frusia.pro:

Task 1. Redrawing the task flow for two scenarios. You chose an online store and correctly represented each of the scenarios. Great!

Task 2. Task flow with a new feature. Everything is good here too, and it's a very interesting feature.

Task 3. Wireflow for the first two scenarios. Everything is excellent, the only point is that probably in the second scenario (the second screen), the search results usually do not display the category banner, but simply show the found products.

Task 4. Wireflow for the new scenario. Everything is correct, it corresponds to your task flow. Keep it up!

I also want to praise you for using a very convenient and suitable online tool for creating flows and wireframes.

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

Comment from frusia.pro:

What I could understand from the screenshots, I hope you won't take offense, but they are unclear in places. You started your flow with Google and then switched to another site. The correct execution of this task implies that we develop the flow for only one site. So it should either be Google (and when transitioning to other sites, its flow ends), or it should be an external site (with movies). Try to redo the task according to these conditions.

Viktoriia HryshchenkoUkraine flag підтримує ЗСУ 5 July 2022 12:35  
Good day! Thank you for the response, I have corrected everything!)

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

Comment frusia.pro:

Good day!

Now everything is correct, you did a great job! Feel free to move on to the next lesson

Viktoriia HryshchenkoUkraine flag підтримує ЗСУ 4 July 2022 13:39  
Good day!

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

Comment frusia.pro:

Good evening!

Task 1. Create a task flow for two scenarios. I see a scenario for sending an email and setting up two-factor authentication. In the first scenario, after logging in, there are two identical paths for sending the email that are duplicated. It is enough to draw an arrow from the rectangle "Phone number confirmation" to the left rectangle "Create email". And the two rectangles on the right should be removed. Also, please note that the rectangle "Input all data" is not a separate screen. This is an action that takes place on the "Create an account" screen. Therefore, the rectangle "Input all data" should be removed, and under the rectangle "Create an account", add a text explanation "The user enters all data and clicks 'Create'". The same should be done for the rest of the actions that you marked with rectangles, as they only indicate screens.

A similar situation applies to the second scenario. That is, rectangles indicate only separate pages, and what the user does there is described in a text block under the rectangle.

Task 2. Create a task flow for the new function. A very cool idea. Here, it needs to be corrected similarly to the first task. Also, if the user is not registered, then a "Login" screen should be added. Everything else is great!

Task 3. Create a wireflow for the scenarios from the first task. Everything is good, I see the screens for the scenarios from the first task. You can also add text explanations of what the user does on each screen.

Task 4. Create a wireflow for the new function. Everything is great, well done!

You did a wonderful job, but tasks 1-3 need to be refined. I am waiting for the corrections

Yana UsachovaUkraine flag підтримує ЗСУ 30 June 2022 11:20  
Good day, thank you for the feedback, I have corrected everything
https://www.figma.com/file/7Z0xbW946RwE9dSnzxWM9q/Untitled?node-id=0%3A1

Comment from frusia.pro:

Hello! Everything is great now, move on to the next lesson

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

Comment from frusia.pro:

Hello!

Task 1. Create a task flow for two scenarios. I see two scenarios: playing a track and creating a playlist. Everything is good, but there is one remark. Please note that the rectangle "Selection of composition" is an action, not a separate page. The action is performed on the "Favorites" screen. Therefore, you need to add a text explanation under this rectangle: "The user clicks on the composition," and remove the corresponding rectangle "Selection of composition".

A similar situation applies to the second scenario. Under the rectangle "Playlists," you can add a text block with a description of what the user should do: "The user clicks on the link 'New playlist.'" The next page of the task flow will be called "New playlist" (as in the wireflow) with a text explanation under it: "The user enters the name of the list, description, and availability."

That is, rectangles mark only separate pages, and what the user does there is described in a text block under the rectangle.

Task 2. Create a task flow for the new function. Here, it needs to be corrected similarly to the first task. "Edit list" – "Editing list." Write a comment about adding a cover.

Task 3. Create a wireflow for the scenarios from the first task. Very good, it is clear how the user should interact with the interface elements. It would be good to separate each screen into a separate frame, rather than everything in one. Also, add text explanations.

Task 4. Create a wireflow for the new function. Everything is good, here are the same remarks as in the previous task.

Overall, everything is good, but you need to make corrections

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

Comment frusia.pro:

Good day!

Task 1. Create a task flow for two typical scenarios. I see even three scenarios: login, registration, sending an email. It seems that you signed the text block "yes" in the wrong place; it should come after the "registration" block. After all, if the user is registered, they enter their login and password.

Task 2. Create a task flow for a new feature. I see a function for setting up notifications about new emails. Here, there is a similar comment about the text block "yes" as in the first task.

Tasks 3-4. Create a wire flow for the first and second tasks. Everything is good, but there is an important note. The rectangles with a cross denote images and photos, but you are using them to denote buttons. Also, do not use rounding or other effects in wireframes; it is unnecessary at early stages.

I am waiting for corrections on tasks 3-4

Iryna S.Ukraine flag підтримує ЗСУ 15 June 2022 12:07  
Good day! I am sending the homework for lesson 3.

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

Comment from frusia.pro:

Good evening!

Task 1. Draw a task flow for two scenarios. Very good, everything is correct! I can recommend using shorter screen names. A few examples:

  • Window of possible results on the main page → Search results;
  • popup window confirming subscription → Subscription confirmation;
  • window opens with possible notification options → Notification settings.

Task 2. Draw a task flow for the new feature. Correct.

Task 3. Draw a wire flow for the scenarios from the first task. Everything is correct, well done! To show which elements the user interacts with, you can use annotations, see the example in the comments below. But your method with the shadow is also understandable.

Task 4. Draw a wire flow for the new feature. An interesting implementation of a potentially useful idea. Everything is correct.

You have mastered the material well, move on to the fourth lesson

Anna SmirnovaUkraine flag підтримує ЗСУ 4 June 2022 11:52  
Good day!
I am sending my homework, I did everything in one file in Figma)

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

Comment from frusia.pro:

Good evening!

Task 1. Draw a task flow for two scenarios. I see the scenario of attaching a file and sending an email in Gmail. Everything is good.

Task 2. Draw a task flow for a new feature. I see the scenario for sending a message to a group of people. That’s also correct.

Task 3. Redraw the wireflow for the scenarios of the first task. Everything is good. You can also label the buttons that the user interacts with. For example, in your case, Compose, Send.

Task 4. Redraw the wireflow for the new feature from the second task. Very good, well done! I understand everything.

You worked well, great job starting in Figma right away! Keep going

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

Comment from frusia.pro:

Good evening!

Task 1. Draw a task flow for two scenarios. I see two scenarios: 1) purchasing a travel pass 2) creating a route. Everything is correct.

Task 2. Draw a task flow for the new feature. I see a scenario for customizing the appearance of boards that the user is subscribed to on Pinterest. Also correct.

Task 3. Draw a wire flow for the scenarios from the first task. Everything is good, I see screens for both scenarios.

Task 3. Draw a wire flow for the new feature from the second task. I see that the feed settings are placed in a separate tab (the last one on the right) of the settings. It would also be good to show what settings appear there after clicking on Edit

You are doing well, move on to the next lesson

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

Good evening!
I made some edits)

Comment from frusia.pro:

Good day!

Task 1. You added explanations to the screens, everything is great.

Task 3. You also added the order confirmation screen with payment, wonderful.

Very well done, move on to the fourth lesson

BohdanaUkraine flag підтримує ЗСУ 19 May 2022 07:38  
Hello!
Thank you for the wonderful lesson and interesting homework ;)

Task 1-2. I used FigmaJam for drawing the flowcharts.
https://www.figma.com/file/fyKZq6WInoJ3zLK59XjNyS/%D0%94%D0%97-%E2%84%963-Frusya?node-id=2%3A414

Task 3-4. I hope I understood the logic of drawing wireframes correctly.
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7-4-(3-4)?node-id=0%3A1

Wishing you a peaceful day!

Comment from frusia.pro:

Hello! Please

Task 1-4. Great job! Everything is correct. A few recommendations for the wireframes:

  • Avoid colored shapes and stick to a black-and-white palette;
  • if you need to highlight an element, use annotations. Simply number it (starting from 1) against a colored circle to mark the element you want to discuss. Below the wireframe, place the same circle and add an explanation. Here’s an example:Example of annotations for wireframes

Keep up the learning

MahrharytaUkraine flag підтримує ЗСУ 18 May 2022 19:52  
Good evening! I made some edits, please check them.

Task 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

Task 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.

Comment from frusia.pro:

Hello!

Task 1-4. Very good, everything is correct now, proceed to the next lesson

MahraritaUkraine flag підтримує ЗСУ 17 May 2022 20:30  
Good evening! I made corrections to the tasks, duplicating them.

Task 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

Task 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

Comment from frusia.pro:

Good evening! It's already much better, but there are still a couple of points.

Task 1. The rectangle "Register" is responsible for the action, so it can be removed and a label can be added to the "Registration" screen (if desired, for example: the user clicks the "Register" button). The rest is correct.

Task 2. Everything is correct.

Task 3-4. By the list:

  • Make the circles for annotations one color;
  • Add text for two annotations (yellow and green) on the second screen of the third task on the left;
  • Replace the purple and red colors in the wireframes with black and white;
  • Change the text of the annotations to a different form. It was: You need to hover the mouse over any product, then a window will appear. It should be: When the user hovers the cursor over the product, a window appears.

We are moving in the right direction, waiting for the corrections

MahrharytaUkraine flag підтримує ЗСУ 17 May 2022 11:08  
Good day! I am duplicating the tasks.

Task 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

Task 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.

Comment from frusia.pro:

Good day!

Task 1. Remember that in the task flow, screens are marked with rectangles, and actions are labeled with text next to the arrows (transitions between screens) or under the rectangles. Therefore, some rectangles need to be removed, specifically: buy, place an order, forgot password, log in. And add the corresponding text explanations. Also, some screens can be given a more understandable name: remind → password recovery, selected product → product details, access to the cabinet → login.

Task 2. Similarly, some actions need to be replaced with text explanations, specifically: look at the models. Also, the name of the last rectangle resembles an action, although it is essentially a screen, so it needs to be renamed: test the selected product → testing the product on a 3D model of a face.

Task 3. Everything is good, but to make it perfect, it would be better to provide explanations for the screens through annotations instead of lines. That is, we draw a circle and write the number in the place of the wireframe where an explanation is needed. Then we place the same circle under the wireframe and add a text explanation on the right. This will allow us to remove the lines. It should look approximately like this:

Example of annotations for wireframes

Task 4. On the last screen, there probably shouldn't be a button to test the product. After all, we are already viewing it on the model.

Great job (and right in Figma), I am waiting for the corrections

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

Good evening
Response to the third task

Comment from frusia.pro:

Good day!

Task 1. I see the registration and authorization scenario. There are a few minor points that would be good to correct:

  • I would make the main page the initial screen, rather than a greeting. Unfortunately, you did not provide the full website address, perhaps there really is some greeting screen;
  • I would remove the data entry screens and the login and password, and instead, I would add a comment under the authorization and registration screens respectively, because essentially we fill in the data on the same screens.

Task 2. I see the scenario for ordering a printed book, everything is correct.

Task 3. Everything is good, you even made a mockup with a tablet

Task 4. For this task, I do not see wireframes, specifically only the user cabinet, but since a lot of text has been replaced with Lorem ipsum, not much is clear. It would be good to refine a couple of wireframes and try to add the following screens:

  • Order placement;
  • Payment for the purchase.

I also want to commend you for starting to work directly in Figma. Make the corrections and you can move on to the next lessons

Svitlana14 May 2022 17:48  
Thank you very much for the opportunity to learn :)
https://www.figma.com/file/JDL8m3w1i3C6cZUSCasHDi/%D0%A3%D1%80%D0%BE%D0%BA-%E2%84%963?node-id=1%3A17

Due to the large influx of those wishing to take the course, I am making the homework checks paid. $30 (at the current exchange rate), I will donate 10% to the Armed Forces of Ukraine. For one donation, I will check the homework for all lessons.

For the payment details, write to the direct message on Instagram @frusia.pro

Alina12 May 2022 08:22  
Good day) I have completed the task on Wireframes. I'm sending the link again: 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%DA%AF%D1%83-3?node-id=0%3A1

Comment from frusia.pro:

Good day!

Task 1-2. The upload has been removed, great.

Task 3. I see the screen with product details, everything is good.

Task 4. Very good, it's already clear how to add groups and assign them films.

It has become much better, move on to the next lesson

Daria11 May 2022 13:17  
Good day
it was hard, as it wasn't very clear how to set up my hands for working with Figma. I'm curious, do they draw wireframes by hand, or do most people still use a "UI kit"?
Inspired by previous works, here are my results:
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

Comment from frusia.pro:

Good day, yes, it's very hard to start, but the main thing is not to stop and keep practicing. Wireframes are drawn by hand on paper or on a board with a marker (more often when working in a team, for example, at a workshop). They also often use ready-made component sets for Figma (as you mentioned, UI Kit). There are also specialized programs for this, such as Balsamiq Wireframes. Each of these options has its place, I more often create wireframes in Figma.

Task 1. I see two scenarios: viewing news and a series, as well as announcements of new episodes coming soon. Everything is good.

Task 2. There is a new feature for determining skin type and hair condition. Correct.

Task 3. Everything is good, but I would add spacing between screens, as they blend together and look like one long page. It would also be good to replace some texts, for example, "Special Feature" with the name of the series. I understand that you used some ready-made set, as I see components. Very good!

Task 4. Here you provided spacing between screens, excellent. I would also correct the texts in the recommendations list.

You worked well, keep up the learning

Alina10 May 2022 17:00  
Good afternoon)
Here is my work: 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

Comment from frusia.pro:

Good evening

Task 1. Great, I see two scenarios for purchasing and logging in/registration.

Task 2. It looks like an option to group movies by categories. However, you didn't specify what kind of site this is. There's no need to mention the loading time of the site, so the "Site Opening" blocks can be removed for both of the first tasks.

Task 3. Everything is good. But for a complete picture, I would also add a screen with the details of the selected product. Instead of "Select Product," you could write "Product Details."

Task 4. Here, you still need to draw a few screens that are in the task flow but are missing in the wireflow: movie page, list of watched movies, creating a new group.

Please refine the mentioned points and write to me again so I can double-check this homework.

Anhelina8 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

Comment from frusia.pro:

Task 1. I see several user scenarios for the UaSerial website, everything is correct.

Task 2. There is a new flow for viewing your orders for some website, unfortunately, you did not specify the name. I can assume it is something like Rozetka.

Task 3. Everything is good, but it seems you missed the login screen.

Task 4. Correct.

Overall, everything is fine, you did a good job, move on to the next lesson

Alina5 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

Comment from frusia.pro:

Good evening

Task 1. I see even three scenarios: order placement, registration, and login. Everything is correct.

Task 2. You chose quite a complex new functionality for creating your own design. Well done.

Task 3. You worked very hard, and it may not look very neat right now, but the main thing is to convey the essence of the screens, and you did that well.

Task 4. Here, there are a few interface elements missing that would allow you to create your own design; you just marked the area. But there is a paperclip icon, and I can guess that you wanted to add the ability to upload your own image and apply additional graphic elements to it, such as text. This is a good idea.

You did all the tasks well, great job! Move on to the next lesson.

Veronika5 May 2022 14:27  
Good day! Thank you very much for the opportunity to study all of this for free, your explanations are wonderful and very clear, and the tasks are very interesting to do!
Thank you if you can take a look and comment on the tasks)) I’m curious to hear your opinion. I deviated a bit from the task and instead of some new feature on the site, I made something like a supplement like YouTube Music on YouTube)

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

There are tasks 1, 3 and 2, 4 on different pages under one link)

Comment from frusia.pro:

Good day, thank you for your feedback

Task 1 and 3. Very well done, and right away in Figma and in one file. Everything is correct, I only have a comment about the search. I don’t see the results page in the third task.

Task 2-4. Very good! You even repeated the style of YouTube Music.

Complete the screen in the third task and move on to the next lesson

Alona Hur29 April 2022 19:09  
Good evening. Thank you for your course, it is extremely interesting and useful, and I thank you in advance for checking the homework!
Task 1, 2 - https://www.figma.com/file/NwBZHqL7hkyZ6xhijoBn4U/ДЗ-3.-Завдання-1%2C-2.?node-id=0%3A1
Task 3, 4 - https://www.figma.com/file/EBDMtkJTwc34vjXVI1PH8p/ДЗ-3.-Завдання-3%2C-4.?node-id=0%3A1

Comment from frusia.pro:

Good evening, please

Tasks 1-2. You did very well, and you also used FigJam, which is great for such tasks.

Tasks 3-4. Everything is great! For the last task, I would also add a list of locations that can be clicked to get an idea of all the rooms.

Well done! Move on to the next lesson.

Ira28 April 2022 17:24  
Thank you in advance for the review and feedback - https://excalidraw.com/#json=JPoct0mmCSGLPWC0Kq6pl,8UmJPF81Ed8RulVHQ1c01g

Comment from frusia.pro:

I want to praise you for your approach, it turned out really great! Everything is clear and well-structured. Overall, there were no major mistakes. The only thing you should pay attention to is that your task flow with the new PDF file upload feature ends on the upload window, while the wire flow returns to the profile with already uploaded files. These moments, what will happen upon successful or unsuccessful file upload, should also be demonstrated in the task flow.

Elvira16 February 2022 00:48  
Liuba, thank you very much for the lesson! It was a tough game)
Using the experience of predecessors, it was completed on excalidraw.com
https://excalidraw.com/#json=A0KYSOrjIWQtGsIyzCC0B,4wcArO92HVvmh136EnxVMQ

Comment from frusia.pro:

Well done for noticing and using a convenient service. You did well with the tasks. You have one mistake, here you unnecessarily linked the purchase process to the main page. This is not needed, as it is clear that from each step you can return to the main page using the menu. And the fact that we place a "Back to Main" button at the end doesn't carry much weight, as the user journey is already complete. By the way, there's one more small mistake: you have two screens "order confirmation" and "checkout", but essentially these names mean the same thing. The screen you called "checkout" is better named "Notification of Successful Order".

Dariia12 February 2022 03:35  
Homework https://cloud.mail.ru/public/HLTi/GCDuPph2D

Comment from frusia.pro:

Everything is great, you clearly displayed both the task flow and the wireframes, but there is a small mistake. "Feed view" is an action, not a screen. You should just leave the square "Feed", as it's already clear that it can be viewed.

Liiliia19 January 2022 12:54  
Homework
I added a link to the service, and if it doesn't work, here's a Google link
https://excalidraw.com/#json=kqTb-yxwl_JxNtQWKXRUQ,Wd3XY685ZY2votFNfbfuPg
https://drive.google.com/drive/folders/1hfUyG3PvJkKwq40isnRQORJhOnJFRn8g?usp=sharing

Comment from frusia.pro:

Everything is perfect, for all the tasks, there's nothing to nitpick. I want to praise you for finding a service that can demonstrate the flow so neatly and conveniently. You did much more than was required of you, well done! Moreover, the ability to Google and find new solutions is an invaluable quality for any IT specialist. A flow of this level could confidently be demonstrated to a client!

Diana4 November 2021 12:13  
Thank you for the feedback, I added the screens
https://drive.google.com/drive/folders/1v3UW0u8T0GfDctGSRY11lbTtG4YXHh-H?usp=sharing

Comment from frusia.pro:

It's good that you added the screens, but unfortunately the connection between them was lost. Ideally, you should redraw the flow to maintain the connections (transitions) between the screens. It would also be nice to show some line or a separate search screen.

Diana3 November 2021 15:18  
Here is the correct link:
https://drive.google.com/drive/folders/1v3UW0u8T0GfDctGSRY11lbTtG4YXHh-H?usp=sharing

Comment from frusia.pro:

Task 1-2.

You did a good and neat job on the task, well done!

Task 3–4.

Your wireflow does not fully correspond to the task flow. In the task flow, you indicated that we get to the vacancies through search, but in the wireflow, you did not show this as a separate screen. You also have another scenario for creating a resume, which starts on the main page. You did not show it in the wireflow. Here you need to choose: either remove this part of the scenario from the task flow or show it in the wireflow as well.

Diana3 November 2021 15:16  
Please take a look, I am eagerly awaiting your feedback
https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
Liubov Furseieva20 October 2021 13:21  
Valeria, hello, I will check it soon
Valeriia20 October 2021 10:47  
Liuba, good afternoon.
I sent you my homework on Instagram)
Mashka)7 September 2021 16:47  
Please check:
Tasks 1, 2 https://www.figma.com/file/8WBjJBpPMOHONoYeQHjFkm/Untitled?node-id=0%3A1
Tasks 3, 4 https://www.figma.com/file/ILCBhNDc72IsXgUWuzmUSs/Untitled?node-id=0%3A1

Comment from frusia.pro:

Task 1-2.

I really liked your design, everything looks quite clear, well done! I found a few mistakes: (1) This path http://joxi.net/KAgVjl5TNJXqW2 should be linear. Even if you break the information filling into steps on different screens, each of them still needs to follow one after another and ultimately lead to a successful order placement. The same mistake is in the task with the new feature. (2) Apparently, you forgot to label the step "no" http://joxi.ru/KAxkaPphvQ1la2

Task 3–4.

You did everything correctly, such a wireframe design is quite acceptable. But for your own convenience, it might be better to insert blocks with real text or placeholder text where the text is placed.

Polina12 August 2021 22:03  
Good evening!
https://drive.google.com/drive/u/2/folders/15NEzwTB819MoswZXrByFKSh6XuGjl01q
I fixed the link from the previous message, it should work now:)

Comment from frusia.pro:

I checked the homework assignments. You did a great job by choosing several different websites for task and wireflow development. One small point I noticed in the flow with the job vacancies for Zolote Yabluko. If you have a separate screen for confirming registration with an SMS code, you can mention it as an additional comment in the task flow. Everything else is great! Keep up the good work!

Polina7 August 2021 18:02  
Hello!)
Please check my homework)
https://drive.google.com/drive/folders/15NEzwTB819MoswZXrByFKSh6XuGjl01q?usp=sharing

Comment from frusia.pro:

Hello , please grant access to the link, because it currently says You need access.

Liubov Furseieva7 July 2021 16:15  
Aika, hello, I will check it soon and get back to you.
Aika7 July 2021 14:54  
Liuba, hello, I have sent you the assignments for Homework #3 again, the corrected ones.
Liubov Furseieva29 June 2021 11:53  
Aika, good, expect a response on Instagram soon.
Aika29 June 2021 09:21  
Hello, Liuba, I sent you the task flow and wire flow photos on Instagram.
Oleksandr25 April 2021 18:21  
Good afternoon, please check it.
1 - 2 task - https://drive.google.com/file/d/1cE_Xz-h5up5aw0A4nuc5gAcoF9Jrdf63/view?usp=sharing
3 task - https://drive.google.com/file/d/1SBtnZLPnWPxQhvzE8udFVzZKYygpaQuZ/view?usp=sharing
4 task - https://drive.google.com/file/d/130EE10nisp5ZNTboY24Otqb4UbKsZTkp/view?usp=sharing

Comment from frusia.pro:

Good afternoon, you did an excellent job with each of the tasks, well done! Please proceed to the next lesson.

The only thing I can nitpick is the dots you use to mark small text. Next time, you can skip such details, as wireframes are a very rough representation that only conveys the essence of the screen.

Serhii9 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

Comment from frusia.pro:

Unfortunately, the images from your links are no longer available. If you still need feedback on this lesson, you can leave a new comment with the completed assignment.

Oksana4 December 2020 12:29  
Please check, please:
https://drive.google.com/file/d/1HR41Pz_BINPMuJBZmD3fNnSpRG5k0mvk/view?usp=sharing
https://drive.google.com/file/d/1dN4ZIE7uFC36nlnZz3ZbQ8r95EUevnSm/view?usp=sharing

Comment from frusia.pro:

Task 1.

I saw two scenarios in the second link: 1) selecting and viewing a promotion, 2) purchasing a product. Very good. Just one note: when connecting screens with transition arrows, try to place them strictly vertically and horizontally. You are using diagonal lines, which can slightly confuse perception.

Task 2.

I see a new feature for comparing products within a category, excellent.

Task 3–4.

Unfortunately, I receive the message "Sorry, the file you have requested does not exist" for the first link. I suspect there were solutions for the other tasks here. Please upload the file again and provide a working link.

Anastasiia1 December 2020 01:33  
I don't understand how it happened that access was not opened again.

Access has been opened
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Comment from frusia.pro:

That's correct. One more piece of advice: let's give each task flow a title (text header at the top). For example, in the first case, as I understand it, the task flow is "Viewing video", and in the second – "Adding to wishlist"

Anastasiia30 November 2020 12:25  
I revised the first two assignments:
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Comment from frusia.pro:

Please grant access to the link.

Anastasiia9 November 2020 16:47  
I opened access via the links
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

Comment from frusia.pro:

Tasks 1–2

You slightly misunderstood the principle of building the task flow. In each individual square, we display the screen that will later be shown in the wireflow. However, you simply described the user's path and actions, not the screens. To make it clearer, I will outline how the first task should have looked. 5 squares, in the same order: (1) search on the main page, (2) search results, (3) product page, (4) cart, (5) checkout. The opening/closing of the site is not mentioned at all; it is understood "by default".

Tasks 3–4

The wireflow is drawn well and shows the pages of the site. But they should correspond to the task flow, similar to the example I provided you. I would be happy if you redo the 1st and 2nd tasks.

Anastasiia4 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

Please grant access to these links. You can do this in the settings when you "share" the link.

Liubov Furseieva14 September 2020 23:00  
Darya, please. Send the pictures to my direct on Instagram @frusia.pro, I'll check them.
darya14 September 2020 22:56  
Liuba, thank you for the lesson! But I can't upload images here at all :(
darya14 September 2020 22:41  
assignment 1
/Users/dasha/Downloads/photo_2020-09-14 22.38.48.jpeg
Liubov Furseieva24 August 2020 23:40  
Lana, I checked and replied. Please proceed to the next lesson
Lana24 August 2020 13:23  
I sent assignment 3 in direct message, please check it.
sergo21 April 2020 15:36  

1, 2 tekflow in one photo Response to homework 1 and 2 from Sergo

3. Wireflows for the first task Response to homework 3 from Sergo

4. Wireflows for task 2 with a new feature Response to homework 4 from Sergo

Comment from frusia.pro: This homework was sent via direct message on Instagram and agreed to be published.

You did well overall with the task, and by the way, the timing idea is good. My comments:

Tasks 1–2

You placed the functions "like", "leave a comment", and the new "timing" in separate squares. This is incorrect.

In taskflow, each square represents one screen, and these functions are on the video screen. If you think they are important, you can simply expand the square area and list the functions in text inside or below the square.

The "share" function is controversial, as it triggers an additional pop-up window. Therefore, it can be placed in a separate taskflow element (or described in text).

Tasks 3–4

Done correctly. In the case of wireflow, we can demonstrate the same screen multiple times, showing different functionalities.

sergo13 April 2020 18:44  
I drew the task flow and wireflow, I sent you the photo on Instagram.