/
Design process

UX Flow and Its Importance for the Design Process

0

mins to read

Each product you create exists, in the first place, to satisfy some client’s needs or solve their problems. But, even if your app has all the needed functionality to fulfill this task, in case the application has a long and exhausting sign-up process, confusing navigation, or it provides a bad user experience in some other way, your clients will probably leave the app and opt for your competitor’s offer. 

As a UI/UX design company, we know from our experience that it is essential to optimize the path a user takes when interacting with your product. And an effective way to do it is to create a well-thought-out UX flow. 

For example, simplifying the user flow helped us to eliminate the problem with visitors that didn’t convert to users when we were working on Handprinter, a unique startup with a goal to heal the planet.

User Flow example
Example of a user flow created by Eleken for Handprinter

This article aims to explain what user flows are and what is their place and role in the product design process. To give you a clear understanding of the topic we divided this post into the following sections:

  • What is user flow in UX?
  • Place of user flow in a product design process
  • Types and examples of UX flows
  • What do I need to create a UX flow?

OK, no more talks, let's get down to business.

What is user flow in UX? (or “Build your product with your users in mind”)

Start creating an information architecture for your future product right away without building any strategy is not the best idea. For your customers to have a positive impression of the product, designers should focus on customers’ needs, which means they should develop an understanding of how to create the best algorithm for performing tasks for a particular user.

The easier it is for the client to move along their path when completing a task, the more pleasant it is for them to interact with your website or application. And that means you are more likely to provide a great user experience.

UX flow is a diagram that shows the path a user goes through when using your product from the start point to the final interaction.

You can have many User Flows as a part of a single project, as there are a lot of different objectives for a person that uses your service/app. Some can be rather complex (become a member of your product), while others can be directed at one specific task (watch a video). 

Let’s take a look at the example of a UX flow to better understand the above definition.

task flow example
Image credit: uxmisfit.com

This UX design flow represents the path the user has to take when they start using the app. We can see the entry point “View app start page” and all possible steps users will have to take to reach their final destination “View dashboard”.

This visual representation of the sign-up process allows designers to assess the product’s ease of use and, if needed, optimize the user experience.

The use of user flows for UX design

As you may have already understood from the content above, the main advantage of user flow diagrams for UX design is the ability to improve the user experience (which in its turn leads to the increase of the probability of a user purchasing or signing up for the product). 

But it is not the only benefit we can mention here:

It is an easy and fast way to visualize the process

With the help of user flows you may quickly illustrate all the tasks without the need for any special UX user flow tools (you can build the diagram in any design application that you use like Figma, Sketch, Adobe XD).

This kind of design deliverable is clear for everyone (stakeholders, clients, team members) as it looks like blocks and arrows. Moreover, you can build user flows even before you design the user interface of the product to make the UI more thoughtful and logical.

Allows to better learn your audience

The basis of the whole interaction of the user with the product is to complete a certain task (find some info, book a room, and so on). As we create the user experience process flow from the user’s standpoint, it lets you focus on user tasks taking into account their true goals and experience. User flows in UX design help us to keep in mind that we solve real problems of real people.

Helps to eliminate malfunctions

Most challenges that occur when developing a website/app are connected with users that can’t successfully reach their goal. A well-thought-out UX flow helps to identify and get rid of the bottlenecks, pain points, and steps that may confuse clients and cause problems on their way to completing the task.

One more thing we want to mention here is that flow diagrams help to identify problem areas in the existing design as well. Building UX flow for products that are already on the market allows us to see what works well, and what needs improvement. This way you can think of alternative options users may take to accomplish their task faster and easier.

improving the existing design with the help of the UX flow
Image credit: about.gitlab.com

Better communication

It is difficult to communicate your ideas in a way that is understandable for everyone. UX flows allow you to present the scope of work, challenges, tasks, and goals your team members will have to deal with when creating a design solution.

Place of user flow in a product design process

the place of user flow in the product design process

User flows are useful for everything from interface design to information architecture and usability testing. In the early stages of the UX process, it can help you to formulate and visualize the ideas before you get into this step of creating high-fidelity mockups, wireframes, and prototypes.

