User Experience Design (Ux Design) in A Website Development

Mariia Orlova
USER EXPERIENCE DESIGN (UX

DESIGN) IN A WEBSITE
DEVELOPMENT
Website redesign
Bachelor’s Thesis
Information Technology
December 2016
DESCRIPTION
Date of the bachelor's thesis
2 December 2016
Author(s) Degree programme and option
Mariia Orlova Information Technology

Name of the bachelor's thesis
User experience design (UX design) in a website development: Website redesign
The purpose of the study was to implement an approach of user experience for a website design.
Mostly, I concentrated on revealing and understanding the concepts of UX design which include usa-
bility, visual design and human factors affecting the user experience. Another aim of the study was to
investigate people’s behaviour related to web design. The thesis based on a project. The project was to
redesign an existing web design for a company called Positive Communications. They provide differ-
ent kinds of services in the event production industry for big organizations.
The process of redesign was divided into several parts. Firstly, a heuristic evaluation of the old web-
site version was conducted for finding the usability problems in the existing web design. Then differ-
ent UX design methods were implemented to create more accurate web design for the new version of
the website.
The result of the study was a new redesigned website which met the requirements of UX and business
goals of the company. It helps to provide business promotion on the current market and to attract
potential clients for the company.
Subject headings, (keywords)
User experience, website design, usability, redesign

Pages Language URN
53+7 English
Remarks, notes on appendices
APPENDIX 1: Wireframes with new site pages

APPENDIX 2: Redesigned website for Positive Communications
Tutor Employer of the bachelor's thesis
Miia Liukkonen Positive Communications

CONTENTS
1 INTRODUCTION .................................................................................................... 1
2 WHAT IS UX? ......................................................................................................... 2
3 USABILITY ............................................................................................................. 4
3.1 Traditional usability idea ................................................................................... 5
3.2 Usability + utility = usefulness.......................................................................... 6
3.3 Difference between usability and UX ............................................................... 7
3.4 From usability to UX......................................................................................... 8
4 VISUAL DESIGN .................................................................................................... 9
4.1 Typography and fonts........................................................................................... 9
4.2 Color basics ........................................................................................................ 10
4.3 Color wheel ........................................................................................................ 10
4.4 Color temperature ............................................................................................... 11
4.5 Color harmony.................................................................................................... 13
5 HUMAN FACTORS AS PART OF THE UX ....................................................... 14
5.1 How do people see?......................................................................................... 14
5.2 How do people read? ....................................................................................... 15
5.3 How does people’s memory work? ................................................................. 16
5.4 How do people think? ..................................................................................... 17
5.5 How do people pay attention? ......................................................................... 17
5.6 People’s motivation ......................................................................................... 18
5.7 People are social individuals ........................................................................... 19
5.8 How do people feel? ........................................................................................ 20
5.9 People’s mistakes ............................................................................................ 21
5.10 How do people make their decisions? ........................................................... 21
6 UX ACTIVITIES AND PROCESS OVERVIEW ................................................. 22
6.1 Heuristic evaluation......................................................................................... 23
6.2 Wireframing .................................................................................................... 24
7 IMPLEMENTING UX DESIGN ........................................................................... 25
7.1 Beginning the project ...................................................................................... 26
7.2 Applying heuristic evaluation of usability ...................................................... 26
7.2.1 Match between system and the real world ............................................. 27
7.2.2 Flexibility and efficiency of use ............................................................. 28
7.2.3 Aesthetic and minimalist design ............................................................ 29
7.3 Sketching ......................................................................................................... 31
7.4 Wireframing .................................................................................................... 35
7.5 Implementing visual design ............................................................................ 40
7.5.1 Color scheme .......................................................................................... 40
7.5.2 Typography and fonts ............................................................................ 42
7.5.3 Interactive elements ............................................................................... 43
7.5.4 Building and launching the website ....................................................... 46
8 RESULTS ............................................................................................................... 47
9 CONCLUSIONS .................................................................................................... 47
10 BIBLIOGRAPHY ................................................................................................ 50
APPENDICES
1 Wireframes with new site pages
2 Redesigned website for Positive Communications
1
1 INTRODUCTION
User experience design (UX) is a set of technologies which increase user satisfaction
by improving usability and concepts related to interaction between human users and
computers. User experience is a significant aspect in creating different kinds of prod-
ucts and services. The web is one of the most important fields in which a user experi-
ence design is applied. Earlier, companies with a website considered as companies
with a great accomplishment. Nowadays, the most important target in web industry is
not just to have and develop the website, but also to take into account the user experi-
ence. The major questions are: what do people want and need?
UX design is a broad sphere consisting of several components that are its constituents.
UX design includes usability, human factors, accessibility and various kinds of design
and system performance. In my study I will mostly focus on few of them: usability,
visual design and human psychology. Other components will be considered less, be-
cause the aim of the study is to concentrate on understanding and opening the main
concepts of people’s behavior related to web design. Also, the aim is to recognize the
functional and emotional characteristics of a product. Implementing the real user opin-
ion in practical example will help to find this out.
The project was to redesign an existing website for a company called Positive Com-
munications. The company offers a huge range of services in the event organization
industry. My task was to implement a new design for a desktop version of the website.
The website was developed by two persons: me and Nikita Rogatnev. My role was to
create an UX and UI design, and Nikita’s part was to build and launch the website.
The thesis is divided into several main chapters. First of all, background information
introduces the main principles of user experience design in web. Usability concepts,
human psychology explanations and visual design elements are described to familiar-
ize the reader with the terminology and aspects used in the practical part of the thesis.
The study consists of several parts: collecting, analyzing and implementing gathering
information for final results. The main steps in the redesign process were research,
prototype and visual design. A general idea of the UX concept is to understand the
user. There are many types of usability testing, and each of them is suitable for a spe-
cial case. In my work heuristic usability testing is the most effective method. I used it
2
in the beginning of the project. It is useful for collecting information to get the
knowledge about how people interact with a website. It is also a good way of gather-
ing information, because an important part of the thesis is to recognize what the user
experience is and how to implement it in practice. I conducted real-life interviews
with people who have their own company and people who were planning to do that.
The second test was conducted in the end of the project, when visual design was im-
plemented. Finally, I presented a new web design for Positive Communications. The
final part of the thesis is conclusion. In this chapter I described the objectives of the
thesis, overall process of the work, the main results and my feelings about the project.
2 WHAT IS UX?
The description in this chapter about the meaning of user experience in design is based
on the book of Rex Hartson and Pardha Pyla (2012). According to Hartson and Pyla
(2012, 19), user experience is the totality of the effect or effects felt by a user as a re-
sult of interaction with, and the usage context of, a system device, or product, includ-
ing the influence of usability, usefulness, and emotional impact during interaction, and
savoring the memory after interaction. The term “interaction with” is broad and em-
braces seeing, touching, and thinking about the system or product, including admiring
it and its presentation before any physical interaction. Simply said, user experience
design is an umbrella term for any kind of activity that provides better experience for
the user.
UX concentrates on how the overall design makes the user to feel. To create not just
beautiful but also qualitative and well-worked design is why a user experience design
is needed. To achieve positive user feelings during using a website, designers should
understand users’ goals, desires, fears, behaviors and ambitions.
The problem in software development is that the techno-centric practices are more
popular than user-centric ones. Based on a huge number of surveys conducted by the
groups with strong reputation in software production, this is a problem which leads to
unsuccessful projects. The reason is the lack of attention to user inputs.
3
Human-computer interaction is clearly about human behavior and is used to drive sys-
tem design, and human performance is the measurable outcome in using those systems
(Bailey, 1996). Humans is the most likely cause of errors or system failure; the whole
point of human factors engineering is to design the system to take into account the
susceptibility of the human for errors and to design the system to prevent them. The
human user is what he/she is, namely a human, and a design that does not take this
into account is the most likely cause of errors and failures.
In the website design the user experience is identified by not just usability alone. It is
also impacted by more design components that UX design covers. It includes usabil-
ity, utility, design, human factors, accessibility, persuasiveness and others. At least
five of them recognized as fundamental qualities of websites that will affect the visi-
tors’ experience. Picture 1 shows a UX design graphic which shows the components
of UX.
PICTURE 1. Components of UX (Gube 2010)
In my project I will focus on three of them: usability, a visual design and the human
factors. The utility and persuasiveness concepts will be used less.
4
Utility is considered as an independent component in design. It is considered as a fun-

