UX Design 101 for the Slightly Curious

Jiorhan Kasan
DVT Software Engineering
9 min readAug 3, 2021
Photo by Sigmund on Unsplash

A quick Google search of ‘UX Design’ and you’re exposed to a minefield of definitions. Some, I’ll admit, are quite good at explaining what it means. Many, however, contain definitions like “a series of interactions that supports human behaviour through their interactions of digital products, and….”

I have been exposed to User Experience Design for a few years now, and not even I know what that really means. So, to get into the swing of things, I’m going to talk a bit about the backbone of User eXperience (UX) without the overuse of jargon. If you have heard of the term UX and want to know a little more about it, or if you’re curious about the field, then this is for you.

I will spare you the statistics of why User Experience Designers are needed (because we’re awesome, and what we do helps other people navigate their digital lives a little easier), but companies have discovered that hiring a designer for their team enhances the profitability of the company itself. We also provide a link that makes people want to interact with products and companies more.

UX is not UI

This statement is true. Design is not about making things pretty; it is about making things that work. Not that we don’t get our artistic skills out now and then. A quick overview of UI is this:

Lukáš Straňák — Spotify Redesign — Moods (prototype)

The easy navigation from one place on the screen to another that almost feels intuitive took a lot of consideration. This is User Interface (UI) design.

Every element from image placement to the text size and font was designed to be swiped through without much effort. Designed with much intention, that is.

Without these intentions, it is easy to make design choices like this one:

Example of bad UI Design

I can 100% affirm that I would press cancel every time because I would see the colour green before I read the text, thinking that it was ENTER, thereby standing cashless, frustrated, and impatient.

But before we get to anything remotely visual, we first delve into understanding what we’re designing and who we are designing for.

1. Research is crucial

Your grandma, who is 98 and probably still has a wall phone, might experience and interact with technology differently than you would (unless you have a tech-savvy grandma). Needless to say, after that, who you’re designing for makes the world’s difference. People have different quirks and preferences. We cater to those differences. How? By doing effective research.

Research is more than just statistics (quantitative research); it is also about how people feel. The best way I have discovered in doing this is to ask them. There are many ways of doing that:

· Interviews

· Observation

· Opinion polls

· Surveys

Photo by CoWomen on Unsplash

Interviews are a personal favourite of mine. The action sounds interrogating; however, all you do is chat with people; ask them about their day, how they feel about something, and what their experience of something is. You could compare it to what Reddit does — when someone asks a question. People are generally more than happy to answer.

People often have strong feelings and opinions about certain things, and they are keen to share those opinions.

Each research strategy has its own benefits. The benefit of chatting with people is that the answers they give you are very rich and descriptive. We call this qualitative research.

However, interviewing people is time-consuming if you need short answers. In this case, a survey works better, especially when you need short, numerical, or yes-and-no answers. This works particularly well when you need that information from many people in a short time.

The strategy here is to consider your scenario and what you want to find out, then work from there.

Research can be done through many phases in UX. Don’t be afraid to delve back into the research if you want to update the information, if you discovered something new, or if you just need a reference.

2. Personas are personal

Remember your grandma who still uses a wall phone? While we’re on the topic, did you remember to call her back?

This scenario might not even apply to you, but adding an imaginary human to the deal makes the scenario more relatable. That is the purpose of a persona. It is creating a fictional character generally collating the people you have interviewed or studied.

Personas are useful because they collate a lot of information into a structure that is easy for anyone to understand and read. It also humanises the information you have — thereby keeping you on track with who you’re designing for. Here is an example:

Melvin Lim — A Better Grocery Shopping Experience

In addition to giving yourself — and whoever is reading your work — better context for your case study, personas are also awesome because you can get creative with them. Just be sure to stay relevant. If you want to help people with their shopping experience, it is okay to think of Ash from Pokémon as a reference (but not as your research) and turn him into a 30-year-old shopper.

Personas also help you remove yourself from the equation. So if you prefer ordering food online rather than doing grocery shopping, you can still do great design work for people who prefer the latter.

3. Define a problem

Initially, I thought, “as you are solving a problem, remember to plan ahead.”

And then I realised… I don’t really know what problem needs solving. At this stage, you might not yet either.

