Build It With The User in Mind: How to Design User Flow

Build It With The User in Mind: How to Design User Flow

A major factor affecting your conversions is user flow. It’s the path a user follows through your website interface to complete a task (make a reservation, purchase a product, subscribe to something). It’s also called user journey.

In order to maximize your conversions, you have to get the user flow right – build one that matches user’s needs.

Learn more about designing user flow and optimizing websites at ConversionXL Institute. Enroll today!

The wrong way to go about designing your site

You need to decide what your new website will be like. Two most common ways people approach it:

Scenario A

You keep everything as it is on your current / old site, but just make it look “better”.

Scenario B

You start with the building blocks.

Okay, the logo goes in the top left corner. Lets put the menu to the right. A nice image in the header. Cool.

And so on and so on.

Both of these are the wrong way to get going.

Start with the objectives

Your primary aim is to fulfill the business objectives (either your own or the one set by your client). Business objectives might be getting users to sign up for something, getting people to purchase products or join an email list.

Just as in real life, quickies are very rare. People don’t just come to your site, and right away do what you want them to do. In most cases, they need to go through a set of steps leading up to the action.

Next time you’re thinking about designing a site (note: design is not just how it looks, but how it works), start with figuring out what user flows you are trying to create through the website.

In order to do this you need to know 2 things:

  1. Your business objectives. It’s the action you want visitors to take on the site.
  2. User objectives, the desires or needs that they want to satisfy.

So start with being clear about your own goals and identify each user objective to create design flows that meet all of them.

Source / medium determines the message

Customers don’t arrive on a particular page on your site from nowhere.  The first step in a flow is mapping out how they get onto your site.

Once they land on your site, they won’t immediately perform the action you want them to. Specific sequences of actions lead visitors through your website as they try to accomplish their tasks.

Match users needs with your business objectives

Your goal is to map users paths – flows that take users from their entry pages through conversion funnels – toward the final action (signup, purchase etc). The final action needs to provide value both to the user as well as the business – otherwise the conversion won’t happen.

If the user wants to clean their car, and your goal is to get the user to order a car cleaning service, you have a meeting of goals and the conversion can take place. On the other hand, if they want their car cleaned (right away), and you want them to join your car-related newsletter, there isn’t a match.

Designing user flows

In order to come up with the user flows through your site, you need to establish possible entry points, and the flow from there on toward the final goal.

Some typical entry points:

  • Organic search. A user comes via Google, after searching for a particular keyword. Often lands on a deep link.
  • Paid advertising. Visitors that come via PPC advertising (AdWords etc), banner ads or other kind of promotions. Arrives on your landing page.
  • Social media. A user coming from a friend’s post on Facebook or Twitter, or via social news site like Reddit.
  • Email. A user coming from an email newsletter or a link they saw in an email sent to them.
  • Press or news item. Visitors who come after a mention in the news or a blog post.
  • Direct link. A regular visitor, has been on your site many times and knows the URL by heart.

How they end up on your site largely determines their needs, expectations and what they know of your product or even the general category.  This means you need to treat different people differently.

Sample user flows

So what do these user flows look like? Here are 3 sample flows.

Link in Google results
Direct to your site
Click on a PPC ad
Landing page
Home page
Landing page
Joins email list Product page
Makes a purchase
Adds to cart
Completes a purchase

You get the idea.

Stacked user flows

Sometimes you want them to join the email list on their first visit, but ultimately you want to sell them a product. In those cases, you should map stacked user flows: the first one that is completed by joining the email list, and the second one that starts AFTER the first flow has been completed.

Click on an ad Landing pageJoins email list

Gets an email  → Product page  → Adds to cart  → Completes purchase

The user who has already been through the first flow, is much more knowledgeable than a first-time visitor, has some kind of a relationship with you and you should treat her accordingly.

The steps in the flow depend on your users and the product

In order to design the best possible user flow, you need to understand the visitor and his motivations. Start by answering these questions:

  • What needs or desires do your visitors have? Which problem do they want to solve?
  • Why do they need it?
  • What qualities (about your product or service) are most important to them?
  • What are all the questions they have about the product?
  • What are their doubts or hesitations?
  • What information do they need to take action?
  • What’s their emotional hotspot to propel them towards taking action?

In order to answer these questions, you need to talk to your  customers (or your clients’, if you’re a service provider). You can’t just pull the answers out of thin air. Yes, you should use buyer personas, but those should be based on actual customers and their needs.

Here’s an interesting case study detailing how customer journey maps were used in Boeing.

Another article you might want to read is about designing a hotel booking experience.

The answers to the questions above determine how things are presented on your website. You have to demote certain things and emphasize others.  You cannot be all things to all people, your website cannot be about 10 different actions. You need to build focus into your site.

Present sufficient information

The flow must fill in the gaps of information by providing the user with the information they need at the moment they needed in order to eventually be converted.

The mistake a lot of websites make is asking for the sale (signup etc) too soon. There’s little we  people do without the adequate amount of information.

