UX vs UI: Understanding the difference

UX vs UI. User experience. User Interface. User confused? Let’s break down the key differences between the disciplines.

The whole ‘UX vs UI’ thing has been bamboozling product teams since time immemorial. But it needn’t be all that complicated. When it comes to UX vs UI, you just need to know your look and feel from your user journeys. And – importantly – who’s responsible for which part of the pie. 

So let’s put this to bed once and for all: here’s everything you ever wanted to know about UI vs UX (but weren’t afraid to ask, since you presumably Googled it and landed here)…

What is UX?

UX stands for user experience. For digital products like apps, websites and online services, it’s an overarching term that generally speaks to the way people navigate, explore and, well… Use the thing.

That covers navigation and information hierarchy, as well as overall accessibility and ease of use. Great UX is all about answering a core question: can our users do the thing we want to enable in a way that makes sense? You get there via market research, user testing and fine-tuning until you have a user experience that’s super seamless and intuitive.

And yeah, we know; that letter ‘X’ is doing some heavy lifting here. UX just scans better than UE. It is what it is.

What is UI? 

UI stands for user interface. And for all intents and purposes, ‘interface’ here is synonymous with what most people think of when they think of the word ‘design’. 

Well, kinda, anyway.

See, if you give a designer access to Figma and absolute free reign they’ll let their imaginations run wild. That’ll give you something incredible to look at, but potentially confusing to use. Great user interface design, then, is all about massaging those cool ideas into something that feels unified, coherent, and obvious to the user.  

In other words, UI builds on the skeletal work done by UX teams, focusing more on the cosmetic and aesthetic parts of your product’s DNA. 

UI designers are obsessed with color schemes, the way buttons look, the readability of interactive elements, the feel of transitions and animations, and whether everything is crystal clear to the end user. 

UX vs UI – what’s the difference?

This is where it gets a bit complicated – since the latter is actually a subset of the former. While the two are different disciplines, everything you do as part of user interface design should be done in the interest of your product’s overall user experience. 

After all, if you’re fussing over drop-down menus on a product that’s fundamentally broken on a UX level, you may as well be rearranging deckchairs on the Titanic. 

With UX vs UI, the differences between the two disciplines are probably best described with some handy analogies. If you’re a chef dreaming up a new meal, UX design would be the thought process behind the ingredients – do they work together? Are the flavors complimentary? UI design, on the other hand, is the presentation, the plating and the garnish.

If you’re making a giant, city-destroying robot, UX would cover the fundamentals of movement, the specifications, and the stomping motions. UI would ensure that the robot’s face and voice feel consistent with your destructive intentions.

UX vs UI design vs PX

Product experience (PX) is a slightly different beast, as it has a wider, more all-encompassing focus. So, while user experience looks to fine-tune the actual usage and flow for each customer journey, product experience takes a much more holistic view of everything to do with it. 

That includes the product’s look and feel, sure – but also its marketing, customer service, third-party touchpoints, back-end engineering, userbase, and even how it fits into the world in a contextual sense. 

UX tasks and responsibilities

User experience teams look after a range of jobs that coalesce to bring a seamless, simple flow to the product:

1. Hierarchy and architecture

When a user lands on the front page of your app or website, what are they looking at? What information or tools do they need first? What are they there to achieve? Answering those questions helps UX teams decide what’s most important and, ideally, shove those things front and center so that users don’t have to go digging around.

2. Navigation flows

That hierarchy work will also influence your product’s general navigation – which includes what’s in the main nav menu, but also the page-to-page flow for every kind of user journey. These all need to make intuitive sense and provide users with exactly what they’d expect to see at each step.

3. Wireframing

Once you have your user journeys and information architecture nailed down, UX teams build basic wireframes of every page. These are stripped-back blueprints for the product, app or website that give UI design teams a structure to work with.

4. Testing and fine-tuning 

UX is never a one-and-done process. Instead, it needs constant testing and finetuning. Focus groups, heatmaps, eye-tracking tools and solicited user feedback forms all help inform areas of the user experience that fall short of expectations – or that highlight experience gaps you’ll want to close.

UI tasks and responsibilities

UI teams tend to pick up where UX leaves off, adding polish to wireframes and finalizing product design – albeit still with an eye on user-centricity. UI specialists look after…

1. Branding, fonts and color palettes 

AKA: the only part people tend to consciously notice, even though they’re benefiting from all the hard work that went into every other part of your UI and UX design behind the scenes. That’s just the way it goes, sadly. 

2. Layout and page density

UI designers need to carefully balance information density, white space, scannability, and a bunch of different psychological hooks that keep people using, scrolling, or pushing buttons. There’s an art and a science to this that requires iteration and user testing. The goal of great UI product design is clarity and useability that implores people to stick around.

3. Interactivity design

