<<

DEGREE PROJECT IN ELECTRONICS AND COMPUTER , FIRST CYCLE, 15 CREDITS STOCKHOLM, SWEDEN 2019

User experience and front end development of an online auction website

MAR VIDAL SEGURA

KTH ROYAL INSTITUTE OF TECHNOLOGY SCHOOL OF ELECTRICAL ENGINEERING AND COMPUTER SCIENCE

Abstract

Art_Value is a startup whose purpose is to create an innovative market- place where new artworks, based on numbers, are created, distributed through auctions and traded. Online auctions have added new advantages of new technologies and trigger more emotions than online shopping. Even though there is a big virtual world, the abstract digital art world is still small and there are not many platforms providing it. Art_Value project wants the user to generate the digital art that he wants to acquire. The platform to provide that service is a website.

In this report describes the design and the front end development and testing of the of the auction page of the website. The design methodology used is the Double Diamond, formed by four stages: discover, define, develop and deliver. The programming languages and libraries used are HTML, CSS, JavaSript and React. The result of the work is the front end prototype of the auction page of the website with an auction system simulated to recreate as realistically as possible the user experience. User experience testing has been done and its results have been analysed and defined as improvements for the future versions.

Keywords

Website, User Experience, Design, React, Font end, Double Diamond, Auction

iii iv Sammanfattning

Art_Value är en startup som syftar till att skapa en innovativ marknadsplats där nya konstverk baserade på tal skapas, distribueras via auktioner och handlas. Online-auktioner har lagt till nya fördelar med ny teknik och utlöser fler känslor än e-handel. Även om det finns en stor virtuell värld är den abstrakt digital konstvärld fortfarande liten och det finns inte många plattformar som tillhandahåller den. Art_Value-projektet vill att användaren ska skapa den digitala konsten som han villförvärva. Plattformen för att tillhandahålla den tjänsten är en webbplats.

I denna rapport beskrivs användarupplevelsedesignen och framsidans utveckling och testning av prototypen på webbplatsens auktionssida. Den använda designmetoden är Double Diamond, som bildas av fyra steg: upptäck, definiera, utveckla och leverera. Programmeringsspråken och biblioteken som används är HTML, CSS, JavaScript och React. Resultatet av arbetet är framsidans prototyp på webbplatsens auktionssida, med ett auktionssystem som simuleras för att så realistiskt som möjligt återskapa användarupplevelsen. Användarupplevelsen har testats och dess resultat har analyserats och definierats som förbättringar för framtida versioner.

Nyckelord

Webbplats, Användarupplevelsen, Design, React, Font end, Double Dia- mond, Auktion

v vi Acknowledgements

I would like to thank my supervisor and examiner, Patric Dahlqvist and Fredrik Kilander, for all of the help and guidance that they have provided.

I would like to thank the Art_Value startup team for developing this work with them.

vii viii Contents

1 Introduction 1

1.1 Background ...... 1

1.2 Problem ...... 2

1.3 Purpose ...... 3

1.4 Goal ...... 3

1.5 Methodology ...... 4

1.6 Stakeholders ...... 5

1.7 Delimitations ...... 6

1.8 Ethics, risks and Sustainability ...... 6

1.9 Outline ...... 7

2 Theoretical background 9

2.1 Art_Value concept ...... 9

2.2 Online auctions ...... 10

2.3 ...... 12

2.4 Front end development tools ...... 15

3 Methodology and Methods 19

3.1 Double Diamond Methodology ...... 19

3.2 User experience testing methods ...... 27

ix 4 Design requirements 33

4.1 Content requirements ...... 33

4.2 Functional specifications ...... 36

4.3 Visual design requirements ...... 37

5 Final design 39

5.1 Interface and ...... 39

5.2 Visual design ...... 40

5.3 ...... 44

6 Front end development 49

6.1 React components description ...... 49

6.2 Simulated auction system ...... 51

7 User experience testing 57

7.1 Test features ...... 57

7.2 Findings and future improvements ...... 59

8 Conclusions and future work 61

8.1 Conclusions ...... 61

8.2 Future work ...... 62

8.3 Discussion ...... 63

x References 65

Appendices 71

A Project discovery and definition 73

A.1 Interview results analysis ...... 73

A.2 Project brief ...... 74

A.3 Lean Canvas ...... 76

A.4 Value Proposition Canvas ...... 76

B Brainstorm 79

C Low and mid fidelity 81

C.1 Low fidelity designs discussion ...... 81

C.2 Mid fidelity design ...... 89

D Test performed 99

D.1 Test performed description ...... 99

D.2 Test results ...... 105

xi xii 1. Introduction

Online auctions trigger emotions to the users such as excitement, happi- ness and frustration. Behind theses platforms, there is a well-designed user experience to achieve this user reaction when bidding. This report describes the work developed in a startup company named Art_Value. The work was focused on the user experience design and front end development of the auction page of their website.

This chapter describes the specific problem that this thesis addresses, the context of the problem, the goals of this thesis project, which methodology was used, the stakeholders of the project, the delimitations, the ethics, risks and sustainability and finally outlines the structure of the thesis.

1.1 Background

The background needed to develop this thesis is divided into four topics: the Art_Value concept, online auctions, user experience and front end development tools.

The Art_Value [37] project was situated in the ArtTech field, combining art and technology. The startup vision was to create an innovative marketplace where new artwork based on numbers is created, distributed and traded. The platform to support this creation, distribution and trade was a website. The distribution was made through online auctions.

1 Online auctions have added new advantages of new technologies and have overcome the problems of traditional auctions [5]. On the other hand, some problems appeared. Knowing about online auctions was essential to design and develop the auction page.

Finally, it was relevant a good knowledge about user experience and front end development tools.

1.2 Problem

The Art_Value startup identified two main problems to solve.

The first problem was that there is still a small abstract digital art world. Nowadays, almost everyone gets in touch with technology and digital word everyday. This fact leads to an increasing number of people involved in digital trends and new technologies. Consequently, there are people interested in abstract and alternative digital art, but there are still few sources of it.

The second problem was that there is a well-defined barrier between being an art collector or an art creator, it is unusual the concept of being an art collector that generates the art that he wants to acquire.

Art_Value wanted to cover these problems with its platform. The main page was the digital art auctions page.

Based on that, the problem statement of this work is the following: How to design, develop and test a digital art auction page?

2 CHAPTER 1. INTRODUCTION

1.3 Purpose

The purpose of the Art_Value project was to create an innovative market- place where new artworks, based on numbers, are created, distributed and traded. As mentioned before, the distribution was done through auctions and the platform to support that was a website.

Based on that, the purpose of this work is the user experience design, front end development and testing of the Art_Value website’s main page meeting the startup’s requirements.

1.4 Goal

The goal of this work is the delivery of a prototype of the website front end. Consequently, this delivery implies the previous design phases and the testing. This main goal was divided into the following four sub-goals:

• Keep the presentation minimalistic.

• Get a user experience that triggers the emotions of an auction.

• Implement a simulated auction system to reproduce the user experi- ence that will have the completed website.

• Test the prototype and analyse the results.

3 1.5 Methodology

Double Diamond methodology [10] was used to make the design and development of the prototype. For the user experience testing some other methods were used.

The Double Diamond methodology has four different phases: discover [6], define [7], develop [8] and deliver [9].

These four phases are structured in two diamonds, illustrated in the figure 3.1 . Each diamond represents a divergent stage followed by a convergent stage. This structure provides a wide range of ideas and considering all the possible options and then narrowing into the best ones. The first diamond is centred on designing the right solution and the second to implement this solution right. The phases are well defined and have a different aim so it helps to organise the work and focus on one goal at once.

Each phase has its methods and tools explained in detail in the chapter 3.

The tools and methods used in the first two stages helped to better-define the Art_Value startup and to determine the problems to cover with the website. The methods and tools of the two last stages took the results from the firsts stages as the basis to design and develop the website. To test the user experience the methods used were: surveys, first impression test and user observation.

4 CHAPTER 1. INTRODUCTION

1.6 Stakeholders

As mentioned before, this work was developed with the Art_Value a startup company. The startup consisted of:

CEO: Vygandas "Vegas" Simbelis, PhD. Researcher at KTH Royal Institute of Technology with a background in art, design, curation and technology.

CTO: Mattias Jacobsson, PhD. Researcher at RISE, lecturer at KTH. His background is in software engineering and interaction design.

CTO: Donald McMillan, PhD. Researcher at Stockholm University with a background in Mobile Development and Human-Computer Interaction.

Some students took place in order to develop some parts of the project.

The project and the team were based around KTH, SU and RISE, it is supported by KTH Innovation and RISE Blockchain Innovation Centre. It took part in the pre-incubator KTH Innovation program.

Working in startup means getting involved in more aspects, not only the prototype design and development, for instance team meetings and getting involved in marketing strategies. Some design decisions were taken together with the startup CEO and CTO. The resulting prototype was approved by the Art_Value team.

5 1.7 Delimitations