Your goal is to keep them moving down the funnel, towards the desired action. Optimize the content on each screen for conversions.

  • In each step present a clear, benefit-oriented value proposition.
  • Explain how your offer is useful and how it all works. Invite to read more detailed information.
  • Back it up by easy-to-digest proof points (references, testimonials, studies etc).
  • Minimize friction. Ask for the minimum amount of information, reduce the number of fields, extra clicks and page-loading time. Use trust elements.
  • Create clear and attractive calls to action that guide them to the next step
Designing users flows does not mean that you forget about all the other conversion stuff, au contraire.

State diagrams

Flows are made out of individual screens where interactions take place. A screen offers some possibilities and the user chooses one. Then something happens, and the screen changes. It’s an ongoing conversation.

In each moment in a flow, their (computer) screen is showing something and the user is reacting to it. A good and understandable way to map  steps in the flow is to use state diagrams:

what the user sees

what the user does


what the user sees next

what the user does next

Above the bar is what the user sees. Below the bar is what they do. An arrow connects the user’s action to a new screen with yet another action. These are called state diagrams in computer science.

Using these diagrams help you focus on the most wanted action on every screen the users lands on. It’s also very useful when explaining the flow to your colleagues or clients.


Let’s say it’s a website for a car detailing service.

service description

click “book now”


booking form

submit valid data


booking confirmation message



Do this for every page on your site. Define the key content you want to present to the user and a most wanted action. The next action from a screen doesn’t have to be just one thing, the flow can break into 2 or 3 alternative paths. The important thing is that you plan ahead for each path, and design each screen accordingly.

Doing this requires ruthless focus on your part, but the boost in conversions will make it all worth your while.

User flow that supports Flow

Flow, as a mental state, was first proposed by psychology professor Mihaly Csikszentmihalyi. It’s a state of being that makes an experience genuinely satisfying. Everybody has experienced it. Most people refer to it as being “in the zone” or “in the groove”.

During flow, people typically experience deep enjoyment, creativity, and a total involvement with the task at hand. There’s a book about it.

Ideally your user flow helps to nurture the flow experience in your users. Three ingredients for the “flow” experience are challenge of the right level, immediate feedback and a skill that can be mastered.

In order to design your site for flow, according to Jim Ramsey you must:

  • Have clear goals for users that help them understand where they’re going and each step they’ll take to get there.
  • Provide immediate feedback – whether they click on a button, fill a form or navigate from one page to another – tell them how they’re doing, and what’s going on. The messages and copy have a critical role here.
  • Maximize efficiency Once a user becomes familiar with your site, they’ll want to start using it more efficiently. When they’re experiencing flow, users want to work more quickly and want the site to feel more responsive. Heavily use the key features of your site and see if there are any annoying, repetitive tasks. Pay close attention to the feedback you get in your user tests. Think hard about how to turn the experience frictionless.
  • Allow for discovery. Once a user has begun to work with maximum efficiency, there’s a chance that they’ll feel less engaged and grow bored with their experience on the site. In order to avoid this, you should make content and features available for discovery.

When the smooth path is interrupted, or something doesn’t seem to fit, users notice and the flow is broken, which means that the experience is also momentarily broken. These small episodes of friction are cumulative. Unfortunately, the breaks in flow weigh more heavily on the experience than the positive, frictionless moments. Experimenting and testing are key to getting it right.

Clutter, animation, and surprises may interrupt and be disruptive. Online, people don’t like surprises (especially the kind where they go “now what?”, “how do I…” or “what’s that?”). Take out or improve that might cause friction. Less is more: remove visual and navigational noise that might seem like clutter to users.

I’m an Amazon user and have bought a million things from it. I’m very familiar with their interface and while on it, it’s a flow-like experience for me. Today I was browsing Home Depot website looking for certain things, and it was a pretty bad experience. No flow over there.

Examples of sites that have great flow

Invest 5 to 10 minutes in each of those sites. You’ll learn something.



Going through it: creating a sample flow

Let’s pretend I have a client, a company that manufactures mini infrared saunas (such as this random one on Alibaba).

Business objective: get people to buy those saunas online, or at least get a solid lead.

First thing I would do is talk to the client, and learn all I can about their business and their customers. Next, I would compile a list of questions that I would ask from their 20 or so last customers (whose buying experience is fresh).

Questions to my client:

  • Tell me about your typical / ideal customer. Who are they, why do they buy, where are they going to use it?
  • What matters to them when they’re looking for a sauna?
  • How do they compare different products?
  • What matters the most?
  • What happens after they buy? Describe the process in detail from the moment they place an order to when the sauna is all set up for use
  • What do your customers say about your products?
  • How is your product better or different from the competition?
  • What kind of praise have you heard? Can you forward me the *exact* wording they used?

Questions to their customers:

  • Why did you want to buy an infrared sauna?
  • What were the main questions you had when you were looking for one?
  • What was most important to you? Which parameters did you compare?
  • What kind of doubts or hesitations did you have?
  • What kind of alternatives did you consider?
  • What made you decide to buy from us?
  • Now that you have bought it, what do you like the most about it?