It sounds obvious, but people need to know – in an instant – that a button is a button and not just a graphic or aesthetic piece of page furniture. There’s work to be done here in creating a design language that’s easily readable and stays consistent across the whole user journey. Nobody likes surprises, and nobody likes clicking on things that do nothing.

Where do UX and UI overlap?

While it’s ideal to have dedicated people for both UI and UX in your product team, the reality doesn’t always work out like that. So, whether you have dedicated Designers for each discipline, or Designers straddling both areas, you should always understand that they are different skills with different priorities – as we’ve outlined already.

But there is one key facet that UX and UI Designers share: They both need to be intensely user-first in their thinking. 

That may be obvious for UX – making the user journey and flow feel intuitive is the basis of the job. But it’s also true for UI design because success in this space means only making design choices that add to the user’s experience. The alternative is to design fluff for the sake of fluff.

UX and UI examples

Example time! Let’s take a look at a couple of hypothetical products, and dissect what UX and UI teams would handle for each one:

eCommerce website

UX team: What problem are we trying to solve, and how best can this eCommerce website do that job? Your UX team would first get stuck into some research on customer needs and pain points, alongside their existing online shopping behaviors. From this, they’d design the overall user flows for browsing, searching and buying. That would then lead to the creation of wireframes and prototypes that can be used to test, validate and iterate.

UI team: Your user interface team would step in to take those prototypes and turn them into visually appealing pages, complete with your company’s branding. The goal here would be to build a cohesive UI that enhances every step of the journey – and encourages purchases. Once finalized, UI design teams work with front-end developers to ensure these designs translate into the final product without anything getting lost in translation.

Mobile banking app

UX team: The key job in this case would be to figure out the various journeys users want to take in their banking app, list them in order or priority, and design an overarching navigational flow that doesn’t get in their way. That would ideally come alongside some competitor research, where you might uncover something your rivals do poorly. Maybe sending money to friends is a pain and should be enabled with a big, no-nonsense prompt on the front page? UX designers need to balance these needs while also adhering to accessibility and regulatory guidelines.

UI team: Once the wireframes are in, your UI team’s job is to take that experience and make it unequivocally yours – so that no one can mistake it for any other bank’s. That’ll be alongside adding flourishes that give satisfactory feedback that your users have done what they think they’ve done. Maybe confetti rains down on the screen when they receive money? Maybe a button jiggles when they enter information wrong? These are the touches that make an app’s UI feel compelling.

How do you measure good UX vs UI?

For both user experience and user interface, you’ll use focus groups, heatmaps, eye-tracking and other types of user feedback to stress test everything and generate a host of relevant metrics and qualitative statements about your product: 

Measurement method	UX metrics and feedback	UI metrics and feedback
Focus groups	User pain points and needs. Feedback on the overall experience.	Feedback on visual design. Perceptions of branding and aesthetics.
Usability testing	Task completion rates. Time on task. Error rates. User satisfaction levels.	Feedback on visual hierarchy. Ease of navigation. Clarity of UI elements
Surveys and questionnaires	Net Promoter Score (NPS). User satisfaction ratings (CSAT).	Ratings on visual appeal. Feedback on branding and aesthetics.
Analytics tools	User flow metrics. Conversion rates. Bounce rates. Feature usage. Time to Value (TTV).	Click and scroll heatmaps. UI element engagement
A/B testing	Comparative metrics like conversion rates and engagement. User preferences and behaviors.	Comparative metrics like click-through rates and engagement. Visual design preferences.
Card sorting exercises	Information architecture insights. User mental models	Feedback on navigation and labeling.
Eye-tracking and heatmaps	Visual attention patterns. Areas of interest or confusion.	Evaluation of visual hierarchy. Effectiveness of UI elements.

So, while those metrics might be in the form of core KPIs (like Time to Value, which measures how long it takes users to get what they came for out of your product), they could also be a written statement that the app doesn’t work on their device – or even that the color scheme gives them a headache. 

In either case, these metrics and statements will generate questions that can help you improve things. And the nature of those questions will differ whether you’re looking to improve UX or UI:

Questions that drive successful UX

• Is every user journey catered for?
• Do people know how to achieve what they set out to do?
• How long does it take them?
• What’s slowing them down?
• Are users getting lost?

Questions that drive successful UI

• Does this represent the brand?
• Are page designs distracting users too much?
• How can we simplify?
• Are people clicking on non-interactive elements?
• Are users scrolling below the fold?

Why do product managers need to know about UX and UI?

In short? UX and UI are the bones, organs and skin of your product. Even if users aren’t explicitly aware of all the scientific tweaking that goes into great UX and UI design, they’ll definitely feel the results if yours is lacking – and they’ll love your product if you’ve nailed the core tenets of both.

In other words? Product managers need to work closely with UI and UX teams to ensure that the initial vision for the product has made it through the conception and design processes – and all the way to the end product – without getting twisted into something that doesn’t serve its user base.