This report explains the implementation of a prototype of the Art_Value auction page front end. This work did not include the design and implementation of other website pages, neither the log in or sign up system. The merging with the real back end system was not included. The project neither included improved of the website applying the feedback resulting from the testing.

1.8 Ethics, risks and Sustainability

An ethical issue and risks might come from the main idea of the website. Based on Electron Markets research [1], auction participants can experi- ment the auction fever. Auction fever is defined as "emotional state elicited in the course of one or more auctions that causes a bidder to deviate from an initially chosen bidding strategy.". Different aspects might influence the bidder such as the emotions, the aim of winning, the time pressure and the bidder’s current emotional state. Art_Value type of auction adds more aspects that might influence the bidder. These aspects are explained in the subsection 2.1.1. The auction fever can result in placing bids in excess of the preset bidding limits or auction addiction. Both of these results have negative economic effects for the user. Auction addiction also have negative health effects.

Sustainability development is defined by Brundtland Commission’s report "Our Common Future"[29] as: "Sustainable development is the kind of development that meets our needs of the present without compromising

6 CHAPTER 1. INTRODUCTION the ability of future generations to meet their own needs.". It has three dimensions: ecological, social and economic sustainability.

Ecological sustainability concerns everything that is connected with the Earth’s ecosystems [21]. The prototype developed has no effect on this area.

Social sustainability includes well-being, justice, power, rights and the needs of the individual [23]. As mentioned before, the prototype might have negative effects on user’s health and economy.

Economic sustainability has two different definitions [22]. The first definition determines economic sustainability as economic development that does not have negative impact on ecological or social sustainability. The second definition determines economic sustainability as economic growth allowing the impact ecological or social sustainability. The project helps the Art_Value’s economic growth but it might have negative impact on social sustainability.

1.9 Outline

This report consists of eight chapters starting from the introduction, followed by the background, methodology and methods, the design requirements, the final design, the front end development, the user experience testing and finally the conclusions, future work and discussion.

After the introduction, there is the background. It has four sections explaining the main project areas. The first section explains the Art_Value concept, the second the online auctions, the third the user experience

7 design and finally the front end development tools.

The Methodology and Methods is the third chapter. It is formed by two sections: the Double Diamond methodology and the user experience testing methods.

The fourth chapter is the design requirements. It is composed of the content requirements, the functional specifications and finally the visual design requirements.

The next chapter is the final design. It describes the interface and information design, the visual design and the interaction design.

The front end development is the sixth chapter. The first section of this chapter explains the React components’ description and the second section describes the simulated auction system.

The seventh chapter is the user experience testing. The first section exposes the test features and the second section determines the findings and future improvements.

Finally, the report ends with the conclusions, future work and discussion.

8 2. Theoretical background

This chapter contains the basic knowledge to implement the project. It presents information about the Art_Value concept, online auctions, user experience design and front end development tools.

2.1 Art_Value concept

The project is based on the research and art of Vygandas Simbelis [36], under the artist name Das Vegas. He and his team initiated a startup company to create an innovative marketplace where new artwork based on numbers is created, distributed and traded. The main project was a website that supports the creation and distribution of digital art through auctions. This work holds the user experience design and the front end development of the auction page. The platform used blockchain technology to provide the authentication necessary by legitimising digital artworks and it operated under a new art cryptocurrency.

The digital art sold in the auction is a number. The number auctioned is the highest bid of the auction, so it changes according to the bids submitted. This implies that the users bid the value of the number that they want. If they win the auction, they will acquire the number of their bid. This means that the price of the number is actually its value.

For better understanding, here is an example. A user wants the number

9 "23,45". If the current value of the auction is lower than "23,45", the user will bid "23,45". If the user is lucky and nobody bids higher than "23,45", he will win the auction. As he will have won with the bid "23,45", he will actually pay "23,45" to acquire the number "23,45". If someone bids higher than him, the user will have lost his number and he will have to bid a higher number or try on a new auction.

When a number is sold, it becomes unavailable. Consequently, the available numbers decrease according to the number of auctions done. The range of these numbers is from "0,00" to "999 999 999 999,99".

2.1.1 Ethics in Art_Value auctions

As mentioned before in the section 1.8, Art_Value platform have aspects that might influence the bidder to experiment auction fever. One aspect is the pressure of losing a wanted number. Another aspect is the desire to participate to another auction as a result of someone bidding higher than the number that the user wants to try to acquire it again. The platform might also create to the user the need to achieve higher numbers each time to become more popular in the Art_Value community resulting in a negative aspect for his economy.

2.2 Online auctions

The developed page supports an online auction. For this reason, in this section are explained the auctions, pros and cons about online auctions and finally the user experience in online auctions.

10 CHAPTER 2. THEORETICAL BACKGROUND

2.2.1 Auctions

The Wikipedia "Auction" definition is: "An auction is a process of buying and selling goods or services by offering them up for bid, taking bids, and then selling the item to the highest bidder." [38]

There are some different types of auctions1. The best known is the English auction. The bidders present physically or virtually in the auction. The auctioned item starts in a preset price. The seller gradually raises the price and bidders drop out. When only one bidder remains, that bidder wins the item at this final price. [38, 5]

2.2.2 Online auctions’ pros and cons in Art_Value

The Internet has provided positive effects on auctions. Online auctions overcome problems of traditional auctions and add new advantages of new technologies. On the other hand, some problems appeared [5, 31, 20]. The effect of these pros and cons in the Art_Value platform is explained below.

There are several advantages for the Art_Value project. The principal advantage is the . The users are able to access to the platform from everywhere and at any time. An online platform reaches more people than traditional auctions and different target audiences. New technologies also provide more security, new mechanisms and reduce problems to develop the Art_Value website. Another advantage of this specific project

1The most popular auctions are: English auction, Dutch auction, first price sealed bid auction and second price sealed bid auction. [38, 5]

11 is the delivery of the artwork, as it is a digital artwork the customer receives its product immediately and avoids all the possible delivery problems.

Some of the disadvantages of the online auctions do not affect the Art_Value platform. There is not the possibility of fake sellers as the product is provided by the system. Sometimes the item’s description given doesn’t match the actual item, but in this case as it is digital art the customer exactly knows what is he buying.

To sum up, the position of the Art_Value platform in the online auction market is well-situated as it provides a different type of online auction. It takes several advantages of the online auctions and it also reduces some of the major inconveniences.

2.3 User experience design

User experience (UX) design is the process of creating products that enhance user satisfaction with meaningful and relevant experiences. Based on the Jesse James Garrett book [12], UX design can be divided into five planes: the strategy, the scope, the structure, the skeleton and the surface.

2.3.1 User experience elements

Each plane has its elements to design the user experience:

The strategy plane

This plane is composed of the user needs and the site objectives.

12 CHAPTER 2. THEORETICAL BACKGROUND

The scope plane

The scope plane is formed by the functional specifications and the content requirements. The functional specifications are a detailed description of the website features. The content requirements are a description of the various content elements required.

The structure plane

The structure plane is defined by the interaction design and the information . The interaction design is how the system behaves in response to the user. The is the arrangement of the content elements within the information .

The skeleton plane

The skeleton plane is determined by the information design, the interface design and the navigation design. The information design is how the information is presented to facilitate the understanding. The interface design is the arrangement of the interface elements, for example the header, a button and the images. The navigation design is the group of elements that allow the user to move through the information architecture.

To reduce the cursor and the visual movement, the interface design has to locate closer elements that have sequential user interactions [4]. In addition, it has to consider the negative space2 to focus user attention to

2The negative space is the empty space around and within objects in the interface. This negative space becomes an active design element as it creates contrast by the distance between objects.

13 certain items and create visual hierarchy [35]. Finally, applying the George Miller’s research [26], the interface design should not show more 7 groups of elements in the interface at once.

The surface plane

The surface plane is only composed of the visual the design, the look and style of the platform. When users first visit a website, the eyes are the first thing that interact with it, acting to form an initial opinion of the site through its visual appeal [14].

2.3.2

A better user experience is achieved by improving the system’s usability. ISO 9241-11 [3] defines usability as "the extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use".

ISO 9241-11 defines effectiveness, efficiency and satisfaction as:

• Effectiveness: “accuracy, completeness and lack of negative con- sequences with which users achieved specified goals”.

• Efficiency: "resources expended in relation to the accuracy and completeness with which users achieve goals".

• Satisfaction: “positive attitudes, emotions and/or comfort resulting from use of a system, product or service”.

14 CHAPTER 2. THEORETICAL BACKGROUND

2.3.3 User experience in online auctions

In online auctions, the users experiment emotions when bidding. The web- site has to transmit the excitement of bidding, the competitive atmosphere, it has also to come along with the happiness of winning or the frustration of loosing. In addition, it has to provide all the information about how the auction works and the payment format.

2.4 Front end development tools

Front end development is the process of converting the user experience design to the graphical interface for user to view and interact with it.

The front end development tools utilised are described in the next subsec- tions. HTML, CSS and JavaScrip were already known. Knowledge about React was acquired before developing the prototype.

2.4.1 HTML