At Eleken we build user flows as a part of our UX strategy stage of the UI/UX design process. It helps us to align the product vision with user needs. So, when talking about the place of user flow in a design process, we create them after we’ve done all the needed research about the market, competitors, and target audience. When you have information about your users, UX flow helps to determine the number and order of screens that the product should contain.

Finally, remember that product design is not a linear process, so you can go back to user flows at any point, revise and improve them to provide the best possible user experience for the clients.

Types of UX flows

There are a bunch of different types of UX flows. Some of them are simple and look like labels,  some are based on wireframes with text. Let’s dive into more details with user flow UX examples.

Flowchart

flowchart example
Image credit: smartdraw.com

A flowchart is a diagram that represents the order of steps the user takes to perform a process when interacting with the product. They may represent the whole experience or just a piece of it.

Flowcharts are easy to build as there are certain rules of how to depict them.

how to build a flow chart? symbols and their explanation
Image credit: pinterest.com

Task Flow

Task flow represents the user’s actions when they complete a specific task. Usually, task flows illustrate only one path without multiple ways.

Task flows are used in UX design when you think that all clients will take the same sequence of steps.

task flow example
Image credit: medium.com

The distinctive feature of a task flow is that it is often small and linear. They do not illustrate the difficulties that users may face (for example, in the image above it doesn’t show what will happen if there is no result found).

Wire flow

wire flow example
Image credit: lucidchart.com

To give the definition of a Wire flow, we should understand what the wireframe is. A wireframe is a page layout that illustrates the design elements on each page and the way they are connected with each other.

In its turn, a Wire flow is a combination of a wireframe and user flow. Instead of blocks with information, we see the visualization of screens customers interact with on their way to completing the goal.

Wire flows are especially useful for developing mobile apps (because of the small screen size). 

Screen Flow

Screen flows feature high fidelity screens that are actually page layouts of the finished application. They are highly detailed and represent the real size and look of a future product.

It allows both clients and team members to feel the size and complexity of a website/app. 

screen flow example
Example of a screen flow designed by Eleken for Findo, money transfer system

Sitemap

The sitemap shows the hierarchy of the website’s structure. Sitemaps help designers to organize and prioritize the content and functionality of the product.

Take a look at the Sitemap we created for Abode. We wanted to have a better understanding of what the Abode website lacked in terms of user experience. As well, our goal was not to overload users with too much technical info that could distract them from their main goal. To visualize the structure in a clear way we created the following Sitemap:

sitemap example


What do I need to create a UX flow?

Here are the main steps that outline the process of creating UX flows.

  • Conduct customer research. Do research to learn who your target audience is, what goals they have and what steps they need to go through to achieve their goal. This information will help to make your UX process flow smooth and logical.
  • Create a title for your user flow. The title should explain the user’s objective (for example, “creating an account”, “resetting the password”).
  • Reduce the number of steps to the fewest possible. The simpler the process, the better is the user experience. If the user path is too long, try to break it down into several smaller tasks.
  • Design each step. Depending on the type of UX flow you choose it can be a block with few words or a wireframe.
  • Add description. To better understand what the user is supposed to do at each step, you may add short explanations below each block.
  • Evaluate and refine. Check if your user flow satisfies customers’ needs and helps them to fulfill the task in the shortest way possible. Think if there are any points where the user may have doubts or be confused about how to complete the task. Remember, there is no limit to making improvements.

Do I really need a UX flow?

If after reading the whole article you still hesitate if you need a UX flow here are some key takeaways about the benefits of this design deliverable:

  • It is an easy way to present the whole process of interaction with the app.
  • User experience flows help to shape the strategy and create an intuitive information architecture.
  • With the help of flows, you won’t forget to create some mockups.
  • UX flows increase the probability customers will buy/subscribe to your product. 

If you need some help in creating an intuitive interface and cohesive user experience drop us a line, we have dedicated product designers with experience in creating a customer-centered design that are ready to lend a helping hand.

Kateryna Mayka

Author

Table of contents

Top Stories

Design process
/
0
min read

UX Research Plan Template. From Objective to Timeline

