12 Competencies of UX Design No. 5: Reducing Friction with Context, Structure, and Flow

Poor context, structure, and flow are the root causes of user friction - the confusion, frustration, and dead ends that make people abandon apps, call customer service, and lose trust in a brand. When UX designers get these three things right, users feel accomplished, valued, and at ease. When they get them wrong, users feel ignored and invisible.

This is the fifth installment in our series on the 12 Competencies of UX Design.

What Is User Friction in UX Design?

Friction is the moment when a user feels confused, uncertain, frustrated, or lost. Anyone who has waited in line at the MVD to renew their license or filed a car insurance claim knows exactly what friction feels like.

User experiences with less friction do the opposite. They produce feelings of accomplishment, relaxation, and even delight. They leave users feeling valued and understood as individuals rather than just another customer.

What Causes Friction? Context, Structure, and Flow

Imagine you get an email from your bank about an update to your account. You click the login button, the app opens, you sign in, and then... nothing. You're dropped on the home screen with no idea where to go. You hunt around, give up, and call customer service instead.

If you've had an experience like that, you already understand why context, structure, and flow matter. You just didn't know it yet.

What Is Context in UX Design?

Context is the understanding of where a user is coming from and where they need to go next. Seasoned UX designers use context to consider what a user is thinking, feeling, and doing at the moment of any given interaction.

In the banking app scenario, the email provided a small amount of context by telling you there was a notification about your account. But the moment you logged in, that context disappeared. The app dumped you on the home screen with no regard for why you were there. Whoever designed that interaction didn't think about where you came from or where you needed to go.

What Is Structure in UX Design?

Structure is just another way of saying "information architecture," and it works a lot like physical architecture. International airports use graphical signage and repeating patterns to help people move easily from check-in to security to their gate.

Experienced UX designers do the same thing in digital formats. They organise things in a way that helps users find what they need quickly within a logical, orderly system.

In the banking app scenario, the structure was poor. Once you logged in, there was no digital "signage" or discernible pattern to help you find the notification centre. You had no idea where to go because the system gave you no clues.

What Is Flow in UX Design?

Flow is the progression from one small interaction to the next in order to complete a particular task. The "this, then this, then that." Depending on how well an experience is designed, that progression is either smooth and effortless or confusing and frustrating.

In the banking app scenario, the flow was almost non-existent. After logging in, it wasn't clear which button or action would take you where you needed to go. There was no clear path from one step to the next.

What Does a Frictionless Experience Actually Look Like?

Here is what that banking scenario should have looked like:

You open an email from your bank saying there has been a change to your account. You click a button that says "read the notification," which opens your banking app. You log in, and the app takes you straight to your notification centre.

You read the notification and see that you missed a payment. Right there within the notification is a button that says "make payment." You click it, and it guides you through transferring money from your bank account to your credit card balance.

The entire interaction is done in minutes. Instead of feeling frustrated and confused, you feel accomplished, valued, and relieved knowing you have one less thing to worry about.

Why Do So Many Companies Get This Wrong?

Even major brands and enterprises create unnecessary friction for their users all the time. That is because rather than thinking about an experience through the eyes of a user, many big companies think only about their own goals and objectives.

The argument is usually that running a business means making money, and making money means making users do what you want them to do rather than what they would prefer.

Data shows us this thinking is backwards. According to research from Forrester Research, a well-designed user interface could raise a website's conversion rate by up to 200%, and better UX design (read: less friction) could yield conversion rates up to 400%. Put simply, customers want to do business with companies that care about them, and great UX is one of the most direct ways a company proves that it does.

Business objectives matter enormously. But there is a way to balance both sides. Great UX designers know how to strike that balance so that the business and the user both get what they want and need.

Examples of Great Context, Structure, and Flow

Now that we have covered what companies are doing wrong, here are two that are doing it right.

How Does Oscar Use Context, Structure, and Flow?

Oscar is a health insurance company whose mobile app simplifies the most frustrating tasks associated with health insurance and doctor visits.

Context: The Oscar app uses your location to tailor your experience. If you are in New York and need to find a nearby doctor, the app automatically adjusts its physician directory based on your phone's location.

Structure: Oscar puts simple text and icons for the most popular tasks right on the home screen, making it faster for users to find what they need without digging through menus.

Flow: Rather than using phrases like "physician's directory," Oscar uses language that speaks directly to what a user is trying to accomplish. Things like "find a doctor." Simple, intuitive, and nearly frictionless throughout.

The result: Since launching in 2012, the Oscar app has grown to over 250,000 users and partners with 3,500 doctors across the country. Users say things like:

"You can look up a doctor on the app as opposed to navigating a ridiculous website and getting all these doctors not even near you."

