Whether you’re new to usability testing or looking to refine your approach, I hope you find it practical and helpful for your projects.
Check it out, and let me know your thoughts!

Let’s clarify the basic meanings.

All usability tests can be divided into two large groups:
Qualitative usability testing— focuses on collecting insights. (It can be useful to research how users interact with a specific flow.)
Quantitative usability testing — focuses on collecting metrics that describe the user experience. (It can be useful to research which landing design works better, or measure how many users understand a specific feature, etc.)

These two types of usability tests can be:

Moderated — when the researcher and participant have live interaction. This can be a video meeting or an in-person meeting. It is good for learning behavior. If you’re unsure how users will react to your design, a moderator can observe closely and ask clarifying questions as users interact with it.
Unmoderated — when the researcher sets up the test, and the participant conducts it remotely. The result is only response numbers; for instance, 20 users choose version one of the design. This type of test is good for a large audience and costs less than moderated tests.

Both tests can be conducted through the Prolific platform. But, in this article, I’m sharing instructions for the moderated usability test.

Let’s get started!

1. Instructions on How to Prepare

1.1 Set Goals for Your Research

It is essential to clearly define the goals of your study, as they form the foundation for all subsequent steps.

In my interviews, I usually go beyond testing the user interface. I also explore participants’ experiences and expectations. For this reason, I often establish separate goals for evaluating the interface and understanding their broader experiences in a particular domain.

For example:

Interface Goals:
- Identify usability issues. (Detect any problems users encounter when interacting with the interface.)
- Evaluate user satisfaction. (Assess how satisfied users are with the feature’s interface and functionality.)
- Collect user feedback. (Collect qualitative feedback on users’ likes, dislikes, and suggestions for improvement.)

General Experience Goals:
- Understand how a specific group typically approaches a task (e.g., “How do students usually write their papers?”)

1.2 Formulate Specific Tasks and Define Flows to Test

Create specific tasks for participants to complete using your prototype. These tasks should simulate realistic scenarios to help you assess how users interact with the interface.

Example:

• Scenario: You are a student who needs to write a short assignment but want to finish quickly.
• Task: Create a new document, use the AI assistant to generate content, and finalize the assignment. (It can be more detailed)

Once you’ve defined the tasks, plan the flow you want to test. Map out all the steps the user will need to take to successfully complete the task. Remember, you don’t need to design every possible state for all clickable elements — just the key states required to complete the task.

For example, if the user clicks on an incorrect item, this action will already reveal that they are searching in the wrong place.

Pro Tips:

Secure Prototypes: Create your prototype in a separate file before sharing it with external users. This ensures the security of your main project files.

Optimize Settings: Choose the correct scaling settings when generating a shareable link (e.g., in Figma). Improper settings can negatively impact the user’s experience by making elements appear misaligned or difficult to interact with.

Enhance Guidance: Add subtle interactive elements like hover states and tooltips to provide non-intrusive guidance during the test.

Persistent Task Reference: Include an element in the interface (e.g., a fixed button or icon) that remains visible throughout the session. When hovered over, it should display the current task to help participants easily recall their instructions without disrupting the flow.

1.3 Write a script

Plan your dialogue and interactions with participants. Create a detailed scenario outlining your speech and the questions you will ask them. A structured script ensures consistency and makes the research process smoother.

I usually divide the script into four parts:

Welcome Part:

• Introduce yourself and the purpose of the research.
• Explain what participants can expect during the session.
• Reassure them that there are no right or wrong answers and that their feedback is valuable.
• Obtain their consent to participate and record the session, if applicable.

Pre-Test Questions:

• Gather background information about the participant (e.g., “Have you used similar tools before?” or “What’s your typical process for completing this type of task?”).
• Understand their initial expectations or assumptions about the prototype.

During-Use Questions:

• Ask participants to think aloud while interacting with the prototype.
• Probe with open-ended questions like: “What are you looking for here?”, “Is this what you expected?”, “What do you think this button/feature will do?”

Post-Test Questions:

• Reflect on their overall experience (e.g., “What worked well for you?” or “What felt confusing or frustrating?”).
• Ask for any additional feedback or suggestions for improvement.

Pro Tip:
Stick to this plan for each participant. Consistency in your approach will make it easier to analyze and compare the data collected during your research.

2. How to recruit participants through Prolific:

To simplify the process, refer to the accompanying scheme (image provided). Follow these steps to set up your study on Prolific:

So the scheme of the research is to find participants through Prolific, let them book a call with you through Calendly, and during the meeting, you will share the prototype link.

Pro tip how to fill — Study Description

Use a clear and engaging description to explain your study. Here’s a sample:

“Participate in our AI-powered writing tool’s usability testing. While testing the design prototype, we aim to learn the following:
-Your experience writing the assignment.
-Any problems you encounter while using the tool.
-Your level of satisfaction with the tool’s interface and functionality.
-How quickly and accurately you were able to complete the task.
-The study will take place via a video session, where you’ll complete specific tasks -using the prototype and share your thoughts out loud as you work.