damental element of website design which impacts user experience. Following Rex
Hartson and Pardha Pyla (2012, 16), the utility of a website refers to the usefulness,
importance, or interest of the site content to the particular visitor. Always the same
site will not be interesting for two different people. A single design will result in mul-
tiple visitor experiences depending on variations in the website visitors themselves.
This is why it is always important to design for a target audience in particular, based
on solid knowledge of that audience. (Sb.)
Persuasiveness is an important design aspect. Rex Hartson and Pardha Pyla (2012, 17)
present two examples of persuasiveness, involving the presence, quality, and location
of two types of information: vendor information (e.g., company name, physical ad-
dress and contact information, company history, testimonials of past customers, and
the like) and product information (things such as product color, material, care instruc-
tions, and the like). Website visitors can trust an online vendor, in case they have nev-
er heard of it before, by the evidence they are looking for. The visitors will order a
product, if they can find comprehensive information they needed. A website may be
experienced as fully functional and highly usable in terms of task completion and
when offering just what a visitor is looking for. But if it lacks key aspects of persua-
siveness, such as adequate vendor and product information, potential sales may be
lost. This is not just a loss for the website owner, it wastes the time of the visitors and
foils their goals as well. That is, it impacts their experience negatively. (Sb. p. 18.)
Usability, persuasiveness and visual design are the design qualities that are connected
to each other. Usability and visual design affect the persuasiveness experience, while
visual design can affect the usability experience.
3 USABILITY
Usability concentrates on people, their satisfaction and how they use and understand
things. People change very slowly, while technology changes quickly. The concept is
not just about technology and ease of use.
5
3.1 Traditional usability idea
Human-computer interaction appears when the human user and a computer system
communicate and perform some task together. Usability is a component of human-
computer interaction ensuring that it is effective, efficient, and satisfying for the user.
According to Rex Hartson and Pardha Pyla (2012, 6) usability is the pragmatic com-
ponent of user experience, including productivity, ease-of-use, learnability, retainabil-
ity and the pragmatic aspects of user satisfaction (ISO 9241-11, 1997).
According to Krug (2014, 35) there are a lot of different definitions of usability, which
often break it down into attitudes like:
• Useful: Does it do something people need to have done?
• Learnable: Can people figure out how to use it?
• Memorable: Do they have to relearn it each time they use it?
• Effective: Does it get the job done?
• Efficient: Does it do it with a reasonable amount of time and effort?
• Desirable: Do people want it?
• Delightful: Is it enjoyable, or even fun?
Also, Krug (2014, 35) defines that an important part of the definition “usability” is
that if something is usable it means that:
A person of average ability and experience can figure out how to use the thing to
accomplish something without it being more trouble than it is worth.
Usability is a fundamental level of user experience. Without usability it is difficult to

create a functional user experience. It is important, because if a product has bad usa-
bility, users are not able to achieve the aims in an efficient, effective and satisfied
manner. They will leave the website and start to seek an alternative variant. A product
with bad usability leads to bad user experience. While developing a website it is criti-
cal to ensure that it is usable to reduce the risk of losing users to the competitors.
6
Usability has become more and more traditional part of the world of technology, so
there are misunderstandings in the concept. Usability is not equivalent to “user-
friendly”. This is misdirected term; to say that it is about friendliness trivializes the
scope of the interaction design process and discounts the importance of the user per-
formance in terms of user productivity, etc. Users are not looking for amiability; they
need an efficient, effective, safe and maybe aesthetic and fun tool that helps them
reach certain goals. (Hartson & Pyla 2012, 10.) Another popular misconception about
usability has to do with visual appeal. Pretty look of the website is not a major objec-
tive for usability. While visual design is an integral and important part of usability, it
is not the only part of interaction design. (Sb.)
3.2 Usability + utility = usefulness
Nowadays certain designs are overly complex. Utility is needed to provide the func-
tions that users mostly need. When usability is combined with utility, products be-
come useful to users. Simplicity is considered as one of the methods to achieve utility
for a great user interface design. Joe Sparano (2010), an American graphic design ed-
ucator states: “Good design is obvious. Great design is transparent.” Following Krug
(2014, 39) the first law of usability is “Don’t make me think”. These two citations
open the main idea of simplicity. User interfaces that take into consideration the aims
of users, and offer the easiest ways to achieve these aims without avoidable features,
have high design sophistication. Simplicity in design is about going deep into your
user’s minds and using that understanding to design a product that rids itself of incon-
sequential elements and closes the gap between the user’s goals and the means to
achieve those goals through your system (Wong 2016). Euphemia Wong (2016) de-
fines that there are four ways to achieve simplicity in design:
• Maintain clarity: understand and design for your users’ main goals
• Make use of automation: design for a minimum amount of conscious and cog-
nitive effort
• Limit options: design for a strong “information scent”
• Reduce the “gulf of execution”: make your users see why they should use your
product
7
User satisfaction is considered as a traditional measure of usability and referred to a

part of traditional usability idea, shared between most people and included in the ISO
9241-11 standard definition of usability. Questionnaires related to user satisfaction
usually discover how users feel, or give the ability to get their opinions. As a result,
user satisfaction is like an outcome of how users experience usability and usefulness.
3.3 Difference between usability and UX
Usability and user experience are not the same thing. Nowadays most people are con-
fused with these two terms. The description in this chapter about the difference be-
tween usability and UX is based on the publication of Misfud (2011).
First of all, the aim of the two concepts is different. From the perspective of the web-
site, the major aim of usability is to make a website easy to use to allow users achieve
their goals interacting with a website. The UX’s aim is to give users the joy of using a
website realizing their interaction.
Secondly, the terms “usability” and “user experience” can be defined by different
questions. Usability can be formed as “Is it possible for the users to realize their
goals?”, while user experience can be opened as the question “Did the user get as sat-
isfying experience as possible?”
The third difference is the resources required. Usability requires employees with the
ability to influence the website’s user interface design, while user experience needs
collective team effort from different departments as marketing, web programming,
engineering and various design fields.
Next, usability and user experience have different impact on the relationship between
users and the brand. Well-defined user experience provides effective enhancement in
the user-brand relationship. According to Nielsen Norman Group (2007) true user
experience goes far beyond giving customers what they say they want, or providing
checklist features.
Finally, usability and user experience play different roles in user interface. A usable
user interface is one which is typically intuitive, simple or extremely learnable. A user
8
interface whose aim is to create a positive user experience is one which is pleasing to
the user. However, usability is still important. This does not mean that when the focus
is on user experience, the user interface is not usable.
3.4 From usability to UX
Functionality of the product is important, but the product with better user experience
has an advantage: it often outsells the products with even more functionality. Nowa-
days not only features are valuable on the market. For qualitative user experience ac-
curate design is like an entrance to functionality.
Users are able to experience functionality only through an interface. Interaction expe-
rience for the users is the system. The concept of usability is still important here. Has-
senzahl and Roto (2007) state the case for the difference between the functional view
of usability and the phenomenological view of emotional impact. People have and use
technical products because “they have things to do”; they need to make phone calls,
write documents, shop on-line, or search for information. Hassenzahl and Roto (2007)
call these “do goals”, appropriately evaluated by the usability and usefulness measures
of their “pragmatic quality”. Human users also have emotional and psychological
needs, including needs involving self-identity, relatedness to others, and being satis-
fied with life. These are “be goals”, appropriately evaluated by the emotional impact
and phenomenological measures (cumulative effects of emotional impact considered
over the long term, where usage of technology takes on a presence in the lifestyles and
is used to make meaning in people’s lives) of their “hedonic quality”. (Hartson & Pyla
2012, 12.)
The concept of usability has not been outdated, since the new ideas of user experience
have come up. In most software and many commercial products the main factors of
usability, typically ease of use and learnability, still keep their value and are very im-
portant. User experience concept still demonstrates all these usability elements. As a
result, the joy of use can come from well-implemented ease of use.
9
4 VISUAL DESIGN
Visual design is focused on visual communication and aesthetic of a website. Visual

