Designing For Augmented Reality in Aviation E-Commerce: MEÅ Niversity

U MEÅ U NIVERSITY
M ASTER T HESIS
Designing for Augmented Reality in

aviation E-Commerce
Author: Examiner:
Alexander Gunillasson Thomas Mejtoft
External supervisor: Supervisor:

Örjan Strömberg Ulrik Söderström
I NTERACTION T ECHNOLOGY AND DESIGN , 30 ECTS

Department of Applied Physics and Electronics
Umeå University
July 1, 2020
i
UMEÅ UNIVERSITY
Abstract
Designing for Augmented Reality in aviation E-Commerce
by Alexander Gunillasson
In-flight entertainment (IFE) is facing exciting times ahead as more and more tech-
nological advancements find its way into the IFE-systems. With the increasing hard-
ware capabilities of IFE-systems, one exciting technology which could be seen in
future IFE-systems is augmented reality (AR). AR could allow for virtual try-on
(VTO) in a webshop, where passengers can view virtual representations of for in-
stance, glasses or headpieces, augmented onto themselves through a camera on the
IFE-screen. However, integrating VTO in a webshop comes with new challenges,
both for the designer and the developer. This thesis has examined design guidelines
for AR in a literature study, along with general principles for user experience (UX).
Based on the findings from the literature study, a prototype for a webshop with
integrated VTO, targeting IFE, has been build in an iterative design process. Fur-
thermore, a small application has been built using Google’s AR-framework ARCore
for Android, where users can try different virtual glasses. The literature study, along
with usability testing in each design iteration, showed that there are no guidelines
which can cover everything when designing for AR; however, the design guidelines
presented by Google and Apple are a great place to start. Furthermore, the usability
testing showed that people have certain expectations of a webshop, which indicates
that VTO should be integrated seamlessly into the application without interfering
with the layout. The application development showed that ARCore certainly is a po-
tent tool when it comes to AR-development. However, ARCore is not open source,
which could make it less appealing for companies in need of highly flexible solu-
tions.
ii
UMEÅ UNIVERSITY
Sammanfattning
Designing for Augmented Reality in aviation E-Commerce
av Alexander Gunillasson
In-flight entertainment (IFE) står inför spännande tider framöver. Den snabba tekn-
iska utvecklingen öppnar upp många framtida möjligheter för IFE-systemen. Med
ökad hårdvarukapacitet är augmented reality (AR) en teknik som skulle kunna an-
vändas i framtida IFE-system. AR kan möjliggöra virtual try-on (VTO) i en webb-
shop, där passagerare kan se virtuella representationer av till exempel glasögon eller
huvudbonader, projicierade på sig själva genom en kamera på IFE-skärmen. Att in-
tegrera VTO i en webbshop medför dock nya utmaningar, både för designern och
utvecklaren. Detta examensarbete har fokuserat på att undersöka designriktlinjer
för AR i en litteraturstudie, tillsammans med allmänna principer för user experience
(UX). Baserat på information och lärdomar från litteraturstudien har en prototyp
för en webbshop med integrerad VTO, riktad mot IFE, byggts i en iterativ design-
process. Dessutom har en mindre applikation byggts med Googles AR-ramverk
ARCore för Android, där användare kan prova olika virtuella glasögon. Litter-
aturstudien, tillsammans med användbarhetstester i varje designiteration, visade
att det inte finns några riktlinjer som kan täcka allt när man designar för AR, däre-
mot ger designriktlinjerna som presenteras av Google och Apple en bra riktlinje
till att börja med. Användbarhetstesterna visade dessutom att människor har vissa
förväntningar på en webbshop, vilket tyder på att att VTO bör integreras friktions-
fritt i applikationen utan att besvära layouten. Applikationsutvecklingen visade att
ARCore är ett kraftfullt verktyg när det gäller AR-utveckling. ARCore är dock inte
open source, vilket kan göra det mindre tilltalande för företag med behov av flexibla
och anpassningsbara lösningar.
iii
Acknowledgements
There are many people who have contributed to this thesis in some way. I would like
to thank all of them for their help and support throughout working on this thesis.
Örjan Strömberg - My external supervisor at Tactel. Thank you for helping me
shape the direction of this thesis and for the overall support and guidance through-
out this thesis.
Ulrik Söderström - My supervisor at Umeå University. Thank you for your guid-
ance and for answering any questions regarding the thesis which arose during the
process.
Magnus Emanuelsson, Martin Sjölund, and Isak Gustafsson - Peer review group.
Thank you for your feedback through the whole process.
Lotta Westin and the employees at Tactel - Special thanks to Lotta Westin for wel-
coming me into Tactel and to all the employees at Tactel for the welcoming and
positive atmosphere.
iv
Contents
Abstract i
Sammanfattning ii
Acknowledgements iii
1 Introduction 1
1.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 Research questions . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Tactel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Background 4
2.1 In-flight entertainment system . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1 History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.2 Future of In-flight entertainment . . . . . . . . . . . . . . . . . . 5
2.2 Augmented Reality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2.1 Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2.2 The concept of Virtual Try-on in E-Commerce . . . . . . . . . . 6
3 Theoretical framework 8
3.1 User Experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.2 User-Centered design . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Designing for Augmented Reality . . . . . . . . . . . . . . . . . . . . . 12
3.2.1 Research and design guidelines . . . . . . . . . . . . . . . . . . . 12
Overview of Google’s and Apple’s AR design guidelines . . . . 13
3.2.2 Google ARCore . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2.3 Prototyping for AR . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Using the camera . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4 Method 16
4.1 First iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.1.1 Literature study . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.1.2 Design proposals . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.1.3 Low-fidelity prototype . . . . . . . . . . . . . . . . . . . . . . . . 17
4.1.4 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Test group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2 Second iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2.1 Prototyping tools . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2.2 Wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2.3 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2.4 Test group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3 Third iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
v
4.3.1 High-fidelity prototype . . . . . . . . . . . . . . . . . . . . . . . 19

4.3.2 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.4 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5 Result 20
5.1 Iteration one . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
5.1.1 Low fidelity Concepts . . . . . . . . . . . . . . . . . . . . . . . . 20
5.1.2 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Tasks for design concept one . . . . . . . . . . . . . . . . . . . . 24
General feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.1.3 Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.2 Iteration two . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.1 Wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.2 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
General feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.2.3 Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3 Iteration three . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3.1 Mock-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3.2 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.4 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
6 Discussion 37
6.1 Design process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
6.2 Suitability of testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
7 Conclusions 42
7.1 Future work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
vi
List of Figures
2.1 Reality-Virtuality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1 7 Key factors in UX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.2 User Centered Design process . . . . . . . . . . . . . . . . . . . . . . . . 11
5.1 General design concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

5.2 Overview of categories pages . . . . . . . . . . . . . . . . . . . . . . . . 21
5.3 Two different approaches to the products page . . . . . . . . . . . . . . 22
5.4 AR view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.5 Start page and Virtual try-on menu choice selected . . . . . . . . . . . . 23
5.6 Product selection and Try-on basket . . . . . . . . . . . . . . . . . . . . 23
5.7 Wireframe Start page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.8 Categories and subcategories . . . . . . . . . . . . . . . . . . . . . . . . 27
5.9 Wireframe Products page . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.10 Wireframe Product information . . . . . . . . . . . . . . . . . . . . . . . 28
5.11 Wireframe Virtual try-on page . . . . . . . . . . . . . . . . . . . . . . . . 28
5.12 Wireframe Product selection . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.13 Mock-up Start page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.14 Mock-up Categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.15 Mock-up Accessories subcategories . . . . . . . . . . . . . . . . . . . . . 32
5.16 Mock-up products page showing sunglasses . . . . . . . . . . . . . . . 32
5.17 Mock-up product information page . . . . . . . . . . . . . . . . . . . . . 33
5.18 Mock-up sunglasses try-on start view . . . . . . . . . . . . . . . . . . . 33
5.19 Mock-up sunglasses try-on with information card visible . . . . . . . . 34
5.20 Mock-up sunglasses try-on demonstrated with different glasses . . . . 34
5.21 Android application overview . . . . . . . . . . . . . . . . . . . . . . . . 36
5.22 Virtual try-on overview . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
vii
List of Tables
3.1 Description of 7 factors present within the field of UX . . . . . . . . . . 10

3.2 4 different phases in UCD . . . . . . . . . . . . . . . . . . . . . . . . . . 11
viii
List of Abbreviations
AR Augmented Reality
MAR Mobile Augmented Reality
VTO Virtual Try-On
UX User eXperience
UCD User Centered Design
HCI Human Computer Interaction
IFE In-Flight Entertainment
API Application Programming Interface
SDK Software Development Kit
1
Chapter 1
Introduction
Augmented Reality (AR) is a technology which has seen a significant rise in popular-
ity over the last decade. The concept of AR was envisioned as early as 1901 [1]. With
technology evolving and hardware becoming ever more capable, the early envisions
of this technology has now become a reality. One concept which has gained traction
over the last decade is the ability to integrate AR in E-Commerce. E-Commerce, like
AR, continues to rise in popularity and contributes to a significant percentage of the
total revenue for clothing companies. The sales for online shopping of apparel and
accessories have seen a significant increase over the last years and show no signs
of slowing down. Just in the US sales are expected to reach 145 billion by 2023, for
comparison the sales reached 96 billion in 2017 [2]. However, online shopping comes
with one big problem for the consumers, that is the consumer’s inability to view a
fashion item on themselves before buying the product, this is often referred to as the
suit, fit and match dilemma [3]. Virtual Try-on (VTO) tries to address this problem
by allowing consumers to virtually try-on fashion items before making a purchase
decision. It has been found that applying AR in an online shopping context can in-
crease the shopping experience and entertainment value, and it can also influence
the brand attitude [4]. Moreover, with research suggesting that AR and VTO can in-
crease the consumer’s willingness to buy a product [5], a strong case could be made
for companies applying this technology to their online shops.
E-Commerce is now starting to appear across multiple industries, since the poten-
tial of increase in revenue it provides. The aviation industry is one area where on-
line shopping is getting more attention. The In-flight entertainment systems (IFE)
which are present on most airline’s longer flights, have become increasingly more
advanced since the introduction, allowing for more entertainment sources to the
passengers. Airlines have realized the value in e-commerce, seeing how popular it
is on the ground. However, while e-commerce exists on many airlines today and to
some, is a valuable source of revenue, it still underperforms [6]. Connectivity could
be a game-changer in changing this, as well as personalized shopping [7, 6]. Further-
more, with the ever-increasing capabilities of hardware, AR is a technology which
could find its way into IFE.
With increasing use cases of AR-technology, researchers try to keep up with the new
unique challenges it provides [8]. One area that is currently getting attention is the
Chapter 1. Introduction 2
design aspect of AR-applications, since AR provides a new type of interaction, com-