To participate, you’ll need to:
-Have your Prolific ID and Prolific email address ready for scheduling.
-Use the provided link to schedule your Google Meet session via Calendly. (Once scheduled, you will receive a completion link for Prolific.)
-Attend the video session at the scheduled date and time (link sent via Prolific’s internal messaging system).

During the session, you’ll:
-Ensure a stable internet connection.
-Turn on your camera and microphone.
-Open the Figma prototype link.
-Share your screen.
-Think aloud and share your feedback as you work.*

Payment Details:
Participants will be paid within 1–3 business days after completing the session. Payments will be processed using Prolific’s standard methods upon submission approval.
Conditions for approval include:
-A full video and audio recording of the session.
-Attendance at the scheduled interview.
-Using a desktop PC (mobile phones are not allowed).

Personal data will not be stored. Video and audio recordings will be used strictly for internal quality analysis.

Pro tip how to fill — Data Collection Section

In this section, provide the link for participants to schedule their sessions. Use a scheduling tool like Calendly.

• Instructions for Calendly:
  Include your Calendly link so participants can book their interview slots. Instructions for setting up Calendly will be covered in the next section of the outline.

Pro tip how to fill — Completion Paths Section

Select the Manual Review option for completion paths. This allows you to review each session and manually approve payment. This approach is recommended because not all interviews may meet your quality criteria.

Pro tip how to fill — Participant Demographics

Define your focus group based on the goals of your study. Use filters for:
Age: Specify the age range of participants.
Country: Include or exclude countries based on your target audience.
Education Level: Ensure participants have the necessary background (e.g., students, professionals).
Other Criteria: Add relevant filters based on your research needs, such as specific occupations or experience levels.

The structure of the process:

Participants will see your study on Prolific and read the description. After clicking on the study link, they will be directed to Calendly, where they can choose a date and time to book a call. On the scheduled day, both of you will join a Google Meet (or another tool). You will meet your participant, share the Figma link, and ask them to share their screen. This is how the interview will begin.

3. How to Analyze All Data and Explain It to the Team

Analyzing usability testing data requires time and patience.

I’ve tried using transcription applications to convert video recordings into text, with the intention of summarizing the key points using GPT or similar tools. However, I just spent time trying to make this hack work, but unfortunately, I didn’t get what I had expected.

Instead, I usually do it the old-school way. I use a board in FigmaJam, dedicating one board to each participant. While I listen to the video recording, I take notes directly on the board. All boards follow the same structure and focus on the same set of questions, ensuring consistency across participants.

After filling out all the boards for each participant, identify patterns and themes. Look for recurring issues, questions, or frustrations across participants. It’s also important to separate feedback related to interface-specific problems from more general observations about user behavior or preferences. Once you’ve identified all common issues, prioritize them.

How to Demonstrate Findings to the Team

You don’t need to start by sharing every small detail. A better approach is to group all issues into larger categories and share them that way. Usually, I demonstrate three main key insights and highlight all major issues that were common in each category. The categories I typically use are:

1. Facts about the experience (based on research questions)
2. Facts about the interface
3. Pains and constraints

The most important part of this work is proposing improvements.
Create 1–5 hypotheses based on key insights and prioritize them based on the potential impact they can deliver.

For each hypothesis, include the following:
1.Hypothesis
2. Reason (Add insights collected during the research)
3. Solution
4. Opportunity/Benefit for business

I hope this information was useful! :)
If you liked this article sharing it with friends is greatly appreciated!
You can also click 👏 below (as many times as you want!)

How to prepare Usability Testing & Research was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

📎 Company:
Claid.ai helps businesses grow by automating image preparation and improving user-generated content.

📎 Project:
AI Photoshoot can turn a single product photo into numerous unique, realistic and appealing visuals that engage customers and showcase brand style.

📎 Role:
I led all design initiatives for this project, closely worked with head of product, head of ML, developers and CEO.

01 Overview

Two months after the release of stable diffusion, we launched AI Photoshoot. The product was raw but we focused on the core functionality (transforming simple product shots into lifestyle photos using a blend of AI technologies.)
Despite its imperfections, it was a starting point for acquiring users and improving our product based on real-world data.

Challenge:
The big challenge was to create an interface for a product in a completely new category

02 Discovery

To identify user interface issues, I needed to collect quality data from various sources. In this step I analyzed:

👉 HotJar recordings — A large portion of users struggled with how we named features, dropping off before they could find the right one and experience the value of the product.

👉 Amplitude metrics — I noticed a consistent trend among users: they would only try one or two images before drop-off, despite the fact that our Free Trial had a high image limit.

👉 User interviews — Based on the analysis of main user flow, I concluded that design followed an imperative approach, which added unnecessary complexity to the already challenging task of working with AI.

👉 Typeform surveys — At the beginning, we created a landing page with simple forms and diverted traffic to it to gauge interest in our product. Later, we used surveys to collect user feedback.