design contains a set of basic elements: color theory, typography, hierarchy, correct
placement of the objects and the other elements. Bringing them together in a right way
allows creating a successful design. Well-developed visual design increases engaging
of the users and helps to establish a trust and interest related to the product. In my pro-
ject I will concentrate only on some visual design elements, as typography and fonts,
color choices and a correct placement of the interaction details.
4.1 Typography and fonts
Description in this chapter about using typography and fronts is based on the research
of Susan Weinschenk (2011) about the psychology of design. Designers usually use
various kinds of fonts to create the required mood for the users, make an impression or
to cause special associations. In terms of readability it is not important what font will
be implemented, in case the font does not contain a large number of additional ele-
ments that make it difficult to recognize letters; an excessive amount of decorative
elements impedes form recognition and actually is able to slow down reading speed.
Well-designed typefaces exhibit visual qualities that make them readable.
Font size is very important in the perception of the information. The font should be
large enough to be comfortably readable. In general, more readable font sizes are in
range from 8 to 12 points for the text that is read from an average distance of 12 to 13
inches. However, it is important that fonts of the same size may appear different in
size depending upon the x-height of the letters. X-height is the distance between the
baseline and meanline. The Picture 2 shows the x-height model.
10
PICTURE 2. X-height (Graphic Designerd 2011)
Black font over a white background is the clearest among color combinations. Too
little contrast between the text and the background, a white font on a black back-
ground can result in difficult or impossible way of reading.
The primary purpose for using more than one font is to create an emphasis or to sepa-
rate one part of the text from another. When many different fonts are used, the reader
is unable to determine what is important and what is not. Using two font sizes and
weights for titles and text establishes a clear and simple hierarchy. It is also important
to create a good contrast. If the elements are similar in size or weight, they lack con-
trast and their relationship is ambiguous.
4.2 Color basics
The color selection creates an expected user connection to the product. Following the
range of rules and guidelines is a science in itself, named color theory. Different color
schemes, which are considered as one of the key elements of human-computer interac-
tion, affect people behavior due to personal perspectives and due to cultural aspects.
Color in design is very personal. Different feelings could be aroused by small changes
in the hue or intensity of color (saturation). Culture of different countries contributes
to the perception of the colors as well. In one country a selected color scheme could
be perceived as happy or inspiriting, while in another country people will feel the op-
posite emotions. (Chapman 2010.)
4.3 Color wheel
Color wheel is used to provide “communication” between colors. It shows color rela-
tionships with each other for better understanding of the emotional impact of color.
The most common and useful variant of the color wheel is demonstrated in Picture 3.
It represents the basic 12-spoke color wheel.
11
PICTURE 3. 12-spoke wheel (Canva 2016)
The color wheel invokes three main types of colors based on combining primary or
base colors to create required final color. Mixing primary colors red, yellow, and blue
allows get secondary colors on the color wheel: orange, green, and violet. The third
level colors appear by creating a combination of primary colors and secondary colors.
The resulting colors include red-orange, yellow-orange, blue-green, and red-violet.
(Chapman 2010.)
4.4 Color temperature
Color can be used to convey emotive tone as well as evoke passions and feelings in
users. People’s culture, gender, and experiences affect on how people will perceive a
product. So, research based on user specifics is a better approach to indicate an emo-
tional reaction to color than the rules handling on the color wheel. For instance, gold
color is multicultural color. It symbolizes a success and high quality. In the United
States, white color symbolizes purity but in India white color is the color of mourning.
Happiness may be associated with a white color, green, yellow or red depending on
12
which part of world a human is in. (Weinschenk 2011, 27.) The Picture 4 provides
information about colors in different cultures.
PICTURE 4. Colors meaning in cultures (Information is beautiful 2016)
In any case, the color wheel is a standard approach for choosing color schemes. Ac-
cording to Cameron Chapman (2010), there are three categories of color temperature
“warm”, “cool” and “neutral” which evoke a range of different feelings:
• Warm colors:
Red Passion, love, anger
Orange Energy, happiness, vitality
Yellow Happiness, hope, deceit
• Cool colors:
Green New beginnings, abundance, nature
Blue Calmness, responsibility, sadness
Purple Creativity, royalty, wealth
• Neutrals:
13
Black Mystery, elegance, evil

Gray Moody, conservative, formal
White Purity, cleanliness, virtue
Brown Natural, wholesome, dependable
Tan or Beige Conservative, pious, dull
Cream or Ivory Calm, elegant, pure
The choice of color category depends on the aim needed to achieve with the website.
4.5 Color harmony
Colors should be chosen to create balanced and aesthetic appeal compositions. Ac-
cording to Willey & Sons (2011, 91) there are a number of color scheme standards
which make creating new schemes easier.
1) Monochromatic: single base hue extended by using its tints, shades, and tones
2) Analogous: groups of colors that are adjacent to each other on the color wheel
3) Complementary: hues that are directly opposite of each other on the color
wheel
4) Split complementary: base color and two colors adjacent to its complement
5) Double complementary: combination of two complementary color pairs
6) Triadic: three colors that are equidistant on the color wheel
Neutrals are another important part of color schemes. Gray, black, white, brown, tan,
and off-white are generally considered neutral. Black and white look either warm or
cool depending on the surrounding colors. Black and white are the easiest neutrals to
add to just about any color scheme. To add a bit more visual interest, though, consider
using a very light or very dark shade of gray instead. Adding a bright accent color to
an otherwise neutral palette is one of the easiest color schemes to create. (Willey &
Sons 2011, 100.)
14
5 HUMAN FACTORS AS PART OF THE UX
Human psychology plays one of the main roles in user experience design. A website
can be created for the different kinds of use. The target audience deserves a well-
implemented design for a web product. Well-known target audience is a web design-
er’s regular duty and a key to successful result of the project. Study of the human psy-
chology gives the opportunity to understand how people make decisions, how people
think, what makes a user to act or how to encourage people to realize the ideas and
aims of a website. The answers to these questions aid to make a design better. The
whole chapter is based on Susan Weinschenk research about 100 things every design-
er needs to know about people (2011).
5.1 How do people see?
People’s brain uses stereotypes to rapidly process the environment information. Dif-
ferent shapes and colors affect it how people see or think what they see. Picture 5
shows how colors help to switch the focus of attention from one piece of information
to another.

STOP WAR STOP WAR

PEACE NOW PEACE NOW

PICTURE 5. Colors’ and shapes’ influence on what people see
People have two types of vision: central and peripheral. Central vision is used to dis-
tinguish the details. Peripheral vision covers other visible areas which people can see,
even though they do not look directly at them. Users will focus on the central part of a
screen, if there are not some animations or flashing elements on the peripheral areas.
There are many different theories on how people see and recognize the objects. Ac-
cording to Biederman (1987), the geons are simple 2D or 3D forms such as cylinders,
bricks, wedges, cones, circles and rectangles presented as primary parts of an object in
Biederman’s Recognition-by-components theory (Biederman 1987). People find and
15
use geons in what they see to recognize the objects. It is estimated that there are 24
recognizable basic shapes. These shapes are used to form the blocks used to construct
all the objects which people see and identify. Picture 6 shows the examples of
Biederman’s geons.
PICTURE 6. Examples of Biederman’s geons examples (The comprehensive de-

velopment of human abilities 2006)
2D elements are preferable than 3D elements. The eyes transmit the information to the
brain as 2D objects. 3D representation on the screen can significantly slow down
recognition and understanding.
People believe that the page of any website consists of things that are not important,
for example, logos, free spaces, advertisements and a navigation bar. People do not
need them to solve their problem. In most cases they pay attention to the center of the
screen and ignore the edges.
5.2 How do people read?
Since people are not accustomed to read the text consisting of only uppercase letters,
capital letters in the text are seen as flashy. This method is used in headlines and when
it is necessary to attract attention.
16
Reading and understanding are two different concepts. A text should be introduced by
a title that reflects the meaning of the text. It is very important for further text percep-
tion. It is also important to identify the target audience of the website. If the text is
intended for a wide audience of the readers, ordinary words should be used to simplify
understanding. If people have some difficulties in reading a text, they tend to have the
same feelings for the whole text, and decide that the subject discussed in the text is
difficult to understand.
It has been proven that presence of 100 symbols in one string is an optimal length for
the maximum reading speed. However, people prefer short lines or lines with medium
length (from 45 to 73 characters per line) in texts. Most people read wide text columns
faster, but prefer several narrow columns.
5.3 How does people’s memory work?
Working memory is a system for temporarily storing and managing the information
required to carry out complex cognitive tasks such as learning, reasoning, and com-
prehension. Working memory is involved in the selection, initiation, and termination
of information-processing functions such as encoding, storing, and retrieving data.
(MedicineNet 2013.) Working memory holds three or four elements as long as the
information processing is not interrupted. People can only remember about 3-4 items
at a time. It is possible to use more elements for memorizing by dividing information
into groups with four elements.
People’s memory is fragile. It degrades quickly and is exposed to lots of errors. De-
signers have not make people remember things from one task to another or one page
to another-users are able to forget information.
There are two ways not to forget information: by repeating it many times or by mak-
ing a connection with other known information. People are genetically inclined to
forget. Design should enable taking into account people’s ability to forget. People
could forget even very important information. The ability to pay user attention on sig-
nificant details should be in the implemented design again and again.
17
5.4 How do people think?
One of the key points for designers is to understand how people think. People’s brain
is capable of processing a small amount of information at a time. Progressive disclo-
sure is a useful method used for better information assimilation. The concept of pro-
gressive disclosure is implemented to provide people with only the information that
they needed at the moment. Any of the information sections provided on a website can
be opened to obtain the necessary additional information. After that users are able to
go to the next level of disclosure to get more information. Some users need to get just
a general overview, whereas others want to read details.
Some types of mental processes require a great effort. There are three kinds of loads:
cognitive (including memory), visual and motor. The loads are not the same. They use
different amount of mental resources. The most resource-consumed load is cognitive.
Visual and motor are considered as less resource-consumed. Efforts like browsing
content and searching information on a screen (visual load) require more resources
than typing or moving a mouse cursor (motor load). However, in a process of
remembering or calculation (cognitive load) a brain spends more resources than in
searching or browsing (visual load). In practice, few additional clicks will be a good
alternative to user’s mental efforts. Pressing a button is less of resource-consuming
load than a mental effort. It is possible to decrease a cognitive load by increasing one
of the other loads: visual or motor.
Information is perceived better when it is presented in a story form. Stories provided

