May 14, 2020
In the world of design, there are a few well-known debates that are never quite settled. One of the big ones is the difference between user interface design and user experience design.
While countless analogies explain how these two design concepts fit together, pinning down a definitive answer has proved pretty much impossible.
But if you’re new to the world of design—or especially if you’re interviewing for design positions—having a general understanding of how and when to use these terms is very important.
Since everyone interprets this question a bit differently, we asked seasoned designer and Maze CEO, Jonathan Widawski, to give his two cents on the topic. Read on for his simple analogy that’ll help you distinguish between the two—and more importantly, find out why you shouldn’t get too hung up on this old design dispute.
“UX design is about understanding the overall journey of your users and turning it into a product.”
Jonathan Widawski, CEO at Maze
According to Jonathan, UX design refers to the entire experience someone has with your product from start to finish. It attempts to answer the question: How can I help people achieve their goals in the simplest, most frictionless way possible?
In other words, UX design is concerned with the overall user-friendliness of an entire customer journey. And because UX has such a rich history, there’s some debate over where it starts and ends:
“UX as a category is not necessarily tied to websites. Steve Jobs famously included the experience of going to an Apple store as part of UX. Even the location had to be perfect. So how you buy a product, how you first see it—this is all important to UX.”
Jonathan Widawski, CEO at Maze
However, Jonathan sees the limits of UX in terms of product development and web design quite clearly:
“UX starts with a problem and ends with a wireframe or prototype.”
Depending on how much you already know about design, that sentence could either clear things up or make them more confusing. So let’s dig deeper into what UX design means in practice.
“The role of a user experience designer is to understand the customer journey. That means understanding the target audience, interviewing customers, defining user flows, and conducting user testing.”
While we often think of design as something visual, a UX designer’s work is mostly conceptual problem-solving based on research and data. It’s the process of speaking to users to pinpoint their needs, then devising the best user flow that will help them complete their tasks.
The best way for a UX designer to know if they’re doing their job right or not? User research and testing. By testing early in the design process with a rough prototype—or even just a paper mockup—UX designers gather data from users to validate their ideas and assumptions.
This conceptual focus on the user journey means that a UX designer’s influence on how a final product actually looks is limited. As Jonathan explains:
“The output of a UX designer is a basic prototype of a product’s interface—also known as a wireframe.”
A wireframe is like the skeleton of an interface—the bare minimum needed to understand how a design will work on a functional level. It can be produced digitally, or even drawn on paper. Once a UX designer is done wireframing, they hand the wireframe over and the UI designer steps in.
“UI design is about using typography, images, and other visual design elements to turn a basic interface into something digestible and usable.”
Jonathan explains UI design as the process of transforming wireframes into a polished graphical user interface. This both enhances a product's usability and creates an emotional connection between the end-user and a product.
A user experience (UX) is therefore made up of many user interfaces (UI), which come together in a (hopefully) seamless flow to form a product.
We can define the limits of UI in a much more tangible way than UX, as its focus is in the name: interfaces. The overall effect of a sequence of interfaces—and all the less tangible parts of a product experience beyond that—make up the user experience, but UI is purely concerned with the design of individual screens or interfaces on a user's journey.
“A UI designer focuses on how the colors, typography, and images of a design connect to the brand of a product.”
A UI designer’s job begins where a UX designer’s job ends—at the prototyping stage. They take the wireframes and add visual design to make them more usable, aesthetically appealing, and optimized for different screen sizes.
But while parts of UI design are more subjective than UX design, UI designers also have to consider brand guidelines when designing visual elements.
UI design is closely informed by the brand positioning of the product overall. Designers have to strike the right balance between usability and consistently showcasing the brand identity established by the marketing or creative team. As a result, UI design is closely related to graphic design.
The combination of UX and UI shapes your entire experience of a product. While two comparable products might get you the same end result, their UX/UI reflects how they provide it. If one of the products has better UX/UI design than the other, people are going to use it more because they prefer the overall experience.
According to Jonathan, these days UX design is the number one differentiator between competing products:
“Great UX isn’t just nice to have now—it’s expected. 40% of people who experience bad UX will turn to the competition. Some products succeed because they provide great experiences.”
To illustrate the point, Jonathan uses Trainline (thetrainline.com) as an example. Trainline is how pretty much everyone buys train tickets online in the UK. Their tickets aren’t any cheaper than if you buy them directly from individual train service websites or mobile apps.
However, all the ticket options are displayed on one page. And getting from the homepage to checkout is relatively simple. The result? They sold £3.7 billion of tickets last year—up from £3.2 billion the year before.
A study by McKinsey also shows that design-focused companies grow in revenue twice as fast as industry benchmarks. So UX and UI design is both a competitive advantage and a massive differentiator.
An easy way to explain the difference between UI and UX is with Jonathan’s simple analogy:
“Imagine you’re designing a house. UX would be the foundation, while UI would be the paint and furniture.”
The foundation (UX) comes first: establishing how each room connects and relates to the next, choosing functional locations for the doors, finding the most practical place to build the stairs, and so on.
Once the foundation is in place, you can start thinking about the interior design: hanging pictures in an attractive way, picking a style of furniture that suits the color of the wallpaper, organizing the kitchen utensils so they’re easy to reach without making the room look messy.
This example gives you a rough analogy of how design responsibilities are split between UX designers and UI designers working on a product: first, the logical flow of actions and fundamental parts are put in place, then the visual details are defined.
It also gives you a sense of how the collaboration works, with UX designers handing their work and recommendations over to the UI team once core concepts are tried and tested.
But a disclaimer is needed.
No. Jonathan is quite clear on this. Here’s why:
“The roles of UX and UI are being redefined all the time. In three years, the definitions will have shifted from what they are now. It’s not an exact science."
He adds that back in the day, people who made online software or products were simply known as web designers. It’s only since the design industry has matured that the more specific terms of UX and UI have become commonly talked about—along with the distinction between them.
But with the app and product design space still rapidly growing, newer, more specialist roles and terms like UX Writer, Content Designer, and Interaction Design are popping up all the time. The way we think about design is always evolving. That’s part of what makes it an exciting field to be a part of.
So while it’s good to have an analogy up your sleeve that explains your view on the UI/UX debate, remember that there’s no definitively correct answer. As Jonathan says:
“We shouldn’t talk about UX vs. UI. Instead, it should be UX and UI because they overlap and complement each other.”
This leads to a similar related question for newcomers to the field of design.
“Most companies that hire UI and UX designers aren’t looking for specialized people. Designers normally end up working on all aspects of a product. So if you’re new to this, learn about the whole design process.”
For Jonathan, it’s way more important for designers to have a well-rounded understanding of UX, UI, and other elements of design, such as typography, content or colors, than to over-specialize in one area. A team of good designers will be able to contribute and give feedback throughout the entire process—which is much better than working within UX and UI silos.
Of course, once you have experience working on different areas across product design, it’s normal to gravitate toward either the UX or UI side of things.
But just as the exact definitions of UX and UI rapidly change all the time, the tech industry often takes a fast-moving approach to design. In these environments, individual flexibility is key. A person who knows both UX and UI can jump in at any point in the design process to give their input. That makes them a valuable team member.
If you’re a budding designer looking for an inspiring introduction to the design space overall, Jonathan recommends reading The Design of Everyday Things by Don Norman:
“The book doesn’t even touch on digital design. It’s about usability and discoverability in a universal sense, and how we define these terms. A go-to book for anyone getting into the field.”
Make sure to also learn outside the field, by exploring different professions within the design space, such as graphic design or UX writing, and how they interact with UX and UI.
But he also emphasizes that the best learning you can do is navigate websites yourself. See if you can pick out real-life examples of good UX and UI, then analyze what makes them work.
Because at the end of the day, doing hands-on design is much more valuable than stressing over definitions. As Jonathan puts it:
“Don’t get too hung up on terms and terminology. What matters is understanding the customer journey and designing with your users in mind.”