Dat Tien Le

User Experience: Psychological

Implementation to Web Design Company Case: Camellia Bees

International Business

2021

VAASAN AMMATTIKORKEAKOULU

UNIVERSITY OF APPLIED SCIENCES

Bachelor of International Business

ABSTRACT

Author Dat Tien Le

Title User Experience: Psychological Implementation to

Web Design.

Company case: Camellia Bees

Year 2021

Language English

Pages 43 + 7 Appendices

Name of Supervisor Thomas Sabel

This thesis studied User Experience (UX) and User Experience Design, the relationship between

user behavior and psychology in UX design. The study's final goal is to apply the UX design

knowledge and implement the psychological theory into an empirical project, Camellia Bees, a

case company of rebuilding the website.

The research study is written in three parts, which comprise the definition of UX and UX design,

structure and elements of UX, the psychological theories including the theory of reasoned action,

and the theory of planned behavior. Studying the UX structure helps the author with a better

understanding of the UX and UX development process. These psychological theories relate to user

experience design, which implies the connection between user beliefs, user behaviors, and user

decision-making.

The research knowledge was utilized and applied to create UX designs that supported the author

in conducting a website rebuild for Camellia Bees' company case. It was decided to employ the

qualitative methodology by having the interview with the business owner and one UX design

expert in terms of the design result. After the discussion, the project was concluded to be qualified

and verified with positive feedback toward the empirical project by implementing research

knowledge to the company case.

Table of Contents

Tiivistelmä

ABSTRACT ............................................................................................................................. 2

1. INTRODUCTION .............................................................................................................. 6

1.1. Aim and scope of the thesis ............................................................................................. 6

1.2. Project background .......................................................................................................... 7

1.3. Case company .................................................................................................................. 7

1.4. Thesis structure ................................................................................................................ 8

2. Fundamentals of User Experience (UX) and User Experience Design (UXD): .................... 8

2.1. What is User Experience?................................................................................................. 9

2.2. What is User Experience Design ? .................................................................................... 9

2.3. Why User Experience Design matter? ........................................................................... 10

3. Components and elements of User Experience: ............................................................ 13

4. Psychological Theories: ................................................................................................ 19

4.1 Theory of Reasoned Action ................................................................................................. 20

4.2 Theory of Planned Behavior ................................................................................................ 21

5. The web re-design project: CamelliaBees.com .............................................................. 22

5.1 Business Context and Design Process ................................................................................. 23

5.2 Project execution and theoretical implementation ............................................................ 25

5.2.1 The creation of Wireframes for Camellia Bees: ........................................................... 25

5.2.2 Design for Positive Outcomes: ..................................................................................... 29

5.2.3 Design for Social Acceptance: ...................................................................................... 33

5.2.4 Design to Give users Control:....................................................................................... 35

6. Evaluation and Discussion ............................................................................................ 37

6.1 Project evaluation ............................................................................................................... 37

6.2 Limitations & Recommendations ........................................................................................ 39

6.3 Conclusions .......................................................................................................................... 40

References: ......................................................................................................................... 42

LIST OF FIGURES AND TABLES

Figure 1. An example of UX/UI (Amazon 2020). 11

Figure 2. The graph of design alternatives and cost of change in software development

(UXprobe 2015). 12

Figure 3. User Experience Honeycomb (Morville 2004). 13

Figure 4. Five elements of UX (Garrett 2011). 17

Figure 5. Detailed components of 5 Planes in UX (Garrett 2011) 18

Figure 6. Theory of Reasoned Action (Ajzen & Fishbein 1975). 20

Figure 7. Theory of Planned Behavior (Ajzen 1991). 22

Figure 8. Design Development Process of Camellia Bees. 24

Figure 9. Wireframe for the landing page. 26

Figure 10. Wireframe for faceted search. 27

Figure 11. Wireframe for page of product detail. 28

Figure 12. Wireframe for review function. 28

Figure 13. Design a flash sale campaign. 30

Figure 14. Design customized recommendations. 31

Figure 15. Design navigational components. 32

Figure 16. Camellia Bees’ Color Palette. 33

Figure 17. Design a product detail page. 34

Figure 18. Design for Social Acceptance. 34

Figure 19. Design faceted search and sorting function. 36

Table 1. Characteristics of the E3T Elements (Charles 2009). 15

LIST OF APPENDICES

APPENDIX 1. FINAL DESIGNS PRESENTING TO CLIENT

APPENDIX 2. INTERVIEW QUESTIONNAIRE FOR CAMELLIA BEES’ FOUNDER

APPENDIX 3. INTERVIEW QUESTIONNAIRE FOR DESIGN MANAGER

6

1. INTRODUCTION:

In our 4.0 modern era, technological devices are co-existing with humans as an indispensable

resource to our daily convenience. It proves the importance of Information Technology (IT) as the

internet, software, and applications appear in almost every corner of the digital world. Sometimes,

as users, customers do not think how natural and effortless a person can get used to an app or

navigate a website. Are humans that smart? Or, should there be something else that completely

changes the IT industry to the point we don't have to think much when it comes to how to use an

application?

The journey and processes to build a product/service that would be released to the market reaching

out to millions of users cannot complete without a User Experience Design (UXD) or UX-oriented

mindset. In every aspect of product/service design regarding the IT industry, UX is fundamental

to build a complete package that may maximize the value and experience a user can get when

using the product.

Diving deeply into many UX design layers, the author sparks an interest in the user behaviors and

decision-making that are affected by psychological principles. Comprehending what users need

and feel is the belief to provide the seamless user experience. Therefore, the importance of UX

design and the study of psychology to user behavior are vital and necessary factors that lead to the

decision of the thesis study and project.

1.1. Aim and scope of the thesis

UX Design has proven to be the potential and a crucial aspect of the modern world, especially

when software, website, and application are the new forces to economic growth. Design thinking

consistently links to improving the future (Simon 1996). With the continuous updating of new

technology and design, UX and UX design become the new competitive edges for the software

industry and other business models in general.

The thesis aims to study the fundamentals of UX design and Psychological theories related to how

users make decisions; therefore, how UX/UI (User Interface) design is affected. The definition and

structure of UX are researched to emphasize the importance of UX in IT products. Finally, the

academic knowledge and theory are applied to the realistic project as an empirical application.

7

The company project's scope is to verify the psychological theory and its implementation to

realistic cases, affirm the academic knowledge in UX design to possibly provide a seamless plus

positive user experience. In the end, the thesis work serves the real needs of working life.

1.2. Project background

Working as a Business Analyst Intern at KMS, a global outsourcing software company in Vietnam,

the author had the chance to explore the UX Design field and realistic experiences with multi IT

projects by designing wireframes and UX. By the time the thesis was written to the end part of

theoretical sections, the author had also been in a personal project working with Camellia Bees, a

company with the trademark based in the United States. The client's need is to build a new website

for Camellia Bees, replacing the current one: CamelliaBees.com. With the agreement from

