Learn / Guides / UI design guide
UX vs UI design: differences, similarities, and practical application
User experience (UX) considers and optimizes the full user journey within a product or website. User interface (UI) focuses on the elements and pages users interact with while they use a product or service.
Together, UX and UI design enable businesses to build intuitive and efficient products that users continuously use and love.
This chapter of our UI design guide explains the differences between UX and UI, the responsibilities of UX and UI designers, where UX and UI overlap in scope, and practical examples showing how they work together.
Create a UI design that delights your users
Every user touchpoint is a chance to enhance your user's product experience. Hotjar helps you identify, prioritize, and optimize the right UI improvements.
What are UX and UI?
User experience (UX) examines how users interact with a product or website—and how they feel about their interaction—at every point in the user journey. For example:
Is it easy for users to create a new account in your product?
Do they struggle to navigate between different pages of your website?
Whether people have a 'good' or 'bad' user experience is based on their perception of a product's ease of use, efficiency, and practicality, and can influence product adoption and user retention.
UX design is the process of applying UX concepts to shape products and services that are easy and enjoyable for people to use. The primary goals of UX design are to:
Conceptualize product features that address user needs
Build delightful product experiences that improve user loyalty and satisfaction
Identify opportunities to improve the user experience (and outperform competitors)
Compared to UX, user interface (UI) zooms in on what people interact with when they use a product or website, and how those touchpoints impact their decisions. For example:
How do users interact with the layout of the screen?
How does the sign-up button color impact new user acquisition?
An effective user interface is intuitive, inclusive, and accessible, and prompts the user to stick around and engage with your product.
UI design is the process of applying UI concepts to shape the look, feel, and layout of a product's interfaces—and enhancing those design choices to influence users. The main goals of UI design are to:
Make user interactions with a product as smooth as possible
Apply visual designs that make the product unique and engaging
Understand how design psychologically influences user actions
What are the responsibilities and skill sets of UX and UI designers?
UX and UI design responsibilities may appear similar, especially since these designers work closely together to create better user experiences. But their roles are not interchangeable and have distinct sets of responsibilities and skills. Here we examine some core tasks and soft skills of each.
What do UX designers do?
When a person refers to how 'groundbreaking' a new product is or how 'easy' it is to use an app, they're talking about effective UX design.
A UX designer's core responsibility is to connect user needs to the company's business goals. By approaching product development through the lens of the end-user, UX designers aim to answer questions like:
Is this what the user wants?
What does the user really need here?
Why are users behaving like this?
Because of its user-centric nature, UX design is an iterative process, relying on usability testing and UX research data to identify user pain points, needs, and motivations to continuously refine the user experience.
What do UI designers do?
When a person mentions how 'nice' a new website looks or how 'fun' it is to swipe left and right on an app, they are talking about effective UI design.
A UI designer's role is more granular than a UX designer—UI takes the overall UX blueprint and uses it to amplify the finer details of the product's appearance and user touchpoints.
UI designers make decisions based on UI best practices, competitor analysis, and company brand guidelines, melding design and user research to create a beautiful and intuitive product.
How do UX and UI work together?
In most cases, UX is one of the first steps in deciding whether to build a product, relying on UX research to identify user needs, guide early design brainstorming, and shape the development of a wireframe. Once the UX wireframe has gone through several iterations to optimize product functionality, content organization, and the step-by-step user journey, it's handed off to the UI design team.
From here, UI designers bring the UX blueprint to life by integrating aesthetics, company branding initiatives, and design strategies that enhance product familiarity, usability, and intuitiveness. This includes converting UX user flows into UI mock-ups, prototypes, and high-fidelity pages, and further refining UI touchpoint details like typography, button shapes, and animations.
Throughout rounds of testing, UI designers share their designs with the UX team for feedback before giving the final design specifications to front-end developers so they can produce the code needed for product implementation.
Throughout the design process and even after product launch, UX and UI teams analyze design performance and cross-report top-level findings. Continuously sharing design failures, successes, and learnings allows each team to iterate their design and evolve their strategy to better suit user needs.
How UX and UI design work together
For a real-world example of UI and UX working together, think about the process of making a dinner reservation with an app like OpenTable.
To book a table (the user 'need' as determined by UX research), you have to complete a series of steps: log into the app; search for a location; choose a date, time, and number of guests; and confirm your reservation. This step-by-step process, and the order in which you do it, is an example of the user journey wireframed by the UX design team.
While navigating through these steps, you interact with screens that include widgets, animations, buttons, calendars, and maps. Each screen has a UI design that dictates the visual representation of the content and how you interact with it—for example, how you click, scroll, and type information into the app to accomplish your goal of making a reservation. This is UI design.
Each screen in the OpenTable app has a unique UI. The end-to-end user experience—the UX—is the sequence of UI screens.
How are UX and UI design different?
Due to their complementary relationship, it's not always immediately clear where the boundaries and distinctions are between UX and UI design. Here we dive into four key differences: research tools, scope, perspective, and process.
Research tools
UX designers rely on UX research strategies like surveys, user feedback, and usability testing to collect insights directly from users and guide their wireframes and prototypes. On the other hand, UI designers rely more heavily on competitor research, design principles, user psychology insights, and UI tools like Hotjar's heatmaps and session recordings to guide mockups and layouts.
Scope
The UX design process covers the macro, end-to-end user journey and may even begin before the product exists. On the other hand, UI designers work on the micro-interactions at each user touchpoint, and consider how they can make them look beautiful, easy-to-use, and intuitive to user behavior.
Perspective
UX designers make their decisions from the user's perspective. While UI design considers user wants, they integrate these needs with an artistic and branding perspective.
Process
UX design continuously iterates product improvements by frequently interacting with users and constantly applying learnings to improve the product. A UI designer will also go through revision cycles, but their process is less extensive and frequent.
How UI and UX differ
As a real-life example of the four main differences between UX and UI design—research tools, scope, perspective, and process—let's look at designing software like Airbnb.
Say, for example, a UX designer is working on a new user flow for a mobile app like Airbnb (scope). One of their responsibilities is determining critical information users need before booking a room (perspective).
After reviewing UX research or conducting individual user interviews, they conclude that users have four top priorities: rating, location, price, and what the property looks like (research tools). Then, they translate this data into the larger working wireframe. Before handing it off to a UI designer, the UX design will go through many iterations (process).
A UI designer takes that wireframe and zooms in on where and how the user will interact with the app to book their room based on their priorities (perspective). They also consider how to optimize the usability and familiarity of these touchpoints (scope).
After reviewing company branding guidelines, consulting competitor research, and conducting additional user research (research), the UI designer decides how:
The property rating is conveyed (star icon and numerical text)
The search location is depicted (interactive map and zoom-in features)
Users access property photos (swipe or click)
The price is displayed and communicated (text)
They then transfer these decisions into a mock-up or prototype, and after feedback and revisions (process), hand the design off to the front-end developers.
While UX and UI designers worked on the same product elements (location, price, rating, photos), their perspective, scope, research process, and tools differed.
UX determines what information is most important to users when booking on Airbnb—like location, price, ratings, and photos. UI determines how this information is most visually impactful—through features like maps, images, icons, animations, and widgets.
Next steps for optimizing your product's UX and UI design
While UX and UI may appear the same at first glance, there are distinct differences. UX design is concerned with product functionality; UI design focuses on a product's aesthetics. Together they work to create a product that delights users. How you incorporate the two to optimize your product design ultimately depends on what industry you work in and your users' unique needs and wants.
Improve your website's UI design with heatmaps
Hotjar Heatmaps are a powerful way to understand what users do on your website pages: where they click, how far they scroll, and what they look at or ignore.