Understanding the problem

For the first release, we took an imperative approach to our UX, driven by how things worked under the hood. It created friction:

We provide a library of templates for generating product images. Templates set the scene and guide the network, but allow some degree of freedom to achieve a higher variety of output images. To highlight that each generation can produce a new, different image, we initially made our templates black-and-white.

Problem:
Some users expected to receive black-and-white output images, while others users couldn’t achieve attractive results by picking up the colors and placing the products themselves.

The biggest problem was:
Some users expected to receive black-and-white output, another users couldn’t achieve attractive results by setting colors and establishing product placement themselves.

Talking to users helped me verbalize ‘why’: people do not think in steps; ‘why’ users didn’t want to put in the effort to get the picture they wanted.

I decided that we need transition to a declarative approach in design. Because users couldn’t even imagine the result that they want so they had problems achieving it.

03 Definition stage

Hypothesis

Users can’t always visualize what they want to achieve. Moreover, few were ready to spend time experimenting before they got a satisfying outcome.

🖍 Black-and-white templates confused users. My hypothesis for a solution: “We can help users choose the correct template by showing them in-colour reference images.” For many, making a choice is easier when they have a visual representation of what they can expect (even if it’s not final).

🖍 Template categories based on market segments. My hypothesis for a solution: “Since templates can be used across different categories, grouping them by market segments is counter-productive.

04 Define metrics

To align my work with wider business goals and user satisfaction, I picked the following metrics to track:

Business — MAU
User — Satisfaction with results
Design — User engagement

05 Design

Design challenge

How can I design a solution which would work well for a variety of different contexts (type of product photos, businesses, skills, and time) and allow users to achieve good image results quickly?

Design strategy

I started filtering through all the information I’d gotten and elaborating on it to define the main problems and the design challenge.

👉 Build functional, reliable, usable.

Functional: Claid’s function is to help people create product images.
Reliable: Fast and consistent response.
Usable: Claid give user different ways to start generation.

👉 Focus on the usable.
Our primary goal to help users achieve better outcomes, faster.

👉 Delight and make it pleasurable.
This step wold be about making the generation experience delightful.

What I proposed

The main idea is to show users what they can expect. I decided to create more templates, divide them by categories, and show them in color.

Inside each category, I added real examples with the product. The previous version didn’t include the preview of the possible result.

Interesting observation: this behavior is similar to when designers choose a mockup for their product.

Prompt Box Improvement: Users often confused our prompt box with those from ChatGPT. For instance, they would type commands like “place product on a table” instead of describing the scene. For clarity, we improved the message and provided an example. I made color guidance a separate control, with a predefined color that suits the chosen template.

Changed Sidebar: Initially, the sidebar with templates had a black background. During user testing we understood that users ignored the sidebar due to the choice of color, as it created an impression that the sidebar was completely unrelated to the working area.

06 Delivery stage

Since we didn’t have much time we had to move fast, we skipped ow-fidelity prototyping and went straight into delivery and conducting UX studies in production.

Making my case:

All together, these changes made for a significant shift in approach. Not everyone was on board right away. We had a healthy internal debate about the potential upsides and risks. In the end, we opted to ‘disagree but commit’. The team started to prepare for a release…

07 Outcomes

Positive impact and good engagement

Key takeaway

I came to the realisation that UX design in AI tools should not be copied from the backend logic. It became apparent that such an approach proved to be overly complicated for users who were not directly involved in the development process

My responsibilities

• Conduct stakeholder interviews
• Present key findings and explain them to the team
• Allocated resource
• Curated templates
• Conduct user interviews and surveys
• Analyzed user behaviour data
• Do market research
• Created design system

I hope this information was useful! :)
If you liked this article sharing it with friends is greatly appreciated!
You can also click 👏 below (as many times as you want!)

Feel free to connect with me via LinkedIn or follow me on Instagram. Thank you!

Improving user engagement in Gen AI product. Case Study. was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is a product requirements document?

Before diving into writing a PRD, it’s essential to understand what it really is. Essentially, a PRD is the blueprint for your idea.

PRD — document facilitates alignment with all stakeholders and covers critical aspects such as features, functionality, value, and the product’s overarching purpose. It’s essential to include every pertinent detail associated with the product release. Importantly, a PRD doesn’t only play a role in the development process but also becomes a crucial asset in the product release phase.

Furthermore, it proves invaluable in the future. When you need to recall reasons or specific details after sometimes, you’ll have a comprehensive document at your disposal containing all the answers. Trust me, you’d be surprised at how much you can forget in just a month after the release =)

Let’s take a closer look at the document

I propose you take a look to structure in my PRD document.

All information is divided into two sections: Problem Alignment, where we need to identify the problem, and Solution Alignment, where we need to explain the solution.

Problem Alignment ➢ 1. Feature Opportunity

As a starting point for your document, try to explain the general idea.