bining virtual objects with the real world, it presents unique challenges for the de-
signer. A development in the area of user experience (UX) and AR that has hap-
pened in recent year has emerged in the light of Google1 and Apple2 releasing their
AR-frameworks, ARCore [9] and ARKit [10]. Aside from them releasing Software
Developer kits (SDK) to facilitate development of AR-applications, they have also
released design guidelines with regards to AR-applications [11, 12].
This thesis aims to prototype a user interface (UI) for a webshop with integrated
VTO in an IFE-system. The targeted IFE-system is Panasonic’s next-generation sys-
tem [13]. In designing this UI, the design guidelines by Google and Apple will be
utilized along with previous research. The VTO will be designed with seat-back
screens in mind with a size of around 13". Because these screens are intended to be
used while seated, the VTO will be designed for the facial region. For demonstrating
purposes, the focus point will be on virtually testing sunglasses. The prototype will
be designed in an iterative design process, ranging from sketches done with pencil
and paper to a mockup which resembles the final design. Additionally, this thesis
aims to derive the most important design guidelines based on research and findings
from usability testing. Finally, a small use case, where a user will be able to try on
a pair of sunglasses virtually, will be implemented using Google’s AR-framework
ARCore.
1.1 Objective
This Master Thesis will examine design principles for augmented reality and build
a prototype targeting virtual try-on for a webshop within an in-flight entertainment
system. Furthermore, the objective is to implement a simple use case, where a user
can test sunglasses by utilizing Google’s AR-framework ARCore.
1.1.1 Research questions

This thesis will explore the field of Augmented Reality in E-Commerce, explicitly
targeting the concept of Virtual Try-on. Furthermore, this will be studied in the con-
text of Aviation and in-flight entertainment systems. Investigations will be made
in regards to User Experience and Augmented Reality by looking at current imple-
mentations and previous research. The goal of this thesis is to examine how AR-
interactions within a webshop should be designed, based on the findings build a
prototype and further try to propose design guidelines. Since this thesis is aimed
towards In-flight entertainment, the prototype will be built with a screen size of
around 13" in mind.
Below the research question of this thesis can be seen. The questions are divided in
to one main question, followed by a couple of sub-questions.
How should AR-interactions be designed in an UX-friendly way for a webshop?
• How can current knowledge within the field of UX be applied to AR and VTO?
• Is the design guidelines for AR, presented by Google and Apple applicable
when designing a webshop with VTO?
1 Google: https://about.google/
2 Apple: https://www.apple.com/
Chapter 1. Introduction 3
• How can design concepts of AR-applications be created?

• Is it possible to implement virtual try-on using ARCore, and how difficult is
it?
1.2 Tactel
This master thesis is done in collaboration with Tactel3 . Tactel is a digital interaction
agency. The company is based in Sweden, was founded in 1995 and became part of
Panasonic Avionics4 in 2015. Tactel creates digital solutions for their clients around
the world. The office based in Umeå mainly focuses on developing entertainment
systems for clients within the aviation industry.
3 Tactel: https://tactel.se/sv/
4 Panasonic: https://www.panasonic.aero/
4
Chapter 2
Background
Before we dive into User Experience (UX) and Augmented Reality (AR) and all its
different aspects, we first need to give some context to the topic of this thesis. Firstly
we need to look at in-flight entertainment systems (IFE-systems) to get a better un-
derstanding of what it is and what capabilities exist today. However, there are lots of
different IFE-systems, but since this thesis is done in collaboration with Tactel, which
is a part of Panasonic Avionics. The main focus will be on their system, particu-
larly their next-generation IFE-system, which comes with new features and updated
hardware. The reason for this is because, in theory, this system could be capable
of running AR-applications. Having more capable hardware has led to the idea of
integrating Virtual try-on (VTO) in the webshop.
2.1 In-flight entertainment system

In-flight entertainment (IFE) refers to the entertainment available to aircraft passen-
gers during a flight [14]. In today’s IFE-systems a vast array of different entertain-
ment are available, ranging from movies, music, sports and online shopping to be
able to view real-time information about location, altitude and speed of the airplane
[15].
2.1.1 History
In-flight entertainment systems have seen a rapid growth since the introduction.
The first appearance of in-flight entertainment dates back as early as the year of
1921, where the first instance of in-flight movies was recorded, according to White
[16]. However, the exact date of when in-flight entertainment was introduced in air-
planes is a controversial topic, and subject to interpretation [16, 17]. White states
that “entertainment” was not necessarily the motivation behind the early adoptions,
he further describes that “the term "inflight media event" is a much more accurate
label to describe the purpose of the first onboard entertainment efforts.” [16]. The
evolvement of theses systems continued, specifically targeting passengers being able
to watch movies. In the 1960s, the phenomenon started to become well recognized,
and in-flight movies were becoming an established industry, this was still long be-
fore the notion of a IFE-system. Instead, the acronym “IMP” (Inflight Motion Pic-
tures) started to gain traction and was frequently used [16]. However, it was not
until the year of 1988, where modern IFE-systems started to form. During this pe-
riod, the concept of having a personal screen was introduced. This medium was
first introduced by integrating a 2.7" LCD-screen in the back of every first-class seat,
entertainment on an individual level had arrived [15]. Since then, as hardware has
Chapter 2. Background 5
become more capable, this concept of having personal entertainment has continued
to progress rapidly.
2.1.2 Future of In-flight entertainment

The future of IFE-systems looks bright, and there are many possible directions for it
in the future. In a recent interview conducted by Hugh Morris at the Telegraph, the
Chief Technology Officer at Panasonic Avionics, David Bartlett, gave his views about
the future of IFE [7]. For a while, the trend of IFE seemed to be heading towards
people wanting to use their devices as entertainment sources; however, this trend is
proving short-lived according to Bartlett. He further believes that what is trending
on the ground should be mirrored in the air. On the ground, the trend is heading
towards having more screens, not fewer, which means the seat-back screens in air-
craft will continue being necessary moving forward. Also integration of streaming
services such as Netflix, being able to watch TED Talks and documentaries are cur-
rently in the pipeline. One aspect currently being investigated as well is personal-
ized shopping. In-flight shopping is an important aspect for airlines as it is a source
of revenue, but also a way for passengers to utilize their flight time [18]. There have
been studies made regarding passengers attitude towards in-flight shopping. One
study found that the convenience of in-flight shopping increases when the process is
time-efficient, takes minimum physical effort in acquiring the product and requires
less planning ahead [19].
In summary, with technical advancements regularly occurring, there is no limit to
new services being added to future iterations of IFE-systems [18]. Even though
Bartlett mentions augmented reality as a technology still in need of some work [7]
before it can be applied in the context of IFE and shopping, the prospect of it is
intriguing, and something this thesis will evaluate further.
2.2 Augmented Reality

In order to get a better understanding of how AR could be used in conjunction with
in-flight shopping, we need to take a closer look at current implementations of this
concept, which brings us to the concept of Virtual try-on (VTO). But before that, we
look at widely used definitions of AR.
2.2.1 Definition
A famous early definition came in 1994 by Milgram and Kishino in their Reality-
Virtuality (RV) Continuum [20], where they describe a Mixed Reality (MR) rang-
ing from an environment consisting of real-world objects to a Virtual Environment
consisting of virtual objects (see Figure 1). As shown, AR can be viewed as an “in-
termediar” between virtual reality and the real world. However, a couple of years
later in 1997, a more thorough definition came by Ronald T. Azuma, who defined
it as: “Augmented reality (AR) is a variation of virtual environments (VE), or Vir-
tual Reality as it is more commonly called. VE technologies completely immerse a
user inside a synthetic environment. While immersed, the user cannot see the real
world around him. In contrast, AR allows the user to see the real world, with virtual
objects super-imposed upon or composited with the real world.” [21].
F IGURE 2.1: Reality-Virtuality (RV) Continuum[20].
2.2.2 The concept of Virtual Try-on in E-Commerce

As mentioned, the dilemma which arises when shopping apparel online is the con-
sumer’s ability to view a fashion item on themselves before buying the product. In
an attempt to solve this, VTO can be a helpful feature, allowing the consumers to vir-
tually view the products on themselves before making a purchase decision. There
have been studies made in regards to evaluating the impact VTO can have on con-
sumers purchase decision making and willingness to buy [22, 23, 5]. Research have
shown that VTO can indeed play a vital role in the consumers purchase decision
making [5, 22], as well as produce a higher user satisfaction [22]. Furthermore, VTO
could transform the way consumers shop for apparel, but also enhance the shop-
ping experience and possibly save cost for retailers [24]. The research area within
the subject of VTO is vast, aside from studies regarding its impact on purchase deci-
sion making, there have also been many studies evaluating different approaches in
implementing the technology [24, 25]. The methods used to achieve VTO typically
includes 3D-modelling of the human body, cloth simulation and clothing patterns
[25]. There are also image-based methods which do not rely on any 3D-information.
Instead they use product RGB-images as an overlay on top of a specific target region
of a clothed person [24].
Furthermore, there are implementations which targets the facial region of a person
explicitly, which can be used for augmenting virtual objects on to the face or the
head. This medium is where to focus lies within this thesis, since IFE-screens are
in a fixed position, allowing for VTO only makes sense for the facial region, there
is not room enough to allow full-body clothing VTO. Furthermore, the screens are
positioned in a way which assumes a seated position by the passenger.
However, with the rise of AR-technology, there still have been quite limited amount
of studies examining the desired way to design for AR. Studies have been made;
however, AR presents the designer with unique challenges. Additionally, AR has
different use cases, and there is no guarantee that one set of guidelines can be applied
to every use case. One study made an effort in 2014, to compile at the time existing
research in the field of Mobile Augmented Reality (MAR) and User Experience (UX).
By thoroughly selecting search criteria’s in the form of keywords, they found only
35 publications relevant to the field of UX and MAR [26]. Since then, more studies
have been made in the field [8, 27, 4].
Furthermore, with Apple and Google launching their AR-frameworks, coupled with
the framework are a set of design guidelines for designing AR-applications. Those
guidelines combined with previous research will function as a baseline with regards
to prototyping a webshop with VTO-features. In order to evaluate design choices,
an iterative design process will be adopted wherein each iteration a prototype will
be created and tested.
8
Chapter 3
Theoretical framework
The theoretical framework in this thesis aims to assist in answering the research
questions. Furthermore, help provide a better understanding of key concepts and
existing research within the context of this thesis.
3.1 User Experience

