IN
DEGREE PROJECT ELECTRONICS AND COMPUTER ENGINEERING,
FIRST CYCLE, 15 CREDITS ,
STOCKHOLM SWEDEN 2019
User experience design and
front end development of an
online auction website
MAR VIDAL SEGURA
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 user experience design and the front end development and testing of the prototype 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
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
Acknowledgements
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 . . . 61.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 User experience design . . . 12
2.4 Front end development tools . . . 15
3 Methodology and Methods 19 3.1 Double Diamond Methodology . . . 19
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 information design . . . 39 5.2 Visual design . . . 40 5.3 Interaction design . . . 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
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 designs 81 C.1 Low fidelity designs discussion . . . 81
C.2 Mid fidelity design . . . 89
D Test performed 99 D.1 Test performed description . . . 99
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.
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.
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.
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.
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.
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 prototypes 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.
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
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.
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.
"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
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 accessibility. 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
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
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 architecture. The interaction design is how the system behaves in response to the user. The information architecture is the arrangement of the content elements within the information space.
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.
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
Usability
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".
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
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 typography, forms, buttons and other interface components.
2.4.3
JavaScript
JavaScript [42] is a high level, 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
CHAPTER 2. THEORETICAL BACKGROUND
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
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
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
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
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
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.
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
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 sketch [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 iterative design 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
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
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 Task error intensity Unnecessary actions Proportion of users
complaining Fatigue Proportion of user complaint about a particular feature User trust User pleasure Physical comfort
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:
• 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.
CHAPTER 3. METHODOLOGY AND METHODS
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.
• 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.
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
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.
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
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
• Header: it contains the brand 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
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
Figure 5.3: Loading stage visual design
5.2.2
Waiting stage visual design
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
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
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 its bidder
(b) Higher bid when the user is its 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
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
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
(a) Bid button when the input is valid
(b) Bid button when the input is not valid, for example not available, and the mouse is over it
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
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
CHAPTER 6. FRONT END DEVELOPMENT
Inputs Changes Countdown
If there is an ongoing auction Change the layout Home
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 BidInput Functions to update the auction
system attributes
If the input value is correct Enable or disable the button Hint to show if the input value
is incorrect
Show the hint if the mouse is 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
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
CHAPTER 6. FRONT END DEVELOPMENT
Figure 6.2: Input flowchart
6.2.3
User submitting the input
therefore not higher than it.
Figure 6.3: Submit flowchart
6.2.4
Other user bids
CHAPTER 6. FRONT END DEVELOPMENT
value of the input was checked and the bid button was enabled or disabled depending on its validity.
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
• 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.
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.
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.
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.
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.
CHAPTER 8. CONCLUSIONS AND FUTURE WORK
8.3
Discussion
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. Design methods step 1: Discover. https://www. designcouncil.org.uk/news-opinion/design-methods-step-1-discover, March 2015.
[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 usability testing. https://www. hotjar.com/usability-testing/, 2019.
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.
[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.
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].
[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].
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.
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 interestpresent-ing, 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.
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.
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.
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:
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
Cryptokitties. After checking these websites, some other possible features and elements were found:
• Popular items highlighted • Platform community • Suggested quick bids • User bidding information
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
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
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.
(a) First option, eye movement
(b) Second option, eye movement
APPENDIX C. LOW AND MID FIDELITY DESIGNS
(a) First option, eye movement
(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)
