UI vs UX, the eternal question. Have you ever tried to find out the differences but failed to get a more definitive explanation?

“UI is the Tinder profile; UX is the Tinder date”
“UI is functional; UX is psychological”

Ah! Those classic descriptive metaphors again. This kind of explanation doesn’t really give us a clear answer as to how similar and different these two design terms are. It makes some people even more confused.

To help you pinpoint what UX and UI are all about, let’s get into a different path by giving a more thorough explanation.

UI / UX image

What Is UX design?

UX design is part of the entire design process that aims to deliver a seamless experience for users of a particular product, platform or service. It focuses on the overall user journey starting from how clients discover your product to how satisfied they are after using it.

Contrary to what others think, UX is not solely for digital products, platforms, and websites. The principles of UX also apply to physical stores. Steve Jobs once said that the customers’ experience going to Apple stores is also a part of UX.

While there’s no harm in not entirely understanding the definitions of UX and UI, it’s still better and wiser for us to understand how to differentiate the two - especially if you’re a designer, a developer, or a recruiter interviewing for a designer position.

What Is UI Design?

UI is the aesthetic part of the UX process. It’s about how you use and combine images, typography, and other design elements to make the product look visually appealing. What makes distinguishing UX vs UI difficult is that the two are not completely different from each other. They go together.

The limits of UI design are easier to set as it is limited to interfaces. But, these interfaces also add up to the user experience.

Difference between ui / ux image

What Does a UX Designer Do?

The role of UX designers is to make a product or feature that is usable, accessible, and enjoyable. They serve as the bridge between the product team, designers, and users. While they take the standpoints of each stakeholder into account, they make sure to prioritize the needs of the end-users.

The UX designer has unique day-to-day responsibilities depending on the stage of the design process. The design process can be different from every company, but the most common processes are user research, persona development, ideation, prototype, and user testing. Below a more detailed explanation of each of them:

User Research

Many are surprised to know that UX design isn’t just designing. It’s also heavy in collecting data, interviewing users, and understanding human psychology.

In fact, the very first step in UX design is not designing, but user researching.

User research aims to understand the needs and motivations of a customer. It will help the designer to map out the user journey and identify opportunities for the business. This is usually done through observations, surveys, user interviews, focus groups, and other research methods.

Persona Development

Another vital part of UX design is the development of a user persona. By interpreting the data collected from user research, the designer will create an imaginary person that best represents its target customers.

UI / UX persona example

It answers the question “Who are we designing and building for?” It guides the design and development team in creating a product that is useful to its target market.

Some specific information you can find in a user persona profile is the target users’ demographic, age, profession, interests, needs, motivations, and other necessary details.

Ideation

Of course, something has to be done with the information the UX designer has collected and organized! This is when the ideation process comes in.

Ideation is generating ideas through brainstorming and other techniques, to bring out great solutions for the user’s needs that bring the most value to the business. Once all the cards have been laid out, the UX designer chooses the best option based on its viability, feasibility, and desirability.

Prototype

After selecting the most viable, feasible, and desirable option, it’s now time to decide how the product will be. The iterative process of prototyping looks something like this:

  • Sketches - ****getting your ideas on paper; identifying user and product requirements
  • Wireframes - creating a skeleton of your product’s interface without using real design elements and content
  • Interactive Prototypes - a more realistic version of your product; similar to wireframes except that these already include some content and visual elements
  • Minimum Viable Product (MVP) - is the working version of a prototype; no longer just about visuals, but also about functionality.

User Test

One of the later responsibilities of UX designers is user testing. It is the process of asking representative users to test and evaluate the product. This captures users’ behavior patterns, preferences, and opinions - using these as the basis for implementing changes to make the product better and more user-friendly.

User testing can be done using interactive prototypes and/or MVPs. The most logical strategy is to ask the same representative users to test both the prototype and the MVP so they can comment on the changes that have been implemented on the prototype to create the MVP.

What Does a UI Designer Do?

The UI designer is the one responsible for the visual design of the product. While the UX designer can design the functionality through sketches and wireframes, the final prototype and MVP aesthetics are in the hands of a UI designer.

One thing that makes it confusing to distinguish between a UX designer and a UI designer is that their role can overlap with each other.

It can even be observed in some companies that UX designers are also taking on the role of a UI designer. This is normal especially if the UX designer has great designing skills.

In short, UI designers take charge after the user research and persona since it is when the designing phase starts. The design phase comes with different subphases:

Style Guide

Brand style guide

A UI designer can’t just immediately proceed in designing. It needs to start with creating and enforcing a style guide or a visual language. User research, persona, and branding help UI designers ace this subphase.

The style guide’s importance lies in design consistency. No matter what page or element you’re looking at, it brings out the feeling that the company wants to depict.

Interactivity Design

Interactivity design is where logic and creativity meet and work together. It’s when the UI designers create the individual screens that the end-user might interact with. It’s also when most decision-making processes pop in.

“Which layout makes more sense?”
“Where should we place the button?”
“Which band color should be the most prominent on this page?”

These are just some of the questions during this stage.

Animation

Animation is the process of adding motion to UI elements.

It isn’t just about visuals. It isn’t about applying bright and flashy colors nor adding too many animated gifs.

Instead, it’s how designers supplement human psychology with UI motions to enhance the product’s functionality, interactivity, and overall usability, and finally, to influence the user’s decision.

Here are some common UI animation concepts:

  • Opening side menu

Events menu example

  • Scrolling a list of items

Scrolling list of items example

Why Is UX/UI Important?

To create a killer product, UX and UI designing should always be present in the process. The UX/UI combination is what shapes the user’s experience and impression of your product. It directly impacts your business’ success as it defines how you attract, engage, and retain users.
No customer would want to continue using a good product with bad UX/UI. However, a mediocre product can still win with the great ease of use that it offers to its users.