Stop Designing Pages And Start Designing Flows

Advertisement

For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.

Design flows that are tied to clear objectives allow us to create a positive user experience and a valuable one for the business we’re working for. In this article, we’ll show you how spending more time up front designing user flows leads to better results for both the user and business. Then we’ll look in depth at a common flow for e-commerce websites (the customer acquisition funnel), as well as provide tips on optimizing it to create a complete customer experience.

Start With The User

When starting a new Web design project, we’re often handed a design brief, branding standards, high-level project goals, as well as feature and functionality requirements. Unfortunately, these documents typically amount to little more than the technical specifications of the project, with almost no thought given to how exactly the website will fulfill the multiple user objectives that lead to successful interactions.

Popular user flows for e-commerce and membership websites
Two examples of popular user flows for e-commerce and subscription websites.

If you start with a detailed look at the objectives of the user and the business, you would be able to sketch out the various flows that need to be designed in order to achieve both parties’ goals. User objectives could range from finding a fact to replacing a product to learning a new skill to buying a gift for someone. Business objectives could be getting a lead, a like, a subscriber, a buyer, a download or a phone call. Identifying each user and business objective is the first step to creating design flows that meet all of them.

Map User Flows Into Conversion Funnels

Not all website visitors are created equal. Users come from different sources, with varying levels of knowledge and engagement, and with different goals. It’s up to you as a user experience designer to map those in-bound user flows to conversion funnels that provide value to the user as well as the business.

You should prioritize the flows and focus your effort on the few that will impact the most users and have the greatest gain. Custom flows allow you to architect experiences according to traffic source or visitor type and enable you to set the experiential pace, build user confidence and get buy-in on the way to the ultimate conversion.

Typical User Flows

Some typical user flows are:

  • Paid advertising
    A user coming from a banner or Google AdWord ad.
  • Social media
    A user coming from a friend’s post on a social network.
  • Email
    A user coming from an email newsletter or referral invitation.
  • Organic search
    A user coming from a deep link that was surfaced by a search.
  • Press or news item
    A user coming from a mention in the news or a blog post.

Each of these visitors has their own needs, expectations and level of knowledge, and they need to be treated accordingly.

Diving Into Funnels: A Closer Look At Customer Acquisition

Typical conversion funnels for e-commerce websites
E-commerce websites typically have many different conversion funnels.

Let’s look at a critical flow for many websites — paid online customer acquisition — and break down its various elements. For this example, we’ll examine the experience flow from new visitor to email subscriber to purchaser.

Consider a company that uses display advertising to generate new customers for its business.

Display Media

With display advertising, it all starts with the banner. The design of the banner needs to achieve one precious goal: get a click from the right person. Here are some key questions to answer when designing the ads that represent the very front of your user flow:

  • What type of user am I targeting?
  • Are they actively seeking a solution to a problem, or are they casually browsing?
  • What problem are they trying to solve?
  • How can I best capture the user’s attention?
  • How do I relate to the user?
  • Is there a message that will resonate with the user?
  • Is there a pain point that my product or website alleviates for the user?
  • How can I articulate this solution clearly and quickly?
  • What compelling calls to action will get our target user to click?

Your ads should address these main motivations and provide a compelling hook to get that all-important click. Up-front research and real-world testing will help to optimize the experience. Using this model, ReTargeter improved its banner click-through rate by four times. Its blog post1 lays out exactly how it achieved this success.

The Landing Page

The point when the user hits the landing page is when the user flow work really begins. Because these users are coming from a low-information source (such as a banner, as opposed to an in-depth blog post), you must design a flow that fills in the gaps of information by providing the user with the data that they need to be converted.

In our example, the user will hopefully be converted to an email subscriber; but depending on the business, the conversion could be to create an account, download a white paper or make a purchase. Whatever the conversion goal for the business, the key is to give the user a reason to keep moving through the flow, down the funnel.

Use the following methods to keep the user moving down the funnel:

  • Build user confidence by clearly articulating key benefits, backed by easy-to-digest proof points.
  • Streamline the content and design to focus on a clear call to action (in this example, to sign up for an email newsletter).
  • Remove friction at every step. Ask for the minimum amount of information, and reduce the number of fields, extra clicks and page-loading time.
  • Create an enticing hook, an itch that can only be scratched by completing the registration step.

KISSmetrics’ “Anatomy of a Perfect Landing Page2” details the design, UI and copy elements that can help you meet your users’ need and drive conversions for your business.

Stacking Flows For A Complete User Experience Life Cycle

While viewing a funnel as something like Click on banner ad → Land on Web page → Register email is easy, designing and building stacked flows that drive the business’ ultimate objectives takes a bit more thought. In our example, we’ve successfully gained an email subscriber from the banner ad campaign, but the real business objective is to generate revenue through new purchases.