on a website capture and hold visitors’ attention. Also, they help to process infor-
mation and to establish trusting relationships between a visitor and a web resource.
Using this method, information becomes clearly understandable and easy to remem-
ber.
5.5 How do people pay attention?
People’s attention is selective. Naturally people are able to ignore signals, when they
are strongly concentrated. This phenomenon is called selective attention. Selective
attention is the act of focusing on a particular object for a period of time while simul-
taneously ignoring irrelevant information that is also occurring (Study.com 2016).
18
Usually people filter information. For example, short videos, big photos, bright colors
or animations included in a website design can used to attract users’ attention.
Daily, people are faced with a variety of signals, to which they do not pay attention:
visual, audio, gustatory, olfactory and tactile. Humans subconsciously feel that their
resources are limited; therefore a brain decides which things are really necessary to
pay attention to and which can be ignored. Noticeable signals make things memorable.
Most probably, users will pay attention only to them only. Noticeable signals are usu-
ally obvious.
The most attractive things for people are:
• Every movement (for example, videos and animations)

• Eyes looking from the image
• Images consisting danger, sex or food
• Stories
• Loud sounds
5.6 People’s motivation
People are more motivated to achieve the goal when a distance to the target is small.
Naturally people accelerate their actions, when the goal is getting closer. This effect is
known as goal-gradient effect. (Hull 1934.)
People focus on what is left, not on actions have been done earlier. It was proven by
the studies which had been conducted by Minjung Koo and Ayelet Fishbach (2010) to
understand what motivate people to reach a goal. They found that people are more
motivated to continue activities, when they focus on what remains to be done.
Surprising effect make people to search. Signals, which accompany receiving infor-
mation, such as sounds, lead people to continue their search. Giving information in
small portions provides further information-search behavior.
Laziness is a stimulus for progress. Usually people want to achieve the desired results
by spending less effort. They try to minimize actions which need for solving problem.
The principle called “satisficing” works the most part of time for the most types of
19
actions. Satisficing term was introduced by Herbert Simon in 1956. He explained

strategy of decision-making, where people act more adequately than optimally: “Deci-
sion-makers can satisfice either by finding optimum solutions for a simplified world,
or by finding satisfactory solutions for a more realistic world” (Herbert 1979).
The construction of websites based on showing information is better for perceiving

than it would be based on just content reading. In a book of Steve Krug (2005) “Don’t
make me think” the author introduces the idea of satisficing of users’ behavior on the
websites. He wrote: “What they actually do most of the time (if we’re lucky) is glance
at each new page, scan some of the text, and click on the first link that catches their
interest or vaguely resembles the thing they’re looking for. There are usually large
parts of the page that they don’t even look at.” (Steve Krug 2005, 21.) Krug noticed
that people just glance at a website page rather than read it entirely.
5.7 People are social individuals
Be social is very important factor for human being. Nowadays people use different
approaches, including technology, to provide communication. People trust persons
who present natural emotions; trust decreases when emotions are strained or fake. If a
smile looks natural, it attracts attention and arises trust.
People tend to repeat the actions of other people. That process occurs by mirror neu-
rons. Mirror neurons are the brain neurons that fire both when performing certain ac-
tion, and by observing an implementation of this action by another. If the aim is to
influence someone’s behavior, the task of designers is to show people the person per-
forming the same actions.
Interactions between people are followed by the rules for social interactions. When the
users use a website they have assumptions about what kind of response they would get
on a website and what interaction is desirable. Many of these expectations mirror ex-
pectations of people in a personal contact. If a website is not responding or booting is
too long, it looks the same as ignoring people in real life. If a website requires person-
al data at an early stage, it is similar with the situation when an unfamiliar person tries
to get private information and disturb a personal space. Website design helps for inter-
action between people and a website. Rules of a personal interaction, which were de-
20
scribed above, should be considered during a process of creating web design. Rules in
society interactions provide assistance to determine what corresponds to expectations
of users.
5.8 How do people feel?
There are seven universal emotions. Paul Ekman (2007), author of several books
about psychology of emotions and expert in recognizing emotions by facial expres-
sion, identifies seven basic emotions: anger, happiness, disgust, sadness, fear, surprise
and contempt. The emotions are represented by facial expressions and gestures. Using
pictures with people having one of the main emotions is a proper method for better
understanding the main purpose of a website from users’ point of view. Seven basic
emotions are easily recognizable by a photo. Faces on photos should look natural,
because people are able immediately define fake emotions. Properly applied emotions
on a website depend on a target audience. For example, a good way to know people’s
opinion is to find out what emotions motivate or will motivate different groups of the
target audience.
Emotions associated with a movement of muscles. Designers should predict what

muscle groups will be involved when familiarizing users with the product. For exam-
ple, in case of too small font on a website, people are forced to squint trying to read
the text. They can hardly feel the joy and friendliness, and it will affect their future
actions. People also tend to copy facial expressions of others. Showing a picture in
which someone is happy or laughing provokes an appearance of a smile on a viewer’s
face. The approach with pictures makes people feel happier influencing on their future
actions.
One of the reasons why the cases of life perceived better than just facts is that they are
presented in a story form. They evoke a sympathy that includes an emotional reaction.
Based on emotional reaction, people will process the data and the feelings. Infor-
mation is processed better and longer stored in a memory, if it is supported by emo-
tions.
21
People enjoy surprises. A study conducted by Gregory Berns (2001) defines that the
human brain is not only looking for the unexpected, it tries to reach the unexpected.
Everything new attracts attention and also brings up pleasant feelings.
Factors related to web design, such as font, layout and navigation are crucial for pass-
ing through the first phase of distrust. If a website passes this first test, content and
reliability become the factors determining trust in a product.
5.9 People’s mistakes
There are no absolutely reliable products, and everyone makes mistakes. It is very
difficult to create a system that does not contain errors and to ensure that people will
not make mistakes dealing with it. A very useful way to avoid unnecessary mistakes is
to think in advance about what errors are the most likely to occur, when people will
use a product. A trial version of a design helps to detect possible errors. Usually it is
tested by a target audience.
Mistakes often have negative effects, but in some cases the effects can be positive or
neutral. Mistakes with positive consequences are the actions that do not lead to the
desired result, but provide users with information with which they achieve a more
general purpose. Mistakes with negative consequences destroy the positive results.
They return users to a starting point or lead to irreparable consequences. Mistakes
with neutral consequences usually do not affect the execution of a task. Negative mis-
takes lead to negative consequences, so they should be excluded and minimized.
5.10 How do people make their decisions?
Making decisions is a skill that evolves with experience. When people are faced with
a huge number of data, a brain is not able to process all the information gathered.
Most mental processes occur at a subconscious level. Most decisions are also made
subconsciously, but this does not mean that they are not correct, irrational or bad.
People want to find a rational and logical explanation for their decisions. They usually
cannot explain their actions or preferences, because a subconscious reaction works
faster than a conscious reaction.
22
Humans seek to collect more information than they can handle. Information is addic-
tive. Just when people are confident in their decisions, they stop searching infor-
mation. A freedom of choice is not always good for users.
People can only remember three or four things at the same time. Also, the same prin-
ciple works in choosing a process. The concept of progressive disclosure will help, if
the task is to offer more than just three or four options. The best practice is creating a
choice of three or four items, and placing a subset of the next three or four items in
each of them. A user will feel unsatisfied, if the ability of choosing is removed.
6 UX ACTIVITIES AND PROCESS OVERVIEW
UX design process consists of the several progressive steps. Mostly I will concentrate
on several of them: research, prototype, visual design, test and building. Usually the
design implementation starts from a research. The research is needed basically to un-
derstand design problems. That stage includes business requirements, competitor
analysis and evaluation of a product. In a practical part of the thesis I will use a meth-
od called a heuristic evaluation. It helps in recognizing usability problems of the web-
site’s old version which is need to be redesigned.
The next step is a prototype. Prototyping allows UX designers to generate ideas and to
select design solutions. In my project I will use two techniques for prototyping: creat-
ing sketches and building wireframes.
The next part is a visual design. It is responsible for improving the design solutions by
revising wireframes, in case when it needed, and implementing a visual design. That
part follows after creating the wireframes. Visual design is a huge subject that in-
cludes several components.
After that, users test a visual design look and feel. The approach allows designers to
understand what details in the created visual design they need to improve. Next, when
the testing is conducted, the phase of improvement a website and beginning a building
process can start.
23
The final phase is to launch a website. A website can be launched, when the previous
activities were executed, and everything works correctly. Picture 7 demonstrates UX
activities for the redesign project.
PICTURE 7. UX activities for the redesign project
6.1 Heuristic evaluation
In the project I will use a research method called “heuristic evaluation”. The method
was created by Jacob Nielsen, the father of usability, in 1995. Heuristic evaluation is a
usability engineering method for finding the usability problems in a user interface
design so that they can be attended to as part of an iterative design process (Nielsen
1995). It does not provide a systematic way to generate fixes to the usability problems
or a way to assess the probable quality of any redesigns. However, because heuristic
evaluation aims at explaining each observed usability problem with reference to estab-
lished usability principles, it will often be fairly easy to generate a revised design ac-
cording to the guidelines provided by the violated principle for good interactive sys-
24
tems. Also, many usability problems have fairly obvious fixes as soon as they have
been identified.
According to Jakob Nielsen (1995), there are ten general principles for interaction
design. They are called “heuristics” because they are broad rules of thumb and not
specific usability guidelines. A list of the heuristics for user interface design is pre-
sented below.
• Visibility of system status