Camellia Bees, the author took charge of the UX and UI design phases, and the project result was

allowed to be used as a case for the thesis.

1.3. Case company

Camellia Bees, a company with an official trademark based in the United States, specializes in

producing handmade supplies, crafted collectibles, and limited vintage jewelry. Their best-seller

products and favorites are handmade paper flowers and quilling cards. These products typically

are sold on Amazon, Etsy, which are also their main channels.

For the near future, with the founder Ms. Trang's vision and mission, Camellia Bees has reached

the phase to take focus and consideration on empowering the official website as the primary traffic.

The project's mission is not to depend on Amazon and Etsy's system and policies in the end. With

the goal of rebuilding the current website and expanding its field, Camellia Bees gradually aims

to attract new customers to the site and retain the old customers to be transferred from Amazon

and Etsy.

The client themselves conducted the market research and requirements to conclude the re-

innovated website's essential features and functions. Following that, the author designed the

wireframes and UX/UI as design and prototyping phases to move on to the next development stage.

8

1.4. Thesis structure

There are five chapters that structure the thesis. The introduction is written as the first section to

generalize the thesis topic, why it is chosen, and how the author worked with the company case.

The second, third and fourth chapters include all theoretical frameworks the author researched and

studied, written in structural orders. First, the definition of UX and UX design introduces the user

interaction basics to a system or product. Then, it explains the structure and elements inside the

user experience. The comprehension of structural designs emphasizes why UX planes and

elements are crucial that partially contribute to the product's success. It is essential to understand

how to build a design with layers and components. Just as importantly, for the psychology

framework in the third section, the author chooses the theory of planned behavior (TPB), which

explains and defines the individual intention of performing a behavior (Ajzen 1991).

In the fifth part, this thesis's empirical application is to conduct a project for a company case of re-

designing the website: CamelliaBees.com. The result is shown as three main pages for the web

UX/UI design. Besides demonstrating how the author applies psychology to UX components, the

design process will be explained and clarified along with the intentional components.

The business owner and one senior UX/UI designer are interviewed as a qualitative method to

collect the project evaluation and analysis in the final chapter. Interview analysis and results to

finalize the conclusion of the thesis are also completed.

2. Fundamentals of User Experience (UX) and User Experience Design (UXD):

The association and assumption of software development are mostly related to its core features

and functionality. Developers, therefore, seem to decide and control the destiny of product success.

However, with fierce competition in the technological field, between multinational technology

companies across the domestic market and the global market, a product with the same functions

can distinguish itself by possessing better UX/UI designs. This theoretical part will define the

terms of UX, UXD and clarify the importance of UX design to a product, regardless of the same

functions and technological requirements.

9

2.1. What is User Experience?

Before the era of technology 4.0 arrived and became indispensable, the closest subject related to

UX design in the software industry may belong to product design or industrial design. Industrial

design focuses on the aesthetic looking, functions of the product, and the ultimate value plus

experience provided for the end-users (Industrial Designers Society of America). It is the work of

conscious thinking of how the user will interact with the object. The designer has to make sure the

experience of using the product will be comfortable, smooth in hand, or cannot cause any harm. A

product cannot perform its function if the product itself is unusable (Kreitzberg 2009).

Nowadays, when it comes to User Experience in Information and Technology (IT) field, there are

plenty of UX definitions. In the book The Elements of User Experience: User-Centered Design for

the Web and Beyond, Jesse James Garrett (2011) defines User Experience as

"The experience the product creates for the people who use it in the real world."

Considering some other definitions, such as International Organization for Standardization (ISO)

states in part Human-centered design for interactive systems (2019) about User Experience as:

"Person's perceptions and responses resulting from the use and/or anticipated use of a product,

system or service."

User experience controls how users feel within the interaction, in a context of a system, device, or

product. That usage experience fulfills the exact needs, a joy to use, seamless merging of

engineering, marketing, graphical and industrial design, and interface design (Norman & Nielsen).

User Interface (UI) typically goes along with User Experience (UX) as a pair UX/UI due to the

fact that UX is considered to encompass UI, as user interface (UI) contributes to the whole user

experience. Visual and aesthetic design in UI plays a vital role in affecting user perception toward

a product that decides conversion factors in user interest, user retention, and user loyalty.

2.2. What is User Experience Design?

In the book The Basics of User Experience (UX) Design, Soegaard (2018) defines UXD simply

as "User Experience Design, as its name suggests, is about designing the ideal experience of using

a service or product."

10

To create an optimal interactive environment suitable for targeted users, User Experience Design

(UXD) focuses on improving a user's overall experience as the individual interacts with an app or

a website to achieve the goal for maximum customer satisfaction.

It means developers and designers need to keep the mindset of user-centered design: take users

into consideration in every developing process, concentrating that everything the user experiences

in the app should result from a conscious decision with thoroughness. (Garrett 2011)

2.3. Why User Experience Design matter?

Given above are well-embraced definitions of User Experience, but to answer the prime query,

why we need a UX role in this 4.0 industry, and what makes it necessary?

Hassenzahl (2011) believes in what Experience Design gives to users is beyond mere functions:

"Experience Design stands for technology, which suggests meaningful, engaging, valuable, and

aesthetically pleasing experiences itself."

Clearly, those products seem to have good appeal and work well functionally. If it combines

integrated design thinking with orientated user experience, the total package can enhance the

explicit outcome beyond functionality and aesthetics (Garrett 2011).

These contributors differentiate between similar apps and form a measurement between a bad UX

with a satisfying one. However, due to the frequent human interaction of computer software and

mobile applications, users are naturally affected and getting used to the high quality of User

Experience from industry leaders. The expectation is built to have supreme and similar experiences

with all other products users are exposed to. Thus, when users have a poor experience with an app,

the users' perspective toward the service and product changes skeptically. In a negative direction,

this can affect business and the company (UXprobe 2015).

Specifically, excellent integration of UX design creates preference since the first impression users

download and start to use the app, maintaining visitors to the site, which increases the likelihood

that the user may complete the targeted, directed actions (Burns 2017). The more the company

invests resources to User Experience design, the more value and financial benefits will turn into a

higher ratio of Return and Investment (ROI).

11

Figure 1. An example of UX/UI (Amazon 2020).

In business, the rise of ROI proves the product is running successfully. The conversion rate is

defined as the ratio between the number of visitors and people who take the desired action, which

is considered one of the strongest ROI arguments. The desired activities vary from email

subscriptions, the number of sales, to time spent on a site or an app (Nielsen 2013).

Other beneficial indicators that enhance the value proposition to users and lead to increased ROI

are diverse. For instance, UX reduces Development Time & Costs, Maintenance Costs and

Customer Support Costs. Moreover, UX also increases User Adoption and Satisfaction, Revenue

Growth, Productivity and optimizes Opportunity Costs (UXprobe 2015).

In contrast, with a poorly designed UX, applications stand no chance to demonstrate their

usefulness to users. Branding and technological exposed environment reduce user attention

