Writing — Melvin K. Latham

In today’s technology realm, User Experience (UX) design and User Interface (UI) design often receive equal status and a lot of misinterpretation in conversation. The truth is both concepts are different, but rely on each other to deliver the best solution to a defined problem and enhance the lives of people while using a product.

UX design solves problems by covering a variety of disciplines (such as user research, information architecture, and content strategy) in its process to determine how intended solutions will help people. Along with meeting user expectations and interactions, UX design aims to meet product and business goals in the process.

UI design is a huge contributor to end-user experience goals, as its heavy focus lies in determining what intended solutions look/feel/sound like and how their intended interactions impact people. Designers research and involve best practices for components, layouts, templates, animations, typography, color schemes, sounds, microcopy, and other elements to shape the product’s design language. These all can affect a person's experience with your product in a positive or negative way, which is why it’s essential to have clear, defined UX goals first before testing and implementing UI design.

For example, if you’re a bank and a UX goal is to get your customers to their account information fast in a safe and intuitive way, which login screen would suit their needs best?

The first screen has a subtle, blue color scheme, which is a high ranking color used by many banking institutions to signify trust. Also, buttons are easy to tap and fonts are legible and have great contrast. The following screen functions just like the first, but notice the new color scheme, font, and layout. Does it scream Intro to Finance Anxiety to customers? It could.

Also, it's important to note that great UI design can't stand alone. You can have the most polished, pixel-perfect, Dribbble award-worthy screens ever, but they are useless if they don't meet intended UX goals.

My favorite high-level analogy of UX and UI design differences is Japan’s design and development of the square watermelon. Grown by Japanese farmers in the 80s as a direct response to limited space, the cubed fruit presents a lot of practicality and convenience for grocery stores and consumers in urban areas. Its stable shape improves transport abilities, allows it to fit in mini fridges without taking up valuable space, and makes it easier to cut on small prep spaces.

Image Source: https://on.wsj.com/2uyJIab

Despite its usefulness, the square watermelon made such a worldwide visual impression over the years that it only achieved novelty status and is often used as an impressive gift by wealthy Japanese families. After the square watermelon’s success, farmers have molded the fruit to other shapes, but none come close to meeting the initial UX goal of solving the lack-of-space problem. The square shape (the UI) contributes to the user experience, keeping things practical while adding delight.

As long as problems exist in the world, UX design and UI design will almost always have a connection in the solution process. For more insight on misconceptions of UX and UI, take a look at the comparison list designed by Erik Flowers, Principal Designer at Intuit: http://www.uxisnotui.com/