If you dabble in both UX and UI, you might have heard this familiar question: “What’s the difference between UX and UI?”

It’s an interesting question and one that can be difficult to explain in technical terms. I find one of the easiest ways to explain the difference is to use a real-life example.

Let’s Build a House: UX and UI Explained

Here’s an analogy that I found to be effective when explaining the difference between UX design and UI design.

Understanding the Residents

Let’s pretend that you’re building a house for someone. The first step is to figure out the basics. How many floors? How many bedrooms? Backyard? Basement?

The answers to these questions will vary a lot, depending on who will live in the house. If you’re a family of 4 with dogs, the ideal house may look different than if you’re an older couple with an avid gardening hobby.

In product design, this is where the role of a User Experience (UX) designer or a UX researcher starts. UX designers need to learn about who the users are in order to provide solutions and experiences that the users will find beneficial and easy to use.

Laying Out the Blueprints

After you’ve answered these questions, you can start drawing up blueprints of the house. Blueprints show the layout of the house, as well as where you expect things to be. They show where the walls will be, what the electrical plan is and how the water pipes will be laid out.

Going over the blueprint ensures that everyone is on the same page. You might even find that what you imagined the house to be is completely different than what the owners want. You may learn more about the people that will live in the house and find new constraints.

When you start with a blueprint, iterating is much faster and cheaper. Not only is building the actual house more time consuming and costly, you’d also be in big trouble if changes needed to be made!

This is the same for design. UX Designers often start with low-fidelity wireframes. These could be pen or paper sketches or simple black and white mockups to show the layout and elements. It’s important to get feedback at this stage, so you don't run into costly reiterations in production.

Implementing the Final Touches

Once the house is on the way, you can start working on the look and feel of the house. You can create mood boards or collect inspiration on what you want the interior design of the house to be. At this point, there should be little or no changes to the foundations of the house, like knocking down the wall or deciding where the bathroom should be.

In product design, that’s where a User Interface (UI) designer comes in. UI Designers put the skin on the wireframes. They take care of the aesthetics, including font, color and illustrations. Once the design is at this stage, big changes like changing the layout should be minimal.

Working Together

In theory, the UX designer oversees figuring out more about the user and setting up the foundation, while the UI designers oversee the look and feel. In actuality, UX and UI designers often work closely together to bring the final product to fruition. Having insights into users will help UI designers make aesthetic decisions and understanding the intended look and feel.