strength. Frustration and low user tolerance for bugs and errors are the consequence that showed

clearly by statistics: 79 percent of participants only retried the application once or twice if the app

did not perform its functions (Perez 2013), 80 percent of applications were deleted after the first

usage (Perez 2013). If UX fails to provide what users expect and want, it isn't easy to give any

reasons for users' retention. Customers lost means profit lost, explained as customer relationship

may lose to the hand of competitors or abandoned. According to Genesys, this global average

value for each loss is approximately $243USD (2009).

12

Figure 2. The graph of design alternatives and cost of change in software development

(UXprobe 2015).

Doing the correct UX and usability activities helps avoid the increasing cost of later software

development processes (UXprobe 2015).

Today's software development companies, UX design is now a key component of a software

product and is often the basis for the product's success. That is why, nowadays, user research and

design thinking belong to the early development process. The team focuses not only on the

aesthetics and branding for potential users but also on integrating the user-centric, user-oriented

design to overall experience design. Instead of merely focusing on functionality, randomizing

suitable components together with assumptions and instinct, engineers and designers are talking

about usability, desirability, consistency, ease of use, and intuition. The next chapter is going to

present those essences which form a great User Experience.

13

3. Components and elements of User Experience:

After the definition of UX design, the consolidation of UX importance to product success, this

chapter presents the components of User Experience, analyzes the layer structure, and how these

factors impact the design. Moreover, such awareness and comprehension through this part will

certainly help the author build the UX design project with more criteria and fundamentals.

3.1. The 7 Components of User Experience:

UX concepts, definitions, and terminologies are changing annually to meet the pace of

technological improvement. Obsolescence is forgotten and replaced with more creative

innovation. However, there is a graph developed by Peter Morville (2004), which is widely

accepted by professionals and UX design institutions. It is called the User Experience Honeycomb:

Figure 3. User Experience Honeycomb (Morville 2004).

There are seven facets or components forming the honeycomb, and each quality has a level of

influence on the User Experience. This honeycomb practically helps the team to have a broader

view and avoid making mistakes by only paying attention to usability or usefulness and skipping

the relevant factors.

14

Useful: functions and features provide users with the tool to achieve the intended action that

satisfies users' need and bring value. At the end of the race, the technology will make a difference

to any products or tools' success. It must be the developers' first and fundamental goals to achieve

functionality and correct requirements (Kreitzberg 2009). Then It is considered to be useful.

Usefulness only succeeds if it is created for the correct positioning type of users. Because if it

targets the wrong users, factors such as usability and desirability are worthless (Little 2009).

Example: Parents want a design that has the ability to control or assign permissions so that it can

present certain users from making the purchase. Children however may not want that management

dashboard (Yocco 2016).

Usable: useful criteria cannot perform their functions without usability. Usability is defined as the

capability to use a system, product, or service with effectiveness, efficiency, and satisfaction in a

specified usage context (ISO 2019). To make a product usable to users means the product meets

the minimum requirement to be launched on the market.

Desirable: human emotion can play an essential role in building affection and preference for a

specific product. Influences such as esthetics, branding, and design can transfer the desirable

feeling to users that make retention. The E3T model created by Dr. Charles B.Kreitzberg (2009)

shows the three elements which affect user desirability:

Dimension Desirability

Engagement User Interface (UI): is it appealing, attractive,

interesting?

Empowerment Users should feel to achieve something as

competency, power, or intellect.

Ease of Use How much effort does it take to learn and use

the product? The system should be flexible so

that users can utilize functions in their own

way.

Trust Depending on the accuracy and precision of

the system result that may decide user trust.

Can the content and information provided to

15

the user be reliable and predictable? Are the

system recommendations fit the best user

preferences?

Table 1. Characteristics of the E3T Elements (Charles 2009).

Whether it is UI design or UX writing, both should provide reliably user-centric information and

orient users to engage in products with interactive components, elements. It will undoubtedly push

human-system engagement, making users more committed and inclined to product usage (Riddle

2012).

Credible: trust and reliability that build a relationship with users.

Example: Providing business-related information, presenting a real company, organization, or an

authentic, trustworthy person behind a product and making the system bug-free and error-free,

proofreading information accuracy (Fogg 2002).

Findable: design objects, navigation components, categories, and UX content should be findable

and familiar to users. UI design should avoid strange structures and arrangements, which may cost

resources to educate the market.

Accessible: coding and UX writing can make a huge difference in building user traffic plus

positive result for search engine optimization. For e-commerce and online sales, well-structured

SEO is an essential influence on business sales and profit.

Valuable: a good design measurement by creating more value to both sides of business profit and

user experience.

3.2. The 5 Elements of User Experience:

Besides the seven characteristics of User Experience, describing the value essence that UX design

should be and capable of providing for users, there are still some aspects to study, analyze the

structure and experience design process. It is the five elements of User Experience. Based on the

understanding, designers and project developers may comprehend how decisions are made in the

development process.

16

The overall seamless and smooth experience that industry players provide for users is based on

countless efforts from different decision-making stages. In the book The Elements of User

Experience: User-centered design for the web and beyond, Jesse James Garrett (2011) divide User

Experience into five structural elements which are interdependent to each other:

The Surface Plane: includes what a user directly sees at a website, a mobile app, software, or a

system. It is overall the visual design and the graphics appearing on the surface. Some can be

illustrations, images, or texts.

The Skeleton Plane: it is the positions of a block of texts, photos, buttons, controls. The design

of this layer is to optimize the management and arrangements of these components that will

enhance user experience with effectiveness and efficiency.

The structure plane: this layer comprises information architecture and decides user flow. The

skeleton may determine the detail of UX components like navigational components and

specifications like interface elements. Simultaneously, the structure defines how users move

through pages, the orders of screens, and how each page is structural with each other to lead users

to achieve the intentional actions.

The scope plane: Documents and requirements are elicited to functions and features. The scope

is where to list which functions and features may exist in the product.

For example, some e-commerce sites have a feature that saves previous purchasing information

such as location and payment details. Whether what feature includes on a site belongs to the scope

plane.

17

The strategy plane: what features and functions appear in the product are dependent on the

strategy—the reason for the product's existence and why people will use it. Business objectives

and user needs are what the strategy needs to define (Elgabry 2016).

Figure 4. Five elements of UX (Garrett 2011).

Garrett divides the product in half, one serves as a platform for functionality, and the other is an

information medium. Five planes, therefore, also have attributes of both sides, from functionality

to information. The functionality side comprises several tasks or steps involved to complete,

accomplish one or more tasks. On the other side, UX content and information are important factors

that create an information-rich environment and experience.

18

Further analysis, five planes structure elements itself to smaller components:

Figure 5. Detailed components of 5 Planes in UX (Garrett 2011)

The Strategy Plane:

When it comes to product objectives, it can be a combination of business goals, brand identity, and

success metrics. Business goals as the final result are to gain financial benefits or to save efforts

