An Introduction to UX/UI
Guides
S.T. Church
Mar 03 2025

When first building this website, I designed a quick and simple navigation system for my project portfolio. This resulted in the creation of the category buttons for streamlined navigation. Each category was and is designed to reflect a skillset in my marketing repertoire. There however was one specific category that was missing from my catalogue, UI/UX design. Now this wasn’t due to a lack of UI/UX projects or a lack of value for UI/UX, rather it was a decision steeped in a flawed thought-process: Designers should always consider UX, so having UX examples was monotonous.

I still believe the user experience should be considered as an extension of design relationships. However, what I now understand is that it is not always apparent that either:

1) The designer has an intention to consider the user. (hence a lack of empathetic design)

2) The customer has a strong grasp/value of what UX design is.

Additionally, some projects are more suitable to showcasing successful UX design. Projects that encourage interactivity highlight good/bad UX design compared to something like a poster that was created as part of a branding initiative. For business owners, the concept of UX can be somewhat mystified. The nature of human relationships is not wholly lost, but the concept of UX is often boxed with highbrow design practices.

Coming from an empathetical point for a business that is trying to cut costs, it becomes easy to see UX as a superfluous service. In response, I would like to take this opportunity to demystify UX and show how pivotal it is to any good design process. This is not meant to be an exhaustive study of UX design; rather it is an introduction for business owners who are looking to understand how UX fits with their current agenda.

So What is UX?

Simply put, UX is short for User Experience Design. It defines the process in which designers use to create products that provide meaningful and relevant experiences to the user. Generally speaking, when you read a book on UX or look into research UX, you’ll find material that often focuses on development for some kind of interactive medium, whether that be an app, website, or even a game. However, from a purely conceptual level, every design has some level of interaction between the designer and the user. By understanding the motives of said user, you are delving into UX design.

For instance, outside of interactive media, UX is very important to branding. When we consider popular brands, the level of consistency of marketing, the experience associated with the brand and the general feel of the brand all aid in how we interact with said brand.

Consider Wendy’s social media marketing. The bold comical responses of ‘Wendy’ created a personification of the brand that helped young adults and teens relate to the brand. This resulted in more brand related discussion and led to sales for the company. The user perception of the company cannot be denied when considering the social media interaction, regardless of whether it was a direct interaction with the service itself. Thus social media became a conduit for interaction with the company. I use this example in particular to stretch the concept in how we consider UX.

Business owners may percieve UX design as something in the realm of designers in a white room moving around sticky notes as they try to find the best way to convince customers to buy a product. This is a a gross generalization. UX design can be as natural or controlled as the team defines; what defines UX design is the consideraton of the user; with a strategy, scope, structure and skeleton put in place to build the product with the user in mind.

What makes UX?

UX design is interested in the feel of the product. How does a user interact with a product and how does it influence their state of being. To put it bluntly, UX design is the marriage of design thinking and empathetic design. I would argue that bad UX design is trying to fit a square block (the user) into a round hole (the design). Good UX concludes that the hole itself should be square. This isn’t to say UX is a tangible thing; in my prior example I wouldn’t argue that the ‘hole’ isn’t UX, rather the process that dictates how we process the block. This is where UI comes in.

What is the relationship between UI and UX?

Oftentimes when you see the term UX, UI is not too far off. This is due to the inherent relationship between UI and UX. If the User Experience (UX) is about the overall feel of the product, The User Interface (UI) describes how the product is laid out. You may consider UI to be the elements of the design that are in some way tangible, whether it be an interactive design, visual form, layout, or branding. UX then would be the concepts that construct these forms, say like storytelling, engagement opportunities, objectives, and usability.

For the designer, UX considerations inform UI. Once a designer has considered UX, this will influence how the UI is constructed. For the user, UI informs the actualized user experience. It can thus be concluded that the UX/UI relationship is cyclical. A good UX/UI designer will use various tools and techniques to inform UI layouts using UX principles. Testing would then identify the weakness of the UI elements by how it affects the user’s experience. A well-engineered product might go through multiple cycles of planning, development, and testing before the product has been optimized for public use.

Understanding UX Tools.

You may be familiar with the different types of research methods associated with UX design. On my service page I list a few: interviews, competitive analysis, user personas, empathy mapping, etc. The purpose of these testing methods is to illuminate aspects of the user experience that may be otherwise hidden. This helps the designer break past his/her own limited perspective and see things from the user’s perspective.

Through the use of UX thinking, a company can avoid potential user related issues that can make or break the design. Let’s quickly go over some of the various research methods in the UX designer’s tool belt.

