DEGREE PROJECT IN 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 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 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 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 User experience design . 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 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 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 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 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.