• Match between system and the real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognize, diagnose, and recover from errors
• Help and documentation
6.2 Wireframing
A wireframe is a visual representation of a user interface, stripped of any visual design

or branding elements. It is used by UX designers to define the hierarchy of items on a
screen and communicate what the items on that page should be based on user needs.
(Mears 2013.)
Simply speaking, wireframing is a “plan” for websites. It shows the web page layout
by illustrating the positions of content and navigational elements, and also represents
functionality. Creating mockups can be implemented by using a range of shapes, for
example, buttons, boxes and containers, through special software or just by sketching.
It comprises advantages that are most valuable to take into account in the beginning of
the project. Wireframes considered as a basis to begin creating screens, provide over-
view of functional specifications, offer easy and rapid approach for exploring ideas,
and used as a prototype basis for testing user ideas.
25
Wireframes provide understanding of communication in visual perspective between

how closely users will complete the tasks achieving their goals and meeting the site’s
business needs. Well-thought-out easy moving between pages or between entire sec-
tions (without going back to the home page) is provided by clean-labeled navigation.
That ensures users’ positive impression, which will help to achieve organizational
business goals.
From the business point of view the approach greatly saves costs of any marketing
communication. Wireframing avoids expensive site redesign required to correct dif-
ferent kinds of problems with the previous version. Creating wireframes and then test-
ing prototypes ensure that users will not be frustrated with the redesigned website, and
this saves further expenses.
7 IMPLEMENTING UX DESIGN
The aim of my project is to redesign an existing website for the company called Posi-
tive Communications. Positive Communications is a Russian event production com-
pany. It organizes different kinds of events for big companies. They say: “We do not
create holidays-we organize events. The events are provided with success not just for
development an internal communication in the company, and also for the efficiency of
the business!” Recently they started to think wider and began to develop new services,
like branding, HR branding and consulting, and a special project, which offers ex-
traordinary event services (e.g. competitions between two companies). By these ser-
vices they differ from the other competitors on the market.
Before the redesign, customer retention was high, due to high persuasiveness of the
company. The Positive Communications website offered to familiarize potential cus-
tomers with company’s services and to get all the needed information about the com-
pany. However, the problem was that the website began to become outdated and in-
flexible. The website was unstructured and complex. These problems caused difficul-
ties related to the familiarization with company’s portfolio which was considered as
the main aim of the website.
26
The content on each page was more complicated than it needed to be. The company
was needed in completely redesigning their existing website. So, my aim was to up-
grade the existing website to be simpler, easy to use, flexible and good looking.
7.1 Beginning the project
Designers create successful products, when they know their users. There are different
useful user research techniques and methods applicable for UX design. Each of them
is based on the needs of specific project.
My aim for the project is redesigning an existing website. First of all, it was important
to understand the business needs of the company. The Positive Communications team
needed a website which could promote their business on the competitor market, help
to attract users, thus getting more traffic.
Redesigning the website was based on the user-centered approach. I needed to gather
information about the visitors’ opinion using the Positive Communications website. In
my project I decided to choose usability heuristic evaluation method. This method
provides a good insight into possible usability problems that can cause damage for the
user experience. Usability heuristic evaluation is quick, cheap and a useful approach.
It is also suitable, if amount of evaluators is not huge. This approach recommends
using more than one evaluator. I used three evaluators to get more detailed feedback. I
conducted testing with potential users of the website. The evaluators were people, who
lead their own business, and people who further want to found a company. Using us-
ers with experience in the business field means that the results will be more valuable.
7.2 Applying heuristic evaluation of usability
I conducted the heuristic evaluation in the beginning of the project. Early-stage testing
is considered as the most beneficial, because at the early stage it is simpler to correct a
certain part in the design. This process is needed to understand user behavior, emo-
tions, and difficulties the testers faced with getting acquainted with the company and
their portfolio.
27
The heuristic evaluation of the usability is conducted usually according to ten standard
principles. For the redesign project I conducted a testing by observing user behavior in
real-time, and by writing down the users’ notes and ideas. During the evaluation pro-
cess I highlighted a few principles which had more comments and ideas form the test-
ers:

These principles were related generally with a structure of the website, the visual ap-
pearance and an ability to understand the steps which should be performed by the visi-
tors to make an order for the event organization. According to them I detected the
main usability problems in user interface design of the Positive Communications’
website.
7.2.1 Match between system and the real world
The heuristic means that the system should speak the users' language, with words,
phrases and concepts familiar to the user, rather than system-oriented terms. Follow
real-world conventions, making information appear in a natural and logical order.
(Nielsen 1995.)
During the real-time evaluation the testers did not understand the terms containing in
the sections of the menu. Picture 8 illustrates the Front page of the website which
needed to be redesigned. The menu sections are presented on the top of the page. The
testers said that they are not able to understand the meaning of the Workflow and Pos-
itive sections. The Workflow word was used for the portfolio section in the existing
version of the website. The Workflow is a wrong term for the portfolio section of the
website, because it does not follow real-world convention. The term was not familiar
for the testers. The same problem occurred with the Positive word in the menu. The
Positive section contained the information about the company on the existing website.
The evaluators did not understand the meaning of that section. In a result, the infor-
mation appeal was not presented in a natural and logical order. Also, the testers men-
28
tioned that they wanted to get the tips from the website to know what kind of the
events they can order.
PICTURE 8. Front page of the Positive Communications website needed to be

redesigned
7.2.2 Flexibility and efficiency of use
Accelerators (unseen by the novice user) may often speed up the interaction for the
expert user such that the system can cater to both inexperienced and experienced us-
ers. Allow users to tailor frequent actions. (Nielsen 2005.)
29
The main problem in that heuristic was related with the Contacts section. Picture 9
shows the Contacts page of the existing Positive Communications’ website.
PICTURE 9. The Contacts page of the existing Positive Communications’ web-

site
When the testers opened the Contacts page they had problems with ordering the event.
Picture 9 shows that there are three contact persons under the big photos. The testers
did not understand how to choose the person, who is responsible for the event organi-
zation. Also, they mentioned that it is difficult to make a contact with the company.
According to the interviews, I found out that the steps were very complex needed to
contact the company. The testers wanted to make less effort. They expected to find a
form, where they can make the order, rather than to open their email and send the re-
quest for the event ordering.
7.2.3 Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every
extra unit of information in a dialogue competes with the relevant units of information
and diminishes their relative visibility. (Nielsen 2005.)
30
According to the test, the Workflow page, the Positive page and the Clients page had
the problems with aesthetic and minimalist design. The testers said that the Workflow
page contained the information which is rarely needed, such as years. The subsections
with the company’s services were too small and not understandable. Picture 10 shows
the Workflow page of the old version of the Positive Communications’ website.
PICTURE 10. The Workflow page of the old version of the Positive Communica-
tions’ website
The other section Positive had the same problem related to the text readability. The
testers mentioned that the information about services should be presented clearly by
increasing a size of the text with description. Picture 11 shows the Positive page of the
old version of the Positive Communications’ website.
31
PICTURE 11. The Workflow page of the old version of the Positive Communica-
tions’ website
The Contacts page had the big pictures before the contact persons. The testers did not
understand why do they need these illustrations. They mentioned that the picture was
more attractive than the contacts. One of the evaluators I interviewed said the follow-
ing: “Does the website sell the furniture?” Firstly the testers focused their attention on
the big pictures, and after that they were able to find the most important information
with the contacts of the company. Picture 9 shows the Contacts page of the old version
of the Positive Communication’s website.
According the testers’ feedback, these three pages had the same problem related to the
text and the visual details. They noticed that the text and the visual details should be
bigger.
7.3 Sketching
A period of idea generation starts from the paper sketches. I had a lot of ideas and
thoughts about how to improve the existing website of Positive Communications. The
key factor of this stage is to record all the ideas to be able to choose from plenty of
options. I decided to create the paper drafts, because they are simple and useful ap-
proach, when there is a need to make some modifications.
32
To implement this method I, firstly, opened well-designed competitor sites to be more