3.1.1 Overview
User Experience (UX) is a highly debated topic, and it remains to this day hard to
establish the exact scope and definition of UX. The reason for UX being hard to
define stems from it being associated with fuzzy and dynamic concepts [28]. A study
made in 2008 gives a comprehensive overview of different perspectives and concepts
which often have been associated with UX [29]. The authors mention that early
attention in human-computer interaction (HCI) was directed heavily towards the
task of a system, the usability and functionality of it as well as effectiveness. They
further describe that researchers have found that many more factors are involved in
HCI, which is why there is a need for the much broader concept of UX. However,
while there is a need for a broader view of HCI, this is where UX can be a bit diffuse
in its definition. Nevertheless, the same researchers concluded that, based on studies
within the context of UX, it needs to be viewed from different perspectives, which
includes emotional, aesthetic, hedonic and experimental aspects [29]. Donald A.
Norman, often considered as the founder of UX, has also expressed this saying that
“we also need to build products that bring joy and excitement, pleasure and fun,
and, yes, beauty to people’s lives.” [30].
People encounter lousy design all the time, albeit an ATM-machine, a website or a
coffeemaker. However, they may not realize that it is a design flaw which is caus-
ing them trouble with a specific product [31]. When people encounter complicated
technology, often the reaction to it is not that the designer should have done a bet-
ter job. However, instead, people feel stupid for not understanding the interaction;
they blame themselves [31]. When, in fact, often it’s an example of lack of atten-
tion to the user experience. When specifically looking at UX and websites, which
is what Garret does in his book [31], UX becomes even more critical. Web sites rely
heavily on that the design and interactions are intuitive enough so that the user un-
derstands what to do from the get-go. A web site rarely comes with instructions on
how to use it, by and large, it’s a self-service [31]. However, presenting a web site
with great UX in terms of useful information, logical navigation flow and overall
great usability might not be enough if the website isn’t aesthetically and visually ap-
pealing. It has been found that visual and aesthetic appeal have significant impact
Chapter 3. Theoretical framework 9
on forming users first impression of a website [32]. It was found that 50ms is all
it takes for users to form a first impression on a website [32]. However, the study
mentions that precisely what this first impression entails needs further research [32],
but it’s still essential for the designer to keep this in mind. A couple of years later,
Google confirmed this 50ms result in conducting their study in the context of first
impressions and aesthetic appeal [33]. They found that the first impressions could
even happen as quickly as 17ms. The result showed that people find websites with
less visual complexity and high prototypicality (refers to how representative a de-
sign is within a particular category) more appealing [33]. People have expectations
on how a particular type of website should look, a key takeaway from the research
done by Google is that designers should aim to meet that expectation. If a web-
site for e-commerce is being designed, it should follow typical design patterns for
e-commerce. On the topic of first impressions for a website, it has also been found,
through analyzing eye-tracking data, that it takes about 2.6 seconds for the eyes to
settle on key areas of the web page[34]. It was further discovered in the study that
good design choices inherently leads the users to stay longer on the web page.
In summary, there are numerous aspects a designer need to pay attention to when
designing for a good user experience. It simply isn’t enough to aim for good usabil-
ity; the designer needs to make an effort in aesthetically making the product/service
appealing as well. By designing for a good user experience, it will not only lead to
less frustration for the user, but it will also increase the likelihood of the user com-
ing back, this could be especially useful in the context of e-commerce. Users spend
most of the time on e-commerce pages browsing through products, having a good
user experience could be the difference between users doing just browsing or them
buying the product [31]. Finally, in order to try and clarify the concept of UX even
further, let us take a look and two definitions of UX from different perspectives.
“The first requirement for an exemplary user experience is to meet the exact needs of the
customer, without fuss or bother. Next comes simplicity and elegance that produce products
that are a joy to own, a joy to use. True user experience goes far beyond giving customers
what they say they want, or providing checklist features. In order to achieve high-quality
user experience in a company’s offerings there must be a seamless merging of the services of
multiple disciplines, including engineering, marketing, graphical and industrial design, and
interface design.” [35]
“User experience is not about the inner workings of a product or service. User experience is
about how it works on the outside, where a person comes into contact with it. When someone
asks you what it’s like to use a product or service, they’re asking about the user experience.
Is it hard to do simple things? Is it easy to figure out? How does it feel to interact with the
product?” [31]
Researchers have said that UX shouldn’t be restricted to interaction with a product
or artefact [28]. However, within the context of this papers research topic, the main
focus will be on user interaction with a product. More specifically, interaction with
a product having a user interface (UI).
F IGURE 3.1: 7 Key factors in UX, adapted from [36]
Factor Description
Useful To whom is the product useful? if the product isn’t useful to
someone then it won’t be able to compete with other products.
Usable Making sure that the end objective of the product is effectively
and efficiently reached.
Findable The product itself is easy to find and easily attainable. This also
refers to how findable content within the product is. If a user
can’t find the product, then of course they won’t use it.
Credible This refers to the end users being able to trust the product that’s
been provided. The product provides information that is accu-
rate, it does what it’s suppose to do and will do so for a long
period of time.
Desirable “Desirability is conveyed in design through branding, image,
identity, aesthetics and emotional design.” [36]. A cheap watch
might fulfill every other UX criteria, however when presented
with the choice of having the that or a Rolex, most people would
choose the Rolex, it’s more desirable.
Accessible The product should be accessible to a wide range of user abilities.
Valuable The product must deliver value, both to its users and to the busi-
ness.
TABLE 3.1: Description of 7 factors present within the field of UX

3.1.2 User-Centered design

User-Centered Design (UCD) is a design process in which the user is taken into ac-
count in each step of the design process. The process can be viewed with regards
to UX as “The practice of creating engaging, efficient user experience is called user-
centered design” [31]. Coming back to the notion of users feeling stupid and blam-
ing themselves for not understanding a product or service, this is essentially a case
where the product is designed in a way that forces the user to adapt to it, to change
behaviour. UCD makes an effort in solving this problem by designing a product
around the user’s needs, how they want to use it and can use it [37]. UCD is an
iterative design process which allows the designer to evaluate the product in each
iteration of the design process. Each iteration is generally divided into four parts
[38].
F IGURE 3.2: UCD process, adapted from [38]
According to [39] each phase in the process can be defined as shown below.
Phases Description
Context Understand in what context the system will be used. Who will
use the product, what will they use it for and under what circum-
stances.
Requirements Specify user requirements. Which requirements or user goals
must be met in order for the product to be successful.
Design Develop design solutions. The design will evolve in each itera-
tion, starting from rough concepts working towards a complete
design.
Evaluate Evaluation of the design solution, preferably done through us-
ability testing.
TABLE 3.2: 4 different phases in UCD
In the early stages of the design process, design-solutions can be made just by paper
and pencil drawings [40]. It is vital to get feedback from users in every iteration, even
if thorough examinations have been made beforehand, conducting user tests allows
for discovering additional information that might have been overlooked or missed
in early research [40]. As the design process progresses, the prototype evolves in
each iteration based on feedback working towards the final design of the product.
As earlier described, how important it can be to present the user with an aesthetically
beautiful product, testing the usability of a product is also extremely important in
achieving a great user experience. Usability testing means evaluating a product by
testing it on potential users [41]. Usability testing can be broken down into seven
key steps [41].
1. Create a prototype
2. Decide on a test plan
3. Choose test participants
4. Perform the test
5. Analyze the test results
6. Document the data
7. Report your findings
3.2 Designing for Augmented Reality

UX and UCD is today well documented and has found its way into the design think-
ing of many corporations. However, with new technologies emerging, the field of
UX will face new challenges. As mentioned, one relatively new technology on the
rise is AR, which begs the question of how UX can be adapted and applied to this
technology. Researchers and companies have tried to keep up in this regard. How-
ever, it has been called for by researchers that this area of UX and AR needs further
attention [8].
Nevertheless, below is an overview of some of the research that has been done. It
is worth mentioning that many more studies have been carried out in this field of
UX and AR than what is mentioned here. However, it is not within the scope of this
thesis to summarize all of them. Instead, get an idea about what has been mentioned
and found.
3.2.1 Research and design guidelines