Based on the answers I get, I would develop follow-up questions and ask even more. The point is to really understand the customer, and their approach to buying this product. We need to know why they want it, how they’re going to use it and the qualities that are most important – the answers they need before making a purchasing decision.

Where are the users coming from

My client tells me that they’re after SEO traffic and plan to do AdWords advertising. This means I must map user flows from landing pages (PPC traffic), the home page (direct and SEO traffic) and direct from product pages (long tail SEO traffic, direct links and mentions).

In the sales process, we’d go for a direct purchase (as opposed getting their email first and then warming up the lead) due to the nature of the product.

Here’s the user flow I drew on my whiteboard.

Now I have established the most wanted action for each page, I know what I want the users to do next on each step and can prioritize and demote content accordingly.

The content for each screen is super important and has the biggest impact on conversions. The sales copy to emphasize all the details that are important to potential buyers in the purchasing process, address all their questions and doubts.

When deciding what content should go each screen, I also have to look at how they got there and what they already know. The user who arrived on a product page from the home page, is more knowledgeable than the one who came via direct link.

Hence, I must make sure that the the direct link people won’t leave due to insufficient information, and I have to re-emphasize the key points from the home page again on product page (especially if the brand is not known and the majority of the visitors are first-timers).

Test, test, test

Naturally the flow itself, layout and the content – value proposition, product info, calls to action etc – need to be tested. I  construct the first hypothesis as well as I can, based on the best information available to me, but it’s still a hypothesis. I immediately create alternative value proposition and copy to test.

Measure, observe and improve

Which step in the flow does a good job taking users to the next step? In which step do a large part of the users drop out? You can measure this by using goal funnels. If you use Google Analytics, you can easily set up goal funnel tracking (as you can in most web analytics tools) for your user flow steps.

Goal funnel report will tell you which step of the flow is performing well, and which is a flow stopper, so you can take action.

Also, check out the Visitors Flow view to get another insightful overview.

Test how they use it

To make your user flow really work for boosting conversions, you must base it on customer personas. Use actual customer behavior and research to determine the tasks that customers want to perform, what matters to them and why.

Do what you can to experience a day in the life of a customer. Once you have your first flow done, conduct user testing. Watch people use the website trying to perform a task, and have them comment out loud. Ideally you recruit test subjects who match your ideal customer profile and observe them in person (over their shoulder), but you can also use services like

User testing will help you find bottlenecks and sources of friction, so you can remove those. It will also help you understand the users better, and how they would want to use the site (so you can adjust it accordingly).

Even if you put a ton of effort into designing the flow, what you come up with is still a hypothesis and you need to test it. Pay close attention whether it seems you’re missing a step in your flow, or you have one too many. If you get the flow right, focus on optimizing different screens.

Resources you should check out

Got any word of advice on designing user flows? Would love to hear it – please post it in the comments. 

Related Posts

Join 95,000+ analysts, optimizers, digital marketers, and UX practitioners on our list

Emails once or twice a week on growth and optimization.

  • This field is for validation purposes and should be left unchanged.

Join the Conversation Add Your Comment

  1. I must say – practice what you peach! You’re images link to themselves not the websites they are a screenshot of. How could you! Big no-no….

    1. Peep Laja

      Intentionally, to show a larger size version. There’s a link to the website above the images. And I have not preached to do otherwise.

  2. Thanks for the post. Did you go through this process in designing your blog? Or was it more common sense and testing? I’m curious about user flow on smaller sites with no ecommerce.

    One “expert” designer suggests through video that the only real objective of your site is a marketing tool and to build your list, and sell there. Their niche is web design for coaches and consultants. I’m not so sure, what do you think?

  3. Randy – It looks like you have the right instincts. There are so, so many ways to sell online, and I’m sure this web design coach’s strategy works, but it just depends on how the site it set up.

    To use myself as an example, I work for a design company that sells visual assets via our website, so our website *is* our primary marketing tool, but it’s also our shopping area and checkout.

  4. Thanks very much for sharing. You said “Minimize friction. Ask for the minimum amount of information, reduce the number of fields, extra clicks and page-loading time. Use trust elements.”………………..could you please expalin what do you mean by trust elements

  5. Hi there, I found your website by the use of Google at
    the same time as looking for a comparable topic,
    your website came up, it seems good. I have bookmarked it in my google bookmarks.

    Hello there, just was alert to your weblog thru Google, and located that it is really informative.
    I am going to be careful for brussels. I will appreciate for those who continue this in future.
    Many folks might be benefited from your writing. Cheers!

  6. Just started without my new company in the Netherlands , called userflow.

    1. Message was deleted?! Sorry , can’t use mobile smiley’s I think. What I was saying.. Like the article about userflow, because I am skilled, always learning, in Interaction design and interface design. Will read some more of you articles.

  7. slt, cela fait pas mal de temps que je lit ce article.

  8. Excellent article. Thank you for sharing your knowledge.

  9. Awesome article and resources are very useful! Thank you, Vlada

  10. Thanks for sharing this , i was looking for a good article on creating good website design,it will help me to understand the whole criteria easily.

Comments are closed.

Current article:

Build It With The User in Mind: How to Design User Flow