UX vs UI

The world of digital design has expanded rapidly over the last century. As it has grown, so has the need for more specialised job roles within the industry. But as these new roles become accepted into the mainstream, the lines between them can often blur and confusion can take its place.

With Google announcing that we will be saying goodbye to Inbox, it felt like a perfect opportunity to use this as a case study to explain the differences and the overlaps between User Experience Design, and User Interface Design.

UX Designer

In their own words, Inbox was created in order to create a “completely different type of inbox, designed to focus on what really matters”.

With this in mind, it would be the role of the UX Designer to discover how they could help the user “focus on what really matters”, so let’s break that phrase down into questions.

“Focus”

What is focus? How can you measure it?

Is focus the amount of emails you can respond to? Is it about sifting through the spam to get to the important emails?

What is focus to the user, and how can we help with that?

“What really matters”

What really matters to the user? Why does that matter to them?

What is the user trying to achieve? What are their behaviours whilst using the product?

Summary

With these questions in mind, it is the responsibility of the UX Designer to find the answers using methods of research and testing such as user interviews, usability tests, eye tracking, A/B testing, etc. This will return an array of quantitative (numbers) and qualitative (words) data, which can be used to influence decision making and as a metric of success to test against later on.

It is important to note that you often cannot simply just ask the user the questions, as they may not be able to express what they need.

From here, the UX Designer can start flesh out the project; creating personas (or I personally prefer jobs-to-be-done) if necessary, wireframes and lo-fidelity prototypes.

This is where the UI Designer comes in…

UI Designer

Now that the UX Designer has done some research, we have a better idea of the users needs. It is the role of the UI Designer to turn these needs into various forms of visuals, which could be used as prototypes in user testing, or eventually as a part of a handover document to Developers.

Let’s say that a prominent user behaviour that our UX Designer has noticed from testing is that users often comment on how their inbox can become cluttered and that this is a pain point for them. One of many possible solutions could be to bundle emails in order to make them visually digestible.

The UI Design would research way of visually grouping elements, maybe researching Gestalt Principles, performing UI benchmarking against similar existing products or competitors if required, eventually leading to hi-fidelity designs.

It would also be the responsibility of the UI Designer to think about interactions, accessibility, and ensuring that any new designs adhere to a design system if it exists (which it should!).

The UI Designer should work closely with any Frontend Developers in order to maintain an accuracy of designs. The art of handing designs over to development is an important one, but is a story for another day.

Conclusion

This article hasn’t even touched the tip of the iceberg of responsibilities for each role.

I see UX and UI as a Venn diagram in which there is an overlap, but not an entire enveloping. The two roles work together as closely as two roles possibly could, but both hold expertise further in their own areas.