With both Google and Apple releasing their AR-frameworks, making development
of AR-applications more accessible than before, it becomes increasingly important
that these applications are designed for the user. In an attempt to clarify design
principles for AR, they released design guidelines for AR [11, 12]. It has been stated
that these guidelines, specifically those provided by Google, offers a good starting
point [42]. However, some of the guidelines provided by Google is not applicable
in the context of this thesis. For instance, they mention the importance of safety,
such as not making the user walk backwards while interacting with the augmented
environment. The IFE which this thesis focuses on is in a fixed position, meaning it
will not be possible to remove it and walk around with it in the aircraft. Therefore
the safety concerns do not apply to the same extent as using an AR-application on
a smartphone. Moreover, Google’s design guidelines focuses heavily on using the
rear-facing camera and interacting with virtual objects that way, which is not the use
case for a VTO-system in IFE. Still, there are some useful guidelines presented both
by Google and Apple, which can be utilized.
Although UX and AR have received some attention (in the context of retail) by re-
searchers (see chapter 2). Much of the research mentioned focuses on mobile aug-
mented reality (MAR). However, it has been pointed out that general AR design
guidelines can be considered valid independent of device platforms or context of
use [43]. A study made an effort in amongst other things, to evaluate the UX in
AR. The evaluation was performed on Ray-bans website where there were ranging
versions of AR-integration available. Based on the result it was implied that “A well-
designed AR should be practical, easy to use, easy to learn, organized, symmetric,
attractive, and pleasant if it is to provide effective and relevant information to users,
and it should contemplate the emotional aspects of UX.” [22].
Another study conducted two case studies where they tested two AR-application,
one which could guide new students around the campus area and another, which
was a commercial MAR application [8]. The study aimed to evaluate how users
perceive MAR applications emotionally, discover challenges, and opportunities as
well as best practices for UX and MAR. Their findings indicated that users value
MAR applications based on its functionalities, usefulness and ease of use [8]. It was
further pointed out that “A major reason as to why designers should utilize AR in
mobile applications is to provide positive experiences to users by engaging them
emotionally with the application.” [8].
One study has looked at expected user experiences of MAR services [44], specifically
within the context of shopping centers. The researchers conducted interviews to try
and determine expectations of MAR services, as well as user requirements central
within the context, which was deemed as a potential area of use for MAR services.
The study was not done on any existing MAR-application, but rather to evaluate the
expected experiences and requirements beforehand. Similarly to the studies men-
tioned above, it was found that MAR is expected to create an emotionally enhanced
experience. It should create a playful, stimulating and pleasant experience. More-
over, it was concluded that in terms of UX, expectations were often utility-based.
Meaning that the use of AR needs to fill a purpose; it needs to be useful to the user
and provide them with relevant information.
In summary, many design aspects of an AR-application falls in under the umbrella of
UX. However, there are some unique challenges specific to AR. One being that UX-
designers usually create prototypes in a 2D-environment, with AR comes the new
challenge of designers having to sketch 3D-objects and scenes viewed through a 2D-
perspective which is the camera [8]. Advancements have been made in this area.
However, the amount of technologies available for rapid creation of low and high-
fidelity prototypes is still quite limited [8]. However, with a VTO-system specifi-
cally targeting the facial region, much of the prototyping difficulties can be avoided,
which is discussed later in this chapter.
Overview of Google’s and Apple’s AR design guidelines

When a user browses the shop and decides to click on an item, the indication that the
item supports VTO needs to be clear. This need to be clear in 2 stages, first when a list
of products is displayed there needs to be some icon, text or both to indicate which
item supports VTO. Secondly, once the user has clicked on a specific item which
supports VTO, it needs to be clear where the function is activated. However, this
only applies if there are both objects which supports VTO and objects which does
not. Clarity is stressed in Apple’s design guidelines, expressing “Use badging only
when your app contains a mixture of objects that can be viewed in AR and objects
that cannot.” [12]. While a user has activated the VTO on a pair of sunglasses,
how should the user be able to switch between different colors of the glasses and
should any information be present about the product during the VTO? Google has
mentioned that if a standard UX interaction model, such as tapping or swiping, can
be utilized, it should [11]. They further mention that it is important to keep the user
emerged in the experience, also to keep the experience simple, do not overload the
user with information. To keep the user emerged, Google expresses that “if users
need to select, customize, or share an AR object, try to figure out a way they can do
it without leaving AR.” [11]. Additionally, it is also mentioned by Google that it is
important to let the user know if something is offscreen.
3.2.2 Google ARCore

As mentioned, Google ARCore is an AR-framework which was developed to facil-
itate the development of AR-applications. This framework is Google’s platform for
building augmented reality experiences. The framework comes with different ap-
plication programming interfaces (API) which enables your device to sense the en-
vironment, detects different surfaces and interaction with information [9]. ARCore
also comes with an API called Augmented Faces1 which allows for detection of the
face and different facial regions. To properly place, for instance, a pair of sunglasses
on to the face, ARCore creates a face mesh, which is a virtual representation of the
detected face. The face mesh can then be utilized to overlay assets on to the face.
Overlaying assets can be done by using the points provided by ARCore, which is
left and right forehead, and the nose tip. It can also be done by manually calculating
different points on the face mesh.
3.2.3 Prototyping for AR

With AR evolving fast, there are still quite limited amounts of prototyping tools for
AR. Prototyping tools here are referring to being able to create low and high-fidelity
prototypes. Of course, there would be possible to build the prototype directly with,
for instance, ARCore or ARKit. However, by coding the application right away,
it can bring difficulties later on if any significant design flaws are detected in user
testing. By building a prototype illustrating the design first and then evaluating that
design, this means that any design flaws can be avoided before a single line of code
is written, which can save valuable time.
Using the camera

One way of creating hi-fi prototypes which are easy to make is by utilizing tra-
ditional, low-tech prototyping techniques. Apple highlighted this in their yearly
WWDC (World Wide Developers Conference) in 2018 [45]. In this conference, one
thing they talked about was how to create hi-fi prototypes. They mention that uti-
lizing your phone’s camera is a great way to simulate an AR experience. For in-
stance, if some information should be present around an object on the screen, then
this could easily be simulated by representing this through a piece of paper and film-
ing it. Furthermore, the cameras present in today’s smartphones have become a lot
1 Augmented Faces: https://developers.google.com/ar/develop/java/augmented-faces
more advanced. For instance, Samsung now has something called AR Emoji avail-
able within their camera application. AR Emoji allows the user to create an avatar
based on themselves. For prototyping VTO in a webshop, this feature can be bene-
ficial. Aside from being able to create an avatar, it is further possible to customize
the avatar in several different ways. For instance, it is possible to apply glasses of
different kinds as well as different types of headpieces. When creating a prototype,
this avatar can be used to demonstrate the visual idea of virtually trying on different
accessories.
16
Chapter 4
Method
In developing a prototype for this thesis, an iterative design process have been
adopted. The design process is based on UCD (see section 3.1.2), where design
evaluations are done in each iteration. The design evaluations are done through
usability testing, and the design evolves in each iteration based on feedback from
tests. Early on in the start-up phase of this thesis, the idea was to conduct a survey
to specify user needs and requirements for a VTO-system. However, it was found
that researchers have already evaluated augmented reality (AR) and virtual try-on
(VTO) in several different aspects, which is mentioned both in Chapter 2 & 3. With
the knowledge of that, it was decided, this thesis would build on existing research
and focus entirely on the design aspect of VTO.
Further, it is essential to mention that this thesis focuses primarily on the AR-interactions
within a webshop, not the webshop itself. The reason behind this is that Tactel has al-
ready made a prototype for a webshop targeting in-flight entertainment (IFE). With
that said, a webshop will still be designed but only to clarify how AR will be used
within that context.
4.1 First iteration

4.1.1 Literature study
In order to get a better understanding of the field of study, a general literature study
was conducted. This study aimed to look at existing research both within user ex-
perience (UX) and AR separately but also look at research examining the correlation
between the two and what challenges exists. While this thesis focuses specifically
on VTO, AR has also been looked at in a broader sense to widen the search criteria.
Broader search criteria proved to be useful since quite many of the research topics
discovered focused on AR in a more general sense. The aim of this literature study
was further to examine if there are any existing design guidelines for VTO in the
context of online apparel and accessories shops. However, by limiting the search cri-
teria to just design guidelines or UX for VTO, while providing some useful results,
proved to be far to narrow. By widening the search to AR, it allowed for search
results which covered VTO under the “umbrella” of AR. In order to find relevant
research in mentioned areas, predominantly three sources have been used.
Chapter 4. Method 17
1. Researchgate1
2. Google Scholar2
3. Diva-Portal3
Except for above web sites, in order to find other resources from other sources than
researchers, Google’s regular search engine have been used as well which has al-
lowed for discovering both Apple’s and Google’s design guidelines for AR. Com-
bined with the literature study, current implementations using VTO has been stud-
ied. The reasoning behind this was to get a better understanding of different use
cases.
4.1.2 Design proposals

After the literature study had been conducted and sufficient knowledge within the
fields of UX and AR was acquired, two general design proposals were created, where
one had two slight differences to the design. These design proposals focused on
different ways of grouping, visualising and navigating products that support VTO.
The reason behind the proposals was to get a starting point of the design, from which
the VTO-feature could be explored more thoroughly in later iterations.
4.1.3 Low-fidelity prototype

The focus of the low fidelity (lo-fi) prototype was on the navigation flow of the ap-
plication and visual representation of the VTO-view. More specifically, how should
the functionality of VTO be presented, and where should it be presented? Lo-fi pro-
totypes are meant to be very simple and are used to convey to users a glimpse of the
final product. The content of a lo-fi prototype is very restricted and only highlights
some key elements and interactions. Furthermore, by keeping the drawings simple,
it can lead to test participants being more honest in their evaluation since they are
only evaluating a simple sketch [46], not the final product.
4.1.4 Evaluation
The evaluation of the lo-fi prototype was done through usability testing. The ap-
proach adopted was the “think aloud”-approach which encourages the test par-
ticipants to explain their thought process as they are evaluating the design. This
approach also allows the designer to observe how users interact with the product
carefully. The observation takes place as test participants are performing different
tasks given by the test leader. For each new task, once they “clicked” on, for in-
stance, a button the test leader presented a new page of the application. Keeping
the pages of the application on separate papers was done to avoid leading the test
participants into making a specific choice. This way, they would not have seen the
next page already. Finally, once the usability testing was done, the test leader asked
each participant a couple of questions regarding the evaluation and the design. The
questions targeted the user’s perceived experience of the product.
1 https://www.researchgate.net/
2 https://scholar.google.com/
3 http://umu.diva-portal.org/smash/search.jsf?dswid=-346
Test group
The test group consisted of persons with different levels of travel experience and
knowledge of an IFE-system. The test participants had no prior knowledge about
the content of this master thesis. As for the number of test participants, five persons
participated in usability testing. The choice was based on Jacob Nielsen’s recom-
mendation that a designer should strive towards qualitative data, not quantitative
when doing user research [47]. More specifically, Nielsen concludes that around five
participants in usability testing are enough.
4.2 Second iteration