📎 Why is it important to our users and our business? What insights are you operating on? And if relevant, what problems are you not intending to solve? Why and how is it important for the product’s value proposition. Describe high-level approach.

What it does? / What purpose does it serve? / What problem does it solve?

• What is it for?
• What’s the use case?
• How it impacts the product?
• How it’s helping the customer?
• How is that improving customer’s life?
• What impact does it have on product marketing?
• How does it improve the product from the previous way? — How did we solve the problem before?
• How much time/money/human labor will this feature save us?

📎 Describe risks — What is the risk of not launch the feature?

Problem Alignment ➢ 2. Target Audience

📎 What is the specific sub-audience you’re serving?
by user profile, user goals, user problem

📎 How do they differ from your overall audience or other audience segments that might change how you implement the feature?

Problem Alignment ➢ 3. Customer Insights

📎 What are your most important insights from your user research? Any particularly counterintuitive and material ones that affect your feature implementation?

📎 What data support those insight themes?

Problem Alignment ➢ 4. Competitive Insights

📎 How have your competitors or other best-in-class companies implemented this feature?

Problem Alignment ➢ 5. Goals & Success

Important section, provide a narrow shortlist of priority metrics and actively calling out metrics you don’t care about impacting or don’t want to impact empowers your team to make better trade-off decisions.
Also in this section you can note current metrics for compare it with future metrics.

Solution Alignment ➢ 1. Implementation Details

📎 What are only the most important technical details to clarify?
What are the key functionalities you need to implement now or might want to implement later? Knowing what functionality you may want to implement later helps engineering optimize their architecture earlier

Solution Alignment ➢ 2. Launch Plan

📎 What are the launch phases for this feature? This helps engineering know what server load to expect and whether feature flags are required

Solution Alignment ➢ 3. Press Release & Release Plan

📎 This section part of marketing. In this section you can describe next things:

• Heading — Name the product in a way the reader (i.e. your target customers) will understand.
• Sub-Heading — Describe who the market for the product is and what benefit they get. One sentence only underneath the title.
• Summary — Give a summary of the product and the benefit. Assume the reader will not read anything else so make this paragraph good.
• Problem — Describe the problem your product solves.
• Solution — Describe how your product elegantly solves the problem.
• Quote from You — A quote from a spokesperson in your company.
• How to Get Started — Describe how easy it is to get started.
• Customer Quote — Provide a quote from a hypothetical customer that describes how they experienced the benefit.
• Closing and Call to Action — Wrap it up and give pointers where the reader should go next.

Solution Alignment ➢ 4. Investigative Metrics

📎 What metrics do you want instrumented as part of this feature? Each metric should be related to answering at least one future question on how to change the feature

Solution Alignment ➢ 5. FAQ

📎 All stakeholders of this initiative can leave a questions or provide answers

Conclusion

This document helps you maintain order in your release process. It serves as a hub where you consolidate all development-related elements. While the document can have various structures, the key is to ensure it provides a clear space where all stakeholders can find answers to their questions about the initiative.

Here you can find FREE Notion template for PRD
https://digitalalice.gumroad.com/l/product-requirement-document?layout=profile&recommended_by=library

How to write Product Requirements Document. Free Notion Template was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Are you struggling to create charming visuals for your web site designs or social media posts?

Problem: In some cases, stakeholders or brands don’t have many images of their product, and designers struggle to create content.

Visual content is a critical component of digital marketing, and creating visually-appealing content can be challenging, especially if you lack the necessary skills or resources.

Problem:
In today’s digital world, designers, entrepreneurs, and social media managers need a constant stream of visual content to keep up with various platforms. However, creating a large number of visuals is a challenging process that can be time-consuming and difficult.

Soulution:
Deploy AI to your work process. With the power of AI, businesses and individuals can automate processes, streamline workflows, and unlock new possibilities for innovation

Are you a designer, photographer, SMM manager, or entrepreneur?
If so, I’d like to suggest trying the Scene Creation tool by Claid.ai.

With Scene Creation, you can transform a single product photo into a multitude of unique, realistic, and visually-appealing visuals that will captivate your customers and showcase your brand’s style.

See exemples what I did with Claid:

How to use Scene Creation: a quickstart guide

Here are the three steps you need to follow.

1. Upload your image. The process of transforming your product image begins with uploading it to Claid. Images where the product is well-lit and has clear edges give the best results.

2. Select a scene or opt for a custom mode: Our technology automatically inserts your product image into the style, blends the light and colors and delivers images as realistic as product photoshoots. You can choose from a variety of styles and scenes to suit your brand identity and target audience.

3. Download results: Once you are happy with the images generated by Scene Creation, you can download them in high resolution and use them for your website, marketing ads or social pages.

Unlock your creativity without wasting time!

I hope this information was useful! :)

If you found this article helpful or interesting and would like to stay updated on the latest design and productivity tips, be sure to follow me on Medium.

You can also click 👏 below (as many times as you want!)

LinkedIn
Dribbble
Twitter
Instagram