HTML [41] is the acronym for HyperText Markup Language. It is the standard markup language for creating web pages and web applications. Together with JavaScript and CSS, they form a triad of the cornerstone technologies for the World Wide Web. Web browsers render the HTML documents into multimedia web pages. HTML describes the structure of the webpage using HTML elements, which are represented by tags.

15 2.4.2 CSS

Cascading Style Sheets [40] is a style sheet language. It describes the presentation of a document written in a markup language like HTML. CSS defines presentation attributes such as layout, colours and font styles. A style sheet is formed by a list of rules that specify the style of multiple attributes of the content.

Bootstrap was also used in the implementation. Bootstrap [39] is a free and open-source CSS framework. It has CSS and JavaScript based design templates for , forms, buttons and other interface components.

2.4.3 JavaScript

JavaScript [42] is a high , interpreted programming language. It is best known as the scripting language for Web pages. JavaScript runs on the client side of the web, which it is used to design how the web pages behave on the occurrence of an event. Moreover, nowadays it can run many other types of host software, for example server-side in web servers and databases.

2.4.4 React

React [45] is a JavaScript library maintained by Facebook. It is used for building user interfaces. It provides the quickest method to fetch rapidly changing data that need to be recorded. For this reason, it is optimal to use it in the development of single-page or mobile applications. It is

16 CHAPTER 2. THEORETICAL BACKGROUND component-based. Each encapsulated component manages their own state and it is easier to compose them to make complex interfaces.

17 18 3. Methodology and Methods

Different methodologies and methods were used to develop the project work. The first section explains the Double Diamond Methodology and the second the methods used in the user experience testing.

3.1 Double Diamond Methodology

The methodology used to develop the design is the Double Diamond [10, 32]. It was officially invented by the British in 2005. Its structure is two squares at an angle as the figure 3.1 illustrates. The first diamond represents the research phase and the second the design phase [11]. It is divided into four stages: discover, define, develop and deliver.

The Double Diamond methodology was selected for the advantages that provides. It has well-defined phases that helps to organise the process. Each stage has a different aim so it helps to focus on one goal at once. Another advantage is the double divergent and convergent structure that provides a wide range of ideas and considering all the possible options and then narrowing into the best ones. The Double Diamond indicates that this process happens twice. The first diamond starts with an initial problem, concepts and ideas and ends with a revised problem definition. The second diamond gets this revised problem definition and ends with a solution. Both divergent stages make this methodology user-centred, a significant feature in UX design. This methodology also has an iterative

19 process in the third stage, and therefore some different solutions are taken into account and then only the best is fully developed and delivered.

Figure 3.1: Double Diamond model scheme

Different methods and tools were chosen to move the project through the four phases of the Double Diamond.

3.1.1 Methods and tools for the discovery phase

The first stage of the Double Diamond [6] consists of learning more about the different variables that affect the problem and the users. This is a divergent zone, so it is important to gather a lot of data and embrace the complexity of the problem. In this phase, the focus is on the users. For this reason, their preferences, motivations and problems are meaningful. The principal objectives are identify the problem, opportunities and needs to be addressed, define some of the boundaries of the solution space as well as build a rich knowledge resource.

20 CHAPTER 3. METHODOLOGY AND METHODS

Interview results analysis

An interview results analysis consists on extracting meaningful information from an already done interview. The interview was already done by the Art_Value team. The interviewed group was formed by ten relevant individuals from different potential target groups such as art collectors, gallerists, tech nerds, blockchain gurus and millennials. The results provided feedback about the Art_Value concept and how to focus the platform. Some insights influenced for the design.

Market research

Market research is essential to know which services and products the current market provides and which are its strengths and weaknesses. This research consists of getting into the market as a user, reading about it in other studies and papers and also looking for the new social trends.

The market research was done on online auctions. It provided information about how the online auctions work, which advantages and disadvantages do they have and how they affected the Art_Value website.

3.1.2 Methods and tools for the definition phase

Once all the data has been gathered, it has to be synthesised. The second stage [7] is a convergent zone, where all the ideas are analysed and structured into a set of problem statements and a clear brief that frames the design challenge. The objectives in this phase are analyse the outputs of the discovery phase, synthesise the findings into a reduced number of opportunities and define a clear problem statement that outlines the design

21 challenge.

Project brief

The project brief is a clear definition of the fundamental challenge or problem to be addressed through the project. It is a structured statement that communicates the problem, the purpose and outlines the goals.

The Art_Value startup did not have clear which were their problem, purpose and goals and the project brief was useful to determine them and later design the website over this basis.

Lean Canvas

Lean Canvas [33] is a visual tool for describing and developing business models. The left side blocks define the product and the right side blocks define the market. The figure 3.2 illustrates the Lean Canvas template.

Figure 3.2: Lean Canvas template

The blocks are explained in order that they have to be completed:

22 CHAPTER 3. METHODOLOGY AND METHODS

• Problem. A set of problems that the project wants to cover have to be listed.

• Customer segments. It has to be filled in with the target customers.

• Unique value proposition. It is the reason that differentiates your service from other competitors.

• Solution. Finding a solution to the problems listed before.

• Channels. They are the ways for reaching the customer segments.

• Revenue Streams. A list of sources of revenue.

• Cost Structure. A list of the fixed and variable costs for taking the business to market.

• Key metrics. A list of the key metrics that are used to monitor performance. They have to be measurable.

• Unfair advantage. The unfair advantage is the advantage that cannot be copied or bought.

It was developed to determine the startup business model and know how the website was positioned into it.

Value Proposition Canvas

Value Proposition Canvas [30, 2] is a statement that maps out the key aspects of the service. It helps to focus the solution on the user. It gives a detailed look at the relationship between the company’s value proposition and the customer profile. The filling order goes from the customer side

23 to the value proposition. The figure 3.3 illustrates the Value Proposition Canvas template.

Figure 3.3: Value Proposition Canvas template

The aspects to determinate are:

• Gains: the benefits that the user expects from the product or service.

• Pains: the negative experiences, emotions or risks that the user could experience during the process.

• Job to be done: the functional, social and emotional tasks users are trying to get done, needs that they want to cover.

• Pain relievers: how the product or service relieves the customer pains.

• Gain creators: how the product or service offers to the customers to help them fulfil the gains.

• Products and services: what products and services are offered to the customer to get his job done.

24 CHAPTER 3. METHODOLOGY AND METHODS

The designed website had to emphasise the gains creators and pain relievers to provide a good service to the user.

3.1.3 Methods and tools for the develop phase

The third stage in the Double Diamond model marks a period of develop- ment [8] and search of possible solutions. It is a divergent phase, where multiple options are created, prototyped, tested and iterated. The objective at this stage is to develop multiple ideas that may serve as a potential solution.

Brainstorm

Brainstorm generates all the possible elements and features about the service. It is useful to generate a wide range of possible ideas to later select them and make the firsts designs. It provided a list of all the possible elements that the website could include as well as interaction design features.

MoSCoW method

After the brainstorm is useful to apply the MoSCoW method [44]. It is a technique to prioritise. It is an acronym derived from Must have, Should have, Could have and Won’t have. They are the four prioritisation categor- ies. All the recollected elements from the brainstorm were prioritised to determine which of them had to be included on the website.

25 Low fidelity design

There are different fidelity designs, low, mid and high, referring to the level of details and functionality built into a prototype. The low fidelity design checks and test functionality rather than the visual appearance of the product [28, 27]. The visual design in the low fidelity design consists only in the shapes of elements and basic visual hierarchy. Only the key elements have to be in the design. It was the basis to later make the mid fidelity design.

The method used to create the low fidelity design is paper prototyping. The elements that the website has to include have to be printed. It was useful to explore different ideas and refine designs quickly.

Mid fidelity design

The mid fidelity design is the digital implementation of a clean formatted version of the low fidelity [27]. It has pixel-based layouts that structures the design. This design has to determinate what elements work in the layout, how can impact the user experience and which functionalities they will have. The process (design, develop, prototype and test) has to be repeated in order to refine the ideas.

3.1.4 Methods and tools for the delivery phase

The deliver stage [9] is a convergent phase, so from the all possible solutions only the best is implemented and delivered. The methods and tools in this phase help to implement and deliver the final product.

26 CHAPTER 3. METHODOLOGY AND METHODS

High fidelity design

The high fidelity design is the detailed visual and interaction design. It includes all the content, all the interactions have to be high detailed and the colours specified [28, 27]. The mid and high fidelity design provided all the requirements and features about the website to be developed.

Software prototype development

Software prototyping is the process of creating incomplete versions of a software system. In this work, the prototype was the front end of the main website page. To develop the prototype the mid and high fidelity designs details were taken as the requirements to meet. The designs were analysed to design and structure the code. The React components were defined. Finally, the coding stage to implement the prototype.

Delivery

The prototype delivery includes the useful information for the company, such as the findings and future improvements resulting from the test.

3.2 User experience testing methods

User experience testing is the process of making some users check different aspects of user experience. The main objectives are getting insights from users, confirm if the website meets user’s expectations, check if users can perform the proposed tasks, identify issues and get user’s feedback [25, 15]. The methods used in this testing were users survey about their interests and habits, first impression test, user