familiar with how they offer their portfolio to clients. It gave me a better understand-
ing of how the pages of portfolio websites should look. I opened the important point-
ers which I then used in my project. Initially, all the websites I browsed as samples for
my project contained the main pages: Client page, Services page, Projects page, and
About us page. They are considered as fundamental of a portfolio website. According
the usability evaluation, I examined that the menu’s sections on the old version of the
Positive Communications’ website had the difficult for understanding names. I decid-
ed to change them following the samples on competitor sites. Finally, I created sec-
tions in the menu named Projects, About us, Clients, News, Blog and Contacts. They
follow the real-world conventions to be familiar to the users.
The options in the menu could be arranged in a logical order. The sections menu titled
Projects, About us and Clients are primary, so I need to place them on the first three
positions in the menu. The Projects section will be placed on the first position. Next, I
decided to introduce the company in a section About us, and then I provided the in-
formation about clients in a section Clients to create persuasiveness.
Potential clients usually want to see the result of the company and what they are capa-
ble of. Is the event suitable for their organization? How did the event agency organize
the previous events? Did the company operate on international market? Potential cli-
ents want to know all these details when they visit the Projects page. I made a draft for
the Projects page and titled it Our Projects. Picture 12 demonstrates the potential Pro-
jects page for Positive Communications.
33
PICTURE 12. Sketch of the Projects page for Positive Communications
The Services page is also reasonable, because it helps potential clients to get a good
understanding of what they are looking for. In my project it is the event services. I
decided to connect it with the About us page to make the process of familiarization
with the company easier. The About us and Services sections look compact and con-
tain the information needed by potential clients about Positive Communications. The
sketch in Picture 13 shows a draft for the Services page and the page About us.
34
PICTURE 13. Sketch of the About us page and Services page for Positive Com-
munications
The About us page is usually used to introduce a company. It presents the philosophy
of an organization, demonstrates competence and shows professionalism. The page
provides the persuasiveness for the potential clients. According to the theory part, per-
suasiveness consists of two types of information: vendor information and product in-
formation. It allows the visitors trust an online vendor by the evidence presented on
the website. As was mentioned previously, the About us page is connected with the
Services page to reach persuasiveness. It is shown in the draft in Picture 13.
The Client page is a page which shows a list of companies the organization has previ-
ously worked with. It demonstrates the professionalism of the company and reputation
in the industry, which leads also to website persuasiveness. Picture 14 illustrates a
draft with the idea for the Client page called Our Clients for Positive Communica-
tions.
35
PICTURE 14. Sketch of the Client page for Positive Communications
In general, I changed the structure of three main pages with projects, information
about the company, and with the client list. These changes based on the heuristic eval-
uation conducted in the previous stage of the redesigning process.
7.4 Wireframing
At the stage of wireframing I need to create mockups. There are different drawing
tools for creating wireframes available on the Internet. I found one that is free and
worked best for me. The name of the wireframe software I used is FlairBuilder 4. It is
powerful and easy-to-use prototyping tool which offers a range of tools and a full set
of built-in components for beautiful and responsive wireframes.
I began to create wireframes with seven main site pages: the Front page, the Projects
page, the About us page, a page with the company news, a client list page and the
pages with contacts. Pictures 15 and 16 show the wireframes of the Front page and
About us page. The Front page will contain big animated pictures with the text to
briefly describe the main ideas of the company. The menu on top of the page allows
36
easy moving between the site’s pages. Clean-labeled navigation does not require go-
ing back to the home page.
PICTURE 15. Wireframe for the new Front page of Positive Communications
Picture 16 illustrates that the text is organized in short lines, because people prefer
reading the short lines instead of wide columns of a text. Also, there is a statistic about
the company which will be complemented by the motions and funny 2D pictures.
37
PICTURE 16. Wireframe for the new About us page of Positive Communications
Additionally I created a new contact form for a page with the company’s contacts.
Following the heuristic evaluation, I revealed that there were usability problems in the
Contacts page. The evaluators mentioned that they wanted to do less effort for con-
tacting a company. I decided to design a better contact form rather than provide just
the contact information of the company’s persons. The form will cause a more promi-
nent “call to action”. Also, I replaced the big pictures on the page by two maps with
location of the Positive Communications’ offices. Picture 17 and 18 shows the
wireframes of the Contacts page.
38
PICTURE 17. Wireframe for the new page with contacts of Positive Communica-
tions
39
PICTURE 18. Wireframe for the new page with contacts (extension) of Positive
Communications
The other page wireframes can be found in Appendix 1. The wireframes of the site
pages allowed me to make experiments with a structure of the website, also concen-
trating on the particular elements.
During the process of wireframing I communicated with Positive Communications

team members to get their feedback for the appearance of the website. We discussed
the details in the design, as what sections should be improved, and how the design will
look with the visual design. For the best result we set a strong communication to rich
40
the understanding between the company’s business goals and my vision from the UX
design point of view about portfolio website.
The Positive Communications team approved each of the wireframes. We communi-