and company resources. Brand identity is quite extensive that may cover all the aspects of the

product. Characteristic is expressed in graphics and visual design, in the color palette, typography,

illustrations, or even small icons to banner images. The characteristics of a brand can also be

relevant to the quality of services and functions, how information and content communicate to

users, that in the end, the overall experience leaves the user a specific impression and branded

associations. Lastly, when it comes to the success metrics, having a measurement to evaluate the

project's success and adjust the practices to ensure the investment and effort are spending correctly.

The strategy is supposed to design a product aligned with user needs. The ultimate purpose of any

19

project is to create a product or service that is useful to many types of users. It must create real

value by having a solution to solve a problem.

The Scope Plane: the strategy with business objectives and user needs is elicited into functional

specifications: functions and features set that exist in the product and content requirements: various

content types.

The Structure Plane: two crucial fields require the support of the other. On the side of

functionality, the structure plane determines interaction design (IxD), which are interactive actions

between humans and the system. Regarding the informative structure, the structure plane is

responsible for the information architecture (IA): it arranges content elements and structures the

information for ease of learning and ease of use.

The Skeleton Plane:

This layer deals with a more advanced level of detail. It is divided into three components.

Information design denotes the goal that is to present the information effectively for better

understanding and communication. Interface design (UI) requires a clear and precise UI. It aims

to arrange design components with the least abstract and confusing elements. Navigation design

solves the task of directing a collection of user movements from screens to screens to achieve the

desired mission.

The Surface Plane: it implies the sensory experience in a finished product. In the virtual world,

vision is such a fundamental factor to affect and intrigue emotion and feelings for users.

Aesthetically pleasing emotion can even compensate for other deficiencies, impress users in a

pleasant way throughout the whole experience. Positive feelings and visual enjoyment lead to less

user reluctance to use and retry the products (Little 2009).

4. Psychological Theories:

After examining the fundamental elements and structure of User Experience Design, chapter fourth

is written to present the psychological theories that the author research found sufficient and

applicable for the empirical project.

20

In the field of behavioral psychology and volitional psychology, researchers study human ability

to make decisions based on rational judgments and factors that can affect human decision-making

processes. These are crucial fields for UX designers to adjust the way of approaching users in

making optimal user-oriented designs. The present chapter will comprise the Theory of Reasoned

Action (Ajzen & Fishbein 1980a, 1975b), then it was developed into Theory of Planned Behavior

by Icek Ajzen (1985).

4.1 Theory of Reasoned Action

The theory of Reasoned Action (Ajzen & Fishbein 1980a, 1975b) was first developed by Martin

Fishbein to discover the connection between attitudes and human behaviors, intentions and actions.

It was described to understand the causal links from beliefs, attitudes, and intentions to actual

behavior (Ajzen 1985).

According to Ajzen (1985), human behavior was mainly goal-directed. Within the assumption that

people are in volitional control when holding the ability to facilitate the action, the Theory of

Reasoned Action suggests that the behavioral intention to perform or not to perform an action is

the determinant of the likelihood the behavior happening. Then, by exploring the determinants of

intentions, the theory finds that human intention combines one personal factor and the other social

influence or so-called attitudes toward the behavior and subjective norm.

Figure 6. Theory of Reasoned Action (Ajzen & Fishbein 1975).

First, attitude toward behavior represents an individual's evaluation of behavior whether that

action results in any positive/negative outcome or gain/loss of any values to that person. Each

benefit and gain from performing the perceived actions contribute to the proportion of behavioral

21

belief, the positive attitudes of that person to the behavior, and vice versa. What shape the personal

attitudes toward the behavior are termed behavioral beliefs (Ajzen 1985).

Subjective norm denotes social influence, level of encouragement, and social perspective on the

subject to perform the behavior. On the contrary, a person believes that his referents prefer not to

perform the action would pressure him to avoid committing the act. This belief is called normative

belief (Ajzen 1985).

Generally speaking, people tend to perform an action to achieve a specific outcome if the actions

are believed to lead to a positive result or a gain in value and if the others also think and encourage

in that action.

4.2 Theory of Planned Behavior

Regarding behaviors with undefined volitional control, Ajzen (1985) noticed the probability of

behavior affected by intention and perceived behavioral control (PBC). The researcher realized

that the previous model had its limits on behaviors over which people have incomplete volitional

control (Ajzen 1991). Therefore, the theory of Reasoned Action is expanded to the theory of

Planned Behavior (Ajzen 1985a, 1991b) by including perceived behavioral control as a factor into

consideration. The extension explains the behavior/actual performance determined by both

behavioral intention and behavioral control, which decides even a person with an intention to try

performing a particular action may happen in failure if a person's control over the various factors

toward the behavior may prevent it.

The intention, therefore, can only be used to anticipate a person's attempt to perform a behavior,

regardless of its actual behavior. The personal degree of control over the behavior or the person's

perception that believes in his ability to facilitate a certain action influence the tendency whether

he will engage in a behavior. "The harder the person tries, and the greater his control over personal

and external factors that may interfere, the greater the likelihood that he will attain his behavioral

goal." (Ajzen 1985). These two factors determine the likelihood of the actual performance of the

behavior.

22

Figure 7. Theory of Planned Behavior (Ajzen 1991).

As shown in figure 8 above, Ajzen's theory of Planned Behavior (1985a,1991b) summarizes three

interactive factors:

Behavioral outcome beliefs: People evaluate a particular action with a good or bad outcome based

on their available information. Their beliefs about the outcome form into an attitude toward the

behavior.

Normative beliefs: People seek social judgment and assessment. As a reference, people are

influenced to engage in or avoid the behavior. Normative beliefs result in subjective norms.

Control beliefs: People are more likely to engage in behaviors they feel control over or easy to

engage in. The outcome of control beliefs leads to perceived behavioral control. It plays an

important role in the theory of planned behavior because the difference between the two theories

is the addition of perceived behavioral control (Ajzen 1991).

5. The web re-design project: CamelliaBees.com

This chapter presents the company case design project's primary final outcomes:

CamelliaBees.com in the form of total Interface Designs following and according to the five

planes/structures in UX design (Garrett 2011). With the specific concentration on the components

23

as Interface Design, Navigation Design and Information Architecture & Design, the author also

demonstrates how Reference Point, Loss Aversion and Theory of Planned Behavior be applied

into these elements. User Experience design processes are described with author narratives. The

following subchapter will also comprise the business context, analysis, and design process for later

development stages.

5.1 Business Context and Design Process

A business project may have its unique procedures and process. In the case of Camellia Bees, after

meetings and discussions with the founder Ms. Trang, the summary of a few business factors and

critical insights are unfold and documented in order to align different teams with the same goals

in the subsequent development process.

Regarding the process of eliciting information from the client, Ms. Trang, founder of Camellia

Bees, passionately shared her vision of repositioning the business concept and its current

expanding mission. Specifically, about the upcoming business model, Camellia Bees wanted to

