1 THE DIFFERENCE BETWEEN UX & UI DESIGN

Between
The Difference

UX & UI Design
 Although we interact with a staggering amount of
products and interfaces on a daily basis, we often
forget how much planning and research goes into
the design of our favorite websites, devices, and
other products. The key to creating a product that
THE DIFFERENCE BETWEEN UX & UI DESIGN

not only fulfils its purpose, but also delights its

users, is great UX and UI design.
2
 Definition of UX design
UX design (or user experience design) is the process of enhancing user satis-
faction and loyalty by improving the ease of use, accessibility, and pleasure
provided in the interaction between the user and the product.

Definition of UI design
UI design (or user interface design) is focused on the design of the actual
interface that a user interacts with, in order to accomplish a desired goal.

What is the main difference?

THE DIFFERENCE BETWEEN UX & UI DESIGN

While UX focuses on making useful, useable, and desirable experiences, UI

focuses on making beautiful, elegant, intuitive experiences.
3
 What does a UX designer do?
A UX designer’s primary focus is on the overall experience, emotions, and
perceptions; what does a user need and want from the product, what turns a
user into a return visitor, and what makes them drop-off or use a competitor
instead?

Below you’ll find the tools, strategies and processes used by UX designers
during product development:

User research
User research can be carried out in different ways, e.g. interviews, question-
naires, or focus groups, and the desired goal is to get to know your user and
to understand who they are and what is important to them.

Wireframing
THE DIFFERENCE BETWEEN UX & UI DESIGN

A wireframe can be created either with pen and paper or using an online
tool such as wireframe.cc. To begin with, the wireframe should be a very
basic blueprint of the site, to ensure that the space on the page is allocated
correctly, and that the layout is intuitive even before adding details such as
4
 images, text, and colors. When you’re starting out on a project, the wireframe
should be considered a work in progress that can be easily adapted based on
feedback from test users. The wireframe will eventually form the basis for a
working prototype.

Prototype testing
A prototype is a testable simulation of the product. The prototype can be cre-
ated using software, without the input of a web developer, and it should show
whether the layout of the site is intuitive, but also if the interactive elements
of the site behave as the user expects.

A/B testing
A/B testing can be used to test many elements of a live website, but the prin-
THE DIFFERENCE BETWEEN UX & UI DESIGN

ciple for any A/B test is the same. In order to see a direct correlation, it makes
sense to test only one feature at a time, e.g. changing the color of the call to
action button (CTA). Users are split into different groups, and each group sees
different versions of the site. Key performance indicators are measured to see
which version performs better.
5
 Usability testing
Usability testing involves observing and listening to a user as they use the
site. It is important to encourage them to think out loud as they navigate
and try to reach their desired end goals. Even with a small sample group of
around 5 users, a usability test should successfully highlight any usability
problems.

Overseeing development
An important part of being a UX designer is making sure that the final prod-
uct closely resembles the UX recommendations, by working closely with prod-
uct managers, UI designers, and developers. Bear in mind, it may be more
difficult to push for UX improvements with an established product.

Analytics and tracking goals

THE DIFFERENCE BETWEEN UX & UI DESIGN

Once the product is live, it is important to check key indicators such as

bounce rate, click-through rate and conversions to ensure that it is perform-
ing as hoped, and if not, to identify users’ pain points. Tools such as Session-
Cam can show how real users behave on the site when not in an unnatural
6
 situation, and show at which point users leave the site, or how long custom-
ers spend on the site before converting and what content they look at.

Iteration
Every successful website has gone through umpteen iterations, and it is of-
ten said that a UX designer’s work is never done. The process of continuously
testing and improving is an important part of a UX designer’s role.
THE DIFFERENCE BETWEEN UX & UI DESIGN
7
 What does a UI designer do?
A UI designer is responsible for elements of the overall product design, which
are related to how it looks and feels. He or she will also refine design ele-
ments to ensure good responsiveness and interactivity through the following
processes:

Maintaining brand consistency

An important task is making sure that the site looks good and can be recog-
nized by its branding. This can mean making sure style guidelines are fol-
lowed, such as fonts, colors and sizes, as well as using appropriate logos.

UI prototyping
A UI prototype is a nicely-designed simulation of the site, which developers
can then build. The UI prototype should be based on the findings of user
THE DIFFERENCE BETWEEN UX & UI DESIGN

experience research, but also incorporate attractive graphic elements and use
the company’s branding, again to deliver consistent messaging.
8
 Adapting content for different devices and screen sizes
Responsive design, or adaptive design, also falls under the remit of the UI
designer. This means that depending on the device type, e.g. touch screen,
and the screen-size, the user will see different versions of the site. Using
either adaptive or responsive design is not only important for user experience,
it will also help a website to rank higher on search engines.

Demonstrating interactivity and animation

Animations can help to show the interactivity of a website before it has been
built, as well as demonstrate design features which are part of the flow, e.g.
menus and screen changes.

Implementation with developers

THE DIFFERENCE BETWEEN UX & UI DESIGN

The final role of a UI designer is to work with developers and product manag-
ers while they build the product.
9
 Now that you know what UX designers and
UI designers actually do, why not learn more
by signing up for our free, 7-day UX design
10 THE DIFFERENCE BETWEEN UX & UI DESIGN

or UI design course? The course includes

daily tips and short assignments to get you
thinking like a UX or UI designer.
 CareerFoundry
CareerFoundry is the number one community
for developing your career in tech. Since 2014,
we’ve helped more than 4,500 people from 82
countries improve their careers and change their
lives. Our globally-accessible, online mentored
11 THE DIFFERENCE BETWEEN UX & UI DESIGN

courses transform beginners, upskillers and career

changers into professionals in iOS development,
UI design, UX design, and web development.
12 THE DIFFERENCE BETWEEN UX & UI DESIGN

www.careerfoundry.com