No. 5: Reducing Friction with Context, Structure, and Flow
This is the fifth installment of our series on the 12 Competencies of UX Design.
Imagine you’re checking your email one morning and find an email from your bank notifying you about an update to your account. The email says you can find information about the update in your notification center. You click the ‘login’ button in the email, which opens your bank app and prompts you to sign in.
After entering your username and password, you’re taken to the app’s home screen… and you’re stuck. You think “where is the notification center?” and “what am I supposed to do next?” You exit your app and go back to the email, only to discover that there are no instructions. You spend a few more minutes clicking around the app before giving up and calling the bank’s customer service hotline instead.
If you’ve ever had an experience similar to this one, you already understand the importance of reducing friction by improving the context, structure and flow — you just don’t know you do. Don’t believe us? We can prove it.
Let’s break it down...
Context
Seasoned UX designers recognize the importance of where a user is coming from, and where they’re going. This is part of “context”, and it helps designers consider what a user is thinking, feeling, and doing (along with many other things) at the time of an interaction.
In the banking app scenario, the initial email provided just a little bit of context by telling you that you had a notification regarding your account. Of course, when you clicked the button and logged into the app, that context didn’t follow through. It just dropped you on the app’s home screen with no regard to why you were there. Whoever designed that interaction didn’t think about where you were coming from, and where you needed to go next.
Structure
Structure is just another way to say “information architecture”, and acts a lot like physical architecture. International airports, for example, use graphical signage and repeating patterns to help people easily go from check-in, to security, to their gate. Experienced UX designers do the same thing in digital formats — they organize things in a way that helps users find what they need easily in a logical and orderly system.
In the previous scenario, the banking app’s structure was poor. How do we know? Because once you logged in, you had no idea how to accomplish the task you set out to do. You didn’t know where to find the notification center because there was no digital “signage” or discernable patterns to help you.
Flow
Flow is just what it sounds like: it’s the progression of one small interaction to another in order to complete a particular task (the “this, then this, then that”). Depending on how well an experience is designed, that progression can either be smooth and effortless, or confusing and frustrating.
In the banking app scenario, the “flow” was almost non-existent because there was no clear path from one step to the next. After logging in, it wasn’t clear which button or action would take you to where you needed to go.
Friction
So what do these things have to do with user experience? Simple: they all cause friction.
Friction is essentially the moment when a user feels confused, uncertain, frustrated, or lost. Anyone who has ever had to wait in line at the MVD to renew their license or make a claim on their car insurance knows exactly what friction feels like.
Alternatively, user experiences with less friction elicit feelings of accomplishment, relaxation, and even delight. They also leave users feeling valued and understood as an individual rather than just another customer.
The banking scenario is also a perfect example of an experience riddled with user friction, which leaves a user feeling ignored, devalued, and invisible. It’s all because of lack of context, coherent structure, and a discernible flow.
So now that we know what not to do when it comes to context, structure, and flow, let’s look at what our banking app scenario should have looked like…
You open an email from your bank that says there’s been a change to your account. You click a button within the email that says “read the notification”, which takes you to your banking app. You log in, and the app takes you straight to your notification center.
You read the notification and realize that you missed a payment — but right within the notification is a button that says “make payment”. You click it, and it guides you through the process of transferring money from your bank account to your credit card balance.
The entire interaction is complete in a matter of minutes — and rather than feeling frustrated and confused, you feel accomplished, valued, and at ease knowing you have one less thing to worry about.
Why So Many Companies Get It Wrong — And Why It Matters
Even major brands and enterprises create unnecessary friction for their users all the time. That’s because rather than thinking about an experience through the eyes of a user, many big companies think only about their goals and objectives.
The argument is usually that in order to run a business, you need to make money… and that in order to make money, businesses need to make users do what you want them to do (rather than doing things in a way that users would prefer).
Data, however, shows us that this is not the case. According to a recent study from Forrester Research, a well-designed user interface could raise a website’s conversion rate by up to 200%, and better UX design (re: less friction) could yield conversion rates up to 400%. Put simply, customers want to do business with companies that care about them, and one of the ways companies prove this is with great UX.
Of course, business objectives are very important — but there is a way to balance the scales between business goals and user needs. Great UX designers know how to strike this balance so that both parties get what they want and need.
Examples of Great Context, Structure, and Flow
Now that we’ve talked a lot about what companies are doing wrong, let’s look at a few companies that are doing things right.
Oscar
Oscar is a health insurance company whose mobile app simplifies the most frustrating tasks associated with health insurance and doctor’s visits. Oscar reduces friction by making context, structure, and flow central to their app’s design.
First, the Oscar app provides context by using your location to tailor your experience. If you are in New York, for example, and need to find a doctor nearby, the app automatically adjusts its physician directory based on your phone’s location.
Second, Oscar’s app has thoughtful structure based on what users need. By using very simple text and icons of the most popular tasks right on the app’s homescreen, the app makes it easier for users to find what they need quickly.
Third, Oscar creates an intuitive and near-frictionless user flow by using easy to understand language and navigation throughout. Rather than using phrases like “physician’s directory”, the app uses language that speaks directly to whatever task a user is trying to accomplish — like “find a doctor”.
The Result:
After launching in 2012, the Oscar app now has over 250,000 users and partners with 3,500 doctors across the country. Oscar testimonials 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.”
Canva
Canva is a free, cloud-based design platform that helps non-designers create clean marketing and social media imagery quickly. Canva makes great design accessible to the lay user by leveraging context, structure, and flow.
First, Canva provides great context by saving a user’s prior work right on the home screen. Plus, since Canva knows its core users aren’t designers, it provides templates so that a user can simply adapt rather than starting from scratch.
Second, Canva has great structure because it organizes the most common needs alongside descriptive icons right on the navigation pane. From there, users can search within categories to find exactly what they’re looking for.
Third, Canva’s user flow is crisp and simple because it uses simple interaction design to guide a user through the platform. When a user clicks on an element within a design, for instance, options not available for that element are greyed out while options that are available become dark and bold.
The Result:
Canva is now a favorite tool for freelancers, small business owners, and marketers that need to create better designs for less. User testimonials 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 product print-ready, quality images in a way that’s both time-efficient and simple.”
The Core UX Tenets for Reducing Friction
Reducing friction with context, structure, and flow can be enormously lucrative — but there’s no one way to do it right. That’s why UX designers who are great at establishing context, structure, and flow are also the designers with a knack for seeing things from the perspective of the user.
That said, there are a few core tenets for reducing friction — and all of them guide our team at Drawbackwards when designing new experiences or improving established ones.
Stay flexible, my friends.
Every designer worth their salt will understand the importance of a style guide. They keep things consistent and clean, and help guide teams of designers and developers stay within brand guidelines. That said, plenty of designers are victims of their own rigidity, and struggle to design experiences that are adaptable to user needs and business objectives. One thing is for sure…
Ruthless consistency will not allow context, structure, and flow to occur.
Great user experience design means striking a balance between consistency and flexibility that allows designers to design for a user needs within a particular moment.
Design at the intersection of user needs and business objectives.
In order to design experiences that feel friction-free and intuitive — but still serve a business purpose — it’s essential to consider both user needs and business objectives when making design choices. Too much of either will create a lopsided experience that doesn’t live up to its vision.
At Drawbackwards, we achieve this with a “service blueprint”. This visual map shows how a business can fulfill user needs while still staying true to its business objectives throughout a user flow. This helps guide design by identifying what each moment in an interaction needs to accomplish from both a user and business perspective.
Don’t mistake stacks of wireframes and diagrams for real strategy.
Currently, the majority of “UX designers” we encounter spend about 90% of their time creating wireframes, diagrams, and prototypes… and about 10% of that time thinking about what a user or business might want or need. The wireframes, sitemaps, and prototypes are all just tools great designers use to visualize 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’ll spend a lot more time getting to know user needs and business objectives than they will creating wireframes and diagrams. Research, strategy and conversations are what take up the bulk of a UX designer’s time because they are a 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’s almost never done. It’s almost impossible to create a perfect user flow the first time around, and it’s a waste of time to try to get everything absolutely perfect before letting users and business leaders weigh in.
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.
By employing this iterative approach to context, structure, and flow within an experience, brands can finally make the leap from merely functional, useful products and services to truly meaningful ones.