reposition the company as an E-commerce site to sell their own handmade, crafted items and

products made in Vietnam. By the fact that the primary market based in the United States, the

client found their reference for Etsy, an e-commerce website on the same field of handmade,

vintage items, which later became the design reference. To save the costs and resources, the client

had self-made all the researches and finalized the requirements to transfer to the outsourcing team.

When the project started, there were already some business information and a list of requirements

that had to be focused on. For further project details and information, the design process for

Camellia Bees is illustrated by the author in figure 8 below.

24

Figure 8. Design Development Process of Camellia Bees.

The solution CamelliaBees needs is a better interface design and UX writing structure that should

enhance the user engagement with UX/UI. It is also said that product screening is essential to

strengthen the total shopping experience.

In the context of the thesis topic, the chapter content will focus only on the UX/UI design results

based on three main client requirements: Landing page, Faceted search & filter functions, and

Product page. These chosen functions and features are believed to adequately represent the UX/UI

designs, including the Interface Design with organized and clear Information Design/Architecture,

to implement the psychological theories into an empirical project.

25

5.2 Project execution and theoretical implementation

As stated in figure 8, the persona model with user pain points made the client reconfirm the value

proposition with apparent functions and features (belonged to scope plane), which is to enhance

the shopping activities through category, filter, and product display to fulfill and synthesize the

experience journey. The next steps were to examine the detailed features that help to accomplish

the listed functions. Then the author would draw the complete wireframes to finalize the discussion

with Ms. Trang. It was finished and revised with the User Interface (UI) submissions.

5.2.1 The creation of Wireframes for Camellia Bees:

After thoroughly reviewing the strategy and scope plane, the author decided to draw wireframes

(equally to a skeleton plane described by Garrett 2011), which were responsible for arranging and

managing UX components along with finalizing UX writing. The wireframes were gradually

discussed and reviewed with the CEO to achieve a mutual agreement on the structures and

contents. It was drawn and revised on Figma, a vector graphic editor and prototyping tool. Overall,

the wireframes arranged the positions of every type of component as a block of texts, photos,

location of buttons & controls. The purpose of arranging content elements and structuring the

information for the wireframe design is to provide a user-oriented environment with familiar

navigation and layout structure that facilitate the ease of learning and ease of use.

26

Figure 9. Wireframe for the landing page.

In a landing page, some essential components are listed: brand name and logo, header, sub-header,

sub-navigation (categories), blocks for Image or Video, Multi-image Carousels with Unique

Selling Proposition (USP) and Call-to-Action (CTA), blocks for Sales & offerings, buttons,

product listings, product components (name, price, ratings). It is easily noticeable that for the

landing page of Camellia Bees, there is ample space near the top of the viewable area for hero

images under hyperlinked carousel element to navigate users to specific product sites or an

advertising campaign. On the landing page, the logo of the brand is put on the top left for the most

crucial factor. The search bar is located in the middle at the top of the screen. Registration is

supposed to be at the right top of the landing page, aligning with the user's eyesight. These belong

to the header position, where navigation elements are prioritized to appear first. It is theoretically

27

applied and explained with the F-shaped pattern, a discovery by Jakob Nielsen (2006), to suggest

that users first apply their eye movement horizontally across the upper part of the website area.

Figure 10. Wireframe for faceted search.

All the required components for a faceted search include traditional search techniques with a

faceted navigation system. Specifically, it combines multiple filters, a dropdown button for the

sort function, layout for product listing, product components. The ribbon or the product tag

indicated "Best seller" means highlighting the top products that serve the user's need to know a

few most purchased products. A filter bar is specialized for user search needs. The hierarchical

navigation shows categories and sub-categories for the item user are searching for. The vertical

bar also has filter options to show products with a particular rating level, a product price range,

and other criteria. This function plays an important role in an E-commerce site as one of the

compulsory requirements when it comes to advanced searching tools, providing personalization

and practical utility.

28

Figure 11. Wireframe for the page of product detail.

Thirdly, the product page is considered to contain the most blocks/containers of content and

descriptive information. UX writing and Informational components need to be in the most detail

while carefully being researched both by theories and other e-commerce competitor studies to

avoid the case of missing essential information and description. The required elements comprise

the breadcrumb which allows users to identify their current location within the system, the text

field for the name of the product, a dropdown button for size selection, options to different colors,

numerical text input plus quantity selector, block of text for product description. There is also a

need to slightly alter the difference between the primary button "Buy now" with the second one

"Add to cart" by a stronger and bolder color. The role of a wireframe is to highlight what to be the

most important in a structural order.

Figure 12. Wireframe for review function.

29

Last but not least, the last part the author wants to present is the wireframe for the customer review

function. It is as important as the product screening and product display on E-commerce site due

to the subjective norms and social acceptance perspective from users, which will be explained in

some next subchapters. The showed wireframe is divided into three main sections. The first top

left corner is prioritized to illustrate the summary of reviews. The visual aid such as the large

number font size indicates the product point according to the average purchaser ratings. It is then

clarified by the number of stars in conjunction with the progress bar and the number of reviewers

submitting that ranking. The second element is the image containers where the buyer images would

be uploaded and visible for other users. The third component is on the half right side of the frame,

which holds every review and comments from users with names, avatar icons, review dates

highlighted by the line of verified purchasers even to raise the legitimacy.

After all the functions and features were decided and arranged, the elements were organized and

structural orders were determined, the wireframes for three main pages were finally finished. On

the following processes, the author needed to design the user interface (UI) to complete the visual

looking while continuously adjust minor wireframe errors. User experience (UX) design would

typically play a vital role in the latter part of software development when codes had been written,

and some features and functions could already be working. As the project limitation, this thesis

can only cover the area of wireframes and UI designs. By researching UX knowledge for the thesis,

the author wants to explain why the components in Camellia Bees designs are being created and

used or clarify why they exist. The following subchapters in chapter 5 present the UI components

that have persuasive effects on the user's intention of behaviors according to the theory of planned

behavior (Ajzen 1991). The results are also the author's creation with Figma tool.

5.2.2 Design for Positive Outcomes:

People hold some information and belief to a specific action that results in a certain outcome.

Whether a behavior has a good or bad outcome, the belief will form the attitude toward that action.

For instance, is purchasing a new laptop good, bad, or neutral? If a person considers the benefits

outweigh the expenses, there is likely a chance that the person will form a positive attitude toward

the purchase (Yocco 2016). And that attitude toward a specific behavior is one of the three

elements forming the behavioral intention which determines the decision making (Ajzen 1991).

30

Applied the theoretical mindset, it is apparent that the tendency of users performing an action as

browsing the website or purchase an item depended on the belief of direct benefits users may

receive from completing a process of various actions. Thus, the Camellia Bees designs need to

show users clearly how people will receive value from using the website. With regard to positive

outcomes, the author pays attention to financial benefits, economic saves (time, effort), and ease

of use. In reference to the User Experience Honeycomb (Morville 2004), the design must show its

