The three faces of a product

Imagine that two friends use the same banking app.

The first says, “I love it. Everything is easy to find, and transferring money only takes a few taps.”

The second says, “The app rejected my transfer because I had reached my daily limit, but I don’t understand which payments counted toward it.”

Both friends used the same product. They are complaining about different parts of it.

The first friend is mostly talking about the user interfaceConcept · lights on your mapuser interfaceThe part of a product a user directly interacts with: screens, buttons, text, forms. Shortened to UI. Narrower than the user experience, which covers the whole journey rather than the surface. and the user experienceConcept · lights on your mapuser experienceThe overall experience of the complete journey: how easy, efficient, predictable, and satisfying a product feels. Shortened to UX. It includes the interface but is broader; good UI contributes to good UX without guaranteeing it.. The second is talking about the rules the product follows behind the scenes, its business logicConcept · lights on your mapbusiness logicThe set of rules that determines how a product should behave in a particular situation: whether a transfer is allowed, which transactions count toward a limit, when a fee applies. Invisible on the screen, but it is the product’s actual behavior; most product debates are secretly about it..

What is the user interface?

The user interface, commonly shortened to UI, is the part of a product through which a user interacts with it.

In a banking app, the UI includes elements such as:

• Buttons
• Menus
• Text
• Icons
• Forms
• Account balances
• Transfer screens
• Notifications

The interface is what the product presents to the user and what the user interacts with to give the system input or view its output.

A clear interface makes it easier to understand what actions are available and how to complete them.

What is the user experience?

The user experience, commonly shortened to UX, is the overall experience a person has while using a product.

UX includes the interface, but it is broader than what appears on the screen. It also includes how easy, efficient, predictable, and satisfying the complete journey feels.

A banking app may have attractive colors, polished buttons, and clear typography, for example, and all of that can contribute to good UI.

But the overall UX may still be frustrating if the app repeatedly asks the user to sign in, makes transfers difficult to complete, displays confusing error messages, or takes too long to load.

A useful distinction is: UI is what the user interacts with. UX is how the entire interaction feels and works.

Good UI can contribute to good UX, but it does not guarantee it.

What is business logic?

The second friend’s complaint runs deeper than the appearance of the transfer screen. It is about the rules the banking product uses to decide whether a transfer should be allowed, and these rules are examples of business logic, sometimes called application logic.

Business logic is the set of rules that determines how a product should behave in a particular situation.

For a banking transfer, the business logic might decide:

• Whether the user has enough money
• Whether the transfer exceeds a daily limit
• Which transactions count toward that limit
• Whether a fee should be charged
• Whether the transfer should happen immediately or remain pending
• Whether additional verification is required

These rules are usually implemented through software code and configuration.

You first encountered this idea in the lesson about input, processing, and output. Business logic often lives within the processing step, where the system uses its rules to decide what should happen.

Seeing the three ideas together

Imagine that a user wants to transfer $500.

The UI is the transfer screen containing the amount field, account choices, and Submit button.

The UX is the user’s complete experience of finding the transfer feature, entering the information, understanding the rules, completing the transfer, and receiving confirmation.

The business logic determines whether the transfer is allowed and what the system should do with it.

All three contribute to the final product, but they describe different things.

A transfer screen could look clear while applying an incorrect rule. The interface may be good, but the business logic is wrong. Or the rules could be correct while the screen explains them poorly. The business logic works, but the user experience is confusing.

Why the distinction matters

In product and engineering conversations, it is helpful to identify what kind of problem is actually being discussed.

Consider these statements:

“Users cannot find the transfer button.” This may be a UI or UX problem.

“Users do not understand why their transfer was rejected.” This may involve UX, especially how the product communicates its rules.

“The system is counting the wrong transactions toward the daily limit.” This is primarily a business-logic problem.

These issues may involve different skills and different parts of the product. Designers may reconsider how information is presented, product managers may clarify the intended behavior, and engineers may update the rules implemented in the software.

The responsibilities can overlap, and team structures vary. But the important skill is being able to describe the problem precisely rather than assuming that every problem is just an issue with “the app.”

The mental model to remember

The user interface is what the user sees and interacts with.

The user experience is the overall experience of completing a journey through the product.

The business logic is the set of rules that determines how the product behaves and makes decisions.

When evaluating a product problem, ask:

• Is the interface difficult to understand or use?
• Is the overall journey confusing or frustrating?
• Is the system applying the wrong rule?

You should now be able to separate how a product looks, how it feels to use, and how it decides what should happen.