UX research is a complex process. To get the most of it, the process has to be organized. Even if your research consists of just a few interviews, you need a plan to make it effective and focused and not to end up with vague conversations.

With a good research plan, all the team will be on the same page, the deadlines will be met, and the research report will be relevant to the objectives.

As a design agency, we do UX research for each project we work on. One thing we can say for sure is that there is no universal template for UX research. Each project needs an individual approach. Yet there are some general steps that help us organize the research and build a structure around it.

Cat reading newspaper: I need a research plan

So, how to create a UX research plan?

When you think of research strategy, a great guide is the DECIDE framework described in the book Interaction Design by Preece, Rogers, and Sharp. Here are the main steps:

  • Determine the goals.
  • Explore the questions.
  • Choose the evaluation approach and methods.
  • Identify the practical issues.
  • Decide how to deal with ethical issues.
  • Evaluate, analyze, interpret and present the data.

However, what works great for the user research strategy may not work as well when you have to make a concise UX research plan, short and clear. What is great in this framework is attention to ethical issues. On the other side, in an actual research plan, you might need to focus more on practical issues, such as budget, schedule, user database.

Here we suggest breaking the plan into more practical points.

Study existing situation

First of all, a researcher needs to understand the subject well, conduct interviews with team members, understand how the team is working. At this stage, they can also check the findings and results of previous researches, as well as related studies conducted with other products on the market.

This step may take more time for a product that is already on market, and less for the one that is yet to be developed. However, even in the latter case, there is always a certain background that is important to consider before the start.

When we start working on a product, one of the very first steps of the research is to ask questions to the team, before even talking to users. Here is a sneak peek to our working process with Acadeum, an educational SaaS for whom we did the UI/UX services. Each sticky note is a question that opens new possibilities to the product design.

UX research audit. Miro board

Objective

Defining the user research objectives is crucial to understanding if the research was successful or not.

“Understanding our users better” is a vague objective. Of course, we should not underestimate the importance of empathizing with the customers. Most researchers are inherently directed at this “understanding” and it is awesome. Even if you just talked to your customers and got to know them better, the research can’t be considered “unsuccessful”. However, to get the most out of UX research, you need a more concrete objective.

For example, here is how we did UX research for Gridle, a CRM platform. While the research consisted of just a few in-depth interviews the result was the creation of a whole empathy map, a tangible version of “understanding”. It was short, just a few in-depth interviews, but the result was not just “better understanding”, it was an empathy map. It can also be a customer journey map or a detailed buyer persona profile. These are the things that can be used by other team members and won’t be lost when the researcher will stop working on the project.

Empathy map with notes. Hear? Think and feel? See? Say and do? Pains. Gains

The other extreme is too much “KPI-oriented” objective. “Increase revenue”, “improve conversion rates” sounds very concrete and measurable. However, UX research alone can’t fix these issues. It can suggest a certain hypothesis, but after that, the changes have to be made and the hypothesis has to be tested to finally reach those KPIs and improve metrics.

Here are some examples of user research objectives that are both concrete and feasible:

  • What are the weak points in user flow?
  • What are the main factors of users dissatisfaction?
  • What are the a-ha moments of customer journey?

Estimated budget

At this stage, there is no need to define a detailed budget. What we are looking for here is to estimate the amount of money the client is ready to allocate for the research. Depending on the budget, the research methods and the number of users researched will vary. For example, an email survey can be run at a very low cost, while eye tracking requires costly technical resources and software.

At the final stages, the budget needs to be revisited. Only when the plan is done can we estimate the real budget.

Research methods

There are so many different UX research methods, that it is easy to get lost among them. Fundamental research may use all of them, but in most cases combining just a few is enough to get answers to the focus questions.

If you know little about all these UX research techniques, here is a quick guide on choosing the right one for your project:

how to choose UX research methods

As you can see, there is no way to avoid talking directly to users. Try integrating elements of an interview in every step of the research where you get access to the users. To learn more options and choose wisely, check out our list of 14 essential UX research methods.

If the product is at the very initial stages of development, generative research with deep interviews and competitors study works great. When the development is taking off, card sorting and contextual inquiry would help. When the product or prototype is ready and needs to be assessed, it is time for usability testing and email surveys.