"The difference with Oscar is just how easy everything is. Health insurance can be so confusing and stressful and Oscar just takes it all away."

How Does Canva Use Context, Structure, and Flow?

Canva is a free, cloud-based design platform that helps non-designers create clean marketing and social media imagery quickly.

Context: Canva saves a user's prior work right on the home screen. And since Canva knows its core users are not designers, it provides templates so users can adapt rather than start from scratch.

Structure: Canva organises the most common needs alongside descriptive icons right in the navigation pane. From there, users can search within categories to find exactly what they are looking for.

Flow: When a user clicks on an element within a design, options that are not available for that element are greyed out while available options become dark and bold. No guessing. No dead ends.

The result: Canva is now a favourite tool for freelancers, small business owners, and marketers who need to create better designs for less. Users say things like:

"Canva for work is perfect. It gives us so much more autonomy and allows my team to be more nimble."

"We need tools that are easy and quick to use. Canva helps me produce print-ready, quality images in a way that is both time-efficient and simple."

The Core Tenets for Reducing Friction

Reducing friction with context, structure, and flow can be enormously lucrative, but there is no single formula for doing it right. The designers who are great at this are the ones with a knack for seeing things from the perspective of the user.

That said, there are a few core tenets that guide our team at Drawbackwards when designing new experiences or improving established ones.

Stay Flexible

Every designer worth their salt understands the importance of a style guide. Style guides keep things consistent and clean and help teams of designers and developers stay within brand guidelines. But plenty of designers become victims of their own rigidity and struggle to design experiences that adapt to user needs and business objectives.

Great UX design means striking a balance between consistency and flexibility that allows designers to meet a user's needs within a particular moment. Ruthless consistency will not allow context, structure, and flow to occur.

Design at the Intersection of User Needs and Business Objectives

To design experiences that feel friction-free and intuitive while still serving a business purpose, you have to weigh both user needs and business objectives with every design decision. Too much of either creates a lopsided experience that fails to live up to its vision.

At Drawbackwards, we achieve this with a "service blueprint" -- a visual map that shows how a business can fulfill user needs while staying true to its business objectives throughout a user flow. It identifies what each moment in an interaction needs to accomplish from both a user and business perspective.

Do Not Mistake Stacks of Wireframes for Real Strategy

The majority of UX designers we encounter spend about 90% of their time creating wireframes, diagrams, and prototypes... and about 10% of that time actually thinking about what a user or business might want or need. The wireframes, sitemaps, and prototypes are tools -- ways to visualise what user needs and business objectives look like on paper and how context, structure, and flow can play a role in what we call "experience success."

The sign of a great UX designer is that they will spend far more time getting to know user needs and business objectives than they will creating wireframes and diagrams. Research, strategy, and conversations take up the bulk of a great UX designer's time because they are the critical step in defining what success looks like from all sides.

As Einstein once said, "if I only had one hour to solve a problem, I would spend 55 minutes defining the problem and the remaining 5 minutes solving it routinely." Preach it, Albert.

Mission: Frictionless

Great user experience design is iterative, and it is almost never done. It is nearly impossible to create a perfect user flow on the first attempt, and it is a waste of time to try to get everything absolutely perfect before letting users and business leaders weigh in.

By taking this iterative approach to context, structure, and flow, brands can finally make the leap from merely functional, useful products and services to truly meaningful ones.

In experience design, the role of a designer is to chip away at user friction by measuring audience experience success, making iterative improvements, and repeating that process toward higher and higher levels of customer experience success.

Frequently Asked Questions

What is the difference between context, structure, and flow in UX design? Context is about understanding where a user is coming from and what they need at that moment. Structure is how information and navigation are organised so users can find things easily. Flow is the step-by-step progression that guides a user through completing a task. All three work together to reduce friction.

What does friction mean in UX? Friction is any moment in a user experience where a person feels confused, uncertain, frustrated, or lost. It leads to abandoned tasks, support calls, and users who feel ignored and undervalued.

Why does reducing UX friction matter for business results? According to Forrester Research, a well-designed UI can increase a website's conversion rate by up to 200%, and better UX design overall can yield conversion rate improvements of up to 400%. Less friction means users complete tasks, trust the brand more, and come back.

How do you design for both user needs and business goals at the same time? A service blueprint is one of the most effective tools for this. It maps out how a business can fulfil user needs while still meeting its own objectives at every step of a user flow, so neither side gets shortchanged.

How much time should UX designers spend on wireframes versus strategy? Most of a great UX designer's time should be spent on research, strategy, and understanding user and business needs. Wireframes and prototypes are just tools for visualising that thinking. If you are spending 90% of your time on deliverables, you are probably skipping the most important part.