“Empirical discovery is the only really good way to obtain this information. To get a design started, you’ll need to characterize the kinds of people who will be using your design (including the softer factors just mentioned), and the best way to do that is to go out and meet them.”
Excerpt From Designing Interfaces, Second Edition, Jenifer Tidwell

UX Research

Direct Observation

Having direct observation of a user interacting with your site or responding to an interview gives the most tangible look into a user’s world. The designer can get a real feel for what the user cares about, their aspirations, and their patterns and behaviors. This kind of research moves the designer from conceptual thinking to having palpable results. The various forms of direct observation are considered qualitative data because they are more considerate on the richness of the data over the quantity.

Case Studies

As Tidwell describes ““Case studies give you deep, detailed views into a few representative users or groups of users. You can sometimes use them to explore “extreme” users that push the boundaries of what the software can do, especially when the goal is a redesign of existing software.” Case studies are a structured form of direct observation that give the researcher anecdotal evidence to support a frame of thought relative to a design decision. While it may initially seem unwise to consider anecdotes as part of a design decision, it is important to recognize both qualitative data with quantitative data when designing for a user.

Surveys

A less direct form of intelligence gathering, surveys are method of collecting information from a large assortment of users in a reasonable time period. Surveys offer statistical quantitative data; when partnered with various qualitative data, the designer gets a more holistic understanding of the targeted demographic.

User Personas

In Jon Yablonski’s book “Laws of UX,” Yablonski describes User Personas as a technique to help solve problems based on real needs. Yablonski states “Personas are intended to foster empathy and serve as memory aids, as well as to create a shared mental model of the traits, needs, motivations, and behaviors of a specific kind of user.” User personas move the designer away from “self-referential thinking.”

Yablonski leverages the user persona as an extension of Jakob’s law, which dictates “Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know.” User personas help us uncover what expectations and tendencies a user may expect.

Empathy Maps

An extension of the user persona, empathy maps allow the designer to consider pain points for the user alongside opportunities. By considered how a user may think, feel, say, and do, the designer captures a glimpse into what needs that user may have in his/her day to day.

This tool allows the designer a way to advocate for the user they are designing for. It also helps the designer understand the user on a more personalized scale, by going past simple consumption habits to the usability and productivity a product provides for the end user.

Journey Mapping

Journey mapping furthers the ideas considered in an empathy map by measuring the qualitative experience the user might have when interacting with the media in question. In regards to Journey Mapping, Yablonski states “Like all design exercises, journey maps can and should be tailored to the purposes and goals of the project and be grounded in research that’s been conducted with real users.”

Journey maps show the process in which a customer might take before being introduced to the app/brand and the onboading process a customer might take once he/she has discovered the app. Such analysis helps to dictate how the app/brand makes a meaningful impact on the users life. It also helps identify onboarding painpoints and opportunities.

Usability Testing

Due to natural bias, it is important to have a form of checks and balances to ensure the product best serves the user. Yablonski states “We’re much too close to what we build to objectively see it and understand how users will interact with it. The best user interfaces are those that have been shaped by observations of real users and their interactions with them. So how can designers shape their work to be more effective?” With usability testing, the designer can effectively capture user interaction. It allows the designer to break out of his/her own bias and develop for the customer and not themselves. It moves designs from serving conceptually to actualization.

So what does it all mean?

If there is one takeaway, I would hope to leave readers with it is this: UX design is a valuable tool for any designer working on a project that isn’t self-serving. The best results for any project comes with a level of research. A business owner shouldn’t expect to do well in a market without understanding it to some level; why would you expect a designer to create a successful product without the same level of understanding?

Understanding UX on a deeper level

UX design blends together psychology with design. If we truly want to understand UX on a deeper level, you must understand people at a deeper level. For a deeper dive I recommend reading Jenifer Tidwell’s ‘Designing Interfaces’ and ‘Laws of UX’ by Jon Yablonski. These books do a great job in describing how psychology plays in UX thinking. I have referenced these authors throughout this introduction, and I feel they are far more qualified to discuss UX design at a more intimate level than I can present in this format.

Interaction Design Foundation - IxDF. (2016, June 1). What is User Experience (UX) Design?. Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/topics/ux-design

Tidwell, Jenifer (2010) Designing Interfaces, Second Edition O’Reilly Media

Yablonski, Jon (2024) Laws of UX, O’Reilly Media

Header image provided Rasco at Adobe Stock

All Graphics used throughout this guide were designed by Storyset at Freepiks