In any case, a good practice is to combine quantitative and qualitative research, evaluative and generative research.

Choice of UX research techniques affects the tools. This might be even harder than picking the methods, but we’ve got a list of best UX research tools to help.

Participant profiles

Picking the right participants is a key to success. In many cases, you would not have a defined user persona before running UX research. Start with basic characteristics: age group, occupation, geography, and, what is important, the level of their engagement with the product (active users/prospect users/other options).

Some of these characteristics would not be relevant for your case, while others will be important. When you are done with a profile, define the minimum number of participants you need for each research method.

At this step, you should also think of ways to recruit the participants. There are many services and tools that help to find people for UX research sessions. It may be a great choice when you are just about to launch a product and not sure where to look for the participants. If you already have a user database, recruiting some of them would be more efficient than relying on the participants found by a third party.

Protocol

The research protocol contains specific guidelines for each selected research method. Interview questions have to be phrased correctly and correspond to the objectives.

A good practice is to write down the opening and closing of a user interview. At the beginning it is a short presentation of the product, an explanation of the study and its objectives, noting the amount of time it would take. At the end of the interview, there should be an expression of gratitude for the participation and asking if the interviewee has any questions.

Survey questions have to be planned in a similar way, as well as usability testing and even field research. “Just observe the users” isn’t a very effective approach. It is important to know what you are focusing on and what the questions are, even if there is no direct user interview planned.

Timeline

Once you have decided on research methods and the number of participants, a timeline should not be a hard task. The problem here might be that the time period that the client has planned for the research is shorter than what a researcher thinks is needed. Maybe hiring a research assistant can help save time. Another benefit of a clear and concise UX research plan is that it allows engaging other people to work, even if they are not familiar with the project in detail.

How long should UX research be? The timing depends on the scale of each project. Based on our experience, research takes on average from 1 to 5 weeks. When making an estimate, consider these factors:

  • Time needed for the collection of data and time needed for the analysis
  • The number of team members you can engage in user interviews and other research activities
  • Time for the recruitment
  • Time needed for the collection of data and time needed for the analysis
  • The number of team members you can engage in user interviews and other research activities
  • Time for the recruitment
  • Human factor. People might be late, absent, or simply not available for an interview the next few days.

Make sure you plan with some spare time, so you won’t have to do the analysis in a rush: this is the key element of the UX research plan.

Ethics

Ethics is the last but not least part of the DECIDE framework. Yet it is overlooked way too often in user research plan. Should we give special attention to ethics when we just ask some people to interact with an app and tell their experience? Whatever your opinion is, the rule of thumb with ethics consideration is better to overdo than do not enough.

What are the most common points that you should consider?

  • Receive the permission to record/film the process
  • Receive the permission to use the information for research purposes (if it is needed for publication, it has to be stated clearly)
  • Receive the permission to record/film the process
  • Receive the permission to use the information for research purposes (if it is needed for publication, it has to be stated clearly)
  • Inform the participants of all the details of the UX research process

Explaining to all the participants the background of the research, the methods used, and the purpose can be annoying and many researchers deem it unnecessary. Yet people have to know what they give and what they get.

The best way to save time on explanations and secure the ethics issues is to prepare a Research Participation Agreement (RPA). The document does not have to be long and there is no need to engage a lawyer in writing it. Follow this RPA template to make sure you inserted all the necessary info.

Budget (again)

Now that all parts of the plan are ready, it is time to check if the final budget fits into the initial one. There is no need to write a detailed budget into the UX research plan when it is just a part of the product design process, but often it is useful for researchers to know the sums to be able to estimate the costs in the future.

UX research plan graphic templates

Now that we are long gone into the process of crafting a UX research plan, and the process is far from any real template… Here are some templates that help you visually organize the plan (or at least the most important parts of it).

UX research template Miro

Miro UX research plan template. Goals&questions-oriented 

Airtable template. Timeline-oriented 

Milanote template. Brief 

An example of organizing all the user insights in Trello 

To sum up

