What is the difference between UX and UI design?

UX and UI design have become increasingly popular terms and fields in the web and app development industry. We can see almost every developing company investing in these two areas to improve its products and services. UX stands for user experience while UI refers to the user interface. But have you ever wondered what they mean exactly? What are UX and UI designs? We’ll give it a go at explaining it in this article. Let’s dive in…

UX/UI Design is similar to building a house

Let’s start with a popular analogy that explains UX/UI Design. Imagine that we want to build a house, so we need a crew of specialists who know how to manage the construction process.

UX designers will consider some fundamental issues:

What kind of home do we need? How many rooms or floors should it have, and where to locate them? What kind of heating and cooling system will be the best solution for us?, Etc.

They can even make simple sketches of it to visualize solutions for our needs, and they help us get an idea of how we feel about experiencing our new space.

In this scenario, developers or programmers are the builders who know how to build a stable structure and choose the proper material to build the skeleton of our home. UI designers come inside this basic structure to make it more enjoyable and aesthetically pleasing – they paint the walls, hang pictures on them, and add beautiful and comfortable furniture.

So how do we use this analogy to differentiate UX and UI design? In a nutshell, user experience (UX) is about the overall experience with a product or service. User interface (UI) is related to the aesthetic look of the product and how we feel about it.

What do UX and UI designers do precisely to achieve their goals, and what are their responsibilities? Let’s dig a bit deeper.

What is UX design?

Let’s start with the UX designer role because we don’t decorate a house when it doesn’t have a structure yet. The user experience term was coined by Don Norman, a cognitive scientist, co-founder of the Nielsen Norman Group Design Consultancy, and author of the famous book „The Design of Everyday Things.” In the late 1990s, he started to describe it:

User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

Don Norman

Cognitive Scientist & User Experience Architect at Nielsen Norman Group

User experience is not only about product or service development. Although thanks to digital products, it has become super relevant. But honestly, it is a scientific process that we can apply to almost every part of the design process because it focuses on the user and their journey through the usage of everyday things.

Today designers are not only creating beautiful and functional items. They can identify and solve problems through products and services. We can talk about user experience when we walk down the streets, pull on doors, open a package of cookies, and even when we call our dearest friends. Those activities are intuitive and straightforward. They also illustrate that the best user experience is when we don’t have to think about it at all, as about breathing, which was significantly described in the book „Don’t Make Me Think” by Steve Krug (2013).

UX design: Always better to ask the way than to go astray

UX designers start their work with an array of questions, including:

• Who are our users?
• How can we identify and solve their problems?
• What are their real needs, emotions, and feelings while interacting with a product?
• How to make their journey through the product and service more friendly and pleasant?
• How can we help them achieve their goals in the simplest and most easy-flowing way?

Choose empathy first

The fact that these questions are asked shows that UX designers are full of empathy and openness to different approaches, needs, and experiences. They are trying to understand the audience and its feelings as much as possible. They collect data and analyze it. In their work, they try to put themselves in the customers' shoes to define user flows and journeys.

UX designers also catch the user's pain points and design solutions. Finally, they conduct testing that checks on every stage, the feel, and the experience of a real user.

As we can see, we can call them user advocates while they try to put users first in their approach. To sum up, they follow customers from the very beginning to the successful end of their journey, and even longer. At the same time, a digital product is almost a never-ending process, which is emphasized especially in the Agile attitude.

UX designers – what are the phases of their work and some of the tools?

1. Ideation & Evaluation

Let's go back to the home-building analogy. The ideation and evaluation phase helps to find out what the stakeholders' need in a house. Not all homes look the same, and everyone has different needs and wants of how it will look, what accommodations it should have, and how to organize it so that all of the family members feel comfortable when living in it.

Coming back to putting things in practice, in the actual initial phase, UX designers and the team aim to understand the background of the business and its field, how it works, its specificity, and the overall goal. They frame the problem and discover the product concept and related ideas.

They do it via:

• Entry and desk research
• Workshop with the customer
• Proto-personas and target groups - working on stakeholder’s assumptions who are their users
• Competitive analysis