In this article, I will share my experience conducting user research at Claid.AI, an AI startup. As a small company, we do not have a separate research department.
Instead, we have built a process where each department conducts research specific to their role. Our sales, customer care, and marketing teams collect insights and users feedback.
As part of the product team, I receive a lot of valuable information about our users’ behavior, motivations, and needs.

What is user research?
User research is the practice of understanding users’ needs, behaviors, and motivations through various methods such as interviews, surveys, observations, and usability testing. The insights gathered from user research are used to inform the design and development of products and services that better meet users’ needs and preferences.

Our research process in the Product team

In our team we have three phase of users research:
- Discovery phase
- Testing phase
- Ongoing listening

Let’s go through each phase!

Phase 1
In the discovery phase, we focus on user interviews and contextual inquiries. In this phase, we have hypotheses, and before we start building a new feature, we want to find evidence to validate that it’s the right one for our users.

How do we collect insights from our users?
Usually, we create a Typeform and post it where our focus group can see it. Studying the user is beneficial. Questionnaires are an effective way to gather information, as people are willing to provide answers voluntarily.
We also send email newsletters with a link to the Typeform to collect more responses.

In some cases, the product team asks other departments to ask customers specific questions during calls or chats.

And of course, in this phase, we collect insights about our competitors.

Once we have gathered enough information, we move on to wireframing and design.

Phase 2
The testing phase is more about dogfooding, concept testing, and usability testing. We conduct this stage only if we have major updates or something completely new.

Usually, we prefer to conduct user testing on a beta version of the feature in our staging environment.
As soon as we have something ready in our testing environment, we start reaching out to the focus group that was collected in the previous step and invite them to test the beta version. This is called moderated usability testing.

During this process, a moderator doesn’t guide the participants through a series of tasks. The moderator is only able to ask the participants follow-up questions about why they did something and take notes on their interactions and feedback. This helps us to identify any usability issues or areas for improvement before the product or service is launched to the public.

During this phase, we gather a lot of valuable insights. All departments and team members involved in the product development use this information to identify areas for improvement. Based on these insights, we work collaboratively to enhance the product or service to ensure it meets the needs and expectations of our target audience.

My focus is to understand if my design is intuitive and easy to use and if there are any usability problems. Users should be able to easily accomplish their goals and complete their tasks with our product.

If we don’t have major updates, and instead only have minor changes, we prefer not to spend time on moderated usability testing as an intermediary step between idea and public release. Instead, we prefer to push the changes directly to production. And have two ways, it is AB testing with phase rollout or deliver feature straight into production and monitoring analytics.

Phase 3
Once a feature has been launched, it’s about ongoing listening.
Ongoing listening involves continually monitoring and gathering feedback from users after the product has been released to the public. This can be achieved through a variety of methods, including surveys, user feedback forms, social media monitoring, and customer support interactions. By actively listening to users, you can identify any issues or concerns they may have with the product, as well as opportunities for improvement or new features.

1–2 weeks after the first public launch is time for monitoring the product.
We observe all information around the feature. The team is actively looking for any feedback, comments, or concerns related to the feature.

We check customer support and customer care requests. Try to indicate the issues related to the feature.

As a principle designer, I track key metrics and user behavior related to the feature.

It’s also important to engage with users in a meaningful way, making them feel valued and heard. Responding to user feedback promptly and transparently, and taking action on their suggestions

This phase is endless. There is no limit to improvements.

Tools that I use:
Otter; Typeform; Figma; Customer.io; Crisp chat; Hotjar; Amlitude;

I hope this information was useful! :)

If you found this article helpful or interesting and would like to stay updated on the latest design and productivity tips, be sure to follow me on Medium.

You can also click 👏 below (as many times as you want!)

LinkedIn
Dribbble
Twitter
Instagram

User research — My own experience on AI startup was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Build better product experiences for your customers

Amplitude is the most popular analytics tool. That is an integrated tool, so you need developers. Before starting, you should identify critical business metrics, and create the taxonomy.
You can get data about MRR, LTV, CAC, Retention, etc. By using this tool.

Hotjar is a cloud platform that helps businesses track and analyze visitor actions they take through clicks, swipes, or taps. Heatmaps provide a clear visual representation of how people interact with a site. Analysts can anonymously view user sessions and identify usability or navigation issues that need to be improved.

If you have a subscription plan(s) this platform can lead it. Chart Mogul provide reporting of key subscription metrics. The tool has a focus on money. You can uncover hidden insights, and trends for all your metrics — MRR, ARR, Churn, LTV, and more. Combining it with an events analytics tool is the best way to get a clear picture of your product.

The tool helps you analyze user behavior. Its functions are session recordings, events, funnels, heatmaps, and so a lovely feature is behavior flows. You can see visually how your users move at your website or app.

Mixpanel makes powerful analysis accessible to anyone. Interactive reports let you query your data with only a few clicks, then see visualizations in seconds. This makes it easy to answer question after question about how your product is used, who sticks around, and much more.