usefulness (financial benefits, time and effort saves), usability, and desirability (ease of use).

Figure 13. Design a flash sale campaign.

For an example of the Camellia Bees flash sale campaign, the main target is to persuade the users

of the attractiveness of the offering deals. It shows the limited time and limited amounts of products

with a timer and a progress bar. With the purpose of creating a scarcity heuristic associated that

the products may be sold out or the time of the deal may end, the users may experience a feeling

of potential loss that urge them to take an action of viewing the product details thus decide to

finalize a purchase. Besides, the ribbon component functions as a tag indicating the percentage of

the discount. It is highlighted as a piece of essential information proving the direct financial

benefits to whoever purchases the deal. There is also an original price designed as a reference point

with a smaller size and fader color. A reference point plays a role in assisting people in comparing

and evaluating the outcome with gain or loss. In the design, the author wants users to experience

a price saving and gain benefits. Based on this reference point and the discount ribbon, the website

31

is supposed to give users access to the latest shopping deals and assist people in performing a

review toward the presented potential gain. Thereby, users should form a positive attitude toward

this value proposition.

Figure 14. Design customized recommendations.

When it comes to saving people time and effort, the idea is to introduce to users the suggested

function. The website provides collective information such as popular keywords for the searching,

the top-selling products in months, the related items based on the product history of browsing. By

personalizing the experience of shopping, a system that can supports users with historical data and

valuable information may save much time for collecting information and increase the efficiency

of users searching for the needs. Considering these recommendations hopefully serve the user

needs, they can reduce the fear of loss while using the site, which in this case are user’s time loss

and effort loss. The site wants to be built to collect and provide all the information may users need.

32

Figure 15. Design navigational components.

The basic element of every website is navigation. It helps users finding the desired category, a

specific page, or access to a certain function. Well-structured navigation will create a seamless

user experience that boosts the friendliness and ease of use of the website.

There are types of navigation presented in figure 15. First is the global navigation which the menu

and connection links are the same for every page. Secondly, sub-navigation is the navigational UI

that helps users access lower-level categories in the information architecture system. Thirdly, the

author also designs hierarchical navigation, which shows a structural order from the main category

to the sub-categories. Moreover, there is also a breadcrumb that displays the current site

positioning as well as previous pages. As the last sub-chapter mentions the correlation between

structural importance and layout, all the navigational components validate a powerful tool to

empower users to utilize the dynamic categories, replacing the search through multiple of pages

and thousands of products. It is the ease of use for users where people can interact with the design

interface to complete the tasks with the least amount of effort.

33

5.2.3 Design for Social Acceptance:

Normative beliefs are the personal assumption people have about the perception of others toward

a specific behavior. The way the community judges the action according to that person's belief

form the subjective norms. Due to the negative or positive perception of the individual feels about

other judgments make the person be encouraged or avoid the behavior. Regarding the theory of

planned behavior (Ajzen 1985a, 1991b), these normative beliefs contribute to the intention of user

engagement in a behavior.

Figure 16. Camellia Bees’ Color Palette.

In the context of the brand characteristics and brand guidelines, the author also needs to take into

consideration a suitable and appropriate User Interface design aligned with the targeted customers

and how Camellia Bees want to position itself. It is discussed that the client wants these branded

colors used in the designs, and it must be oriented as a clean, modern, and feminine website.

Finally, the website is designed to familiarize current targeted user awareness which is young to

middle-aged females. Thereby the concept design possibly gains a large amount of user

34

acceptance. The user interface is lightly oriented to female preference in terms of colors, shapes

of objects, and buttons. The color pallet is chosen in pastel.

Figure 17. Design a product detail page.

The need for promoting normative beliefs to users results in the design of components relating to

social acceptance. It creates the functionality to create and store purchaser assessments. In this

community, people can raise questions, rate the products, add comments and upload pictures.

Figure 18. Design for Social Acceptance.

35

Visitors and users can visibly notice how many people have the same interest in the item, how

many people have already purchased this product, view the comments from other members, read

the top and worst comments. All the features are incorporated into the product ranking system.

An individual may build their subjective norms from what and how other people are reacting to

that activity. Thus, it is the opportunity to build a community and encourage the members to

participate in answering questions and review products. The comment and review sections lead to

the increase of user perception that Camellia Bee’s website is socially accepted by showing it is

widely engaged by a community with interactive members. As figure 18 shown, users encounter

with the review summary to have a highlight of overall opinions from all the reviewers. Just by

skimming, can the visitors assume the product quality with the average score. Then users can

browse through product reviews, examine purchased product pictures, filter reviews based on

criteria such as only reviews with images, the newest reviews, or the top appreciated reviews. It

should fulfill the visitor questions, secure the worries and support the process of making a decision.

These elements are planned to encourage users to engage in behaviors that are believed others also

find acceptable, trustworthy, or even profitable. These can promote greater use of the site, rate of

return (RoR), and increased sales by users who possibly see worth buying after scanning other

purchases and judgment.

5.2.4 Design to Give users Control:

Users tend to have the intention to behavior they feel control over or that are easy to engage in.

The control beliefs then reflect the perceived behavioral control of an individual. It is based on the

belief level of difficulty a person can execute the action and complete that behavior (Ajzen 1991).

According to the theory, it is known that people may prefer to do things that provide a sense of

total control or increase the perceptions of control. The notion is applied to the UX design by

supporting the user mindset that they are empowered to perform the tasks. Active empowerment

throughout the user experience should increase the user control beliefs toward the usability of the

website.

36

Figure 19. Design faceted search and sorting function.

To promote the feelings of having control over using the website, many optional product attributes

and filters are added to search results. Gradually the idea becomes the faceted search and filter

functions. With faceted searching and filtering functions designed in the Camellia Bees’ interface,

users are able to actively choose the desired search and complete the searching progress with the

highest efficiency. They allow users to customize the search with criteria and optional attributes

as the product price range, available shipping location and more. Further, the search results can be

sorted out depending on preferences such as keyword relevancy, sort by featured, recent arrivals.

37

Users, therefore, are empowered to customize the search results shown on their screen. The author

expects these features will increase user sense of control along with the browsing experience and

positively affect the intention of purchasing the product.

To summarize, all the features, functions, elements, and components from Camellia Bees’ designs

are expected to enhance the three beliefs regarding the theory of planned behavior that will form

the behavioral intention, leading to the user likelihood of making a purchase. On the one hand,

there are the design parts that help users yielding benefits. The other functions try to stimulate

social acceptance for the site. Lastly, users are empowered to take control of functions and

customize the interface in their preferable way. Hopefully, the author's designs can contribute to

user beliefs, greater usage of the site, and purchasing intention.

6. Evaluation and Discussion

It was observed that these components seem to be an obvious and ordinary design feature to most

of the E-commerce users. However, to make these elements become as obvious as a standard in

the design system, UX/UI design has been experienced and refined through years of trial and errors

to produce the current design system as users are experiencing today. The technology leaders