2. Research

When building a house, the contractor can't start to work on a structure based only on first talks with stakeholders and assumptions on who will live in it. They can get a better understanding if they meet as many family members as possible, ask them questions about their needs, feelings, constraints, and frustrations to consider forming the structure of their future home.

In the research phase, UX designers are ready to dive into deep research. Previously collected data can help prepare a strategy and plan for the whole process and choose appropriate methods to get insights from users.

Some of the methods:

• Quantitative research (e.g., surveys with close-ended questions, observations, eye-tracking, A/B testing)
• Qualitative research (e.g., in-depth interviews, focus groups, concept testing, guerilla testing, literature reviews)
• Personas (qualitative) – users' descriptions representing the target groups based on previous research
• Empathy Map – "getting inside the head of the user." Observing, listening to the user, writing down their feelings, and analyzing them.

As a result of this phase are created scenarios and summaries from interviews with users.

Collected data and research can help to invent the way and a form of organizing the content called Information Architecture.

3. Wireframes and testing

By this point, builders are ready to start construction on the house with a clear idea of what the owners want. Now they know specific details such as how many rooms they need, how doors should be open, how to lead electricity cables and where to hide pipes. As architects of this house, they are trying to visualize the family members' preferences in the project to make it usable and accessible to all of them.

Similarly, UX designers act as architects, thanks to analyzing the data collected in the research phase, they can prepare product recommendations, unique value propositions, and summaries of the target groups. They already should know how to structure the product content, so they prepare wireframes that are a low-fidelity outline of it.

This phase includes some valuable tools that show the iteration process of the user:

• User Journey – visualize the goal achieving process by users, including their actions, emotions, and pain points.
• User Flow – mapping out every user step while using the product.

Together with different testing methods (e.g., guerilla, usability) of created wireframes, those tools can show what works well and what uncovers some problems and should be revised and improved in the following steps.

The final point of a UX design on the website is to achieve a product that delights the user and meets all stakeholders' expectations.

UX design in digital product – examples

To illustrate some issues of UX design on the website, let's look at a few flows in the apps or websites you could use and visit through our home-building analogy.

For example, UX designers can build a project of a home from scratch - something that would be a new product for investors and their users. They can also focus on the easiest way to leave home with the items that the user needs - that would be, for instance, the most uncomplicated checkout process on the eCommerce website. They'll also be concerned if you can safely reach light switches to perform what you need. That would exemplify, for instance, how easy it is for you to tap the button confirming your choice in apartment booking. UX designers, as architects, can also take care of economical ways to keep heat in the house. In the digital world, that would remind the test of the most comfortable way to manage your money in the banking app.

To sum up, they'll listen to the customers, observe them, and advocate in front of owners and investors to connect business goals with user needs. They are associated with all stakeholders, who sometimes need to evaluate a budget at different stages of the project. The overall work of a UX designer is to make a digital journey pleasant and almost unnoticeable for every kind of user, and both fulfill stakeholders' expectations.

When do you need a UX designer?

• When you want that, developers understand the idea and business needs better.
• When you want to increase the conversion rate of your app or website
• When you like to define the pain points of your users
• When you want to test some digital solutions with real users
• When you feel that something is wrong with your digital product, but you're not sure what exactly
• When you want to know better your users and want to talk with them
• When you wish, your product will be usable and accessible, and its performance pleasant

What is UI design?

Where does the UI designer start to play the leading role? It usually happens when the UX designer prepares all needed research and surveys and develops low-fidelity wireframes that show how the user would like to interact with the product. That’s the time for decorating it! UI designers usually tie up a functional approach with an artistic one.

Of course, their choices of the color palette, icons, motifs, and fonts should be made after competition analysis, understanding the mood and goal of the product, and based on the deep research of color psychology and composition principles. There is a lot of space for creativity, but at the same time, UI designers shouldn’t reinvent the wheel and should use verified and tested solutions.

Brief history of User Interface

In comparison to user experience, a user interface is a purely digital practice concerning how the product will look and what kind of feelings it will trigger. It’s much older than the user experience term.