“Product analytics is the key to product-led growth”

I hope this information was useful! :)
If you liked this article sharing it with friends is greatly appreciated!
You can also click 👏 below (as many times as you want!)

Do you have a project you’d like to collaborate on?
💌 Email anna.podvoiska@gmail.com

5 Analytics tools for product designers was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi friends!
In this article, I have tried to describe the Signup and Login flow. Yes, you can think it is a very easy flow, everybody knows how this process works, but no.

What is the Magic link?
This feature enables blazing-fast, hardware-secure, passwordless login, making the login process easier for your users. Magic link is a type of passwordless login that allows users to log in to an account by clicking a link that’s emailed to them, rather than typing in their username and password.

Magic links can also be used as a part of a multi-factor authentication (MFA) strategy and can assist users who are having trouble entering their password correctly.

Sign up

This is an important page, so it should be clear to perceive. Usually, I don’t put here a Header and Footer, because it can take the user away from the goal. But we need to show a possibility to get back to the home page. For the use of the Magic link, users should be registered as usual by email or social networks or etc.

1. Start with a Greeting, then will inform users that they are on registration. Please don’t use similar H1 text for Login and Sign up it can confuse users.

2. Link to Log in. I prefer to put it on top because I think it is logical to place it next to the greeting. Users will find it here faster than below.

3. Continue with Google it makes logging in faster by saving the user from creating a password and doing a verification account.
If you use Google or something else, do not forget to add the ability to set a password in account settings, and add the ability to disconnect Google. Also when you will be connecting to Google OAuth you can make an additional setting to collect some data from its google account.

4 & 5. Password. Please, if you have conditions for the password, show it to users. They shouldn’t guess it. And please if you are a regular company (not a super-duper secure service) kindly add the ability to Show/Hide a password. It can help to get rid of reset password requests.

6. reCAPTCHA. If you don’t want to be abused it is important. :)

7. Action button should have a name that is fitting to H1 for being one context. Also, I think validation of this button is not needed. Usually, these validations prevent users from understanding their mistakes, because they can’t call input validation. But this is another topic if you want to know more — let me know.

8. Newsletter checkbox: I suggest, even If you don’t have a newsletter, do this check anyway. Because after some time, you will be hustling very hard to get approval for it from existing users.

9. There is always a place for Terms and Conditions. That is a rule.

10. Don’t forget about intermediate states. Such as “Check your email” and “Email confirmation”. I suggest not to use no-reply email, that is bad practice.

Part two

Login

This screen shouldn’t have a lot of something.

1. Start with a Greeting, then inform users that they are on login.

2. Link to Registration. I prefer to put it with greeting because H1 shows the user where he is, and if the user is not where he wanted to be, he has an option to switch to Registration because Login and Registration is the most important goal on a website usually.

3. Continue with Google. Set Up Google OAuth that way so if such user doesn't exist in your database, OAuth will create one.

4. The most interesting password on the login form.

Developers implement the Admin SDK to validate token.
The user enters an email, and after that frontend sends the email address to backend. Backend generates an authorization token and put it into the link.
After that backend sends an email with a magic link. When the user clicks on it, frontend checks this token and sends a request to backend with this token. After that login happens.

So if user left the password field empty and just clicks on login button he will get a link for entrance. So this flow doesn't require a reset password option, you can have it only in account setting inside.

5. Don’t forget about navigation suggestion :)

6. Click to login and get the magic easy-peasy login to the system :)

P.S Don’t forget to name the artboards and make a flow!

How I make this flow you can see here link to FIGMA

🐵 Let’s be friends! Connect with me on LinkedIn, follow me on Dribbble, or just write me an email at anna.podvoiska@gmail.com. Don’t forget to follow me here on Medium as well for more product-design-related content.

Hello IT people!

Did you know about the ability of changing an application icon after downloading? This interesting tool can solve certain number of problems.

We can use this feature as a personalization tool for each user or client, and it allows us to improve the quality of targeting.

For example: Your app for baseball fans, called “Baseball App”, where you have scoreboard for all matches, and you want to satisfy each user/fan, and give them ability to cheer for their favorite team. Creating UI for their favorite team would be attractive for fans.

But what if we have only one app? And a lot of baseball teams, and we don’t know which team users cheer for?

iOS development gives an opportunity for each user to customize logo and theme in the app. You need to follow AppStore rules.

Let’s look at an example flow:

1. User downloaded «Baseball App»
2. After login screen we ask “Which team do you cheer for?”
   They choose “MLB” in dropdown menu — click Next.
3. Then, we should show him appearance settings, were will be:
   Color theme
   Use default design app — Select control
   Use design app on “MLB” — Select control
   App icon
   Default app icon — Select control
   Icon “MLB” — Select control
   Users should be able to see previews of available themes and app icons.
4. Click Apply. Only after this step users will see the app with selected design of the favorite team. This will change user’s experience in the app and immerse them even more in the game. I think you know why personalization is important. If not we will have another article =)