27 observation and a survey about their interaction with the website.

3.2.1 Usability evaluation

The user observation and the survey about the user interaction with the website evaluate the usability.

The measures of the usability components, effectiveness, efficiency and satisfaction, are specified in the table 3.1.

Effectiveness Efficiency Satisfaction Tasks completed Task time Overall satisfaction Objectives achieved Time efficiency Satisfaction with features Errors in a task Cost-effectiveness Discretionary usage Task with errors Productive time ratio Feature utilisation Proportion of users Task error intensity Unnecessary actions complaining Proportion of user Fatigue complaint about a particular feature User trust User pleasure Physical comfort

Table 3.1: Measures of effectiveness, efficiency and satisfaction. Source: Table 2, New ISO Standards for Usability, Usability Reports and Usability Measures article \cite{usability}.

28 CHAPTER 3. METHODOLOGY AND METHODS

3.2.2 Surveys

Surveys are a descriptive research method used to collect information from a sample of individuals in a systematic way [13]. Questionnaires were used to collect data through questions, which were either quantifying data (closed, alternative questions) and qualifying data (open and reviewing questions).

The quantifying questions were yes/no questions with the option to comment, check boxes also with the option to comment and rankings. These results were statistically analysed.

The qualifying questions asked for users opinions, comments and recom- mendations.

3.2.3 First impression test

The impression test is a simple method for capturing a user’s first impressions of the website. This test measures the website stickiness, as it takes a short amount of time to catch people’s attention and communicate the website’s purpose and make the right impression to keep them. User expectations, first reactions and the concept that the user catches are also identified. [34]

The test was based on keeping the website shown for fifteen seconds and the users take in what they can. Then the following questions were asked:

• Three words that you would use to describe the site.

29 • What do you think is this site about?

• What services/products are offered on this site?

• What are the feelings of this site? (e.g. professional, fun...)

The words to describe the site generated a clear picture of how the website is perceived. The two next questions proved if the concept of the website can be easily understand. Finally, the feelings that the website transmit also helped to determine how the website is perceived and which kind of expectations it generates.

3.2.4 User observation

The user observation is a method that examines the user behaviour with the system [13, 16]. It is an unmoderated in-person test. The researcher watch the user interaction with the website and his reactions but does not participate. Some tasks are given to the respondents to be completed. The observation has to focus on issues the users encountered while performing tasks, actions the users took and comments (both positive and negative) they made.

Both quantitative analysis and qualitative analysis of the results were done.

The quantitative data metrics were:

• Success rate: the percentage of users in the testing group who completed correctly the assigned task.

• Error rate: the percentage of users that made with the same error.

30 CHAPTER 3. METHODOLOGY AND METHODS

The qualitative analysis was the classification of the insights. They maybe were not the same but were strongly related therefore were put together. Once the classification was done, it was useful to determine which were the general issues to fix and which were the strengths of the design.

31 32 4. Design requirements

The website design requirements are divided into three sections: the content requirements, the functional specifications and the visual design requirements.

4.1 Content requirements

The content requirements were a description of the elements that the website had to include. The first subsection identifies these elements and the second is their prioritisation.

4.1.1 Identification of content requirements

The brainstorm, explained in the Appendix B, helped to identify the content requirements. The resulting list was:

• Menu bar with the logo, other menu options and the user adminis- trator (log in, log out, sign up).

• The highest bid.

• Input element to introduce a new bid.

• Bid button to validate the introduced bid, if it is correct and available.

• Countdown to show the remaining time until the auction finishes.

33 • Messages to communicate who is the winner, non-available bid. . .

• Previous auctions information.

• Number of users online.

• Option to bid randomly.

• List of popular numbers.

• Platform community.

• Suggested quick bids.

• Last user’s bids.

• List of previous bids of the ongoing auction.

4.1.2 Prioritisation of content requirements

The MoSCoW method was useful to prioritise the content elements. Only the elements from the must have and should have list were finally in the design.

Must have

• Menu bar: to move between the different pages, add branding with the company logo and handle the user registration and log in.

• The highest bid: essential for the auction process, the user must know which is the highest bid in order to bid higher.

• Input element to introduce a new bid and bid button: necessary for the auction process, the user has to be able to bid. It should manage

34 CHAPTER 4. DESIGN REQUIREMENTS

the availability of the numbers and if the bid is not correct (lower than the highest bid or is not a number).

• Countdown: fundamental for the user to know when the auction is going to finish.

• Messages: to communicate which is the auction sold, inform he user if it’s the winner or the loser, advertise when is the next auction. . .

Should have

• Previous bids of the ongoing auction: to provide more information to the user about the ongoing auction, to check the difference between the bids or which numbers are the people interested in.

Could have

• Last user’s bids

• Suggested bids

• Platform community

• List of popular numbers

• Previous auctions information

• Number of users online

35 Won’t have

• Option to bid randomly: it was dismissed because the user is not able to choose the number and there would not be any relation between the number and the user.

4.2 Functional specifications

The interview result analysis, the Value Proposition Canvas and the Art_Value platform concept itself were the basis to define the functional specifications. The interview result analysis and the Value Proposition Canvas are explained in the Appendix A. The functional specifications were:

• The system had not to allow to bid a non available bid, a lower bid than the current auction value or a higher bid than "999 999 999 999,99". It had to provide the reason why the user is not allowed bid.

• If there was not an ongoing auction, the system had to inform when the next auction will start.

• Once the auction had finished, the system had to inform to the user if he has won or lost.

• The platform had to trigger emotions to the user.

• The platform had to look for a good way to explain the concept as it is difficult to understand.

• The platform had to emphasise the elements and functionalities that are gain generators and pain relievers.

36 CHAPTER 4. DESIGN REQUIREMENTS

4.3 Visual design requirements

The visual design requirements given by the Art_Value team were:

• Minimalist design.

• Clean and simple design.

• The main colours are black and white, secondary pink and green.

• Number format: thousand separator a space and decimal separator a comma.

37 38 5. Final design

The final design resulted from the low, mid and high fidelity designs. The sections in this chapter are the interface and information design, the visual design and the interaction design.

5.1 Interface and information design

The interface and information design was developed in the low and mid fidelity designs. The low and mid fidelity details are described in the Appendix C. The interface and information design is illustrated in the figure 5.1.

Figure 5.1: Interface and information design

The design was formed by 4 elements:

39 • Header: it contains the logo, the other website pages and the user profile link

• Messages

• Big central number: it is the highest bid, so the current auction value.

• Column: it includes the countdown, the list of the previous bids done, the input element and the button to bid.

The interface and information design took into account multiple aspects. The user visual movement and the cursor movement had to be comfort- able. The visual grid that the element structure creates had to be simple. The visual weight had to be as centerer as possible. The negative space focused the attention on the centred big number and it also made the design more minimalistic and relaxing. The small negative space between the elements in the column helped to perceive all the elements as one visual object.

The distribution of the header items was based on the Jakob’s Law [18] that states that users prefer sites that work the same way as all the other sites they already know. In the column, the previous bids list, the input element and the submit button were together as the user interacts with the cursor with them.

5.2 Visual design

The visual design developed specifies the website aesthetics, the colours and items’ details. The visual design was defined during the high fidelity design. The visual design kept the minimalist concept. The elements

40 CHAPTER 5. FINAL DESIGN relevance was taken into account to define its characteristics and establish the website visual hierarchy. The auction page of the website had three stages: the ongoing auction stage, illustrated in the figure 5.2, the loading stage and the waiting stage. Each stage had its visual design.

Figure 5.2: Visual design for the ongoing auction stage

5.2.1 Loading stage visual design

The loading stage lasts until the auction is processed by the system. The visual design consisted of keeping all the elements in the background darker and a pop up with the loading message and a spinner as the figure 5.3 illustrates.

41 Figure 5.3: Loading stage visual design

5.2.2 Waiting stage visual design

The waiting stage lasts from the moment that the auction is processed by the system until the next auction starts. The visual design consisted of the information message, the number finally sold and the countdown for the next auction. A different message appeared if the user has won or lost. The figure 5.4 illustrates this design.

42 CHAPTER 5. FINAL DESIGN

(a) Visual design if the user is has won

(b) Visual design if the user has lost

Figure 5.4: Waiting stage visual design

5.2.3 Colours used

The colours chosen provided a clear and simple interface. The colour palette is black, white, greyscale, pink and green. The distribution of the colours was partly based on the interview result insight that the concept has potential in gamification. The black background combined with bright colours remind an amusement arcade, a dark room with bright lights.

The hexadecimal colour codes used are described in the figure 5.5.

It was not used the pure black and white as the resulting contrast on screen is not comfortable for the user. The pink and green focused the

43 Figure 5.5: Hexadecimal colour codes

attention on the highest bid, therefore, the digital artwork auctioned. The other elements’ colours were from the greyscale.

5.3 Interaction design

In this section, the interaction design of each element of the website is explained. The interaction design was defined during the high fidelity design.

5.3.1 Highest bid