undoubtedly set up to the market player these competitive standards, left the effort of many

researchers and designers uncovered. Nevertheless, the design movement is still continuing. What

users are experiencing at the moment may not be the correct answer in the near future, plus what

people cannot imagine may somedays appear as standards for a design. It may see alternatives

and changes from designers to technologies that affect UX/UI design in later software &

application development.

The project was conducted to demonstrate how the author studied the UX/UI design and applied

the study to an empirical project: Camellia Bees. It is considered a project success when mutual

agreements were set, and the UI design results were considered client satisfaction. Besides, there

would be some comments from a Senior UX/UI designer at KMS Technology Vietnam about the

project results.

6.1 Project evaluation

Trang Thu Nguyen, Founder of Camellia Bees.

38

The comments from Trang aimed to the author’s execution process and the finished requirement

checklist. Because of the detailed elicitation targeting the founder from many meetings, there were

fewer conflicts and time waste for both the author and client. All the partial submissions were also

scheduled well. Efficient communication helped the design process go well; hence, all client

requirements were fulfilled on time. The web layout and structure were visualized similar to

Trang’s imagination. In terms of the design concept, Trang believed the graphics could have been

done better. It was due to the author lacking experience in this UX/UI field. Overall, the designs

were reviewed by clients and gained acceptance.

Regarding the author’s thesis, Trang expressed a liking to the psychological theories. She was not

much aware of the customer decision-making process while operating the business. The design

components seemed to be common factors to a non-designer before the designs were explained in

a complex theoretical way. There were elements Trang did not ever think of. After reading the

author’s analysis, Trang was excited to see future changes and expect a good turnover from what

the theory applies.

Thi Xuan Nguyen, Senior UX/UI design manager at KMS Technology Vietnam.

Thi Nguyen, a senior UX/UI designer with more than ten years of expertise, including her

knowledge domain in Information Technology Field and Design, tended to focus on firstly whether

the design (User Interface) was appropriately built for the target user: color pallet, fonts of

character, illustration, feelings generated from the overall design. The right style and concept

potentially can create a liking, preference or positive impressions that enhance the user's cognitive

bias toward the software/product. However, according to Thi, UI for business is not necessary to

be too flashy because it may hold a risk of the least focus and concentration on content and

information, which should be the main highlight instead of the UI. Then, it was also essential to

notice the way the design effort tried to group the information and lead users to find the information

people want quickly. It showed the difference in years of experience between a lean, organized,

simple design that assisted users easily learn to use the product that leads to ultimately perform

their action with a worse design where users felt loss to navigate and whether what actions users

should perform gradually. UX writing was another factor that affected the user process of learning.

As the amount of information is enough for users to read effectively, the precise naming headers

and buttons are considered excellent facilitation of UX writing. Moreover, interaction design

39

between different screens and pages also belongs to a part of UX design. Effective transition with

the least effort and number of steps is also the target of any designers to let users perform a specific

action with the most efficiency and effectiveness.

Expressly, to the thesis project of Camellia Bees’ design, after a thorough review, Thi agreed that

she had the prior feeling to purchase the products if the site could be launched in the future. It was

a trustworthy impression that the overall design had brought to her or so-called aesthetics.

Aesthetics in design made people have a positive feeling toward some objects, elements, or their

synthesis to create the vast picture. Regarding components, she commended on the "FLASH

SALES" content with a countdown timer and process bar of current sales. Many studies show that

the moment of being aware of the potential lost attached with scarcity heuristic, it suddenly became

an urge to balance that feeling of loss, whether a user decides to view the item or perform a

purchase. After going through three pages, she agreed on the layout and structure that the design

had been arranged. The navigation was easy to look up, and the UX writing was organized

understandably. Thi believed that due to careful research and study on various of top competitors

in the e-commerce market (Amazon, Etsy, Lazada, Tiki) the author had done many correct steps

in knowing what can be good for the design and why people devoted to build that components or

that functions in the system. As the cons of the project, she thought that the User Interface (UI)

design could have done better when it comes to brand identity, graphic designs. To conclude, her

comment was aimed at the design measurement. When it came to assessing a design, it could be

subjective and inaccurate. Thi’s comment is also applied to her evaluation of the project. Thus,

developers tended to launch many user tests/ usability tests to gain the changing human insight

throughout the software development life cycle (SDLC). Understanding that user behavior is

changing rapidly with new features being released annually would make any UX/UI designs have

to be versatile and flexible enough to be changed when those forces came.

6.2 Limitations & Recommendations

Due to the restriction of reading the thesis format and unfinished coding, the UX demonstration in

Camellia Bees’ case can only be presented by the UI designs. User experience should be the user

journey interacting with the system. Not only users interact with the interface, but also the system

may require various steps and processes for users to complete a particular action. Together they

40

build and validate the good or bad of a UX design system. For the thesis purposes, only some

functions and features are chosen to be presented, regardless of how users interact with the website.

The UX/UI assessments were conducted by the qualitative method. Apparently, the judgment held

some specific pros and cons. First, there were many advantages when the author facilitated direct

interviews. The interviewees had to invest in time and effort to answer questions compared to

doing an online survey greatly. Questions and answers were dived in and clarified to reinforce the

precision of each part. It was easier to gain insights from users by holding a conversation

throughout the questionnaire. For the thesis case, the most gains came from the elicitation of

interviewee feelings and personal views. It was such helpful information relating to the psychology

topic and user behaviors. Besides, the cons also came from the limited amount of views and

perspectives. With such little database, the answers and analysis could be quite subjective,

specifically when it comes to UX and UI fields. In order to validate the design more objectively,

further evaluations are required. A popular researching technique is called usability testing. After

developers finish some part of features and functions, or the product has already been launched,

early users and testers would be asked to review all the aspects when experiencing the product.

They certainly can generate some mutual opinions, social preferences resulting in precise insights

and data.

For recommendations, the design manager believes that UI designs can be completed even better.

It is such an amount of time until the design skill can be refined to achieve better aesthetics. That

is how a personal development circle continues to learn and grow.

6.3 Conclusions

User Experience is proving its important role in a wide range of fields. Especially in the

information age, web & software development need UX and UI and functions and features as

compulsory essences to build usability and desirability. A seamless user journey required the

implication of psychology surrounding the methodology to help the product be inclined with users.

Ultimately, UX makes the product stay competitive with other opponents possessing the same

functions. User unawareness of the integrated interface inside a website or an application makes

the author realize how difficult UX/UI is in such another complexity level of design. Nonetheless,

UX progress and movement are still continuing to develop at an astonishing pace. UX and UI

41

deserve to have their inherent attention to every company that invest in the information technology

field. This explains the reason why the author chooses UX and Psychology as the research topic

for the thesis.

The thesis topic is about user experience design and psychological theories relating to the UX/UI

fields. In terms of theoretical parts, the author defines UX and UX design to fully understand the

basic characters. It is successfully showed that how UX is vital and beneficial to the IT industry