The Most important thing!
According to the App Store rules, users should have an ability to reset design and icon to default state. So, your app must include Appearance section under Settings, with all designs and icons. Otherwise, App Store will reject your app.

If you have any questions, please write a comment.
I will be glad to answer them!

And don’t forget 👏🏻👏🏻👏🏻

Changing iOS app icon and app design individually for each user was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

People of Medium, hello!

In this mini-guide, I will explain how to develop a Notification Center for a web or mobile application.
Let me remind you that any successful design requires understanding of business needs and ought to be useful and user-friendly. Do some research to identify your client’s business niche and what they want.

1. What are Notifications

Notifications are pieces of information (alerts) that pops up on a mobile device notifying the user about new events. App publishers send them to communicate with the users.

Notifications can be mainly of two types: informational and actionable. Both these types could have further subtypes depending on the context of the app.

Informational - are notifications aimed to provide information and not necessarily an action.

They facilitate user’s work with the system; make it more understandable and predictable. As one of the advantage for the business — they help to avoid mistakes, which otherwise need to be solved using additional tools.

As an example:

File is deleted; System will be unavailable from 12 a.m.; Bulk process is running; Your transaction is successful; New role is assigned, etc.

Actionable - are notifications followed by an action or caused by an action.

As an example:

Likes and how they displayed; Friend request notification and an option to respond immediately; Message notification showing first couple of lines;

Notifications can be both useful and tricky. They may provoke user’s action — cause euphoria, addiction, etc.
Notifications in general are very convenient, but they also may contain sneaky psychological tricks.

2. Here is what you need to do to get started

Once you have identified the primary goal of your app’s notifications, what problems they solve, how they can be useful for business and attractive for users, you may start your visual design.

List all the events that will be in your system, or if it is an existing product, analyze the existing events, categorize them and add new ones, if needed.

When your list is ready you need to come up with the logic of how the notification itself will be built on the backend. What data will come from where, what the notification will consist of. So to speak, make data design. As a rule, this should be one design that fits all types of events.

As an example:

[Event name] + [Area where] + [Action button]

If you have too many sources of notifications, there’s a possibility that this model can start looking a little cluttered. If there are similar types of notifications, you could group them together which would help to reduce repetition.

You should clearly understand the purpose of each notification in the system and consider cases when they are needed.

If you want to succeed with your design, start with analysis.

Here are some standard components of a notification.

3. Notification components:

1. Anchor is a visual component on the architectural level. Note that anchors are not necessarily sources of notifications, but only the component where the notification displayed. An anchor could house notifications from multiple sources or just one.

2. Notification indicators or counters can be as plain as a dot, or they can also have a count on it, which would show the number of unread notifications.

3. Event name. It is important that the event name differ visually from the rest of the content. Make it appealing when displayed. We have Subject — indicates ongoing (event), and after goes Description — explains what is going on.
If your description is truncated (has three dots in the end), this demands special logic.

4. Event Icon. Visualization easier to read than text. You can teach people to understand symbols without text, which will make work faster. Thus, it is better to categorize all notifications and assign them an icon.

5. Event Time. Explains when and what happened. In order to set the most convenient periods you need to know: When do customers most often use the application? During working hours? During the day? On the weekend? What time zone are they in?

6. Read/Unread Indicators. Distinguish read massages from the unread ones.
Options:
1. It is considered read after the list of notifications pops-up.
2. You need to click on action — read.
3. You need to follow the link.

7. Do not disturb mode. Turns off audible and visual notifications, but stores them in a general list. As a feature, you can also add a schedule setting, than it turns on and turns off itself. Notifications at the wrong time are worse than useless, because they annoy.

8. Action button. Open, skip, delete, view, etc. Thought out when it appears and what solutions it offers.

9. Hoover effects. A change of some element while you put a mouse arrow over it (Online tactility).
Don’t forget about hover effects.

4. Notification settings

You may not have them in simple application but you would better have it in order not to bother your users.

Notification settings may include the following features:
1. Email notifications setting.
2. Setting of push notifications on your phone and browser.
3. Function “Do not receive notifications on my phone while I am on web”.
4. Setting of the time interval
5. Setting of the notification type

And many other, depends on your product

5. Push notifications

Push notifications in the browser — if your browser is open, a link to your application is opened in it, the user can receive notifications from other web pages. Push notifications are displayed in the upper right corner; may look different depending on the browser. May contain image, caption, text and navigation or skip button.

Push notifications are generated at the frontend and are transmitted to the browser.

The image in push notifications is always the same regardless of the event. Usually it is the application logo or image visually linked to your web page. The design of the push notifications can vary depending on the version of the browser. When developing a design, you should include it into your layout for the information of front-workers.

I hope this information was useful! :)
If you liked this article sharing it with friends is greatly appreciated!
You can also click 👏 below (as many times as you want!)

