3 ways to demystify UX is to think about emotions, umbrellas and airports

Recently I have had to, on multiple occasions, explain the difference between UX, IA, UI, and ID etc. I have observed, for some people, this field is shrouded in mystery and I hope this post dispels confusion and creates clarity for you.

For someone who is new to UX, I think it can be a confusing service to buy. While UX is increasing in awareness and value, emerging technologies and transmedia trends are creating conditions that I hope will force a reboot for how this field practises its practice, and how it communicates its service to people who need to buy it.

With experience in the field comes greater value. And I think practitioners in this space are keen to demonstrate their value to gain more experience, especially if a prospective project offers an opportunity to revolutionise the traditional UX process (equals kudos).

Until your key decision makers (senior leadership team) are familiar with the process and why it works, or until they agree on how it could work better, a killer project can come to a stand still – leaving your opportunity wide open for a competitor.

My first key learning: Differentiate UX from UI

I think the first thing you need to do, is understand how to differentiate between UX and UI. Here are three explanations that make sense to me:

1.0 – Emotions versus pixels (courtesy of Arturo Toledo)

UX Design – Emotions

User experience (UX) is about how your users perceive your website, application, product, etc. If they have a good experience, they’ll like your company and your message, service, or product. If not, they’ll probably go somewhere else.

UI Design – Pixels

User interface focuses on the actual elements that interact with the user – basically, the physical and technical methods of input and output. UI refers to the aggregation of approaches and elements that allow the user to interact with a system. This does not address how the user reacts to the system, remembers the system and re-uses it.

2.0 – The Umbrella (Coutesy of Todd Zaki Warfel)

UX (User Experience) is an umbrella term that refers to pretty much any activity/discipline associated with product or service design. This can include: User research, Usability testing, Information architecture, Interaction design, UI design, Visual design, Prototyping, Development, Experience and content strategy, Service design and delivery.

UI design is an activity/discipline that focuses on the way someone interfaces with the system—graphical, physical, or otherwise. UI is an activity/discipline that is part of the UX umbrella

3.0 – Airports (Coutesy of Jason Putorti)

User experience design would encompass every interaction from taking a ticket from the parking structure, to walking from your car to the terminal, to checking into your flight, to checking baggage, to walking through security, to grabbing some food, to boarding your flight. Whoever is in charge of the airport experience, needs to consider all touch points. The airport in this case is considered the system.

User interface design, would be designing an interface for the ticketing machine that prints out your boarding pass.

My second key learning: Know the studies

My second key learning was to understand the studies in this field (and how/why they fit together). Be careful if you ask a practitioner to explain the differences, as each person in this field has a different perspective (created by the discipline they studied, their learnings from how they arrived into this space, and the types of projects they have previously worked on).

As an overview (courtesy of Barton Smith), here are a few of the studies and fields in this space:


    • User Experience Design – how the user thinks and feels
    • Information Architecture – how the system is organized
    • User Interface Design – how the content is organized
    • Interaction Design – how the user and device act and react
    • Visual Design – how it looks

Some or all of the above studies can be applied across of the following fields:

    • Architecture, when related to buildings
    • Interior Design, when related to internal spaces
    • Industrial Design, when related to tangible objects
    • Graphic Design, when related to text and images
    • Application Design, when related to digital I/O
    • Web Design, when related to the browser

For the more visual (and not 100% accurate), here is a way to imagine how these studies and skill sets cross over each other (courtesy of Dan Saffer)

My third key learning = map an ‘arm rail’ process

My third key learning was to understand the process and use it as an arm rail (not a bible). Common challenges to map a process include:

  • How to find your way in (and out) without getting confused?
  • How to map a process that works for your project?
  • How do you know, what thing should happen next?
  • How many different specialists are needed?

It can be tricky to navigate this space and end up with exactly what you need. On a limited budget it can be frustrating and confusing, which is why it is common place to hear people say: “let’s just build the wireframes, throw on the designs elements, and let’s get on with it”.

Depending on the complexity of your project and its budget, I think this approach can bring your project to its knees. Especially if you build wireframes and realise you need to change everything and start from scratch. It can be expensive go back to the drawing board if you have already spent your wireframe allocation to build a set of wireframes that were not UX tested. I think this is why there are so many websites on the internet that last a few months and die from lack of users.

Here are a couple of interesting ways to see the process as a visual diagram. These were made a couple of years ago, however they are helpful to get your head around the basics elements. I suggest you use them as an ‘arm rail’ to help craft your own process that would work best for your project.

This image below is Peter Morville’s UX treasure map (it links to a comprehensive explanation of each symbol and how to build each part). I like this visual because it depicts the exploratory nature of this field.

This image below is a UX process tunnel by . While it is different to treasure map above, it provides a neatly packed process for how to to get from one end to the other.

I have learned that it is important to acknowledge there is no ‘one’ process map to follow. The best practice is to tailor a process map specifically for your project.

The houses that last the longest are innovative with material, design and usability (often the most expensive and take time). Whereas the houses that do not stand the test of time are not innovative with material, design and usability (and are cheap to build and happen super quick) – i think of these as package homes built from a cookie cutter mould.

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s