Treating the email subscriber flow and the e-commerce purchasing flow as two separate conversion funnels is an easy trap. In reality, the experiences are connected, and by looking at them as stacked flows, we can create a more cohesive interaction, one that drives optimal results for the business.

In our example, this stack is made up of the customer acquisition funnel and the customer relationship management (CRM) flow.

Stacked funnels create a complete interaction life cycle
Stacking funnels creates a cohesive user experience life cycle.

When designing this flow, you need to consider what the biggest levers are for converting the subscriber into a buyer. Many of the earlier principles apply, but this time you have more touch points3 to consider and leverage.

In this flow, you need to look at all elements of your CRM strategy and the purchase flow of your website, including:

  • Email communication back to the subscriber,
  • Pages that the subscriber lands on when returning to the website,
  • The flow from internal content pages to check-out.

Here are a few key considerations when designing the flow from subscriber to purchaser:

  • Tell a visual story that the subscriber can identify with and wants to be a part of.
  • Ensure that your emails reinforce the story, and give proof points to remind users why they subscribed.
  • Include compelling calls to action to give the subscriber an opportunity to relate to and be a part of the story.
  • Include prominent calls to action and easy, direct paths to the check-out process from the website’s internal content pages and blog posts. These validate the user’s hope about their role in the story.
  • Make the check-out process as frictionless as possible, and reinforce confidence along the way to help the buyer commit to being a part of it.

By considering how the two flows interact, you can create a seamless experience that builds confidence and deepens the user’s connection to your website, leading to the ultimate purchase conversion. Equally important, this flow also increases customer satisfaction because the stacked funnels keep the user experience smooth and on track to meeting their needs, with little confusion or ambiguity.

Putting Flow Design To Work For You

Whether you’re mapping out a brand new website or looking to optimize an existing user experience, flow design will keep you out of the trap of designing individual pages and interactions and instead focus you on fulfilling users’ needs. By prioritizing your user flows and focusing on the ones that drive the most value to the most users and to the business, you can make the greatest impact with your initial flow design.

When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind. This is particularly important with any type of commerce-driven business, for which the first conversion is often just a prelude to the primary revenue event. By stacking these complementary funnels, you create a more cohesive user experience that drives better results for both the user and your business.

So, the next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.

(al)

Footnotes

  1. 1 http://www.retargeter.com/general/ab-testing-creatives-retargeting-1
  2. 2 http://blog.kissmetrics.com/landing-page-design-infographic/
  3. 3 http://www.smashingmagazine.com/2011/08/26/taking-a-customer-from-like-to-love-the-ux-of-long-term-relationships/

↑ Back to topShare on Twitter

Morgan Brown is a product manager at digital-telepathy, a user-experience design company passionate about creating products, like SlideDeck, Hello Bar and Impress, that make the Web more intuitive and compelling.