The number had to be resized if it has more than seven digits in order to fit the width of the bar below. This number also became darker (#959595)

44 CHAPTER 5. FINAL DESIGN if the bid does not belong to the user, if it belongs, it had a brighter colour (#F2F2F2). This visual effect helped to easily recognise if the user is winning or not. It is shown in the figure 5.6.

(a) Higher bid when the user is not (b) Higher bid when the user is its its bidder bidder

Figure 5.6: Different colours for the higher bid

5.3.2 Messages

As mentioned above, the messages only appeared when the auction had ended. They informed the users if they have done the highest bid, thus they had achieved the artwork or not.

5.3.3 Countdown

The countdown had an only number format, dividing the hours, minutes and seconds with colons. This style was chosen as there are no letters and keeps the number essence of the website and maintain the minimalist design. To provoke the bidding excitement, the countdown shows the seconds, consequently it reminded the user that the time is running. Moreover, for the last ten minutes the countdown was displayed in red (#DF1717) as the figure 5.7 shows.

45 Figure 5.7: Countdown lower than ten minutes

As mentioned before, when the auction was not running, it appeared the message "Next auction in:" in the countdown section as the figure 5.8 illustrates.

Figure 5.8: Countdown with message

5.3.4 Previous bids section

The previous bids section had the highest bids on the top and the lowest at the bottom. If the user did not interact with it, it showed the second, third, and forth previous highest bids. It was a scrollable section, consequently, if the user scrolls down this section, other previous bids were displayed. Similar to the highest bid, if the number had more than ten digits, it was resized.

5.3.5 Input element

The input element shows a placeholder when there was no bid entered. The input only allowed numbers to be written and it kept always the comma and two decimals. The introduced number always filled the second decimal position, therefore increasing a tenth the previous number.

46 CHAPTER 5. FINAL DESIGN

Removing a number proceeds likewise, the second decimal number was deleted and the previous number decreases a tenth. The figure 5.9 describes the input format. The maximum bid was "999 999 999 999,99", for this reason the maximum number of digits was fourteen. The last bid submitted by the user was maintained in the input and not deleted automatically.

(a) "1" is pressed (b) "2" is pressed (c) "3" is pressed (d) "4" is pressed

Figure 5.9: Input format

5.3.6 Bid button

The bid button submited the bid introduced at the input. The input value could not be higher than "999 999 999,99", lower than the highest bid or a number previously auctioned or reserved by the company. If the value was valid and the auction was running, the bid button was enabled. If it was not valid, the button was disabled and a hint was shown if the user had the mouse over the button. The figure 5.10 shows the two button formats. The input could also be submitted pressing the enter key.

47 (a) Bid button when the input is (b) Bid button when the input is not valid valid, for example not available, and the mouse is over it

Figure 5.10: Bid button formats

48 6. Front end development

The front end development was done following the final design details. This chapter has two sections: the React components’ description and the implementation of the code that simulates the auction system.

6.1 React components description

React components were used to split the interface into independent and reusable pieces. They accept input from the previous components and they return the interface element to be shown.

6.1.1 React components’ structure

The code was structured following the React component-based format.

The figure 6.1 shows the components’ structure.

49 Figure 6.1: Components’ structure

6.1.2 React components’ inputs

The React components created change their aesthetics depending on the inputs received. Functions can be component inputs to modify from parent components1 attributes.The table 6.1 describes the inputs received and the changes done by the main components.

1The current component is inside the parent component. For example: Home is the parent component of Messages, Number and Column.

50 CHAPTER 6. FRONT END DEVELOPMENT

Inputs Changes Countdown Home If there is an ongoing auction Change the layout If the system is in the loading stage Display the loading popup Messages Message to be shown Display the message if it is defined Highest bid Update the highest bid Number If the owner is the user Change the number colour If there is an ongoing auction Display or hide the next auction text Timer Countdown Update the countdown History Previous bids done Update the previous bids list Functions to update the auction BidInput system attributes If the input value is correct Enable or disable the button Hint to show if the input value Show the hint if the mouse is is incorrect over the button BidButton Function to validate the input value as a bid if the button is pressed

Table 6.1: Inputs and is correspondent changes of the main components.

6.2 Simulated auction system

The website font end implementation lacked of back end, for this reason, a mock2 auction system was developed to simulate a real scenario to implement all the UX features and test the result.

2Mock objects are simulated objects that mimic the behaviour of real objects in controlled ways, most often as part of a initiative. [43]

51 6.2.1 Auction process timeline

The auction system had three stages: the auction running, the loading stage and the waiting stage until the next auction. The auction countdown could be configured as well as the countdown until the next auction. The loading stage lasted a random time between three and ten seconds, sim- ulating the time that takes processing the auction result to the blockchain system.

6.2.2 User entering an input

When the user pressed a key, the system only allowed number, the delete key and the enter key. If the enter key was pressed and the input was valid, it was submitted to the system. If the key pressed was a number or the delete key, the resulting value was checked. The figure 6.2 describes the input flowchart.

52 CHAPTER 6. FRONT END DEVELOPMENT

Figure 6.2: Input flowchart

6.2.3 User submitting the input

If the input value was valid and the auction was running, the bid button was enabled and the user could submit the bid to the system. It could be done pressing the enter key or pressing the bid button. The input value was added to the previous bids list and it was set as the highest bid. As it was done by the user, the highest bid had a brighter colour. The bid button was disabled as the current input value was actually the highest bid and

53 therefore not higher than it.

Figure 6.3: Submit flowchart

6.2.4 Other user bids

Other user bids were simulated in this system. Every a random number of seconds, a bid was generated. The value of this bid could be from the highest bid plus one to the highest bid multiplied by two. If this bid was valid, it was submitted to the system. It was added to the previous bids list and set as the highest bid. The highest bid changed to a darker colour as it was an another user bid. After the bid was submitted, the current

54 CHAPTER 6. FRONT END DEVELOPMENT value of the input was checked and the bid button was enabled or disabled depending on its validity.

Figure 6.4: Other user bids flowchart

55 56 7. User experience testing

User experience testing was done over the developed prototype. This chapter is formed the test features and the findings and future improve- ments. The test results are in the Appendix D.

7.1 Test features

This section is composed of three subsections: the test objectives, a brief test description and the user recruitment.

7.1.1 Test objectives

The main objectives of the test were:

• Check the user’s first impression

• Determine if the users understand how the site works and don’t get lost

• Evaluate usability components: effectiveness, efficiency and satis- faction

• Check if the elements’ format, interactions and distribution is the optimum

• Detect possible design issues

57 • See if the auction experience provoke the right emotions

7.1.2 Test description

The test consisted of five steps. The first was completing the survey about their interests and habits. Then, an impression test. After the impression test, a brief explanation about the website and followed by the website free interaction, where they had to complete certain tasks described in a document (not leaded by a supervisor). Once they have completed all the tasks, they answered a survey about their experience on the website.

Each test lasted fifteen minutes approximately.

The respondents agree to record their interaction with the website to be analysed.

7.1.3 User recruitment

Five people performed the test individually. The number of users is based on the Nielsen and Landauer research. It indicates that five users are enough to uncover 80% of the usability problems. [17]

The respondents are between 21 and 24 years old. They are students from different areas: electrical engineering, polymers engineering, biochemistry and biomedicine.

They were interested in new technologies, but not that much with abstract art. They had a good background interacting with new technologies and visiting and utilising websites and applications. Most of them

58 CHAPTER 7. USER EXPERIENCE TESTING considered themselves very efficient interacting with new websites and applications. For these reasons, they had enough information to evaluate the Art_Value’s website, although they had never auctioned. They could easily identify the main issues and check the stickiness and efficiency of the website. They also had updated the current website styles and could evaluate the website visual design.

7.2 Findings and future improvements

The user interactions, answers and comments were analysed and resulted in some findings and future improvements.

The analysis of the usability components generate some insights. All the respondents completed correctly the tasks without errors, so the website had a good effectiveness. The users had to fully delete the previous vid submitted as it didn’t delete automatically resulting in waste of time and unnecessary actions, so the efficiency had be improved. The respondents were satisfied with the system but not in the input format and its features, so the satisfaction had to be also improved.

About visual design, a minimalistic and abstract presentation was achieved and it fits the Art_Value concept. The content shown keeps the website simple and clean.

About the interface and information design, some more information is needed in order to provide more information about the concept and the service offered to the users, as it is complex to deduce it only with the website presentation and the short sentence provided in the test. A

59 potential solution would be including a small information button that when is clicked, all the required information appears. It would provide all the information as well as keeping the minimalist style. Some more information about the previous bids done would be useful to be shown, for instance, who made the bid and when it was made.

Changes in the interaction design of some elements would also improve the user experience. All the respondents struggled with the input format. To find the perfect input format some more testing would be useful. Providing some different input formats to some users and discover which is the best way to introduce a two-decimal number. Another improvement would be having the previous bids scrollbar always shown as only 40% of the users perceived that the previous bids section could be scrolled to check all the bids made.

In conclusion, to improve the user experience more information has to be provided. Moreover, some small changes have to be done without changing the visual design. After all these changes some more tests have to be done to prove that the website provides a better user experience.

60 8. Conclusions and future work

This chapter describes the conclusions extracted from the work done, some future work and finally the reflections.

8.1 Conclusions

Some conclusions were extracted from the user experience design, the front end development and testing of the prototype of the auction page of the Art_Value’s website.

Firstly, all the first stages of the design have been meaningful to make the right design decisions. Having a good background about user experience design and having clear the problem statement makes easier all the design process and also reduces the number of testing and redesigning iterations.

The user experience testing was relevant to come up with some decisive problems, for example the need of more information and the struggles with the input format. Some more tests should have been taken before the implementation of the design. A clickable design would have been very useful to detect in advance some of these problems in previous tests. Changing the design is easier than developing again some elements or functionalities of the website. With more tests and a clickable design, the prototype would have been developed with these problems fixed.

From the testing is concluded that the two first proposed goals have been

61 achieved: the users agree that the presentation is minimalistic and they have felt different emotions when auctioning in the website.

In conclusion, choosing a good methodology to design and develop a website is essential. The testing phase is meaningful and it has to be planned consciously from the beginning of the design to detect possible problems as soon as possible.

8.2 Future work

This project consist of the design and development of a prototype of the website’s main page front end. Some future work have to be done until having the completed version.

The tests provided some problems to be fixed in the next versions. This improvements are explained in the section 7.2. Another improvement would be try to trigger more emotions to the users and lead them to what to do next in the waiting stage. Finally, some details are slightly different from the high fidelity design and the implementation and they should be fixed.

Once these changes have been done, it would be necessary to do more testing in other target of users. Some testing with people related to art and having previous experience in auctions would be helpful to keep improving the user experience of the website.

The future work would also include the design and development of the other pages of the website, such as the gallery and the calendar pages. It would also include the integration with the back end.

62 CHAPTER 8. CONCLUSIONS AND FUTURE WORK

8.3 Discussion

The user experience test concluded that the website caused emotions to the respondents. This result did not rely completely on the user experience design, it also relied on the Art_Value type of auction. Most of the emotions felt were the result of the auction system and the user experience design was used to transmit and emphasise them.

63 64 8. References

[1] Marc Adam, Jan Krämer, Caroline Jähnig, Stefan Seifert, and Christof Weinhardt. Understanding auction fever: A framework for emotional bidding. Electronic Markets, 21:197–207, 09 2011.

[2] B2B market research company. What is the value proposition canvas? https://www.b2binternational.com/research/methods/faq/ what-is-the-value-proposition-canvas/.

[3] Nigel Bevan, Jim Carter, Jonathan Earthy, Thomas Geis, and Susan Harker. New iso standards for usability, usability reports and usability measures. volume 9731, pages 268–278, 07 2016.

[4] Agnieszka Bojko. Eye tracking in user experience testing: How to make the most of it. Proceedings of the 14th Annual Conference of the Usability Professionals’ Association (UPA). Montréal, Canada, 01 2005.

[5] Rashesh Chothani, Nainesh A Patel, Asagarali H Dekavadiya, and Punit Patel. A review of online auction and it’s pros and cons. International Journal of Advance Engineering and Research Development, 2:3–134, 01 2015.

[6] Design Council. step 1: Discover. https://www. designcouncil.org.uk/news-opinion/design-methods-step-1-discover, March 2015.

[7] Design Council. Design methods step 2: Define. https://www. designcouncil.org.uk/news-opinion/design-methods-step-2-define, March 2015.

65 [8] Design Council. Design methods step 3: Develop. https://www. designcouncil.org.uk/news-opinion/design-methods-step-3-develop, March 2015.

[9] Design Council. Design methods step 4: Deliver. https://www. designcouncil.org.uk/news-opinion/design-methods-step-4-deliver, March 2015.

[10] Design Council. The design process: What is the double diamond? https://www.designcouncil.org.uk/news-opinion/ design-process-what-double-diamond, March 2015.

[11] Eva Schicker. Why the double diamond is the most precious diagram in ux design. https://medium.com/@evaschicker2012/ why-the-double-diamond-is-the-most-precious-diagram-in-ux-design-40db0476e5d2, November 2018.

[12] Jesse James Garrett. The elements of user experience : user- centered design for the web. American Institute of Graphic Arts (AIGA), New York, 1. ed.. edition, 2003.

[13] Anne Håkansson. Portal of research methods and methodologies for research projects and degree projects. 2013.

[14] A.J. Haywood. Online auctions: User experience insights from ebay. Chimera Working Paper 2006-10, 2006.

[15] Hotjar Company. A beginner’s guide to . https://www. hotjar.com/usability-testing/, 2019.

[16] Hotjar Company. Usability evaluation and analysis. https://www. hotjar.com/usability-testing/evaluation-analysis, 2019.

66 REFERENCES

[17] Jakob Nielsen. Why you only need to test with 5 users. https:// www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/, 2000.

[18] Jon Yablonski. Jakob’s law. https://lawsofux.com/jakobs-law.html, 2018.

[19] Jon Yablonski. Law of common region. https://lawsofux.com/ law-of-common-region.html, 2018.

[20] Donald Joyce and Orson Lin. Critical success factors for online auction web sites. 01 2004.

[21] KTH Royal Institute of Technology. Ecological sustainability. https://www.kth.se/en/om/miljo-hallbar-utveckling/ utbildning-miljo-hallbar-utveckling/verktygslada/ sustainable-development/ekologisk-hallbarhet-1.432074, 2018.

[22] KTH Royal Institute of Technology. Economic sustainability. https://www.kth.se/en/om/miljo-hallbar-utveckling/ utbildning-miljo-hallbar-utveckling/verktygslada/ sustainable-development/ekonomisk-hallbarhet-1.431976, 2018.

[23] KTH Royal Institute of Technology. Social sustainability. https://www.kth.se/en/om/miljo-hallbar-utveckling/ utbildning-miljo-hallbar-utveckling/verktygslada/ sustainable-development/social-hallbarhet-1.373774, 2018.

[24] Gaurav Kumar and Pradeep Bhatia. Impact of agile methodology on software development process. International Journal of Computer Technology and Electronics Engineering (IJCTEE), 2:2249–6343, 08 2012.

67 [25] Leonel Foggia. Usability testing: what is it and how to do it? https: //uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d, 2018.

[26] George A. Miller. The magical number seven, plus or minus two some limits on our capacity for processing information. Psychological Review, 101(2):343–352, 1994.

[27] Milton Pacheco. Understanding design fidelity for creating a great product experience. https://cantina.co/ understanding-design-fidelity-for-creating-a-great-product-experience/, February 2014.

[28] Nick Babich. Prototyping 101: The difference between low-fidelity and high-fidelity prototypes and when to use each. https://theblog.adobe. com/prototyping-difference-low-fidelity-high-fidelity-prototypes-use/, November 2017.

[29] UNWCED: United Nations World Commission on Environment and Development. Our common future (brundtland report). Technical report, 1987.

[30] Patrick Van Der Pijl. How to really understand your customer with the value proposition canvas. https://designabetterbusiness.com/2017/10/12/ how-to-really-understand-your-customer-with-the-value-proposition-canvas/, October 2016.

[31] Edieal J. Pinker, Abraham Seidmann, and Yaniv Vakrat. Managing online auctions: Current business and research issues. Manage. Sci., 49(11):1457–1484, November 2003.

68 REFERENCES

[32] Rebeca Costa. The double diamond model: what is it and should you use it? https://www.justinmind.com/blog/ double-diamond-model-what-is-should-you-use/, November 2018.

[33] Steve Mullen. An introduction to lean canvas. https://medium.com/ @steve_mullen/an-introduction-to-lean-canvas-5c17c469d3e0, June 2017.

[34] Try my UI Company. Impression testing. https://www.trymyui.com/ impression-testing, 2019.

[35] Viktorija Bachvarova. The power of empty space in ui design. https://uxplanet.org/ https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203, December 2018.

[36] Vygandas "Vegas" Šimbelis. Art value. http://www.simbelis.com/ media-art-projects/art-value/, 2009.

[37] Vygandas "Vegas" Šimbelis. Art value venture cup. https://venturecup.ideahunt.io/ideas/ 9ca6b5a7-bd10-4825-b9d6-1ebeae573a15, 2018.

[38] Wikipedia contributors. Auction — Wikipedia, the free encyc- lopedia. https://en.wikipedia.org/w/index.php?title=Auction&oldid= 894586482, 2019. [Online; accessed 8-May-2019].

[39] Wikipedia contributors. Bootstrap (front-end framework) — Wikipedia, the free encyclopedia. https://en.wikipedia.org/w/index.php?title= Bootstrap_(front-end_framework)&oldid=898059240, 2019. [Online; accessed 26-May-2019].

69 [40] Wikipedia contributors. Cascading style sheets — Wikipedia, the free encyclopedia. https://en.wikipedia.org/w/index.php?title=Cascading_ Style_Sheets&oldid=897993741, 2019. [Online; accessed 26-May- 2019].

[41] Wikipedia contributors. Html — Wikipedia, the free encyc- lopedia. https://en.wikipedia.org/w/index.php?title=HTML&oldid= 887642352, 2019. [Online; accessed 26-May-2019].

[42] Wikipedia contributors. Javascript — Wikipedia, the free encyclo- pedia. https://en.wikipedia.org/w/index.php?title=JavaScript&oldid= 898647981, 2019. [Online; accessed 26-May-2019].

[43] Wikipedia contributors. Mock object — Wikipedia, the free en- cyclopedia. https://en.wikipedia.org/w/index.php?title=Mock_object& oldid=886934659, 2019. [Online; accessed 26-May-2019].

[44] Wikipedia contributors. Moscow method — Wikipedia, the free encyclopedia. https://en.wikipedia.org/w/index.php?title=MoSCoW_ method&oldid=894504141, 2019. [Online; accessed 8-May-2019].

[45] Wikipedia contributors. React (javascript library) — Wikipedia, the free encyclopedia. https://en.wikipedia.org/w/index.php?title=React_ (JavaScript_library)&oldid=897935515, 2019. [Online; accessed 26- May-2019].

[46] Wikipedia contributors. Waterfall model — Wikipedia, the free encyclopedia. https://en.wikipedia.org/w/index.php?title=Waterfall_ model&oldid=901915823, 2019. [Online; accessed 18-June-2019].

70 Appendices

71 72 A. Project discovery and definition

This Appendix explains the two first stages of the Double Diamond methodology: the discovery and definition. The Appendix is composed of an Interview results analysis, a project brief, a Lean Canvas and a Value Proposition Canvas. The market research is explained in the subsection 2.2.2.

A.1 Interview results analysis

The Art_Value team did ten interviews about the Art_Value concept [36, 37]. The objective was gathering information for the Art_Value’s future development and specifically understanding more about the potential target audience, how the technological part is viewed, ideas about a potential business model, the personal interest in Art_Value and establish relevant contacts and open new doors.

The interviews consisted of ten one-to-one meetings with the interviewees presenting the concept and making the questions. They were semi- formal interviews with open questions and time to discuss the concepts and the project presented. The interviews lasted approximately an hour. The interviewed group was formed by ten relevant individuals from different potential target groups such as art collectors, gallerists, tech nerds, blockchain gurus and millennials. The questions were personalised depending on the interviewed and how the discussion was developed.

73 According to each target audience the following conclusions were extrac- ted. The art collectors did not feel very comfortable about not having a physical product, but they were in favour of including new technologies to increase security and provenance issues. They also pointed out that any art should meet the 4 E’s, emotional, ethos, epic and aesthetics. The gallerists confirmed the creativity around numbers as artworks, but did not know much about including blockchain in the system. They also found interesting the combination of art and technology. Finally, the tech nerds, blockchain gurus and millennials liked the idea about including blockchain in the system and identify potential in gamification. Moreover, they realised the ability for huge and global reach, create a hype and address new audience, “art for non-art buyers”.

Another opinion was that the project concept is difficult to grasp and maybe some physical art should help to understand.

In conclusion, the interviews’ highlights were the following: the project concept was difficult to understand so it had to be better defined, present- ing numbers as artworks was creative and interesting, the project had potential in gamification and to reach an audience from non-art sectors. All these insights had to be kept in mind to design the website.

A.2 Project brief

The project brief specifies¡d the Art_Value project’s problems, the purpose and goals.

The first problem was that there is still a small abstract digital art world.

74 APPENDIX A. PROJECT DISCOVERY AND DEFINITION

Nowadays, technology takes a major role in almost every aspect of life. There are also many people addicted in digital entertainment. This always growing digital world leads to an increasing number of people involved in digital trends and new technologies. This digital world makes the people be more comfortable and used to abstract and non-tangible concepts. Consequently, there are people interested in abstract and alternative digital art, but there are still few sources of it.

Another problem was that there is a well-defined barrier between being an art collector or an art creator, and it is unusual becoming an art creator from being an art collector. In the art world, there are the people that create the art, the artists, and the people that acquires the art, the art collectors. The artist can be an art collector of his own art or of other’s art, but it is unusual the concept of being an art collector that generates the art that he wants to acquire.

The purpose of the Art_Value project was to create an innovative mar- ketplace where new artworks, based on numbers, are created, distributed and traded.

The main goals about creating the marketplace were:

• Implement a website that supports all the marketplace features.

• Turn numbers into artworks.

• Develop the artwork distribution and acquirement in blockchain.

• Base the artwork sales and trades on auctions.

• Contribute to artists through partnerships and commissioning.

75 A.3 Lean Canvas

The Lean Canvas implied to define more aspects of the Art_Value startup than the project brief.

The following image shows the completed Lean Canvas:

Figure A.1: Lean Canvas completed

A.4 Value Proposition Canvas

The Value Proposition Canvas illustrated the key aspects of the service proposed as a solution and position them around the user values, needs and motivations.

Starting from the customer profile, the first gain was the generation and

76 APPENDIX A. PROJECT DISCOVERY AND DEFINITION the acquirement of the desired artwork. The excitement resulting from participating in the auction and also the feeling of winning an auction were gains. The principal pains were the emotions of losing an auction and losing a desired artwork. The jobs to be done were the interest about different concepts of art and the desire of participating in new digital entertainment trends.

About the company’s value propositions, the service offered was a platform that supports the generation of artworks and its acquirement by online auctions. The gain generators were the possibility to generate the artwork that the user wants and experiencing an online auction. The first pain reliever was that even a user gets the artwork wanted for another one there were a lot of other possible numbers to achieve in other auctions. The second was that even the user loses an auction, he had the possibility to participate on the future ones.

The next image is the Value Proposition Canvas completed:

Figure A.2: Value Proposition Canvas completed

77 78 B. Brainstorm

An initial brainstorm was useful to generate potential ideas and identify the key features. The brainstorm was done together with the Art_Value team.

Initially, some elements were already identified.

Elements identified:

• Menu bar with the logo, other menu options and the user adminis- trator (log in, log out, sign up).

• The highest bid.

• Input element to introduce a new bid.

• Bid button to validate the introduced bid, if it is correct and available.

• Countdown to show the remaining time until the auction finishes.

• Messages to communicate who is the winner, non-available bid. . .

• Previous auctions information

• Number of users online

• Option to bid randomly

Other information was got from browsing auctions websites such as eBay, Listia and Catawiki and websites based on blockchain, for instance

79 Cryptokitties. After checking these websites, some other possible features and elements were found:

• Popular items highlighted

• Platform community

• Suggested quick bids

• User bidding information

• Previous bids of the ongoing auction

80 C. Low and mid fidelity designs

This appendix is composed of the low fidelity designs discussion and the mid fidelity design.

C.1 Low fidelity designs discussion

The low fidelity design illustrated the approximate layout of the website, therefore, which elements included and it was also based on all the concepts explained in the section 2.3. Two possible options were discussed and finally the best design was chosen.

C.1.1 First option

Figure C.1: First option design

81 The first design was composed of 5 elements:

• Header: it includes the brand logo, the other available pages and the user profile link.

• Messages: they will only appear if there is the need of communicat- ing new information

• Column: it includes the countdown, the highest bid and a bids’ feed. The list of bids is kind of an active feed to see in real time the auction evolution.

• Input to introduce the new bid

• Bid button

C.1.2 Second option

Figure C.2: Second option design

This second composition was formed by 4 objects:

82 APPENDIX C. LOW AND MID FIDELITY DESIGNS

• Header: it contains the brand logo, the other website pages and the user profile link

• Messages

• Big central number.

• Column: it includes the countdown, previous bids, the bid button and depending on what the big number is, it could include some other elements.

The big number could be or the highest bid, or the user’s last bid or the input element. If the big number was not the input element, the column had to include it.

C.1.3 Comparison and decision

The designs’ discussion consisted of analysing the elements that compose them, the user eye and cursor movement, the objects’ distribution and how the negative space results.

Both designs included the same elements, but in different distribution. The right column of the first option could hold more previous bids than the second.

The following images simulate in blue the eye movement during the bidding action and in green the cursor movement.

83 (a) First option, eye movement

(b) Second option, eye movement

Figure C.3: Eye movement in each option

84 APPENDIX C. LOW AND MID FIDELITY DESIGNS

(a) First option, eye movement

Figure C.4: Cursor movement in each option (1)

85 (a) Second option, cursor movement if the big number is the input

(b) Second option, cursor movement if the big number is not the input

Figure C.5: Cursor movement in each option (2)

It was noticed that the second option had a simpler user interaction than the first. Consequently, the efficiency of the user was greater in the second design.

86 APPENDIX C. LOW AND MID FIDELITY DESIGNS

Finally, the distribution and negative space were evaluated. The visual grid that the first structure creates was more complex than the second.

(a) First option visual grid

(b) Second option visual grid

Figure C.6: Visual grid in each option

The visual weight in the first design was in the previous bids feed and in the second was in the right side of the big number resulting more centred

87 than the first.

(a) First option visual weight

(b) Second option visual weight

Figure C.7: Visual weight in each option

The negative space both designs focused the attention on the centred big number. The first distribution kept together the elements in the right column and in the second, the elements situated under the big number,

88 APPENDIX C. LOW AND MID FIDELITY DESIGNS and were perceived as one visual object. The place occupied by the negative space in the second prototype was larger than the first. This fact made the second design more minimalistic, relaxing and comfortable for the user.

In conclusion, the second design provided more benefits and advantages for the platform aesthetics and the user experience. The following designs were based on this layout.

C.2 Mid fidelity design

The mid fidelity design took the low fidelity prototype and defined pixel- based layout, determined each element and how it worked and established some items’ functionalities. The font utilised was Avenir 95 Black.

C.2.1 Pixel-based layout

The figure C.8 shows a general view of the mid fidelity design. The figure C.9 is the design with the sizes of the elements. Finally, the figure C.10 determines the elements’ position.

89 Figure C.8: Mid fidelity design general view

Figure C.9: Mid fidelity design with objects’ sizes

90 APPENDIX C. LOW AND MID FIDELITY DESIGNS

Figure C.10: Mid fidelity design with objects’ positions

The column under the central number caused the effect of having the number not centred. The weight of the composition also provoked the effect of having the central number and the column a little bit to the right.

Figure C.11: Layout

To have this visual effects fixed and visually perceive the central number

91 cantered, this number and the column were moved up and to the left.

Figure C.12: Position to create a centred visual effect

C.2.2 Header element

The header was composed of the brand logo, the other available pages and the user profile button.

The distribution of these items was based on the Jakob’s Law [18] that states that users prefer sites that work the same way as all the other sites they already know. For this reason, the logo was situated on the left, followed by the links to the other website’s pages and finally, on the right, the user profile button. Most of the nowadays websites are distributed in this same way.

A bottom border was added to perceive all the header elements as a group [19].

92 APPENDIX C. LOW AND MID FIDELITY DESIGNS

Figure C.13: Header items’ position

Figure C.14: Header items’ font size

C.2.3 Central number

First of all, it had to be decided which number has to be big on the centre. The options proposed in the low fidelity design were:

• The highest bid: the user can easily see which is the actual auction value and actually, which is the artwork with high possibilities to be sold. Its colour can be changed depending on the owner of the bid, for example, if it is the user, a brighter colour, and if it is another user, a darker colour. Consequently, the input element will be in the column.

• The user’s last bid and input element: it is where the user introduces his bid. If the element is not selected it keeps the user’s last bid. Also, its colour can be changed depending on if the user’s bid is the highest or not. Then, the highest bid will be shown in the column.

The decision was based on the importance of the elements and the user interaction. The most important element was the highest bid. Moreover, the user interaction was easier if the input element and the submit button

93 were together. For these reasons, the best option was to have the highest bid big on the centre.

The size was determined for total length of a five numbers plus two decimals, “XX XXX,XX”. The number of decimals was fixed in two. If the number was shorter, it kept that size. On the other hand, if it was longer, its size was reduced. The minimum length was one number and two decimals, “X,XX”. Adding a bar that underlines the number helped to keep the visual coherence even the number was longer or shorter.The bar also provided a static position for the vision and it also emphasised the highest bid.

Figure C.15: Number items’ position

Figure C.16: Number items’ font size

94 APPENDIX C. LOW AND MID FIDELITY DESIGNS

(a) One number plus two decimals (b) Two numbers plus two decimals

(c) Three numbers plus two decimals (d) Four numbers plus two decimals

(e) Five numbers plus two decimals

Figure C.17: Visual perception with different number lengths

95 C.2.4 Column element

The column was composed of the countdown, some previous bids and finally the input element and the bid button.

It could have multiple distributions, but the one that tended better to perceive all the items as a group was having first the countdown, below three previous bids and on the bottom the input element and the bid button. Ending with the button helped to define the bottom border and hold the other elements above.

(a) First distribution (b) Second distribution

(c) Third distribution (d) Fourth distribution

Figure C.18: Different column items distribution

96 APPENDIX C. LOW AND MID FIDELITY DESIGNS

The sizes of the items were defined based on their importance.

Figure C.19: Column items’ position

Figure C.20: Column items’ font size

97 98 D. Test performed

This Appendix contains the test performed description and the test results.

D.1 Test performed description

The following subsections contain the description of each test stage.

D.1.1 Interests and habits survey

This first survey gathered data about the users’ habits and interests. It is useful to know more about they are used to do and interpret the further test results in relation to these first answers, as a user more used to manipulate different types of applications has more possibilities to be more efficient developing the test tasks. The questions of the survey are illustrated in the figure D.1.

99 Figure D.1: Interests and habits survey

100 APPENDIX D. TEST PERFORMED

D.1.2 Impression test

The test was based on keeping the website shown for fifteen seconds and the users take in what they can. Then the following questions were asked:

• Three words that you would use to describe the site.

• What do you think is this site about?

• What services/products are offered on this site?

• What are the feelings of this site? (e.g. professional, fun...)

D.1.3 Concept explanation

Before start performing the test a few sentences about the Art_Value concept were explained in order to do the tasks conscientiously. These sentences should be included in a message shown in the first landing on the website to put into context the new users.

The sentences are the next: "Welcome to the website! Here you can achieve your own generated digital art based on numbers. How? Start bidding for your wanted numbers! Good luck!"

D.1.4 Website test

Once the concept is presented the users started performing the test tasks. They were supervised to catch their reactions and performance, but no hits were given. The tasks were designed to test all the elements of the

101 test and its user interactions. Their screen interaction has been recorded in order to be analysed later.

In order to make them to participate in more than one auction the timers were:

• Auction countdown: 2minutes

• Bids made by other users: from 10 to 20 seconds

• Colour change of the auction countdown: 10 last seconds

• Loading phase: from 3 to 10 seconds

• Countdown for the next auction: 10 seconds

First, they started with minute to make their own bids and move around the site. Then, they were asked to perform some tasks:

• Make some bids

• Make a 120,00 bid (Number taken by the system)

• Check all the previous bids done

• Try to win an auction

• Try to lose an auction

D.1.5 Test survey

After some minutes performing the tasks, the users had to answer a survey about the website illustrated in the figures D.2 and D.3.

102 APPENDIX D. TEST PERFORMED

Figure D.2: Survey answered by the users (1)

103 Figure D.3: Survey answered by the users (2)

104 APPENDIX D. TEST PERFORMED

D.2 Test results

This section shows the results obtained in the test.

D.2.1 User survey

These survey results were the basis to interpret better the following results.

All the respondents have between 21 and 24 years. All of them are interested in new technologies, but not that much with abstract art. Most of them have slight knowledge about auctions and are used to online shopping. None of them has ever auctioned, neither traditional auctions, nor online auctions. They usually visit new websites each week and not in that frequency trying new applications. The majority consider themselves efficient when discovering and interacting with new websites and applications.

D.2.2 First impression survey

The impression survey started asking three words to describe the website. The repeated words were: simple, professional, clear and dark. Other words were visual, abstract, interesting, minimalistic, accurate, modern and mysterious.

All of them concluded that the website was about auctions and numbers.

Three of them experienced the feeling of a professional website. Other feeling about the website were: reliable, friendly, fun and from a small company.

105 D.2.3 User interaction

These results were extracted from the recorder user interactions with the system.

Almost all of them easily started to bid, recognising where to enter the input. The first times they had some struggles introducing and deleting new bid because of the input format. Once they knew how it worked, they managed it well.

All of them discovered the hints when the button was disabled. Only 40% of the users perceived that the previous bids section can be scrolled to check all the bids made.

Most of them didn’t understand the concept of the auction. 40% of the users didn’t know what was being auctioned and another 40%, the first moment didn’t know how to bid their wanted numbers if the auction value was higher than their wanted numbers.

D.2.4 User experience survey

The user experience survey results are explained in this subsection.

60% of the respondents concluded that it was easy to understand the website concept. The other 40% answered that it was moderately difficult to understand it. 60% found neither easy no difficult to participate and start bidding in the auction, and the 40% found it easy. All of them easily identify all the sections of the website: the big number, the previous bids section and where to introduce their bids.

106 APPENDIX D. TEST PERFORMED

There is more variety of answers about the big number colour change: 10% found it extremely helpful, 40% very helpful, 20% slightly helpful and the last 20% not at all helpful. All the respondents conclude that is very helpful the countdown colour change. 20% found helpful the format to introduce bids, 40% moderately helpful and the other 40% not at all helpful. Almost all the respondents agree that the button hints were helpful. Two of them would like more information in the previous bids section such as which users have done the bids.

80% of the respondents felt excitement and indecision when interacting with the website. 60% experienced stress. 40% felt frustration and only 20% felt lost in the website.

All of them agree that the site presentation fits the website concept.

Some final comments and recommendations were to show more previous bids in the history, add some more excitement when winning an auction, change the input format and add some more written information about the auctions-number concept and how to use the website.

107 TRITA-EECS-EX-2019:84

www.kth.se