cated several times before achieving the final result. I delivered the final result con-
taining seven wireframes.
7.5 Implementing visual design
My roles in the redesigning existing website are UX designer and also UI designer. In
the beginning of the project I understood business goals of Positive Communications
to feel better how design principles should be applied. Additionally, usability testing
allowed me to get information about the user needs and their behavior interacting with
the website. I spent a lot of time understanding the significance of the brand new look
of the potentially redesigned website.
After developing wireftames I started to implement the next part of the project, visual
design. The significance of the visual design is to reveal a brand personality. I’ve used
the design concepts, which, to my mind, specifically suitable for the website concen-
trated on event organizations. In general, my aim was to implement a simple, interac-
tive and unique design for the Positive Communications brand. Typography and fonts,
color choices and interaction details were the most important aspects for me during
the process of redesigning the website.
7.5.1 Color scheme
Aim of the redesigning the website was to create a new portfolio website for an agen-
cy which organizes different kinds of events for the big companies. The website de-
sign should convey a professionalism and formality, causing confidence, positive
emotions, and even desire to be a potential client. Based on that, I decided to use
mostly neutral colors: black, white, and grey with the elements of blue color. With
that color scheme a design becomes universal for different experiences, cultures and
genders. Neutral colors usually create a backdrop in design. They can used on their
own, or combined with another color accent. Black color was used for typography and
other functional elements because of its neutrality. White color is associated with puri-
41
ty, cleanliness and virtue. I used white for the website background and typography.
This method creates a contrast between text and background and highlights the other
colors. It is also suitable for achieving simplicity in the design. Light shade of grey
was used for typography, some parts of the background, and brand icons to create a bit
more visual interest. Picture 19 illustrates the method of neutral colors described
above.
PICTURE 19. Neutral color scheme of the redesigned Clients page
I included blue color as additional color in neutral color scheme. It used it to represent
calmness and responsibility, additionally, blue makes the website refreshing and
friendly. Picture 20 shows the Front page, where the first big picture and the dividing
element “line” have the blue shades.
42
PICTURE 20. The Front page consisting blue color elements
7.5.2 Typography and fonts
In a design for the new website I used the fonts with good readability. The fonts do
not contain additional elements, which can cause difficulties in recognizing the letters
and slow down the speed of reading the text. Size of fonts is big enough for comforta-
ble reading.
As was mentioned in a previous part, mostly I used the different shades of black for
fonts. White color for fonts was used just on dark or color visual elements. Generally,
I followed the principle in a theory part that black font over a white background is the
most legible among color combinations. It allows easy reading, which leads to a fast
text perception.
Simplicity in a hierarchy I achieved by combining two font sizes and different title
weights. For titles I used the capital letters to make them flashy and attract an atten-
tion. Good contrast is really important for achieving a good readability. Example on
Picture 21 shows the About page and a page with the Main services. Each column
with a content of description the offered service provided by a title that represents the
main point in the text.
43
PICTURE 21. Using the titles on the new About us page and Services page
7.5.3 Interactive elements
For a new version of the website I decided to include a lot of motions. That method
attracts users’ attention and enhances an interest for following acquaintance with the
website. When visitors scroll down the website, the header with the menu options and
the logo of the brand stays in a fixed position. The visitors can always see the naviga-
tion bar. It shows the visitors where to click to find the information they needed.
On the Front page I used the big photos as a background to create animated photo gal-
lery. The photos illustrate moments of the events, organized by Positive Communica-
tions agency. (Picture 20.) Also, the same method was used on a page with a list of
clients. By the animated photo gallery, consisting brand pictures, I presented the com-
panies which used the event services of Positive Communications. (Picture 19.)
In the chapter “How people think” I mentioned that people perceive small amount of
information at a time. I implemented a concept of progressive disclosure to provide
visitors the information that they only needed at certain moment. On the redesigned
Projects page I presented a list of projects in pictures, because visual representation of
information is clear understandable than just based on a text reading. Picture 22 shows
the situation when visitors place a cursor on the picture, they will be able to see in-
formation about the project.
44
PICTURE 22. Progressive disclosure of projects
Then, clicking on the picture visitors open a page with more detailed information and
photos showing the event highlights. Picture 23 shows that page.
PICTURE 23. A disclosed page with detailed information about the project
For a better processing and holding attention information about the event is presented
in a story form. Also, information given in a story form I used between the Projects
page and Services page. A line on Picture 24 represents a statistic about the company
45
in a visual way using the motions and funny 2D pictures. It looks delightfully that
coincides with one of the usability attitude.
PICTURE 24. The visual representation of company’s statistic
Animated blue numbers create a surprising effect which motivates people continue
acquaintance with the website.
When people face some problems and want to solve them, they usually unconsciously
look for appropriate tools and facilities helping with this. Incentive signals help to
understand what should be done with an object. Considerable advantage of the incen-
tive signals is that they increase a likelihood that users will perform an action. Shadow
and light that occurs by cursor moving are tools allowing to apply it in practice. They
create an object visibility when it is selected or active. I applied that method for the
buttons. Picture 25 shows the button “All our news” with original blue color and the
button which changed color by moving cursor on it.
PICTURE 25. Applied incentive signals for buttons
Also, I used incentive signals for another details in the design. For example, Picture
26 illustrates additional small incentive signals: the arrows, which appeal by placing a
cursor on them, a small arrow in the bottom right corner, which changes a shade of
color, and the icons with changed blue color when they are selected.
46
PICTURE 26. Another incentive signals
7.5.4 Building and launching the website
The key factor of creating a successful transition from a design part to code building is
to provide understanding of the outcomes between designer and coder. My part of the
project is to realize UX and UI design. Back-end and front-end developing was made
by Nikita Rogatnev.
Before the starting building the website, I provided Nikita of knowledge about the
company and gave him the required materials. Wireframes helped me to describe the
idea of how the website pages should look. That visual representation is the best way
to show what you need. I made notes on the wireframes to reveal the idea of visual
design elements, like color scheme, effects, and animations. Also, I provided him an
information about the goals of the new redesigned website to have in-depth
knowledge for a better understanding. If he had questions about the details or the way
they should be implemented, I answered them. If he told me that there were some
technical limitations, I changed that in the provided design.
We created a website that we are proud. The website was launched. We ensured that
the website works correctly and does not have any issues. A new version of the Posi-
tive Communications website can be found on www.positivecommunications.ru.
47
8 RESULTS
After the website has been built and launched, the visual feedback was needed to un-
derstand the visitors’ thoughts and feelings while they browsing the website. The
website was shown to 10 people on a laptop to browse through the website pages.
People gave me the feedback during the real-time conversations. I’ve got the good
results, because most of the visitors’ feedbacks were positive. I recognized that the
visitors understand the company’s brand, because they described that the website de-
sign have the unique appearance consisting enjoyable colors and attractive details.
They easily found the information they are looking for, such as a portfolio with the
events organized by Positive Communications. Also, the results showed that users
understood the definitions and the interaction was easy. The visitors were unsatisfied
when they scroll down the website. Their suggestions were about the increasing speed
of the website. I told the developer of the website about this issue. The loading of the
website was faster after the developer fixed that problem.
The Positive Communications site is now living. The maintenance and the information
updating are significant processes for keeping running of the website. The content of
the website going be updated over time by adding new events to the portfolio. Rede-
signed portfolio website can be found in Appendix 2.
9 CONCLUSIONS
The aim of the project was to redesign a portfolio website for Positive Communica-
tions company using the main principles of UX design. The key element of the study
was to use people’s opinion in the website development to reveal possible problems
and then eliminate them in design. My objectives were to develop a new look for the
website using methods of UX design, and to make some improvements to achieve
easy interaction between the visitors and the website.
The theoretical part and the practical part of the work were closely related. The practi-
cal part was based on the theoretical part. The theoretical part of my study contains the
main concepts of UX design which I implemented further in the website redesign.
Also, I provided the terminology needed to familiarize a reader with these concepts. I
48
gave the explanations for the main of them which I focused on: what is usability, how
human psychology works and how a visual design can be implemented to reach a joy
of use. I demonstrated UX activities which used for the website redesign and provided
description of the overall process. The reason for that was to plan the redesign process
properly.
In the practical part I followed the plan which I described as the overall process. The
research was conducted using a heuristic evaluation of usability to understand usabil-
ity problems in the existing version of the website. It provided valuable information
about the visitor’s online behavior, their needs and ideas. Generally, the problems
were related with three key usability principles:

The feedbacks were taken into account and helped me to define how content, efficien-
cy of use and visual appearance of the website can be improved. According to the re-
sults of usability evaluation, I created the drafts and wireframes which helped to make
decisions about how to organize a website structure and choose the correct place for
different visual elements. Visual design creation was based on choosing suitable ty-
pography and fonts, colors and interaction details. In a result, the website design be-
came simple, interactive and unique.
I have decided to focus just on the main points, because the theme of my thesis is
quite huge. UX design contains a lot of additional disciplines which positively affect
on the user experience. The project did not need all the disciplines, because specific
case was narrow-to redesign a portfolio website.
The main result was a new redesigned website, which is suitable for the requirements
of UX. According to users’ interview conducted in the end of the project it is possible
to say that the usability problems were eliminated. The website was improved and
began to meet the business goals of the company. The visitors understand a brand of
the company. Also, they can easily find the information they needed and understand
49
the definitions used in the website content. These results lead to easy interaction be-
tween the visitors and the website. The research results were positive, that is why it is
easy to say that the process has been successful. The most important result for me was
to investigate human-computer interaction in practice. I have got a great experience in
that field.
The sources I used in my work include different theories and early researches in the
user experience field. For example, Jakob Nielsen is a guru of usability who created
methods for making the Internet easier to use, and invented usability methods, includ-
ing heuristic evaluation which I used in my research. Generally, his methods began to
appear in the 1990s but they are still very popular. Another author who inspired me
was Susan Weinschenk. In her book about people’s psychology she describes useful
things about what every designer needs to know about people. The other books I used
were about UX design guidance for ensuring a quality user experience.
Creating a UX design was very interesting for me. Usually UX design process consists
of several steps from conducting a research to building and launching a website. But if
the process is held by more than one person, it will be more efficient. I think that UX
team is absolutely necessary on most UX design projects. The difficulties in my pro-
ject were related with implementing the whole UX design process alone. Even though
I had my own ideas, additional ideas of other people would be very beneficial for me.
The main benefit of working as a team is a collective mind enabling different perspec-
tives and visions to find good solutions using different perspectives and visions. To
my mind, it is important to have a team, because the team members can openly dis-
cuss and have their own UX role in a project. The main benefit of working as a team
is a collective mind enabling different perspectives and visions to find good solutions
using different perspectives and visions.
The team members of Positive Communications were satisfied, when they found out
that the feedback from the visitors was positive. They thanked me for conducted re-
search for their website. This method helped them to attract the users. Based to com-
pany analytics tools, we have identified highly engaging interfaces for the users which
encouraged them to stay longer on the website and explore the content. Customer sat-
isfaction has significantly risen what is demonstrated by a boost in sales. We agree for
50
further development. The next version of the website will be created in English, be-
cause the company have also the international clients. I will maintenance their website
and add updated information with new events.
10 BIBLIOGRAPHY
Berns, Gregory, S., McClure, S., Pagnoni, G., and Montague, P. 2001. “Predictability
modulates human brain response to reward.” The Journal of Neuroscience 21(8):
2793–8.
Biederman, Irving 1987. Recognition-by-Components: A Theory of Human Image

