UI vs UX… What’s the difference?

UI, UX, and all that jargon is quite new to me. While I’ve been hearing about it for a while, I’ve avoided using it in conversation for fear of using it out of context. So without jumping on the buzzword bandwagon, I’ve found an analogy that I’m able to understand. Tomato sauce (for us Aussies)… or Ketchup!

The original Heinz ketchup bottle was designed to be a showpiece for the brand. It has since become an icon of packaging around the world as the clear glass container was a statement of transparency, quality and trust 100 years ago. As iconic as it was, the design of the bottle did not take into consideration the experience that sauce lovers encountered; having to try and brace other condiments around the bottle if you wanted to sit it upside down to get the last bit from it, without the bottle itself toppling over. If that didn’t work, you had the iconic ‘palm-of-the-hand slap’ on the bottom of the bottle, which resulted in glugs of sauce in unwanted places.

Now consider the newly designed (2003) ‘top down’ plastic bottle above. The design has taken into consideration the use of the product and how to solve the age old problem of a whole bunch of sauce left in the bottom of the bottle. Due to the branding itself not changing that much, the recognition of the product and the visual footprint still beats strong, while the experience and interaction with the product has improved dramatically.

UI = Glass bottle, iconic, beautiful.
UX = Functional bottle, still recognizable as the brand, better experience from the product.

Adapted from the new code.