4.2.1 Prototyping tools
Before the wireframe was created, some time was spent looking at different proto-
typing tools which would be appropriate for the task. Quite quickly, it was decided
that AdobeXD4 would be the choice because of its versatility. It has excellent sup-
port for both building wireframes and high-fidelity (hi-fi) prototypes. Furthermore,
it supports making prototypes clickable and interactive. This way, test participants
can test the prototype in a more realistic way.
4.2.2 Wireframe
The purpose of the wireframe is first off to make the prototype a bit closer to its final
representation. The wireframe was based on the lo-fi prototype combined with the
acquired feedback from the user testing in iteration one. The wireframe still does
not have any colors, images or animations in the design. The difference is that it was
made with AdobeXD rather than with paper and pencil, which made it possible to
make the prototype interactive. This way, the test users were able to interact with
the prototype more realistically.
4.2.3 Evaluation
Same as in iteration one, the evaluation was done through usability testing with a
“think aloud”-approach. However, as mentioned, the prototype was now an inter-
active prototype, which meant the tests were conducted on a laptop. Other than that
the test concept was the same, meaning the participants were given several differ-
ent tasks to complete while describing their thought process when performing the
tasks. Finally, this test also included the test leader asking each participant a couple
of questions regarding the experience and design.
4.2.4 Test group

The test group was based on a similar philosophy as in iteration one, where none
of the participants had any prior knowledge about the work. The number of test
participants were five this time as well.
4 https://www.adobe.com/se/products/xd.html
4.3 Third iteration

4.3.1 High-fidelity prototype
In the third iteration of the design process, it was time to design a high-fidelity (hi-fi)
prototype, which will be referred to as a mock-up. The purpose of the mock-up is
more or less to finalize the design. Based on the feedback from the previous iteration
along with Google’s style guide, “Material Design”, the mock-up was created using
AdobeXD. The reason for using Material design as the style guide is because the IFE-
screens which this prototype is intended for uses Android as the operating system.
The mock-up places a lot more focus on adding colors, images and animations when
switching between different tabs and pages. A mock-up is essentially a complete
representation of how the final product would look and feel. However, it should
not be mistaken for the final product since it does not have any real functionalities
implemented.
4.3.2 Evaluation
In order to evaluate the final prototype, a different approach was adopted. In the
earlier iterations, the idea was to evaluate each prototype on people with no prior
knowledge on this thesis, as well as people with limited knowledge about IFE-
systems in general. For the hi-fi prototype, it was decided to let a UX-designer at
Tactel evaluate the design. The reason for this was that while the other two proto-
types were tested for the general navigation flow and logic, they did not provide
a result specific to just IFE-screens. The test participants evaluated the design in a
more general sense, because of that it was deemed to be a good idea to have someone
with experience and knowledge within the field of UX and IFE-screens to evaluate
the prototype.
4.4 Implementation
As a final part of the practical work in this thesis, a small application was build
using Android and ARCore. The focus in the application was on viewing a pair
of sunglasses augmented on to users face. This work was done using the official
Integrated development environment (IDE) for Android called Android Studio, and
the programming language used was Java. Furthermore, a 3D-framework called
Sceneform has been used to overlay 3D-models on to a detected face. Sceneform
makes it easier for java developers to import, render and build 3d assets. Finally, a
3D-modeling software called Blender has been used for positioning, orientation and
scaling of 3D-models.
The idea of the application was not to implement a fully developed webshop with
integrated AR which is outside the scope of this thesis, but rather to build an appli-
cation demonstrating the concept and how it could work in a real scenario. It was
also an opportunity to test the capabilities of ARCore.
20
Chapter 5
Result
In this section the results from each design iteration is presented. This section fol-
lows a similar structure to the method-section.
5.1 Iteration one

In this section the results from the first iteration of the design process is presented.
5.1.1 Low fidelity Concepts

The two concepts created allows the user to navigate to products through categories
and subcategories or searching. The difference between them is the Virtual try-on
(VTO) feature. For the first concept, which can be seen in figures 5.1 to 5.4, the VTO-
feature is integrated directly in the product page. The products which then supports
VTO is either indicated through an icon or by switching on a toggle which can filter
the products to only show products supporting VTO. The two different approaches
with a toggle and with an icon are presented in figure 5.3. When the user starts the
VTO-feature for a specific product, the user can switch between similar glasses.
The second design concept separates the products which support VTO and the ones
which do not. In order to separate the two, another menu choice in the bottom menu
was added called “Virtual try-on”, see figure 5.5a. By clicking that menu choice, the
user would then be presented with a products page showing only products support-
ing VTO which can be seen in figure 5.5b. From there, a user can choose the desired
category and then select several products to try on. By selecting several products,
shown in figure 5.6a, the idea was to have them appear in a “Try-on basket” which
can be seen in figure 5.6b. From there it would then be possible to start the VTO-
feature and switch between the products which was selected. Figures 5.5 and 5.6
shows only the differences from the other concept.
Chapter 5. Result 21
F IGURE 5.1: Start page
( A ) Categories ( B ) Accessories
F IGURE 5.2: Overview of categories pages

( A ) Products page with toggle filter ( B ) Products page with try on icon
F IGURE 5.3: Two different approaches to the products page
F IGURE 5.4: Virtual try-on view

( A ) Start page ( B ) Virtual try-on product page
F IGURE 5.5: Start page and Virtual try-on menu choice selected
( A ) Selection of products ( B ) Try-on basket
F IGURE 5.6: Product selection and Try-on basket

5.1.2 Evaluation
Below the evaluation is broken down in to sections for each of the two design con-
cepts. The design concept which is shown from figure 5.1 to 5.4 will be referred to
as “design concept one” and figure 5.5 & 5.6 will be referred to as “design concept
two”.
Tasks for design concept one

1. Select your choice of gender category
2. Navigate to sunglasses
3. Select a pair of sunglasses which supports try-on feature
4. Open the VTO feature
5. Change between different glasses
6. Change the color of glasses
7. Exit VTO
Below is a summary of the test session for design concept 1. The summary is based
on the usability test.
Everyone was able to find the sunglasses section; however, one test participant
wanted to navigate there through the menu button in the top left corner.
Everyone was able to find a specific pair of sunglasses which supports VTO, where
this feature is highlighted through an icon. As for the toggle switch, there were
mixed feelings. Only one participant preferred this solution. As for the rest, it was
pointed out by two that the toggle switch is a useful feature to have. However, since
it is essentially a filter, and a filter icon already exists, the toggle switch should be
placed there instead.
Everyone also understood where to activate the VTO-feature.
Four out of five were able to switch colours on the glasses. One participant thought
that the “circles” would switch between different glasses. Finally, everyone under-
stood where to close the VTO-feature.
Tasks for design concept two
1. Navigate to products supporting VTO
2. Select sunglasses
3. Add three sunglasses to Virtual try-on basket
4. Start VTO
5. Switch between the sunglasses
This task proved some flaws in the design.
None of the participants understood the addition of the button “Virtual try-on” ini-
tially in the bottom-menu. Everyone still wanted to navigate through the “categories”-
button. Once they went that route, the possibility of adding items to a virtual try-on
basket did not exist.
For the second task, once the participants were steered in the right direction, every-
one was able to select sunglasses successfully.
As for the third task, everyone understood how to add items to the basket. However,
only one understood where to go after the items had been added. It was mentioned
that there needs to be some feedback when an item has been added to the basket.
One participant said that “similar to an online shopping cart; it would be good to
have a small number that indicates how many items are in the basket”.
Once the basket was found, everyone understood how to activate the VTO. Every-
one also understood how to switch between the glasses.
General feedback
Everyone preferred design concept one where the VTO was highlighted through
an icon at the top left corner of the product. It was expressed here that having a
“try-on basket” would be a nice feature. However, the feature only really is useful
if the user already knows beforehand what he or she is looking for, then it would
be great to select the products which are appealing and test them. They elaborated
further that when searching for a product, they would prefer to navigate to that
product by searching or through filtering, however by doing so, it seems to remove
the possibility of trying on that product or adding it to the try-on basket.
5.1.3 Analysis
Having a try-on basket seemed to be a desired feature; however, with the current
design, it left some of the users a bit confused as to how it works. Everyone preferred
to browse the products by going through the categories section, which means that
the option of adding items to a try-on basket needs to be available from there. The
majority also preferred having an icon that indicates which items support VTO but
still offer the possibility of applying a filter which can filter out all the products
which support VTO.
5.2 Iteration two

In this section the results from the second iteration of the design process is presented.
5.2.1 Wireframe
The general design concept remained the same; however, some changes were made.
The menu button in the top left corner was removed as it did not serve any purpose.
Other than that the start page and categories pages have stayed the same, which can
be seen in figure 5.7 & 5.8. For the product page, having an icon indicating which
products support VTO was kept. The page displaying images and information about
a product stayed the same. The product and information page can be seen in figures
5.9 & 5.10. The biggest change is in the page demonstrating the try-on. This time the
feature is accessed directly from the try-on page. The selection of multiple products
is made through the addition of another button “View more”, see figure 5.11. The
button opens a view which offers the possibility of selecting multiple products, see
figure 5.12.
F IGURE 5.7: Wireframe Start page

( A ) Categories ( B ) Accessories
F IGURE 5.8: Categories and subcategories
F IGURE 5.9: Wireframe Products page

F IGURE 5.10: Wireframe Product information
F IGURE 5.11: Wireframe Virtual try-on page

F IGURE 5.12: Wireframe Product selection
5.2.2 Evaluation
Below is a summary of result from the test, along with the tasks which each test
participant where asked to perform.
Tasks
1. Navigate to sunglasses
2. Select a pair which supports Virtual try-on
3. Open the Virtual try-on feature
4. Select three glasses to try
5. Switch between the glasses
All of the test participants were able to find sunglasses and select a pair which sup-
ports VTO. One participant thought that the marker in the top left corner of a prod-
uct was a button rather than an icon.
Everyone was also able to open the VTO-feature without any problem.
Four out of five were able to find where to select more glasses to try. One participant
missed the button where this feature is activated, and it was required for the test
leader to steer the test participant in the right direction in order to find it.
Finally, everyone understood how to switch between the selected glasses. However,
one participant pointed out that it would be good with some text indicating how to
switch between the glasses.
General feedback
Similar to the previous iteration, everyone liked the idea of being able to select mul-
tiple glasses. However, the general consensus was that it was a bit diffuse to under-
stand. While most of the participants were able to find where the selection is made,
some felt it might be a feature which they probably would not use. A point which
was brought up is the fact that it does not seem to provide the option of just clicking
on a pair of glasses to view more information about them, it seems only to provide
the option of selection. Finally, one participant mentioned the option of deselecting
glasses, expressing that it was not clear how that was done.
5.2.3 Analysis
Based on feedback, the overall idea of having the option of selecting multiple prod-
ucts to try needed some consideration. Being able to select multiple products proved
again troublesome integrating into the design.
5.3 Iteration three