People say that design is glorified problem-solving. I have a counterargument against the use of the word ‘problem,’ because of its negative connotations. (Houston, we have a problem. And suddenly people in the building are panicking!)
But in UX, a problem merely refers to that which you’re trying to design for or improve. The design itself is referred to as the solution.

For example, Betty loves grocery shopping, but we’re in the middle of a pandemic, and grocery-shopping apps suck. So how can we make them better? While we can’t solve for living in a pandemic, we can solve for a better app experience. The bad app in this scenario is the problem.

We can even go further: What about the app is the problem? Are deliveries delayed? Does the app not allow certain card types for transactions? Does the app not work?

Our research — what people have told us, and what we have collected — will answer those questions. Once we have the answer, we have a defined problem.

4. Plan ahead

If the app doesn’t work, the solution seems simple: Make an app that works, right? But how do we do that?

The how is why planning ahead is necessary. It is also a time-saver in the long run.

UX provides a multitude of ways to do this, including:

· User stories

· Customer journeys

· User flows

· Site maps

For all of these — and for all UX — the person who uses your product is defined as a user. Apple might employ you to implement a design solution, but the company is not the user. The users are the people who buy and use the Macs and iPhones. If they are not satisfied with the product, they might stop buying it.

The actual job of the designer is to discover why they are not satisfied and then solve for it, by delving into research. Research is something that you use throughout the entire UX process. This is how it all comes back full circle.

If your planning is in place, using any number of methods, then we get to the fun part: The visuals. Bear in mind that there are many ways of planning your design. Feel free to explore as many as you can. Each is scenario-specific. Your design solution might incorporate all of these for planning, or only a few.

5. Colours, fonts, and buttons all mean something

If this was any other site besides ad-free Medium, I would have bet that your first impulse was either to click on the button and see where it takes you or — because of ads that populate websites these days — you felt a surge of annoyance seeing it. Either way, it triggered a reaction in you.

Humans are creatures of habit. Designers consider these habits when creating elements. Once you have your solution in place and have developed a structure for it, we get to the visual part: User Interface Design. The process of making our solution both visually appealing and easy to interact with.

How do we know what is visually appealing? Well:

All designs have principles. UI is no exception. Gestalt psychology is a great place to start. There are millions of articles on this topic.

Gestalt UI Principles

This is useful when designing pages to relax your user, have them engage, have them take a specific course of action, and so on. Visual design can become a debate because it is subjective — but I will list a few points that all designers can agree on:

· Researching UI Designs and mockups — this is very fun to do. When I was introduced to Pinterest, I was told, “you will get lost in the dark corners of it.” There are many lovely designs to choose from. If you haven’t heard of it,

Human Interface Guidelines (https://developer.apple.com/design/human-interface-guidelines/) and Material.io (https://material.io/design) can guide you with considering iOS and Android structures when designing.

Other things to look into are:

· Considering your brand — the company colours, logos, fonts and images of your client are important. The good part about this is that you get to limit yourself — which is a time-saver that allows you to establish a good structure when designing visual elements.

· Considering who you are designing for — If you are reading a letter that Hagrid wrote Harry Potter, his ‘handwriting’ is not much to consider. But reading that font for a prolonged period on a screen would be severely irritating because, after a while, it becomes difficult to read (which I suspect is partly why Medium does not allow for font choices).

Bear in mind, however, that different audiences have different preferences. A 12-year old’s eyes might not be strained by the font or irritated by its inconsistency. Your research, personas and planning all point to who you are designing for.

· Choosing a point of focus — Hierarchy is life. What is the most important information? What do you wish the user to see first? More importantly, why should they see something first?

Mina Lima, The Daily Prophet™ draft, Début Art

In the example of a newspaper, the headline is more important, because the IMPENDING DOOM (or impending celebrity gossip) will invoke the reader to continue the article.

A video game, on the other hand, might want the START button to stand out because the user needs to act. Reading information is secondary to pressing that button. Video games, after much practice, feel instinctive. The same applies to apps. Let human habit be a point of reference.

The point of focus influences the rest of your design. Hierarchy creates structure. A structure allows for the rest of your design to flow more naturally.

Before you know it, you have a seamless design solution, that supports the complicated definitions of User Experience Design, and that makes the user happy and their interactions with technology — and thus their interactions with day-to-day life just a little more convenient.

--

--