Advertising
  1. 1

    I can’t agree more with this. The concept of building your website, or landing page around a user flow should always trump throwing together a design that looks good. Good design does not equal success.

    The most important part of UX is realizing the actual needs of the users.

    28
  2. 2

    Morgan this is a great article, we do alot of Realty site and we have be putting something like this together, but you both confirm our work and inspire me to rework my concept…thanks

    4
    • 3

      Thanks – would love to see what you come up with. Feel free to ping me on Twitter, @morganb.

      1
  3. 4

    Great article and i can agree that focus on information article of then is the core of making a design. Clearly the missing point in between is to give more attention to detail on sales approach and how we lead a client to action wether it is for an email sign up or a purchase.

    Great reading …

    4
  4. 5

    Kshitish Purohit

    January 4, 2012 9:31 am

    Spot on!!!

    In addition to the the design bit, this also helps the development team know exactly in a snapshot how the system works. No one has time to read the (zzzzzzzzzz) FS documents and when captured properly, a good workflow documentation can ease the project off a LOT of unnecessary effort!

    4
  5. 6

    Morgan, I also totally agree. Designing User Flows and scenarios also helps to clearly identify the pages that have to be designed.

    0
  6. 8

    Great article – Couldn’t agree more. I always work up user flows during the wireframing stage, and like Kshitish Purohit says – it helps everyone involved!

    2
  7. 9

    This is a brilliant article. I’ve been preaching paths now for some months. We wrote a post about the whole thing and called it the Critical Path.

    It all comes down to reducing cognitive loads and increasing the website’s efficiency.

    0
  8. 10

    Really great article. Thank you!

    0
  9. 11

    Excellent article. Mapping out the flow using the funnel concept makes sense to me. Thanks for the insights.

    0
  10. 12

    Excellent article Morgan! This will be a bit of a “game-changer” for the company I work for, but I can see how important it is – freeing too! I hate it when I start designing something without knowing “why”… Thanks again.

    0
  11. 13

    Great article and gives me great data to take to my e-commerce managers on site changes.

    0
  12. 14

    Great article!

    0
  13. 15

    Everything we work upon should have a meaning behind it, we need be clear about why its going to be ‘that way’ Thanks for the article Morgan, it will strike the chord for many.

    1
  14. 16

    Marit A. Breland

    January 5, 2012 1:15 am

    That is so true! A really good article with a lot of good points of view!!

    0
  15. 17

    I couldn’t agree with this enough. I provide various different workshops on web design and online marketing (fundamentals). The only thing I’d add is placing a value on the conversion (immediate or lifetime value) to help focus clients on how this exercise can help pay the wages. To that end I use a basic spreadsheet that works out the calc’s for them.

    0
  16. 18

    Good article! Being a marketing student, I found your flow funnels a good intepretation of the purchase funnel (marketing theory) for web design.

    A big difficulty as you said is design briefs. Many smaller companies don’t care about (or value) integration of their strategy in the web page design. In these cases, the designer is forced to decide the web strategy on his/her own. Whether this is a good or bad thing, depends on the designer.. :)

    1
  17. 19

    Some great stuff here. The basics of every website design. Designers must educate clients as well when all they are interested in is the correct colour for their logo!

    0
  18. 20

    I definitely agree with this, I think in recent time a lot of people have forgot to make the route to conversion a simple process.

    I remember back in 2001 being told the best practice was using the 3 clicks to sale system, seem to hold true today although it’s often forgotten.

    0
  19. 21

    This funnel attitude is so true! I think this is very important to be aware that marketing, design and whole development are part of one project and have common objective.

    0
  20. 22

    Fantastic article! Designing for the User and not for the Web is the way web design should be going :) Some great points in there that I’ll be taking with me – thank you!

    1
  21. 23

    I love this article. It very concisely depicts the website as a marketing tool and how to implement into an overall strategy. I’ll definitely be sharing this with my colleagues and clients. I believe that it’s important to design for both the bots and people, but critical to understand that algorhythms do not make decisions. Cheers… Ian

    0
  22. 24

    Excellent article…the information acquisition / decision-making process is poorly understood and often undervalued.

    0
  23. 25

    This is one of the best article I’ve read in a long time. I passed it on to my bosses to read and re-read again. It’s all common sense but for some reasons nobody really does it.

    0
  24. 27

    Hi Morgan – I really liked your post. I’m still trying to learn the ins and outs of UX design (I work with all designers) and this was one of the easiest and digestible posts I’ve read. Your layout was great and the information was really useful to get insight into the art behind design.

    Thank you!

    Kadee
    @produxs

    0
    • 28

      Thanks for the feedback – I’m glad it was valuable. I’m definitely still learning too :)

      0
  25. 29

    Well written Morgan. Great article!

    We’re trying a design approach for a new site that will be heavily reliant on conversions from SEM, by starting with writing the ad copy and building out keyword groups pertaining to their product & service before any wireframing begins. Kinda working in reverse, but it really helps identify the core elements for SEO and super quality scores, not to mention relevancy though the funnel for the user.

    0
  26. 30

    CompSciGorillaTamer

    January 5, 2012 7:22 pm

    Am I the only programmer/developer here who feels like s/he stumbled into a business meeting? I guess that’s the state of web development these days. Developers and designers being lead by suits and strategists.

    0
    • 31

      Web development needs thinking behind it to make sure that it’s serving the purpose it’s intended for.
      These decisions need to be made before the developers go ahead and start building.

      I’ve been on projects before where the thinking wasn’t done, and even though it may be a well coded, nice looking website/platform it didn’t meet the needs of the intended users.

      1
    • 32

      You sound like a brash young gun that thinks you can just wing it and it will all magically work and make perfect sense to the users. I’m a designer myself and while I may have thought this way when my diet still mostly consisted of Snickers bars and Red Bull, now that I am a lot more experienced, I would argue that this type of pre-planning and strategic thinking is an integral part of design and helps rather than hinders the process for everyone involved, including developers. Without it designers and developers end up re-iterating countless times and a lot of time and effort is wasted.

      0
  27. 33

    Really nice article!

    Are backlinks considered part of the flow?

    What is your most successful technique to create backlinks?

    I mainly use article directories for my backlinks. There is a new one out there called Streetarticles. They are pretty good and fast at accepting new articles as long as you follow their basic guidelines and that’s ok in order to maintain higher standards. My issue is that my articles do not generate a lot of click back to my blog (i.e. CTR < 1%). I really try hard to create quality articles related to the items I want to promote (i.e. ladies watches) but it just doesn't create the traffic I was hoping for.

    Any advise would be really appreciated?

    1
  28. 34

    Assuming the project is some form of e-commerce, I’d actually argue that you start with your client, i.e. the business, rather than the user. Ultimately, it’s the business that needs to succeed. While it’s true that a good user experience will result more often than not in good “conversions”, wherever there is a conflict, or corners to be cut, the user experience must come second to the business requirements.

    After all, if the business loses money, e.g. because the user experience demands lead to expensive and lengthy development, then ultimately the user loses out because the site will not be around for very long!

    0
    • 35

      The solution should have the business objectives as the primary goal, with creating a great user experience to meet that objective. If the user experience doesn’t meet the business objective, then it’s not valid to the project.
      There will usually be a bit of give and take between business and user needs as well as taking into consideration the technical capabilities.

      The problem is, there used to be very little consideration for the user needs, hence complicated and difficult to use applications, so it now looks like there’s a big swing in focus, but should in the end be balanced.
      Because if you had a very efficient application for the business, but users couldn’t understand it then the site wouldn’t be around very long either..

      0
  29. 36

    Would love to see some examples in action.

    2
  30. 37

    Really nice article! Designing for the User is the main part in designing, not for the web but only some people are going in this way thank you!

    0
  31. 38

    thank you so much for articulating all of this. as a designer working for mom and pop size businesses, explaining this takes work on my part and it’s not necessarily time I can justify as billable. your article will make things much easier to explain and for my clients to understand.

    0
  32. 39

    Am I the only one who thinks that this process has ALWAYS been an important part of any web design process?

    Converting a visit to a purchase or sign up? Try and make the function of the site as simple & concise as we can, giving benefits for actions, as well as clearly providing sign posts to site content?

    I am not trying to be smart here, I just don’t see anything new here?

    2
    • 40

      +1

      very basic concept, part of any webdesign process.

      still nice to have it recapped with the latest marketing slang ;-)

      0
  33. 41

    Wow… the website is totally different than… this morning?! Great, and it looks like is fully responsive. I would like to know more about the process you guys passed through while re-designing the whole thing. But I remember you said it was going to be smooth… indeed it was quite a shock reloading this page this evening :-)

    Also, this is a great article. Thanks for publishing it. Have a great 2012!
    Carlo

    0
  34. 42

    Well said, and designing landing pages is another science of its own. Too many focus only on bringing leads to your site.

    0
  35. 43

    Thanks for an excellent article! I think user flows need more attention as it plans the actual goals of a website, without which it is pointless.

    0
  36. 44

    Great article, very useful.

    0
  37. 45

    Excuse me, but this article is about nothing. The most valuable — is the title itself. The rest, is some roundabout phrases.

    -1
  38. 46

    Ivan from SaantsDI

    February 15, 2012 8:45 am

    Just brilliant.
    A post to read a thousand times and to think about it every time we face a web design.

    In my opinion is really important to stablish reasonable company objectives. And not allways purchase is a reasonable objective from web experience.
    Another key point for me is to give value in every step of the flows. A good design provides much more than information.

    Anyway, from Barcelona, thanks for the post Morgan.

    Iván
    @saantsdi
    saants.es

    1
  39. 47

    Interesting topic. Waiting for more…

    0
  40. 48

    Flash websites don’t work on iOS devices, but that doesn’t mean you should just ignore them or worse suggest they should get a different device. The only readers you have that will be loyal enough to do that are your relatives, and even they might not be willing to buy a new hundred dollar device just to view one web page.

    Regards ,
    Mohamed Ragab

    1
  41. 49

    useless replies and useless fellow a great group of sluts have followed this

    1
  42. 50

    Agree! This sums up the ‘User Experience’ term fully. The entire experience of a product, from every touch point and angle. The big picture—from macro to micro.

    0
  43. 51

    Great article and an even better way to consider web design.

    0
  44. 52

    I believe it was T.S. Eliot who first made the point: those who can, do; those who can’t, post articles on the internet telling one how to do it. You know, kinda like the high-grade male bovine excretive sophistry presented here for consideration (and, apparently, swallowing).

    I find I also take exception to the verb of your magazine’s name: I think ‘cluelessing’ would be so much more appropriate. Ta-ta-ing for now, old chap.

    0
  45. 53

    I’ve thought up several analogies to explain this to our designers but hadn’t considered “flow.”
    1. Since I’m not in the field, my view is simple– a good website performs functions for the customer quicker, easier, & more conveniently than the physical company did. If he has to wait, or his time is wasted on irrelevant info, he’s not going to stay no matter how “pretty” either one is.
    2. My training was in the life sciences, so I need form to fit function. Website design isn’t an evolutionary process, it’s a developmental one. Thus, establish the ideal function (flow) & design form to fit. The reverse is the issue with templates– we have a form & try to make it somehow function.
    The different ways we see the same concept is quite fascinating…

    0
  46. 54

    very enlightening, thanks for sharing …

    0
  47. 55

    UI flow are very important . any one know about good flow software?

    0

↑ Back to top