Introduction to UX Design

What Is UX Design?
As technology continues to adapt and grow across industries, companies are increasingly
seeing the value in user experience design (UXD). Whether they’re building in-house UX
design practices or hiring outside consultants, these companies understand that you
can’t build a successful product without focusing development around the needs of
users. As such, UXD can be a great entry point into technology-based work, and there are
growth opportunities from the ground floor up into executive-level positions, so let’s break
down what UXD is and what kind of practitioner you might be interested in becoming.

Even if you’re unfamiliar with the term “user experience,” you come across UX multiple
times a day. In fact, you’re (hopefully) enjoying our user experience design as you read
this article. A team of people worked together to figure out the best way to present this
information and other relevant content. Depending on where you’re reading this, there are
probably links at both the top and bottom of the page that provide you with easy ways to
navigate the site. Maybe there’s also a way to search the site in the top right corner of the
screen. All of that was researched, planned, and visualized by UX designers.

The term “user experience” or “UX” might sound a bit complicated, but it’s simply the
experience someone has when they use something, whether that thing is:
● A product (like an app, a website, a car, or an electric teapot)
● A service (like making an in-app purchase, reserving a hotel room, renting a car, or
returning your malfunctioning teapot)
● A system (like the App Store, a hotel’s reservations platform, a car rental portal, or
a teapot company’s automated help center)
So, when we talk about “user experience design” we’re talking about the planning and
depiction of what people will see, do, and feel when they use a digital product. UX
design involves user research, information architecture, interaction design, usability
testing, and visual design.

Let’s break those down one by one.

User Research
Before you start thinking about what your product is going to look like, you’ll need to know
why you’re building it, so you should start with user research: talk to people and find
ways to help them. Ask:
● What problems do they have?
● Who, specifically, has those problems?
● What, if anything, are they currently doing to solve those problems?
● How satisfied are they with those solutions?

Knowing these sorts of things is crucial in order to design good experiences. In the same
way that you can’t make someone’s favorite dish if you don’t know what it is, you can’t
design a good user experience if you don’t know what users want and do. User research
will help you figure out solutions that align with your users’ problems and natural
behaviors.

Information Architecture
Information architecture (IA) is how you organize those solutions and ideas you
uncovered in the research in a way that makes sense to your users. Good user research
will have given you a clearer sense about what should go into the product you’re building
— its content, in other words. Once you decide what should be there and what shouldn’t,
you can organize that content into groups that will eventually become your app or
website navigation.
 Instagram’s iOS app home screen.

In the example above, we can see a version of Instagram’s previous interface. The IA here
consists of four main content sections:
1.) Header: camera, IGTV, and direct message
2.) Stories
3.) Feed
4.) Tab bar: home, search/discover, new post, activity, settings

And those main sections have additional content beneath them as well. If you tap Activity,
for example, you would have seen tabs for Following and You.

As an outline, that IA could look like this:

1. Header
1.1. Camera
1.2. IGTV
1.3. Direct message
 2. Stories
3. Feed
4. Tab Bar
4.1. Home
4.2. Search/Discover
4.3. New Post
4.4. Activity
4.4.1. Following
4.4.2. You
4.5. Settings

Interaction Design
After you’ve figured out your IA, you’ll want to plan how all the sections connect to each
other. That’s where interaction design (also known as IxD) comes in. IxD is how all of the
content and interactive elements in a product work together to help users carry out
specific tasks. At this point, you’ll take your IA and begin to lay out where everything
should go (e.g. in the header, in a slider menu, or throughout the main content area) and
what it should do (swipe, push to a new screen, animate, etc.), keeping in mind that you
need to make sure interactions and navigation are as intuitive as possible.

Tip: This is the stage when you’ll start to create actual screens, but you’ll want to stay as
fast and flexible as possible because you’re still figuring things out. Sketches or wireframes
will work best here.
A whiteboard sketch for a website
 A wireframe for an app