This template is more of a how-to instruction. That is because UX research is a complex process that needs to be tailored to each project. Having some guides helps make the planning a bit easier.

If you need professional UX research for your project, contact us and we’ll present you an efficient and realistic plan.


Design process
/
0
min read

Gamification in eLearning Beyond Points and Badges

By the early 1990s, the technical feasibility of modern 3D graphics was born. But would people use this new capability? And if yes, what would they use it for? Experts assumed that people would take virtual trips to distant places, or real estate agents would use 3D for their demonstrations. But it all came down to games. It was a sudden rise of 3D games for PC that pulled the 3D technology onto the market.

Games are a dark medium of a terrifically unclear nature. They have a mysterious power to engage people and even cause addictions. Moreover, games share their power with any domain nearby — just how it happened with 3D graphics.

In the 2010s, educators noticed their students were spending days in Warcraft and Diablo instead of doing homework, and no pedagogic trick could pull them back. That’s when business and education also wanted to feel the magic touch of computer games. 

The question of the games’ nature arose:

  • What is the power behind games that attracts millions of people? 
  • And, more importantly, how can we extract that mysterious power and apply it to other domains? 

Thus, gamification strategies in education were born— attempts to adapt games to the learning environment. Think of it as of attempt to make free-spirited mustangs pull a plow.

Business hunts benefits of gamification in eLearning

What is gamification in eLearning?

Depends on whom you ask. Most people agree that gamification means bringing game mechanics into nongame contexts like corporate learning. It is made for better user engagement because games are usually more engaging than corporate training programs.

But Ian Bogost defines gamification as bullshit

Ian Bogost is an American academic and video game designer. Academics don’t usually use cuss words to define things, so Ian Bogost probably had some reasons for his outrage. Let’s figure them out.

The siren song of gamification and those who crashed on rocks

In 2011, when Ian Bogost made a speech arguing that our topic of interest is bullshit, the importance of gamification in eLearning reached the skies. It was the year when gamification first emerged on Gartner’s hype cycle heading to the peak of hype and inflated expectations. 

It felt like you can add a pinch of game designing to anything, slathering it on your business like syrup on pancakes. Business consultants adopted a new buzzword in their vocabulary, investors were throwing money on startups for the very word “gamification” in pitch decks, and mature companies considered gamification a pill for all business diseases. Saying as straightforward as Ian Bogost, gamification became a Viagra for engagement dysfunction.

As it often happens, hype eroded the essence of the concept. 

  • What distinguishes games from other mediums? Their attributes like levels, points, and badges. 
  • Which part of the games can be quickly implanted into any online learning app? Levels, points and badges. 
  • So let’s add points and badges everywhere. Profit!

But do those formal trappings capture the essence of the games’ addictive power? It didn’t turn out that way. 

Big brands, one by one, gave up their gamification experiments. Adobe stopped developing gamified learning platforms around Photoshop. Google News scrapped its half-baked attempts to reward people with badges for reading news. Foursquare redesigned its app to remove gamification elements. 

By the year 2014, poorly designed game-based mechanics felt more aggravating than addictive. On Gartner’s hype cycle, the gamification trend came down from the peak of hype to the trough of disillusionment. The gamification bubble has burst.

Gamification on the Gartner’s hype cycle

It seems that Gartner got tired of gamification no less than Ian Bogost, because in 2015 it removed the trend from the hype cycle and never added it again. So we can’t be sure if gamification is already on the plateau of productivity. But anyway, the hype is over and gamification is here to stay. So let’s check if there’s anything beyond points and badges, something that can be useful for an eLearning course.

How app gamification strategy can go right

Eleken design agency regularly gets requests to “make things pop” and “gamify the app.” But gamification ideas for apps don’t usually work the way our customers suppose them to work. Let me illustrate it with an example.

Once upon a time, the American Congress debated a new merit-based immigration legislation system. The system proposed a universal standard for worker visa rewards, based not on individual achievements, but on a standardized system for all immigrants.

The problem was, no one has read the bill except its authors who have written that monstrous 380-page volume. The official press release offered two examples of the bill use, and the media reprinted those examples with no attempts to explain to the audience the logic behind this new law. As a result, public debates and discussions were a bit… superficial.

