UI and UX: A simple explanation

Malavika Vijayan
kustard.design
Published in
5 min readAug 18, 2020
A desktop computer, a laptop and hand-drawn wireframe screens
Photo by UX Store on Unsplash

UI/UX design — it is a term that has been making the rounds at company meetings, in startup boardrooms, on the internet and especially in the tech world. A number of web and app design companies have been talking about how important their UX designers are…or is it their UI designers? The two terms can get confusing, and it seems impossible to understand if UI/UX is a single term, or two, if the terms are interconnected or completely different. Of course, you won’t know what your company needs if you don’t know what these roles are — so let’s break it down.

What do UI/UX designers do?

First, let’s break it down further to UI and UX. These are different roles, performed by different people or groups, who specialize in their own unique skills. However, these lines can get blurry because of how closely they work.

A  piece of custard to depict the product, with utensils as the UI and eating it as the UX

UI: User Interface design

This is design which is focused on the points of interaction between your product and its users. That moment when your user touches their smartphone, when they press the button on that microwave, when they tap on their smart watches — everything is an interaction, and it needs to be as simple, friction-less, and intuitive as possible. The happier your users are with their interactions, the more they’ll talk about your product to the people around them (which is exactly what you want!)

For websites and apps, UI designers focus on the final interface of the product. This includes

  • Designing the buttons, icons, spacing, images and the overall look and feel for the end user.
  • Incorporating your brand and its logos, colour schemes, style and identity into the design, often in subtle but very powerful ways.
  • Ensuring that images are tactfully included.
  • Understanding how the user will feel as they scroll and tap through your product.
  • The legibility and readability of your content.
  • The colors and the fonts you use, and how all of it ties together for the most appealing user experience.

Whenever you hear people referring to how ‘aesthetic’ a website looks, how ‘fun’ it is to swipe left or right, and how ‘addicted’ they are to tapping and double tapping, they are referring to a UI designer’s efforts!

UX: User Experience design

As the name suggests, UX design focuses on the user’s experience with your product. The main barrier between creators and users is usually that creators know every tiny detail of their product, but the users are completely clueless. For users to love your physical product, app, or website, they need to work their way seamlessly through all the functions and features, which is often harder than it sounds.

Many a well-intention-ed product fails simply because their users cannot find their way around or get confused half-way through a process. A bad user experience could also be the reason your website conversions are low, and people drop off early in their journey. Are these your concerns?

In the words of Steve Jobs,

“If the user is having a problem, it is our problem.”

A User experience designer’s work includes:

  • Developing and improving a user’s journey through products
  • Elevating their overall impression of your brand
  • Asking the tough questions: ‘is this what the user wants?’, ‘what does your user really need?’, ‘does this journey need to change?’
  • Familiarizing themselves with your users, to understand their needs and pain points, and ensure that your product meets their expectations.
  • Ensuring that the flow and hierarchy of information and steps in your product matches with what users already know from real world experiences.

User journeys, brainstorming, personas, empathy maps, prototyping and user research are all common phrases you will encounter as UX designers work their magic. Most importantly, UX designers work closely with all the stakeholders of a product or company, so everyone gets a voice, and every opinion matters!

So…how are the 2 connected?

While you commonly encounter the phrase UI/UX, UX/UI is a more accurate representation. UX and UI are 2 different roles, performed by two different people or groups, but they work closely together and have a few overlapping tasks. In most cases, UI is a PART of UX design, because the Interface forms an integral part of a user’s overall experience.

Venn diagram showing how UI is a part of the greater UX domain

STEP 1 — UX designers usually begin with deep-diving into understanding your users and their demographics, through interviews, surveys, observations, and analyzing your competitors.

STEP 2 — Next, they chart out users’ journeys and mark potential pain points.

STEP 3 — When the broad framework of the design, often called the ‘wireframe’, is created, UX designers will look at the flow and hierarchy of information, content layouts, and how each element leads to the next. In some cases, they may even test these out with your users to see what works and where they go wrong.

STEP 4 — Finally, once the wireframes are in place, UI designers jump in to bring these bones to life with their attention to detail and interactions, colour, typography, buttons and spacing things down to the last pixel.

It is not uncommon for UX and UI designers to work closely and collaborate their efforts, passing things back and forth to each other for feedback. UI designers have the additional responsibility of ensuring that none of the UX blueprint details gets lost in translation, while ensuring that the visual aesthetics of the product are maintained.

On things like micro-interactions and animations, the two groups work closely, developing off each other’s insights. After all, even the best looking animation will fail to please users if it leaves them with a bad overall experience, but the smartest interaction ideas will fail if the user doesn’t find it visually pleasing.

Summing up, UX and UI complement each other throughout the design process, but they both perform unique roles.

A fulfilling User Experience + A visually appealing User Interface = A Satisfied customer!

Learning this distinction is the first step on your journey towards identifying what your product needs, and finding the right designers to do the job!

Kustard.design is one of the few top design companies who help organizations apply design principles strongly to their products by focusing on User Interfaces and User Experiences with equal importance.

People ignore designs that ignore people” — Frank Chimero, Designer

--

--

Malavika Vijayan
kustard.design

Among other things, I’m a product designer and an occasional artist. I hold a soft corner for slow brewed coffee, and the written word.