Understanding. PDF document.
http://wexler.free.fr/library/files/biederman%20(1987)%20recognition-by-
components.%20a%20theory%20of%20human%20image%20understanding.pdf. Up-
dated 17.07.2014. Referred 20.09.2015.
Chapman, Cameron 2010. Color Theory For Designers: Creating Your Own Color
Palettes. WWW publication. https://www.smashingmagazine.com/2010/02/color-
theory-for-designer-part-3-creating-your-own-color-palettes/. Updated 08.02.2010.
Referred 03.08.2016.
Chapman, Cameron 2010. Color Theory for Designers, Part 1: The Meaning of Color.
WWW publication. https://www.smashingmagazine.com/2010/01/color-theory-for-
designers-part-1-the-meaning-of-color/. Updated 28.01.2010. Referred 03.08.2016.
Ekman, Paul 2007. Emotions Revealed: Recognizing Faces and Feelings to Improve
Communication and Emotional Life, 2nd ed. New York: Owl Books.
Graphic Designerd 2011. Tuesday’s Type Tip: Rated “XXX”. Blog.

http://www.graphicdesignerd.com/2011/12/tuesdays-type-tip-rated-xxx/. Updated
01.04.2012. Referred 02.02.2016.
51
Gube, Jacob 2010. What Is User Experience Design? Overview, Tools And Re-
sources. https://www.smashingmagazine.com/2010/10/what-is-user-experience-
design-overview-tools-and-resources/. Updated 05.10.2010. Referred 21.11.2016.
Hassenzahl, Marc and Roto, Virpi 2007. Being and doing — A perspective on User
Experience and its measurement. Interfaces Magazine 72. British HCI Group.
Information is beautiful 2016. Colors in cultures. WWW document.

http://www.informationisbeautiful.net/visualizations/colours-in-cultures. Updated
03.04.2016. Referred 29.09.2015.
ISO 9241-11, Ergonomic requirements for office work with visual display terminals
(VDTs) - Part 11: Guidance on usability. ISO standard document.
Hartson, Rex & Pyla, Pardha 2012. The UX Book: Process and Guidelines for Ensur-
ing a Quality User Experience. Waltham: Elsevier.
Kellingley, Nick 2016. Interaction Design Foundation. 10 Free to Use Wireframing

Tools. WWW publication. www.interaction-design.org/literature/article/10-free-to-
use-wireframing-tools. Updated 10.08.2016. Referred 12.08.2016.
Kellingley, Nick 2016. Interaction Design Foundation. Introduction to Usability.

WWW publication. https://www.interaction-design.org/literature/article/an-
introduction-to-usability. Updated 09.08.2016. Referred 16.08.2016.
Kliever, Janie 2016. Canva Design School. Color Theory. WWW publication.
https://designschool.canva.com/color-theory/. Updated 17.06.2016. Referred
29.09.2015.
Krug, Steve 2005. Don't Make Me Think, Revisited: A Common Sense Approach to
Web Usability. San Francisco: New Riders.
Krug, Steve 2014. Don't Make Me Think, Revisited: A Common Sense Approach to
Web Usability (Voices That Matter). San Francisco: New Riders.
52
Mears, Chris 2013. The UX review, Wireframes – The Beginner’s Guide. WWW pub-
lication. http://theuxreview.co.uk/wireframes-beginners-guide/. Updated 25.04.2013.
Referred 04.11.2015.
Mifsud, Justin 2011. The Difference (and Relationship) Between Usability and User
Experience. WWW publication. http://usabilitygeek.com/the-difference-between-
usability-and-user-experience/. Updated 11.07.2011. Referred 14.08.2016.
Nielsen, Jakob 1995. 10 Usability Heuristics for User Interface Design. WWW publi-
cation. https://www.nngroup.com/articles/ten-usability-heuristics/. No update infor-
mation. Referred 26.08.2016.
Nielsen, Jakob 1995. How to Conduct a Heuristic Evaluation. WWW publication.

https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/. No update
information. Referred 26.08.2016.
Nielsen Norman Group 2007. User Experience – Our Definition. WWW publication.
http://www.nngroup.com/about/userexperience.html. Updated 2007. Referred
14.08.2016.
MedicineNet.com 2013. Definition of Working memory. WWW publication.

http://www.medicinenet.com/script/main/art.asp?articlekey=7143. Updated
28.08.2013. Referred 25.09.2015.
Study.com 2016. Selective Attention: Definition & Examples. WWW document.

http://study.com/academy/lesson/selective-attention-definition-examples-quiz.html.
Updated 24.10.2015. Referred 10.11.2015.
Sparano, Joe 2010. A quote on design. WWW publication. https://oxidedesign.com/a-

quote-on-design/. Updated 05.03.2010. Referred 12.08.2016.
The comprehensive development of human abilities 2014. Geons. WWW document.

http://www.yugzone.ru/articles/geons.htm. Updated 2014. Referred 29.09.2015.
53
Weinschenk, Susan 2011. 100 Things Every Designer Needs to Know About People
(Voices That Matter). San Francisco: New Riders.
Willey, J & Sons (eds.) 2011. Smashing Magazine. Professional Web Design. United
Kingdom: John Wiley & Sons Ltd.
Willey, J & Sons (eds.) 2012. Smashing Magazine. UX Design: Foundations for De-
signing Online User Experiences. United Kingdom: John Wiley & Sons Ltd.
Wong, Euphemia 2016. Interaction Design Foundation. Simplicity in Design: 4 Ways

to Achieve Simplicity in Your Designs. WWW publication. https://www.interaction-
design.org/literature/article/simplicity-in-design-4-ways-to-achieve-simplicity-in-
your-designs. Updated 14.08.2016. Referred 14.08.2016.
APPENDIX 1(1).
Wireframes with new site pages
Wireframe for the new Projects page of Positive Communications

APPENDIX 1(2).
Wireframe for the page with the company news of Positive Communications
APPENDIX 1(3).
Wireframe for the new Clients page of Positive Communications

APPENDIX 2(1).
Redesigned website for Positive Communications
Front page
Our Projects page

APPENDIX 2(2).
About Us page
Our Clients page

APPENDIX 2(3).
News page
Contacts page
APPENDIX 2(4).
Contact form

User Experience Design (Ux Design) in A Website Development

Uploaded by

Copyright:

Available Formats

User Experience Design (Ux Design) in A Website Development

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

User Experience Design (Ux Design) in A Website Development

Uploaded by

Copyright:

Available Formats

Mariia Orlova

USER EXPERIENCE DESIGN (UX

Author(s) Degree programme and option

Mariia Orlova Information Technology

User experience design (UX design) in a website development: Website redesign

Subject headings, (keywords)

User experience, website design, usability, redesign

APPENDIX 1: Wireframes with new site pages

Miia Liukkonen Positive Communications

PICTURE 1. Components of UX (Gube 2010)

Utility is considered as an independent component in design. It is considered as a fun-

3.1 Traditional usability idea

• Useful: Does it do something people need to have done?

• Learnable: Can people figure out how to use it?

• Memorable: Do they have to relearn it each time they use it?

• Effective: Does it get the job done?

• Efficient: Does it do it with a reasonable amount of time and effort?

• Desirable: Do people want it?

• Delightful: Is it enjoyable, or even fun?

Usability is a fundamental level of user experience. Without usability it is difficult to

3.2 Usability + utility = usefulness

• Limit options: design for a strong “information scent”

User satisfaction is considered as a traditional measure of usability and referred to a

3.3 Difference between usability and UX

3.4 From usability to UX

Visual design is focused on visual communication and aesthetic of a website. Visual

4.1 Typography and fonts

PICTURE 2. X-height (Graphic Designerd 2011)

4.2 Color basics

4.3 Color wheel

PICTURE 3. 12-spoke wheel (Canva 2016)

4.4 Color temperature

PICTURE 4. Colors meaning in cultures (Information is beautiful 2016)

Black Mystery, elegance, evil

4.5 Color harmony

5) Double complementary: combination of two complementary color pairs

6) Triadic: three colors that are equidistant on the color wheel

5 HUMAN FACTORS AS PART OF THE UX

5.1 How do people see?

PICTURE 6. Examples of Biederman’s geons examples (The comprehensive de-

5.2 How do people read?

5.3 How does people’s memory work?

5.4 How do people think?

Information is perceived better when it is presented in a story form. Stories provided

5.5 How do people pay attention?

The most attractive things for people are:

• Every movement (for example, videos and animations)

5.6 People’s motivation

actions. Satisficing term was introduced by Herbert Simon in 1956. He explained

The construction of websites based on showing information is better for perceiving

5.7 People are social individuals

5.8 How do people feel?

Emotions associated with a movement of muscles. Designers should predict what

5.9 People’s mistakes

5.10 How do people make their decisions?

6 UX ACTIVITIES AND PROCESS OVERVIEW

PICTURE 7. UX activities for the redesign project

6.1 Heuristic evaluation

• Visibility of system status