In that situation, New York Times made a tiny editorial game called “Points of Entry.” Players took a role of an immigration officer and, according to the new law, processed visa applicants. Players competed with fellow officers and were limited in time.

“Points of Entry” screenshot. Image credit: persuasivegames.com

A doctor or a software developer in the game would score more points than other jobs like a salesman or a taxi driver. Fluency in English would give more points than limited language skills. Someone whose parents or siblings are US citizens would earn more points than someone with no close family in the US.

It didn’t take people long to play the game, only a couple of minutes. Yet, after playing for a couple of minutes, the quality of debates and discussions rose significantly. People talked about the logic of the bill rather than simply the existence of the bill.

Three missing ingredients of gamification in learning

The “Points of Entry” worked better than the press release thanks to three gamification features that lie beyond points and badges. Let’s get a closer look at them.

1. Games offer simplified models of complex systems

The complexity of the world we’re living in is infinite, while human brains’ compute capability is finite. We just can’t dump all the stuff in our heads, so to keep ourselves from going mad people are used to simplifying things

We represent three-dimensional reality on two-dimensional maps, we simplify irrational human nature to AIDA models and customer funnels. After all, we depict the solar system as a combo of circles and ellipses (just like atoms). 

But we digress.

Simplified, abstracted versions of complex structures help people to understand the logic by which things work. That’s exactly what the “Points of Entry” did to a complex immigrational law fixed in a 380-page volume. You can’t make people understand the way it worked by showing them a press release. Creating a game that models a visa application center helps better. 

2. Games make us playing roles

In games, players take on roles and make decisions in those roles. In other words, they simulate new experiences. 

You can often meet a gamified training platform that uses simulations in aviation or medical education — such platforms help to develop key skills through trial and error, whilst protecting patients and passengers from unnecessary risks. 

Gamification with AR and VR for doctors. Image credit: washingtonpost.com

In the case of the “Points of entry”, players were learning how the new law facilitates the work of an immigration officer. The roleplay made them put the new immigration policy into practice — and understanding the mechanics of the policy from inside.

3. Games immerse players into the new world

This is not just about gamification VR — when playing a role, people start taking a game situation personally. That’s how games bring context and relevance to actions we perform while playing. 

For a brief moment, players of the “Points of entry” took their task seriously. They did their best to process applicants and do it faster than the competing officer. That’s the moment when the mysterious engagement power of games emerges.

How to use gamification in eLearning

To move beyond points and badges to better instructional design, eLearning developers must come to three realizations.

You probably don’t need to gamify your app

In eLearning, there’re many things that take precedence over gamification. Like clarity.

When Eleken designers were creating web and mobile learning applications for the PublishXI learning management system, we had to adopt voluminous content and interface elements from a web version for a tiny mobile screen. The highest priority for us was to create clear, unconfusing learning experiences. So we stamped out all the unnecessary UI elements.

Sometimes best eLearning LMS gamification is no LMS gamification
Mobile LMS

If you need gamified eLearning, put gamification in the core

As we have learned from this article, you can’t spray gamification on top of your product. To activate the hidden power of models, roleplays and immersion, gamification has to be part of the DNA, almost a core feature.

Regain value from the past decade of failed gamification efforts and move past simple points and badges.

In the end, points and badges are not bad at all

All the way long, we were tarnishing the reputation of points and badges. Time to say that they, as well as other elements of the traditional gamification body kit, are pretty harmless when used wisely. Actually, they can improve your app — we have successful gamification-in-business examples.

Take LinkedIn. LinkedIn’s user experience leaves a lot to be desired, but it is an example of gamification done right. It uses a nice little progress bar to make us fill in our profiles. It shows us our rank for profile views. It makes users validate each others’ skills.

Game mechanics and incentives used in the right context may improve the user experience. But don’t say you use them to “gamify” your product, don’t drive Ian Bogost and other game developers mad. 

P.S. If you consider an opportunity to gamify your app one way or another, contact Eleken design agency and we’ll think of it together. In your message, use the code phrase “gamification is bullshit” to get the first week of our design services for free.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.