User Flow and UXO

In our last couple posts, we went over what User Experience Optimization (UXO) is and how it can enhance your business and design process, and how creating user personas can assist in this endeavor.  This time, we’re adding another level to the details of how UXO works and how design review/creation decisions are made, user flow.  

As we discussed before, your user persona is a character in or reader of a book.  Your book in this case, especially if it’s an app or website, is like a choose your own adventure story.  It’s the kind of book whose narration is influenced by the decisions your user makes along the way.  Therefore the navigation and display of the app or website design needs to be conducive to empowering that user to indeed choose their own adventure.  And it needs to be clear to them what kind of adventure they’re getting into.

A multi step user flow pattern
Diagramming a choose your own adventure story.

 From here comes the concept of user flow.  User flow is essentially the order and method by which people are reaching different pages and sections in your story.  You may have heard people call a tech product ‘clunky’. 

That generally means it has poor user flow–that it takes too many steps to get somewhere rather simple, perhaps, or there are too many unnecessary paths that will lead you to the exact same location.  Another great metaphor is a public transit system.  You’ll want more than one train to lead to certain stops, but not every train line can go everywhere–or else, ironically, it becomes hard to get anywhere!  You’ll also want some express trains, or shortcuts.

map of Berlin metro system
Planning user flow is kind of like planning public transit.

So what does creating good user flow look like when you’re in the middle of UXO process?  When you’re working with a UXO expert, they’ll be able to give you feedback on this piece in particular. But regardless of how you’re undertaking your design process, it’s a good idea to not only create mockups (or wireframes), but also figure out the transitions between them.  User flow can also be pertinent to how your user reaches your app or site in the first place, but at the moment we’ll focus on what they do once they get there.

ux user flow on 8 wireframes

You can start to build user flows in a few different ways.  If you’re a textual thinker, it might help to type up a script of sorts.  In other words, write out what your user has to do when they are using your product, step-by-step.  Remember who your user personas are while you do this–it will help guide the actual scenario.  This might seem like a boring exercise with very rote instructions like ‘open window, click on start, click on login’ but you’d be surprised how useful those rote instructions can be while you’re in the thick of product development. It can really help to break things down to basics.  

If you’re more of a visual thinker, this is a good point to make a flowchart or sketch a very basic application flow.  Your UXO expert can also help you with this piece immensely, if you have little experience in developing user flows that really flow.  This is a point to make everything extraordinarily clear and not worry so much about aesthetics. You’re not designing the illustrations in your choose your own adventure story yet, or even the details–you’re just writing out a plot summary.

ux flow chart that starts with someone logged in or not

Once you’ve got some kind of application flow in place, maybe with some low- or high-resolution wireframes, a UXO expert can help you identify the pitfalls and how to fix them.  

UXO experts are good at recognizing what portions of your user flow are ‘clunky’ or annoying.  They can help you minimize paths while maximizing usability.  They can also help you make sure it’s clear to your user what the original script you worked out is, and how they can navigate easily through your product.

User flow for a mobile device

There are a few apps out there that can help you model or visual your user flow before you actually have a coded product.  But you can also do that with something as simple as a storyboard, or several pieces of paper.  The goal is just to make sure that the flow is 1) not annoying, 2) intuitive, and 3) extremely clear.  Leave nothing that can confuse or make the user stumble.  If your product makes your user feel stupid, they are less likely to use it.  And that’s your fault, not theirs.  You should be able to justify that every transition in the navigation scheme of your product is logical and relatively simple for the user personas you have in mind.

Making your first set of user flows can be easier if you examine the flows of similar or competing products beforehand.  That doesn’t mean that everything on the market is well-made, or flows nicely.  In fact, if you use your time examining other products to not only understand the good transitions, but also note the flaws, you can make sure only the best makes it into your own work.  You’ll also be able to start diving into the details of what makes a flow truly elegant.  And when it comes time to critique your own product, you’ll be able to do it from a semi-objective place of concern about the user flow criteria–not a desire to keep your own original prototype intact.

Keep elegance in mind..

As you and/or your UX expert make revisions to tighten up your user flow, that’s when you’ll see the app itself come to life.  That’s the story you tell with your user in mind.  The user flow is where the actual magic happens.  So go ahead and flip through a few apps that you like, and others that you don’t.  

Try seeing if you can understand what user flow elements those apps have and what kind of ‘feel’ it’s giving you.  Maybe even try to produce a simple script based on one of them.  It’s a good way to rehearse for your own design process, with fewer stakes.  And when it comes time for it, your UX expert can help you make your whole design match an excellent and intelligent script.

About the author:

Janani B.

Janani has a Master's in Design Thinking and writes frequently about UX, design, psychology, and other topics.