Below is the results from the final design iteration presented. The prototype dis-
played is the final design suggestion presented to Tactel.
5.3.1 Mock-up
For the final design, the layout and navigation flow has remained the same. The
start page all the way to the product information page can be seen in figures 5.13 to
5.17. The major difference is in the Virtual try-on view, where the choice of selecting
multiple products have been removed. Instead, a user is now presented with the
choice of switching between similar products. Furthermore, in order to notify a user
that similar products can be shown by swiping or clicking the arrow, a text appears
above the card which describes this action, see figures 5.19 & 5.20 for the Virtual
try-on demonstration.
F IGURE 5.13: Mock-up Start page
F IGURE 5.14: Mock-up Categories

F IGURE 5.15: Mock-up Accessories subcategories
F IGURE 5.16: Mock-up products page showing sunglasses

F IGURE 5.17: Mock-up product information page
F IGURE 5.18: Mock-up sunglasses try-on start view

F IGURE 5.19: Mock-up sunglasses try-on with information card visi-

ble
F IGURE 5.20: Mock-up sunglasses try-on demonstrated with differ-

ent glasses
5.3.2 Evaluation
From the meeting with the UX-designer at Tactel, overall the feedback was positive,
and the layout did not need any corrections. However, one point which was brought
up was a scenario where this is used during a flight, sometimes there is turbulence,
and the flight is not perfectly smooth which means that it could be challenging to
click on buttons and menus if the components are too small. The screen is located
at a fixed distance from the passenger, so it is crucial to make sure that everything is
clear and easy to see. Another point which was brought up was the “sliding” card
in the VTO-view, which can be seen in figure 5.19 and 5.20. The view starts with the
card hidden, as demonstrated in figure 5.18. It could, however, be a better idea to
make the card visible right from the start as it holds information about the product
as well as navigation cues.
Important to note is that the mock-up presented above have already had corrections,
which means that most text fonts have been enlarged along with most “clickable”
components. The corrections were done based on the feedback from the meeting
mentioned above.
5.4 Implementation
Below is the result of the implementation phase of this thesis presented. As men-
tioned, the focus point was on viewing a pair of glasses augmented onto users face.
However, for demonstration purposes, it was decided that a product list page and
product information page would better put the Virtual try-on in the right context,
see figure 5.21. For the VTO it was initially planned to change glasses by swiping
left or right on the screen. However, after several attempts, it proved troublesome to
get this to work for some reason, so instead two buttons were added which can be
seen in figure 5.22 which also shows the VTO. For integrity reasons, the person has
been blurred out.
( A ) Application start page ( B ) Application product information page
F IGURE 5.21: Android application overview
( A ) Application start page ( B ) Application product information page
F IGURE 5.22: Virtual try-on overview

37
Chapter 6
Discussion
This chapter discusses the general findings of this study. First off the research ques-
tions of this study is answered based on the findings from the design process. Fur-
thermore, how well the result can be reflected in the theory section of this thesis
found in Chapter 3. Finally, the design process along with the implementation phase
is discussed in a broader sense.
Below is the main research question of this thesis.
How should AR-interactions be designed in an UX-friendly way for a web-
shop?
Part of this thesis was to look at research done in the field of user experience (UX)
and augmented reality (AR) and try to gather information about what is essential
when designing for AR, more specifically AR in the context of virtual try-on (VTO).
The two significant sources of inspiration have been Apple and Google’s design
guidelines for AR, but general principles for UX have been utilized as well.
The main question was divided into a number of sub-questions which is presented
and answered below.
How can current knowledge within the field of UX be applied to AR and
VTO?
The result from the usability testing in first two iterations showed that it was crucial
that the webshop itself, excluding the VTO, had a pleasant and easy to understand
design. Even more obvious was the fact that people have expectations of what a
webshop should look like, which also was a key takeaway from a study made by
Google regarding first impressions of websites (see section 3.1.1). It became evident
that people have a preferred way of navigating a webshop or idea of what it should
look like, which means that if the design deviates too much from that it can detract
from the user experience. Making the design simple and familiar seemed to be the
preferred approach. Making the VTO easy to find and understand proved crucial as
well. For instance, as mentioned in section 3.2.1, Google mentions that if a standard
UX interaction model, such as swiping or tapping, can be utilized, it should. They
further mention that it is important to let the user know if there is something that can
be found offscreen. Having an icon indicate that there are more glasses to be viewed
by either swiping or taping an arrow icon proved useful in the usability testing as
everyone understood how to switch between glasses.
In conclusion, the result points towards keeping the design simple, and that VTO
should be integrated seamlessly into the application. However, one aspect which has
not been tested is what would happen if a user has knowledge about the VTO before
Chapter 6. Discussion 38
opening the webshop. With knowledge beforehand, it may be that user’s would be
more open to a layout which makes a more clear distinction between “normal” and
VTO-products right from the start page. With knowledge of VTO, it might even
be that user’s expect to find VTO directly when opening the webshop. This idea
certainly is something which would be interesting to explore further.
One reason why simplicity and familiarity seemed to be important might be that
VTO is still a new concept and far from every webshop has this feature available. It
could be that in the future it becomes common for a webshop to offer VTO, which
in turn might change people’s expectations of a webshop.
All in all, it is safe to say that when designing a webshop with integrated VTO, even
though VTO is a relative new concept, current knowledge within UX still applies.
Looking at some of points mentioned above, they tie in with what Garret says re-
garding UX in websites (see section 3.2.1), they don’t come with instructions so it’s
crucial that they are easy to understand. Utilizing design methods such as user-
centered design (UCD) is also a great tool for evaluating design choices, be that VTO
or just a webshop.
As for how well current knowledge within the field of UX applies to AR-applications
in general is not something which this thesis can answer. But as mentioned in section
3.1.1, researchers has mentioned that UX and AR is something which needs further
attention in the future. Use cases of AR can be quite different across different ap-
plications, and it might be that the current knowledge in the field of UX needs to
expand in order to keep up with a technology like AR.
Is the design guidelines for AR, presented by Google and Apple, applicable
when designing a webshop with VTO?
The two significant sources of inspiration have been Apple and Google’s design
guidelines for AR. Based on the three design iterations which were performed, it
is hard to say exactly how good those guidelines are. The problem is that not ev-
ery AR-application can use the guidelines to the letter; it depends on the context in
which the usage of AR is intended. For instance, a map application where AR is
used to present information based on different objects viewed through the camera
is very different from an application which allows a user to virtually try-on glasses.
With that said, regardless of the use case of AR, there is something there for every-
body. For instance, as mentioned in section 3.2.1, Google mentions the importance
of keeping the experience simple and the users emerged. Based on the usability
testing, there certainly seems to be grounds for that claim. Both design concepts in
iteration one and two explored the idea of selecting multiple glasses to try. However,
the importance of keeping it simple became evident when in both iterations people
struggled with this concept; it seemed to be adding too many steps, which ultimately
led to the removal of that concept. Another guideline which was useful came from
Apple regarding indicating products which supports AR, where they mention that
badging can be a useful tool. The result from the usability testing showed even
in the first iteration that badging seemed to be the desired approach when finding
products that supports VTO.
In summary, the design guidelines for AR by Google and Apple is a good starting
point when designing for AR. Overall, the focus of the guidelines is on AR where the
back-facing camera is used. However, using the back-facing camera in not how the
VTO was intended for the particular use case in this study. As the use case of VTO
in this study differ from the targeted AR-applications in the guidelines, quite a lot
cannot be used. However, as some design choices were based on the guidelines, and
also received positive feedback in the usability testing, they certainly can provide
some value when designing a webshop with integrated VTO.
One aspect of AR mentioned in other studies (see section 3.2.1) is that it should
be used to engage users emotionally and create a positive experience. Measuring
emotional experience is very difficult, and not something which has been attempted
in this thesis. However, it has been said by researchers that VTO can produce higher
user satisfaction along with increased shopping eperience (see section 2.2.2).
How can design concepts of AR-applications be created?
Creating a prototype for virtual try-on of sunglasses was initially a dilemma since
it would involve a 3D-environment. However, after doing some research, the in-
spiration came from Apple’s yearly World Wide Developers Conference (WWDC)
where they mention that using a smartphone’s camera is a great way of simulating
an AR-experience (see section 3.2.3). Through that came the realisation that Sam-
sung has a feature on their newer phones called AR Emoji which allows a user to
create an avatar based on themselves. Additionally, AR Emoji offers the possibility
of customizing the avatar, where different sunglasses can be placed on the avatar.
This turned out to be a useful feature when creating the hi-fi prototype to demon-
strate the virtual try-on of sunglasses. However, VTO is a very specific type of use
case of AR, for other AR-applications it might be better to utilize the camera in a
different way. There are prototyping programs out there which is made specific for
AR, but utilizing the camera along with for instance, paper or card board to simulate
information on the screen, seems to be a good option.
Worth mentioning is that the final mock-up did not go through usability testing, but
instead more of a usability review together with a UX-designer at Tactel. The Mock-
up was, however, demonstrated at the company and received positive feedback.
In order to fully say that demonstrating VTO through an avatar with sunglasses
was a good approach, further testing would need to be performed. However, the
indication through demonstrating the mock-up along with the usability review was
that it was a good tool to use for the purpose.
Is it possible to implement virtual try-on using ARCore, and how difficult is
it?
Having utilized ARCore in the development of a small application which allows
a user to try on glasses, there are some critical takeaways. First off, ARCore does
provide a straightforward transition into AR-development. In order to develop a
full virtual try-on application from scratch, it would require extensive knowledge
about computer vision and machine learning as well. ARCore handles most of this
for you through high-level API:s, one such being Augmented Faces which is used
to detect faces and specific facial regions. Making use of the API:s means that it is
quite easy to get started. In order to render virtual objects such as 3d-models onto a
face, a graphics API called OpenGL can be used. OpenGL is, however, a low-level
API which is very powerful but requires significant knowledge about 2d/3d math
and everything needs to be handled manually. Fortunately, there is a 3d-framework
called Sceneform which handles most of the rendering of 3d-models for you. At
the time of developing the try-on application, Sceneform had just been released as
open-source. Although, while that is great, it was still in a transition phase where the
documentation was lacking and quite a lot of bugs where being reported. Therefore
the choice was made to use the last non-open-source version, which had excellent
documentation and guides in place.
Overall, Sceneform and ARCore made it quite easy to make this application, and the
result turned out better than expected. However, there is room for improvements.
For one thing, if a user looks straight into the front-facing camera the glasses look
decent, but from an angle it looks like the glasses are “floating”, meaning it does not
look like they are attached to the face. In order to solve this, one solution might be to
manually calculate different positions on the face and use those positions as anchor
points for the glasses. There are probably other ways as well, but with a limited
time frame, it was decided not to dive too deep into that. While Sceneform now
is open source, unfortunately, ARCore is not. That is a big drawback for ARCore
as it means that you are stuck with the public APIs which are provided and you
cannot tell what is going on “under the hood”. For a company who needs flexible
and adaptable solutions, going with a custom solution still might be a better choice.
In summary, yes, ARCore can be used to create virtual try-on for sunglasses. How-
ever, for the specific use case of testing virtual sunglasses it is not perfect. ARCore
does not provide good anchor points on the face to properly place the glasses which
means that in order to get a good result, manual calculation of points on the face
would be needed.
6.1 Design process