It had its origins in the 1980s when command line interfaces started to be replaced by the graphical user interface (GUI). That meant a lot in technology evolution. Finally, users could use computers at home for personal purposes and didn't have to know coding.

Thanks to GUI, users could interact with visual elements that started to represent office desks known from reality, like in Macintosh from Apple (1984). Today GUI is also used in digital interfaces, but the responsibility of the UI designer is far more complicated. As for now, UI design can cover desktop interfaces and mobile devices, smart TVs, smartwatches, VR and AR headsets, automotive HMI, and even products that use zero UI (interacting via gestures, touch, voice, and glances).

UI designer – elements of their work

We can mention a few fields in the UI designer work that can show what elements would be essential in their work:

• Typography – choosing the proper and legible fonts for headings, body text, and other elements.
• Composition – thinking out a layout that brings all the interface elements together.
• Icons – adding to the layout small graphical representations that communicate their functions and associate sites and activities
• Buttons – designing clickable elements
• Color palette – choosing and creating the overall mood of the product.
• Imagery – preparing images and illustrations.
• Spaces – designing the composition that takes a breath from its elements for better performance
• Menu bar – decide how categories and labels appear to the user.
• Interactions – make the interface elements interactive by transitions and changes between screens.

UI design steps

UI designers use mostly software dedicated to digital graphic design and can focus on a structured process that combines:

• Design research – preparing mood boards, competition analysis.
• Visual design – creating an aesthetically appealing product by focusing on visual touchpoints that allow interacting with it.
• Branding and graphic development – working on a product-related visual issue like brand identity.
• Design systems – preparing a collection of reusable components with clear standards to manage design by the company

At the end of the day, the UI designer's primary goal is to use previously collected knowledge about the user, transform lo-fi wireframes into prototypes and mockups, and then create an engaging and beautiful user interface that is accessible and inclusive for all final users.

UI designers work closely with UX designers, developers, and other team members, employing their recommendations to create a usable and aesthetically attractive product. The designed interface should also be optimized for all devices and platforms, responsive for every screen size. In the final point, some researchers say that the primary goal of UI design is to create an invisible interface.

As Golden Krishna wrote in his best-selling book:

„The Best Interface Is No Interface” ~ „” (2015)

Golden Krishna

The Best Interface Is No Interface: The Simple Path to Brilliant Technology, 2015

When do you need a UI designer?

• When you want to create aesthetically appealing interfaces for your product
• When you wish to maximize responsiveness, efficiency, and accessibility
• When you need a designer who focuses on color psychology and how color palette can impact the user experience
• When you want to draw the attention of the user to a particular component
• When you want to improve the conversion rate of your product by tested, visual solutions
• When you want to communicate brand values in an attractive way

How do UX and UI designers work together?

The work of UX and UI designers is closely interrelated. However, their positions aren't interchangeable.

We shouldn't talk about differences between UI and UX designers because it would be like considering the difference between car construction and its paint color. Moreover, we shouldn't speak about UX vs. UI design because it is not a fight in a boxing ring. Instead, it is more important to know what UI and UX design have in common because they overlap and complement each other in the design process.

UX and UI design will undoubtedly change the way of today's design process. Between the 19th and 20th centuries, the school of thought on functionalism in architecture and the design industry created a doctrine important in the design process for the next decades: "Form follows function." Today, I would notice that work made by UX and UI designers shows an expanded approach that can change this phrase to:

„Function and form follow research and testing.”

Conclusion

User-centered and planet-centric design

Yes, there are a lot of terminologies here. But don't worry. We shouldn't get hung up too much with those. The web and app development field is constantly changing. Design teams are evolving with new job roles that help better achieve the company goals like UX researchers, UX Writers, Interaction Designers, Content Designers, etc. All of them are important and show that this field still has a lot to develop.

What really matters is to understand the users, creating the product with them in mind. As society's awareness evolves, we should consider the planet and environment too in this process.

The Dodonut team shows in its approach that sustainable digital design can help make the whole process not only planet-centric but also user-centered. Humans are a part of the universe, so if we want to see the change, we should perform in an aware, mindful, and responsible way.