UX vs UI – what’s the difference?

20 January 2022
by Jason Hill
A photo of website wireframes hand drawn on a piece of paper.
  1. Home
  2. /
  3. Digital Experience
  4. /
  5. UX vs UI – what’s the difference?

Every industry has their fair share of buzzwords and abbreviations, and the digital world is no different. From www (the World Wide Web) to NFT (non-fungible token), SEO (Search Engine Optimisation) and many more, it’s hard to keep track of them all!

If you have dealt with a digital agency before, you are probably familiar with abbreviations like UI, UX and CX. So what do they all mean, and how different are they? In this post, we’ll explain the difference between some of the typical agency lingo you may hear.

UI (User Interface)

“What does the product look like?”

UI stands for user interface, which is the space where interactions between humans and machines occur. It was a term coined around the time that computers began the shift away from command-line interfaces towards the graphical user interfaces (GUI) we recognise today. User interface design is often lumped into the same category as graphic design, however the tasks completed, skills required, and tools used are often quite different. Unlike graphic designers whose skills are focused primarily on static media such as digital advertising, print design and typography creation, user interface designers focus on the visual appearance of interactive systems. Think websites, phone apps, wearable technology and smart home software. 

A UI designer will concentrate on things such as iconography, button design, use of typography, colour schemes, spacing and imagery. Their goal is to make interfaces aesthetically pleasing, accessible and enjoyable to use. They often work closely with marketing teams and graphic designers to ensure that the brand identity across platforms and mediums is consistent.

UX (User Experience)

“What is the experience of the product like?”

UX stands for user experience and is frequently mistaken as another word for UI. Although UX designers work very closely with UI designers (sometimes they’re the same person), their function in a digital project is very different. If we view UI design as the “what” (buttons, colours, text), then the UX is the “why”. 

Whilst UX designers are also concerned about how things look, they’re thinking about the experience more broadly. UX designers and UX researchers spend a lot of time conducting user analysis, which often includes interviewing current or potential customers, comparing and reviewing competitors and testing out different systems. They usually create low-fidelity prototypes/sketches of interfaces that are based on their research, before handing their ideas off to UI designers to make them ‘come to life’. They often coordinate testing and feedback and create multiple versions of prototypes to see which delivers the most pleasing experience for users.

The differences between UX and UI design

A perfect example of UX vs UI is the ‘Heinz Ketchup bottle design’. From a UI perspective, the two bottles pictured below are very similar. Both are filled with red sauce, have a predominantly white sticker of similar shapes, the Heinz logo and a photo of a tomato. However, one key difference ultimately changes the UX, even though the UI is very similar. By designing the bottle so that it is upside down, squirting sauce is significantly easier as the sauce is much closer to the lid. 

UI vs UX (Patrick Hansen, 2017)

Another popular example is the ‘footpath design’ photo. A town planner may build a beautiful, well designed footpath that will stand the test of time and elegantly complement the surrounding park. However, without proper research and user testing, the footpath may not actually suit the needs of its users, as shown in the photo below. The users of this footpath ultimately wanted to get from A to B in the quickest possible way, something that this well maintained footpath didn’t do. A UX designer or researcher in this scenario would have monitored people’s behaviour in the park, asked residents what they needed most, and advised on a design that met the needs of those walking through the area, before laying down the bricks.

What about CX (Customer Experience)?

“How does the experience of the product fit into the overall experience with our company?”

You may also hear the term customer experience (or CX) thrown around when in discussions with UX designers and marketing teams. Whilst UX is focused purely on the user experience of a particular product or service, CX factors in how that digital experience fits in with the rest of the brand, and how customers interact with it.

Take a look at large tech companies such as Apple. Over the years, their products have expanded from desktop computers, to laptops, smartphones, wearable devices and headphones. They have different teams that handle the UI and UX of these products and services individually, yet they still create a cohesive customer experience within the Apple ecosystem.

When it comes to starting a digital project at Codex, we consider the entire customer experience from the beginning. Using methods such as customer journey mapping, this allows us to deliver impactful digital experiences that benefit both the customers and the business. Whether it’s a website, application, wearable technology or something in between, we have the tools, resources and skills to allow us to achieve the perfect balance between all the abbreviations (UI, UX, CX and more!). If you want to take your project to the next level, contact our digital team today using the form below.