Overall the design iterations have worked well. However, initially, the usability
testing in each iteration was going to include two test groups where one group had
minimal knowledge about this thesis and In-flight entertainment in general. The
other group would function as expert users, consisting of employees at Tactel. The
idea was that the expert group would provide feedback specifically with regards to
IFE-systems and whether certain design concepts could work within that context.
After some research about the use of expert users, it was decided instead that a UX-
designer at Tactel would evaluate only the final prototype. The reason behind the
choice of leaving out expert users for most of the design process was to try and avoid
any biases. This bias applies to both the designer and the expert. For the designer,
it is easy to take the critic to heart and change the design accordingly, since they are
the experts. Furthermore, as described by Jakob Nielsen, a well-renowned person
in the field of user experience, “Skilled behavior is often automated behavior” [48].
He further describes that automated behaviour can make it challenging to describe
actions in a think-aloud usability test.
Waiting until the last prototype to include people with experience in IFE-systems
comes with its risks, however. First of all, this opens up the risk of people not want-
ing to critique the design since it is evident that quite a lot of time has gone into
making it. Secondly, while the design has been tested on novice users and fine-
tuned according to feedback, by not letting someone with experience evaluate the
design in the early iterations could mean that some critical aspects of designing for
an IFE-system are missed. In hindsight, it would have been good to include experts
in the early iterations as well. It would probably not have been necessary to have
a separate group with experts, but at least have one person with experience evalu-
ate the design in each iteration. It would have provided a broader perspective on
the design and potentially ensured that certain design aspects specific to IFE would
have been taken into consideration early on.
Finally, it is essential to note that this thesis specifically targets the virtual try-on
and designing a user interface (UI) for that purpose. However, to achieve that it was
deemed necessary to design a UI for the webshop, putting the VTO in better context.
VTO is still a relatively new concept, and overall few people are “experts” in this
area. Furthermore, as of today, the screens which this design are indented for does
not yet have the hardware capabilities to support VTO, at least not for the usage
of Google’s augmented reality framework ARCore. The lack of hardware support
coupled with the early stages of VTO in general means that it is uncharted waters,
which also was a factor in the decision not to include people who work with IFE
development and design in every iteration.
Based on the usability testing performed in this study, the result points towards
keeping the design simple, and that VTO should be integrated seamlessly into the
application. However, one aspect which has not been tested is what would happen if
a user has knowledge about the VTO before opening the webshop. With knowledge
beforehand, it may be that user’s would be more open to a layout which makes
a more clear distinction between “normal” and VTO-products right from the start
page. With knowledge of VTO, it might even be that user’s expect to find VTO
directly when opening the webshop. This idea certainly is something which would
be interesting to explore further.
6.2 Suitability of testing

As mentioned, the design evaluations were done with usability testing, where a
think-aloud approach was adopted. The usability testing started with a lo-fi pro-
totype displayed on paper where the test leader gave out the different pages as the
test participant clicked on certain items. In the next two iterations, the prototype
was done in AdobeXD, starting with a wireframe and then finally a mock-up. Both
prototypes were interactive, and the tests were performed on a laptop. As for the
mock-up, the test was more of a review rather than a test. The reason the tests were
performed on a laptop were strictly because of accessibility reasons. With AdobeXD,
it is possible to view the prototype on mobile devices; unfortunately, a tablet was not
available. The design is intended for touchscreens, and it would have been good to
test the design using a touchscreen which would have simulated a real use case bet-
ter. However, the extent to which this affected the outcome of the usability testing
can only be speculated, but still worth mentioning.
42
Chapter 7
Conclusions
This study implies that when designing a webshop with integrated virtual try-on
(VTO), it is essential to keep the design and interactions as simple as possible. The
usability testing performed in the first two design iterations indicates that people
have certain expectations when it comes to a webshop. If those expectations are
not met, it does not matter how good or useful a feature specific to the VTO might
be in theory, people still might be thrown off if the layout does not correspond to
their expectations. Test participants almost exclusively preferred to find products
that support VTO through “traditional” navigation such as through categories and
subcategories. These findings suggest that VTO should be integrated seamlessly into
the application without interfering with the layout. It is, however, important to note
that only a few design ideas have been evaluated, it might very well be that there
are more complex solutions which would get just as good or even better feedback.
Still, the design ideas presented in this study, along with the feedback, can at least
indicate what seems to work and what does not.
Although the findings suggests a more seamless integration of VTO into the web-
shop, notifying a user of VTO before the webshop is opened could potentially change
that. However, pushing notifications to a user, informing them about VTO is not
something that has been evaluated in this study. This study specifically targeted
VTO in the webshop, but for future studies or implementations, one idea is to con-
sider VTO in a broader sense within the in-flight entertainment system.
Overall, by looking at research done in the area of user experience (UX) and aug-
mented reality (AR) it became evident that this area is still very new, even Google
and Apple’s design guidelines are in some cases very weak and open to interpre-
tation. When designing an AR-application, the guidelines by Google and Apple
should not be expected to cover everything; they are, however, an excellent place to
start. From that starting point, the designer will still need to perform tests in order
to get a feel for what users expect and prefers.
When implementing a virtual try-on application, ARCore certainly can make that
process much more comfortable, and a simple application can be built with little
to no knowledge about AR-development. For a company to use this framework,
some aspects need to be taken into consideration. As of today, ARCore is not open
source, which can make it less appealing for companies who needs highly flexible
and adaptable solutions. Therefore, unless ARCore can cover every need, it still
might be better to go with a custom solution.
Chapter 7. Conclusions 43
7.1 Future work

Overall, virtual try-on (VTO) is still a relative new concept, especially within the
context of in-flight entertainment (IFE). Listed below is suggested future work which
could be made in the research area of this thesis.
• This study has not evaluated what would happen if a user has knowledge that
virtual try-on exists within the webshop before opening it. To test this scenario,
the prototype would need to include a general start page for the IFE-system.
From there it would then be possible to highlight VTO and through usability
testing evaluate how this affects the user experience.
• The main focus on this study has not been on the technical aspect of VTO.
Besides using an AR-framework like ARCore, how can a system like this be
implemented from the ground up? Furthermore, this study targeted the VTO
being a live feed, meaning a user can see a virtual product augmented onto
themselves in real time. Whether that is the best and most appreciated ap-
proach could be evaluated further.
• The application built in this study was only to test ARCore and see whether it
was possible or not to use ARCore for the purpose of VTO. A continuation of
the work done is this thesis is to develop a fully functional concept where VTO
is integrated into the webshop of an IFE-system.
• Another aspect which could be evaluated further is which products the VTO
should apply to. The target area of a person will still be the facial region, at
least for the seat-back screens, but maybe it should apply to products such as
hats and jewelry as well.
44
Bibliography
[1] J. Johnson, ““the master key”: L. frank baum envisions

augmented reality glasses in 1901,” 09 2012, https://web.
archive.org/web/20130522153011/http://moteandbeam.net/
the-master-key-l-frank-baum-envisions-ar-glasses-in-1901, accessed 2020-
05-20.
[2] Statista, “Apparel, footwear and accessories retail e-commerce revenue in the
united states from 2017 to 2023,” https://www.statista.com/statistics/278890/
us-apparel-and-accessories-retail-e-commerce-revenue/, accessed 2020-01-31,
2020.
[3] I. Pachoulakis and K. Kapetanakis, “Augmented reality platforms for virtual
fitting rooms,” The International journal of Multimedia & Its Applications, vol. 4,
08 2012.
[4] S. Stumpp, T. Knopf, and D. Michelis, “User experience design with augmented
reality (ar),” 11 2019.
[5] A. Merle, S. Senecal, and A. St-Onge, “Whether and how virtual try-on influ-
ences consumer responses to an apparel web site,” International Journal of Elec-
tronic Commerce, vol. 16, p. 41, 04 2012.
[6] “The future of inflight retail,” https://www.inmarsataviation.com/en/
benefits/revenue-opportunities/the-future-of-inflight-retail.html, accessed
2020-03-23.
[7] H. Morris, “7 ways in-flight entertainment will change
in the future, according to the man who makes it,” 04
2019, https://www.travelagentcentral.com/transportation/
7-ways-flight-entertainment-will-change-future-according-to-man-who-makes-it,
accessed 2020-02-04.
[8] A. Dirin and T. H. Laine, “User experience in mobile augmented reality: emo-
tions, challenges, opportunities and best practices,” Computers, vol. 7, no. 2,
p. 33, 2018.
[9] Google, https://developers.google.com/ar, accessed 2020-01-21.
[10] Apple, “Augmented reality,” https://developer.apple.com/
augmented-reality/, accessed 2020-03-23.
[11] Google, “Augmented reality design guidelines,” https://designguidelines.
withgoogle.com/ar-design/, accessed 2020-02-07.
[12] Apple, “Human interface guidelines,” https://developer.apple.com/design/
human-interface-guidelines/ios/system-capabilities/augmented-reality/, ac-
cessed 2020-01-21.
BIBLIOGRAPHY 45
[13] Panasonic, “Next series,” https://www.panasonic.aero/our-offerings/

