When it comes to creating great products, UX and UI designers have an important role to play. They both have the goal of delighting the end user and they collaborate closely throughout — but they contribute to the design process in different ways.
As UX and UI continue to be used interchangeably, it’s essential to understand both how they differ and how they work together. So let’s do just that, starting with a brief definition of each.
- UX vs. UI: What are they and what’s the difference between them?
- How do UX and UI go hand-in-hand?
- How do UX designers and UI designers work together throughout the product design process?
- How else do UX designers and UI designers work together?
- The takeaway
UX vs. UI: What are they and what’s the difference between them?
UX designers and UI designers work together to create functional, user-friendly and aesthetically pleasing products. As you might guess, UX designers take care of UX — the end-to-end user experience — while UI designers take care of the UI — the user interface.
But what do these terms actually mean?
What is UX?
UX stands for user experience and it describes the entire experience a user has with a product or service.
Imagine you want to book a video consultation with a doctor using an app you’ve downloaded. As a user, the quality of your experience is shaped by all the different steps you take in the process: logging into the app, creating your user profile, searching for a doctor, selecting and booking the appointment, the confirmation and follow-up emails you receive and your experience during the consultation itself.
That entire journey is the user experience and it will be good or bad depending on how easy, efficient, accessible and user-friendly the process is. That’s what UX designers take care of.
What is UI?
UI stands for user interface. A user interface is the space where interactions between humans and machines occur.
Think of how you use your smartphone. You tap, swipe, scroll and type, all through the screen and the various buttons and elements on it. That’s the user interface: the part you interact with to carry out different tasks and actions.
Once again, imagine the process of booking a video consultation with a doctor. The UI part of your journey encompasses all the different screens, buttons, notifications and images you might encounter along the way while using the app.
UI designers are responsible for designing the user interface. They’re concerned with visuals and interactivity. In other words, how do things look on the screen and what happens when you click/tap/swipe, etc.?
UX vs. UI: The difference in a nutshell
To sum up the difference between UX and UI, let’s borrow an analogy from Colman Walsh, CEO of the UX Design Institute. Colman likens it to the process of building a new hotel, where you’d have an architect to lay the foundations and an interior designer to decorate and furnish it.
UX designers are like architects, considering the overall purpose of the product, mapping out the structure and general layout, and making sure it’s designed in a way that makes it easy for the user to navigate.
UI designers are like interior designers, adding the visual and functional furnishings to the UX designer’s blueprint. They ensure that the product not only looks a certain way but also that the user has all the elements they need to interact with the product. For a more detailed look at the role, refer to this guide explaining what a UI designer does.
That’s UX vs. UI in a nutshell. You can read more about the differences between the two here.
How do UX and UI go hand-in-hand?
UX and UI are two different things and the work of a UX designer is very different from that of a UI designer — as you’ll discover when we explore how UX and UI designers each contribute to the product design process.
However, while distinguishing between the two, be aware that they go hand-in-hand — you can’t really have one without the other. When creating digital products like websites and apps, the UI design will have an impact on the overall user experience. Equally, it’s no good having a product that looks beautiful on the surface but doesn’t actually work or effectively solve a real user problem.
Ultimately, great products need the expertise of both UX and UI designers behind them. It’s therefore essential that UX and UI designers work together in the product design process.
How do UX designers and UI designers work together throughout the product design process?
Both UX designers and UI designers want to deliver value to the end user but they do so in different ways. To illustrate how UX and UI designers work together, we’ve outlined a typical product design process and who does what at each stage.
Conducting user research and defining the problem
The product design process begins by identifying the problem that needs to be solved and understanding the people you’re solving it for (the end users). This is primarily a UX endeavour.
At this stage, the UX designer conducts user research to get to know the target user group and gain an understanding of their needs, goals and challenges. Based on their research, they might create UX personas. UX personas are fictional characters which represent real users and they’re typically presented in a single-page document with a mixture of text and visuals. They provide an easily-digestible and memorable summary of the target user, helping to keep them in mind throughout the product design process.
The UX designer will also come up with a problem statement — a brief description of the problem that needs to be solved. This acts as a springboard for coming up with ideas to solve the user’s problem.
Because this initial phase of the process is focused heavily on user research and problem definition, there won’t be much collaboration between the UX and UI designers just yet. However, the UI designers will certainly be privy to what the UX designers are doing and will spend time getting to know the user personas and understanding the problem space.
Coming up with ideas and solutions
Having established what problem needs to be solved and for whom, the next step is to come up with potential solutions. Again, this is mostly the domain of the UX designer.
This stage will usually involve some kind of brainstorming session to generate multiple ideas, followed by a prioritisation exercise to decide which idea is worth pursuing.
Here, the UX designer might create user flows to map out the path a user will follow to complete a particular task. This provides a visual reference for all the steps the user will need to take to accomplish a certain action — and thus starts to inspire what kind of structure and functionality the final design should have.
Again, this stage in the product design process is led by the UX designer, with the UI designer kept in the loop regarding the chosen solution and initial design ideas.
Early-stage design (information architecture, wireframes and low-fi prototypes)
This is where the product design process starts to get more hands-on. The UX designer will sketch out initial ideas, define the information architecture for the product and create basic wireframes and/or low-fidelity prototypes.
The information architecture is essentially a blueprint for how content and information will be organised across a digital product. If you think back to our earlier hotel analogy, imagine how the architect maps out all the different rooms and corridors in the hotel and what the user finds when they enter each room. That’s what UX designers do when they create the information architecture for an app or a website.
When mapping out the information architecture and creating wireframes, the UX designer is not focusing on how the end product will look — that’s the UI designer’s responsibility for later on. At this stage, they are concerned with carving out a logical, efficient, easy-to-follow journey for the user.
So, at this point, the product design process is still very much in the hands of the UX designer.
Testing and validating early designs
With the product blueprint in place, the UX designer might conduct some user testing to validate their designs so far. This helps to make sure that the proposed solution does indeed solve the user problem and that the suggested information architecture and product layout is logical and coherent.
Based on their findings, the UX designer will make adjustments to improve the product blueprint and create wireframes and prototypes that more closely resemble how the final product should look. Soon, the UI designer will step in to work their magic…
Creating high-fidelity prototypes (and more testing)
So far, the UX designer has mapped out the flow of the product and determined how it should be structured. Now it’s time to flesh out the UI design.
This is where the UI designer takes over. Working from the blueprint provided by the UX designer, they design all the different elements that will feature on each page or screen, from buttons and icons to typography, graphics and animations. They will decide on the different colour schemes to be used, ensuring sufficient contrast between elements and establish a visual hierarchy through their designs to make sure that the most important elements stand out.
Eventually, the UI designer will create high-fidelity prototypes which simulate not only how the final design will look but also its interactive properties. For example, they will create clickable prototypes which behave in much the same way as the final product, allowing you to click, swipe, enter text and navigate from one screen to the next.
The UI designer will usually share their high-fidelity prototypes with the UX designer (and other stakeholders) for feedback. The design team may also conduct another round of user testing before getting the designs developed into a live product.
Handing over to developers
Once the designs are finalised, they’re handed over to the developers. Based on the designs and specifications provided by both the UX and UI designers, the developers will build the actual product that the end user will interact with.
At this stage, there may be some back and forth between the developers and both the UX and UI designers, especially if there’s an aspect of the design which turns out not to be feasible from a development perspective. Changes may be made and the updated designs handed back to the developers.
When it comes to reviewing the developers’ work before launching the product, it’s likely that both the UX and UI designers will be involved in making final tweaks and running any additional user tests.
From there, the UX and UI designers will continuously work together to improve different aspects of the product and ensure that it’s meeting the needs and goals of the target user.
How else do UX designers and UI designers work together?
We’ve explored how UX and UI designers work together throughout the product design process but there are other tasks and projects that require collaboration between the two.
In addition to actually designing products and features, UX designers and UI designers work together to:
- Develop and maintain a style guide. This helps to ensure consistency in terms of the overall branding and visual language.
- Establish and optimise processes for how the design team works together and with other areas of the business.
- Conduct research and competitor analysis to better understand the target users and the market the product will be competing in.
- Present ideas and designs to business stakeholders and get buy-in from others in the company.
- Maintain design documentation so that there’s a universal, reliable record of all the work that’s gone into a particular design project.
- Organise and run workshops such as brainstorming sessions and retrospectives.
The takeaway
Ultimately, both UX designers and UI designers have the same goal: to create great products that function flawlessly, are a joy to use and successfully meet the end user’s needs. They focus on different aspects of the product design process but they collaborate closely throughout to reach this end goal.
Both UX and UI design are fascinating disciplines and there’s lots more to discover about each of them than what we’ve covered here. If you’d like to keep learning, check out this post explaining what UI design is or get inspired with these 9 examples of beautiful UI design. More interested in UX? Discover the 7 UX principles all designers should know or read about why so many people are switching to a career in UX.