How to design a notification center for your app was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Привет, дизайнеры!
Пишу вам мини-гайд о том как разработать нотификейшен центр для веб или моб приложения.

Хочу напомнить прежде чем разрабатывать любой дизайн вы должны понимать зачем это нужно бизнесу и как это должно быть полезно для пользователя. Провести ресерч перед своей работой и разобраться в нише бизнеса вашего клиента.

1. Что такое уведомления

Уведомления это фрагменты информаци, которые оповещают пользователя о новых событиях. Способ общения приложения и пользоветеля.

Мы можем условно поделить уведомления на два типа «Информационные» и «Действенные». Оба этих типа могут иметь дополнительные подтипы в зависимости от контекста приложения.

Информационные — это уведомления которые сообщают информацию не обязательно зависимую от действий пользователя.
Они облегчают их работу с системой, делают ее понятней и предсказуемой.

Например:
Файл удалён; Cистема будет не доступна до 12AM; Балк процесс запущен; Ваша транзакция успешна; Назначена новая роль, и т.д.

Действенные — это уведомления после которых следует действие либо вызывны действием.

Например:
Лайки и то как они отображаются; Уведомление о том что вас добавили в друзья, сразу предложенный экшен добавить в друзья в ответ; Уведомление о сообщении с текстом уходящим в три точки;

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

2. С чего начать?

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

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

Когда ваш список готов вам нужно придумать логику как само уведомление будет строится на бекенде. Какие данные от куда будут приходить из чего будет состоять уведомление. Так сказать сделать дизайн данных. Как правило это должна быть одна конструкция которая подойдёт под все типы событий.

Например:
[ Name event ] + [ Area where ] + [ Action button ]

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

Вы должны четко знать зачем в системе то или иное уведомление, так же следует найти места где они были бы полезны, и продумать их

Только после анализа вы можете переходить к дизайну.
Дальше список стандартных атрибутов для уведомлений.

3. Атрибуты уведомления:

1. Якорь — это визуальный компонент на архитектурном уровне. Якоря не обязательно являются источниками уведомлений, а только компонентом, где появляется уведомление. Якорь может содержать уведомления из нескольких источников или только из одного.

2. Индикаторы или каунтеры уведомлений — могут быть простыми, как точка, или они также могут иметь счетчик, который будет показывать количество непрочитанных уведомлений.

3. Имя события — Subject указывает на происходящие. Description — объясняет что происходит. Важно что бы они визуально отличались.
Если ваш Description уходит
в …, у этого должна быть продуманая логика.

4. Иконка события — визуализация легче читается чем текст. Можно приучить людей понимать символы без текста, что сделает работу быстрее. Для этого важно список всех уведомлений разбить на категории и каждой присвоить иконку.

5. Время события — Обьясняет когда точно произошел ивент. Не забывайте найти ответы на такие вопросы: Когда чаще всего пользуются приложением? Утром? На протяжении дня? А на выходных? В какой тайм зоне находятся пользователи ?

6. Индикатор прочитанного и не прочитанного уведомления —исключает конфуз пользователя, и он точно понимает что он еще не видел. Варианты:
1. Переходит в стутус прочитанного после того как открылся весь список.
2. Переходит в статус прочитанного после нажатие на любой action button. 3. Переходит в статус прочитанного после перехода по ссылке.

7. Режим не беспокоить — Отключает звуковые и визуальные уведомления, но хранит их в общем списке. Как фича можно еще добавить настройку-расписание времени когда он включается отключаеться сам. Потому что уведомления в неподходящее время хуже, чем бесполезные —они раздражают пользователей.

8. Action button — Кнопка действия. Открыть, пропустить, удалить, посмотреть и т.д. К этой кнопке тоже должна быть продумана логика при каких условиях она появляется и какие екшены предлагает.

9. Еффекты наведения— это “Онлайн тактильность”
Не забываем про hover effects.

4. Настройки уведомлений

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

Настройки уведомлений могут содежрать следующие функции:

1.Настройку Email уведомлений.
2. Отправку пуш-уведомлений на телефон и в браузер.
3. Функцию “Не отправлять уведомления на телефон если я нахожусь на веб версии”.
4. Настройка временного интервала.
5.Настройка типов желаемых уведомлений.
И многое другое в зависимости от вашего продукта.

5. Пуш-уведомления

Пуш - уведомления в браузере — если у вас открыт браузер c вашим приложением, пользователь может получать уведомления при использовании компьютера или браузера. Отображается всегда в правом верхнем углу, выглядят для каждого браузера по разному. Может содержать изображение, заголовок, текст и кнопку перехода или пропустить.

Пуш уведомления формируются на фронттенде и передаются браузеру.
Изображение в пуше всегда одинаковое не зависимо от события. Обычно туда ставят логотип приложения или изображение визуально связанное с вашей веб страницей. Дизайн пуша может меняться в зависимости от версии браузера. При разработке дизайна вам следует включить его ваш макет для понятности фронтенщиков.

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