systems/next-series/, accessed 2020-06-29.
[14] “In-flight entertainment,” 2020, https://en.wikipedia.org/wiki/In-flight_
entertainment, accessed 2020-02-03.
[15] FDS, “The evolution of in-flight entertainment,” http://fdsavionics.com/
evolve/, accessed 2020-02-03.
[16] J. N. White, “A history of inflight entertainment,” World Airline, 2005.
[17] M. Childers, “History of in-flight entertainment systems: How
it all began,” 08 2019, https://www.lhsystems.com/blog-entry/
history-flight-entertainment-systems-how-it-all-began, accessed 2020-02-
03.
[18] A. Akl, T. Gayraud, and P. Berthou, Key Factors in Designing In-Flight Entertain-
ment Systems, 02 2012.
[19] J. J. Liou, “Consumer attitudes toward in-flight shopping,” Journal of Air Trans-
port Management, vol. 17, no. 4, pp. 221–223, 2011.
[20] P. Milgram and F. Kishino, “A taxonomy of mixed reality visual displays,” IE-
ICE Trans. Information Systems, vol. vol. E77-D, no. 12, pp. 1321–1329, 12 1994.
[21] R. T. Azuma, “A survey of augmented reality,” Presence: Teleoperators & Virtual
Environments, vol. 6, no. 4, pp. 355–385, 1997.
[22] A. Poushneh and A. Z. Vasquez-Parraga, “Discernible impact of augmented re-
ality on retail customer’s experience, satisfaction and willingness to buy,” Jour-
nal of Retailing and Consumer Services, vol. 34, pp. 229–234, 2017.
[23] T. Zhang, W. Y. C. Dr Wang, L. Cao, and Y. Wang, “The role of virtual try-
on technology in online purchase decision from consumers’ aspect,” Internet
Research, 02 2019.
[24] X. Han, Z. Wu, Z. Wu, R. Yu, and L. Davis, “Viton: An image-based virtual
try-on network,” 11 2017.
[25] Y.-L. Lin and M.-J. J. Wang, “The development of a clothing fit evaluation
system under virtual environment,” Multimedia Tools and Applications,
vol. 75, no. 13, pp. 7575–7587, Jul 2016. [Online]. Available: https:
//doi.org/10.1007/s11042-015-2681-7
[26] S. Irshad and D. Awang Rambli, “User experience of mobile augmented reality:
A review of studies,” 09 2014.
[27] S. Irshad, D. Awang Rambli, N. Adhani, S. R. Mohd Shukri, and Y. Omar,
Measuring User Experience of Mobile Augmented Reality Systems Through Non-
instrumental Quality Attributes: 5th International Conference, i-USEr 2018, Pu-
chong, Malaysia, August 28–30, 2018, Proceedings, 01 2018, pp. 349–357.
[28] L.-C. Law, V. Roto, M. Hassenzahl, A. Vermeeren, and J. Kort, “Understanding,
scoping and defining user experience: A survey approach,” 04 2009, pp. 719–
728.
[29] M. Hassenzahl and N. Tractinsky, “User experience - a research agenda,” Be-
haviour and Information Technology, vol. 25, p. 91 – 97, 03 2006.
BIBLIOGRAPHY 46
[30] D. A. Norman, “Introduction to this special section on beauty, goodness, and

usability,” Human–Computer Interaction, vol. 19, no. 4, pp. 311–318, 2004.
[31] J. J. Garrett, Elements of user experience, the: user-centered design for the web and
beyond. Pearson Education, 2010.
[32] G. Lindgaard, G. Fernandes, C. Dudek, and J. Brown, “Attention web design-
ers: You have 50 milliseconds to make a good first impression! behaviour and
information technology, 25(2), 115-126,” Behaviour & IT, vol. 25, pp. 115–126, 03
2006.
[33] A. N. Tuch, E. Presslaber, M. Stoecklin, K. Opwis, and J. Bargas-Avila, “The
role of visual complexity and prototypicality regarding first impression of
websites: Working towards understanding aesthetic judgments,” International
Journal of Human-Computer Studies, vol. 70(11), pp. 794–811, 2012. [Online].
Available: http://dx.doi.org/10.1016/j.ijhcs.2012.06.003
[34] S. Dahal, “Eyes don’t lie: understanding users’ first impressions on website
design using eye tracking,” 2011.
[35] D. Norman and J. Nielsen, “The definition of user experience (ux),” https://
www.nngroup.com/articles/definition-user-experience/, accessed 2020-02-24.
[36] “The 7 factors that influence user experience,”
https://www.interaction-design.org/literature/article/
the-7-factors-that-influence-user-experience, accessed 2020-05-28.
[37] D. Doroftei, G. De Cubber, R. Wagemans, A. Matos, E. Silva, V. Lobo, G. Car-
doso, K. Chintamani, S. Govindaraj, J. Gancet, and D. Serrano, User-Centered
Design, 08 2017.
[38] “User centered design,” https://www.interaction-design.org/literature/
topics/user-centered-design, accessed 2020-02-24.
[39] “User centered design,” https://www.usability.gov/what-and-why/
user-centered-design.html, accessed 2020-02-24.
[40] C. Abras, D. Maloney-Krichmar, J. Preece et al., “User-centered design,” Bain-
bridge, W. Encyclopedia of Human-Computer Interaction. Thousand Oaks: Sage Pub-
lications, vol. 37, no. 4, pp. 445–456, 2004.
[41] S. Harsha, “Usability testing in design — why
is it important?” 04 2019, https://uxdesign.cc/
usability-testing-in-design-and-why-is-it-important-cfddfbbdaac9, accessed
2020-02-13.
[42] P. Reynolds, “Google’s ar design guidelines: baby steps — but a good
starting point,” 07 2018, https://thenextweb.com/contributors/2018/07/28/
google-ar-design-guidelines-bad-good-2d-3d/, accessed 2020-05-20.
[43] S. Irshad and D. R. A. Rambli, “Preliminary user experience framework for de-
signing mobile augmented reality technologies,” in 2015 4th International Con-
ference on Interactive Digital Media (ICIDM). IEEE, 2015, pp. 1–4.
[44] T. Olsson, E. Lagerstam, T. Kärkkäinen, and K. Väänänen-Vainio-Mattila,
“Expected user experience of mobile augmented reality services: a user study
in the context of shopping centres,” Personal and Ubiquitous Computing, vol. 17,
BIBLIOGRAPHY 47
no. 2, pp. 287–304, Feb 2013. [Online]. Available: https://doi.org/10.1007/

s00779-011-0494-x
[45] 2018, https://developer.apple.com/videos/play/wwdc2018/808/, accessed
2020-07-01.
[46] K. Pernice, “Ux prototypes: Low fidelity vs. high fidelity,” 12 2016, https://
www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/, accessed 2020-05-
21.
[47] J. Nielsen, “How many test users in a usability study?” 06 2012, https://www.
nngroup.com/articles/how-many-test-users/, accessed 2020-05-21.
[48] ——, “Testing expert users,” 01 2010, https://www.nngroup.com/articles/
testing-expert-users/, accessed 2020-05-17.

Designing For Augmented Reality in Aviation E-Commerce: MEÅ Niversity

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

Designing For Augmented Reality in Aviation E-Commerce: MEÅ Niversity

Uploaded by

Copyright:

Available Formats

U MEÅ U NIVERSITY

Designing for Augmented Reality in

External supervisor: Supervisor:

I NTERACTION T ECHNOLOGY AND DESIGN , 30 ECTS

4.3.1 High-fidelity prototype . . . . . . . . . . . . . . . . . . . . . . . 19

3.1 7 Key factors in UX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

5.1 General design concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.1 Description of 7 factors present within the field of UX . . . . . . . . . . 10

design aspect of AR-applications, since AR provides a new type of interaction, com-

1.1.1 Research questions

• How can design concepts of AR-applications be created?

2.1 In-flight entertainment system

2.1.2 Future of In-flight entertainment

2.2 Augmented Reality

F IGURE 2.1: Reality-Virtuality (RV) Continuum[20].

2.2.2 The concept of Virtual Try-on in E-Commerce

3.1 User Experience

F IGURE 3.1: 7 Key factors in UX, adapted from [36]

TABLE 3.1: Description of 7 factors present within the field of UX

3.1.2 User-Centered design

F IGURE 3.2: UCD process, adapted from [38]

TABLE 3.2: 4 different phases in UCD

3.2 Designing for Augmented Reality

3.2.1 Research and design guidelines

Overview of Google’s and Apple’s AR design guidelines

3.2.2 Google ARCore

3.2.3 Prototyping for AR

Using the camera

4.1 First iteration

4.1.2 Design proposals

4.1.3 Low-fidelity prototype

4.2 Second iteration

4.2.4 Test group

4.3 Third iteration

5.1 Iteration one

5.1.1 Low fidelity Concepts

F IGURE 5.1: Start page

F IGURE 5.2: Overview of categories pages

F IGURE 5.3: Two different approaches to the products page

F IGURE 5.4: Virtual try-on view

( A ) Start page ( B ) Virtual try-on product page

( A ) Selection of products ( B ) Try-on basket

F IGURE 5.6: Product selection and Try-on basket

Tasks for design concept one

5.2 Iteration two

F IGURE 5.7: Wireframe Start page

F IGURE 5.8: Categories and subcategories

F IGURE 5.9: Wireframe Products page

F IGURE 5.10: Wireframe Product information

F IGURE 5.11: Wireframe Virtual try-on page

F IGURE 5.12: Wireframe Product selection

5.3 Iteration three

F IGURE 5.13: Mock-up Start page

F IGURE 5.14: Mock-up Categories

F IGURE 5.15: Mock-up Accessories subcategories

F IGURE 5.16: Mock-up products page showing sunglasses

F IGURE 5.17: Mock-up product information page

F IGURE 5.18: Mock-up sunglasses try-on start view

F IGURE 5.19: Mock-up sunglasses try-on with information card visi-

F IGURE 5.20: Mock-up sunglasses try-on demonstrated with differ-

( A ) Application start page ( B ) Application product information page

F IGURE 5.21: Android application overview

( A ) Application start page ( B ) Application product information page