by providing article verdicts and solid empirical data. Then UX is analyzed to different elements

and structures that may support the author in the process of making the designs. All the UX

elements and structures are necessary to build a list of criteria which is required to create a well-

designed product. Last but not least, the theory of reasoned action as the study of human behaviors

(Ajzen & Fishbein 1975) is chosen for the thesis theory. It was later on developed into the theory

of planned behavior (Ajzen 1991).

As the most important stage, the author successfully applied the research and study into practice.

Many functions and design elements were designed with the consideration of the presented

theories. The development processes went from eliciting information to finalizing requirements.

Then wireframes were drawn, and the final UI was completed. There were three design goals,

including Design for positive outcomes, Design for social acceptance, and Design to give users

control. The design mission was expected to support user beliefs and persuade users with positive

outcomes in order to affect the more significant usage of the website and intentional behaviors. In

the end, the empirical project of rebuilding Camellia Bees’ website was acknowledged by the client

and design manager, which the author considered as positive results. Overall, the thesis outcomes

prove the success of theoretical application into a specific empirical project. The UX foundations

with psychological theories were utilized to produce the Camellia Bees’ web design. The thesis

serves the practical needs of the author working life while provides knowledge in terms of User

Experience and User behavioral field.

42

References:

Ajzen, I. & Fishbein, M. 1980. Understanding attitudes and predicting social behavior.

Englewood Cliffs, NJ: Prentice-Hall.

Ajzen, I. 1991. The theory of planned behavior. In: Organizational Behavior and Human Decision

Processes. 50, page 179-211.

Ajzen, I. 1985. From intentions to actions: A theory of planned behavior. In Action-control: From

cognition to behavior, eds. Kuhl, J., Beckman, J. Heidelberg, Germany: Springer.

Burns, R. 2017. Why user experience design matters most. Seamgen. Blogpost. Accessed October

26th 2020. https://www.seamgen.com/blog/user-experience-design-matters/

Elgabry, O. 2016. UX — A quick glance about the 5 Elements of User Experience (Part 2).

Medium. Blogpost. Accessed on 25th October 2020. https://medium.com/omarelgabrys-blog/ux-

a-quick-glance-about-the-5-elements-of-user-experience-part-2-a0da8798cd52

Fishbein, M. & Ajzen, I. 1975. Belief, attitude, intention and behavior: An introduction to theory

and research. Reading, MA: Addison-Wesley.

Fogg, B.J. 2002. Stanford Guidelines for Web Credibility. A Research Summary from the Stanford

Persuasive Technology Lab. Stanford University. Accessed on 27th October 2020.

http://credibility.stanford.edu/guidelines/index.html

Garrett, J.J. 2011. The Elements of User Experience: User-Centered Design for the Web and

Beyond. Second Edition. Pearson Education.

Genesys. 2009. The Cost of Poor Customer Experience - The Economic Impact of the Customer

Experience and Engagement in 16 Key Economies. Page 9.

Hassenzahl, M. 2011. User Experience and Experience Design. Interaction Design Foundation.

Blogpost. Accessed October 26th 2020. https://www.interaction-design.org/literature/book/the-

encyclopedia-of-human-computer-interaction-2nd-ed/user-experience-and-experience-design

International Organization for Standardization. 2019. Ergonomics of human-system interaction —

Part 210: Human-centred design for interactive systems. ISO Standard No. 9241-210:2019.

https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-2:v1:en

43

Kreitzberg, C.B. & Little, A. 2009. Usability in Practice - Useful, Usable and Desirable: Usability

as a Core Development Competence. MSDN Magazine Issues. Vol 24 No 5. Accessed October

12th 2020. https://docs.microsoft.com/en-us/archive/msdn-magazine/2009/may/usability-in-

practice-useful-usable-and-desirable-usability-as-a-core-development-competence

Morville, P. 2004. User Experience Design. Semantic Studios. Blogpost. Accessed on 27th October

2020. http://semanticstudios.com/user_experience_design/

Nielsen, J. 2006. F-Shaped Pattern For Reading Web Content. Nielsen Norman Group. Article.

Accessed on December 25th 2020. https://www.nngroup.com/articles/f-shaped-pattern-reading-

web-content-discovered/

Nielsen, J. 2013. Conversion Rates. Nielsen Norman Group. Blogpost. Accessed October 26th

2020. https://www.nngroup.com/articles/conversion-rates/

Norman, D & Nielsen, J. The definition of User Experience (UX). Nielsen Norman Group.

Accessed October 11th 2020. Articles. https://www.nngroup.com/articles/definition-user-

experience/

Quesenbery, W. 2001. What Does Usability Mean: Looking Beyond' Ease of Use'. Proceedings of

the 48th Annual Conference. Society for Technical Communication.

Riddle, R. 2012. The 3 Elements of Good Design. Blog Posts. Assessed on 29th December 2020.

https://zurb.com/blog/the-3-elements-of-good-design-usability-u

Simon, H.A. 1996. The Sciences of the artificial. MIT Press.

Soegaard, M. 2018. The basics of User Experience Design. Interaction Design Foundation.

Yocco, V. Design for the mind: Seven psychological principles of persuasive design. 2016.

Manning Publications Co.

44

APPENDIX 1. FINAL DESIGNS PRESENTING TO CLIENT

45

46

47

48

49

APPENDIX 2. INTERVIEW QUESTIONNAIRE FOR CAMELLIA BEES’

FOUNDER

Part 1: Business Information

1/ Can you describe your business model?

2/ What is Camellia Bees’ brand vision?

3/ What is the current company mission?

3/ Who are the Camellia Bees’ target customers?

4/ How does your brand position the customer?

Part 2: Requirement elicitation & documentation

5/ Can you share your intentional strategy related to the upcoming website rebuild?

6/ Do you track your users on the current website? What are the common behaviors?

7/ Have you researched your customer pain points? How will you solve them?

8/ What functions and features should the design have?

9/ What is your guideline for the UI design?

10/ Can you provide your information, images, and contents regarding Camellia Bees’ products?

Part 3: Thesis project evaluation

11/ What is your opinion after reading the psychological theories?

12/ Can you make comments on the empirical application and the author's analysis?

13/From a user perspective, do you feel the website can provide benefits and value to you? Do you

feel persuaded and believed to make a purchase?

50

APPENDIX 3. INTERVIEW QUESTIONNAIRE FOR DESIGN MANAGER

Part 1: Measurement and criteria

1/ As a UX/UI expert, how do you generally evaluate a User Experience (UX) design?

2/ User Interface (UI), as a part of UX, creates the aesthetic for the design. Do you think it is

equally essential as UX?

Part 2: Project result evaluation

A case company of re-design the website – Camelliabees.com

1/ Firstly, make your comments on the before and after results.

2/ What are the pros and cons of the author's UX/UI design?

3/ Regarding the psychology implementation, from both a designer and user perspective, what do

you feel of those elements?

4/ What could have done better to the project?