What's the Difference Between UX and UI Design?

The majority of our projects feature at least one UX designer and one UI designer. Why do you need both and what sets them apart? Who is the UX/UI Designer, then?

User Experience Design describes the entirety of the subjective experiences of a user who interacts with a specific service or a product. A good UX happens when users perform their goals effectively and with joy. They find the desired object quickly and successfully navigate a website or an application. How to design such an experience? First of all, you should gradually increase the level of detail.

High-level UX — strategic workshops

UX designers must fully understand the project’s scope, business objectives, and the target group to propose the most fitting information architecture. During product workshops, a client presents the project’s goals, which are then discussed. Afterward, the UX designer can propose a first draft of a user journey and lo-fi mockups.

Website and app UX structure

Before UX designer begins to create each view, she (our team is exclusively female so let’s stick with she) draws the so-called website/application structure. It involves marking which screens will be in the project, what they will feature, and how the user will navigate between them. At Utilo, we use Overflow for the preparation to design the architecture.

Tools such as Sketch, Figma, or Adobe XD, are useful at both the UX and UI design stages of a project. The most effective way to work here is to use the same file. UX designer works on the mockups in grays. Disregarding branding, she, however, marks where graphics or icons should be. She decides on specific components—like text boxes, dropdowns, radio buttons, checkboxes, specifying what should they do, what should happen if there is an error, and more. UX designer should also make sure that the users always know where they are at the website, how to come back to the main page, how to cancel changes, or how many more steps there are.

Interactive prototype

UX designer marks interactive elements on the mockups and automates screen transitions. Thanks to that, we can show the application—resembling a functioning, interactive product—to the client or the users during the testing stage. A prototype is an excellent solution for companies seeking investors. You can showcase how the end product will function without spending your entire budget on the application development.

User Interface is a series of screens, pages, and visual elements—such as buttons and icons—which enable interaction with a product or solution. UI designer focuses on the project’s visual side, but still with the understanding of how the website or an app should work and why so. The role involves preparing a project that is efficient to implement, conforms to the interaction patterns to which the users are used to, as well as the coherent with the product’s branding.

Style Guide — the UI designer’s responsibility

The Style Guide is an essential aspect of the UI designer’s work. It’s an instruction for the developers, describing how each element (such as buttons, text fields, checkbox, radio buttons) should behave depending on the action—before clicking, if an error occurs, or if an element fails to load. The designer also presents the font sizes and the spaces between the elements based on a grid. A Style Guide is an entry to the entire Design System. In large-scale projects, the creation of such a System significantly increases the speed of the implementation of new functionality to an existing project. The team can effectively introduce consistent elements, basing on the predefined styles. Airbnb and Atlassian are great examples of such an approach.

Is UI designer responsible for the accessibility of a website?

It’s difficult to conclusively say who should be responsible for an application or a website to be accessible for users with disabilities. In our case, UI designers make sure that the presented text is big enough to be readable for visually impaired people. She also ensures that all elements are visible thanks to the good contrast between them. However, usually, UX designers point out if an icon should have a caption, she knows more about screen readers and possibilities resulting from the accessibility settings in a phone. That’s why cooperation in this aspect is crucial.

Who is a UX/UI Designer?

Why in some companies, the role of UX/UI Designer exists? Why does such a person perform two jobs? To be fair, there is no right or wrong approach here. At Utilo, we believe that if two people are participating in a project—one responsible for UX, the other for UI—their conversations are more constructive, which leads to more innovative and creative thinking. Often, the crux of a discussion is the balance between a visually attractive and a simple and practical solution. It’s much harder to reach this happy medium when only one person is responsible for both the form (UI) and the function (UX).