Usability Testing
Once you’ve settled on the right interactions, it might be a good time to test how well your
designs solve your users’ problems, and there are many ways to do this. One of the more
popular methods is by putting wireframes together into what’s called a “clickable
prototype” and watch as users try to complete certain tasks. This is what’s known as
usability testing. That is, you’ll be testing how usable your solution is.

In many cases, it’s ideal to start testing right after the IxD phase. It’ll allow you to catch
mistakes sooner in the process and fix them more easily. Since testing can often reveal
major flaws in a design, it’s best to do it while your design is limited to sketches or
wireframes. Otherwise, you might need to make big changes to something that you’ve put
a lot of visual design work into, and that means losing time making changes in addition to
time wasted on premature visual design.

Visual Design
After you’ve gotten user feedback on your designs, it’s time to incorporate that feedback
and figure out what your product is going to look like. Visual design defines the layout
grid, color palette, type styles, consistent spacing between elements, appropriate
icons, and the tone and positioning of photos and illustrations.

A visual designer might also maintain a collection of design elements in a “design

system” library where team members can access the most recent styles for a project. Or
they might write out style specifications for a development team and provide assets (like
icons and other imagery) in a way that’s optimized for whatever they’re building. For
example, iOS doesn’t currently support the use of SVG, so if you’re the visual designer for
an iPhone app, you’d save your images as PNGs or JPGs. Additionally, you’d save them at
different sizes since some iPhone screens are higher resolution than others.
 A basic design system

UI Design
Visual design is closely associated with another term you may have heard: “UI” or “user
interface” design. In UX design, an “interface” is what users use to tell computers what to
do. For an app, the interface consists of all the screens people use when they’re using the
app. For a website, the interface consists of the pages they click through in their web
browser. For a smart speaker like Google Home or Amazon Echo, the interface is the
device’s microphone and speaker. UI design, then, is the process of defining and
depicting how people will interact with a computer.

Usually, a UI designer will be an expert visual and interaction designer. With the growing
popularity of voice-activated assistants, however, VUI (or, voice user interface) designers
will also need to be comfortable with writing clear, engaging, and conversational dialogue.
Regardless of the medium, UI design is an important component of UX design.

Generalists vs. Specialists

Now that you’ve walked through the UX design process from end-to-end, you can start to
think about which parts of that process sound the most interesting to you and decide to
pursue one of two approaches: being a generalist or a specialist. A generalist will be
comfortable with the entire gamut of UX design tasks and activities. They’re able to
oversee the process from start to finish and dive into individual tasks when needed.
This is especially helpful in smaller companies where most employees are asked to do
many different things. However, generalists are sometimes viewed as being less useful to
larger companies that have the staffing resources necessary to allow people to focus on
specific aspects of the design process.

Large companies, for example, might have a team of specialists (UX practitioners who
focus on a single aspect of UX design) dedicated solely to user research and others who
are strictly UI designers. Specialists will build up years of expertise in a single area of UX
design and find it easier to stay updated on their specialty’s latest trends and tools.
Generalists, on the other hand, need to spread themselves across multiple disciplines and
will find it harder to keep track of innovations within each discipline.

For more senior roles, however, companies will often look for “T-shaped” designers:
people who are knowledgeable about the broad spectrum of UX activities and have a
specialty like UI design or UX research. You might also be able to market yourself as an
“M-shaped” practitioner: someone who has a UX-specific specialty as well as other
indirectly related skills like writing or front-end development.

Either way, it’s helpful to familiarize yourself with the entire UX process, so you’ll know
how your work affects and informs everything else.

Industry Outlook
The practice of UX design is constantly evolving to keep up with technological
advancements because it’s important to keep human needs at the center of the things we
create. And now, with the relatively recent introduction of artificial intelligence and
machine learning into digital products and their combined ability to reshape the ways in
which we interact with information and each other, it’s an exciting and critical time to
become an advocate for good, human-centric user experiences.

Written by Laurel Hechanova

Laurel Hechanova is the co-founder of Goodmaker, a studio
focused on improving design organizations and developing design
leadership.