front-end user experience(ux) design and evaluation of

(1)

ONLINE MARKETPLACE FOR BEAUTY CARE SERVICES (KERENAJA)

By Arvan Halim

11602021

BACHELOR’S DEGREE in

INFORMATION TECHNOLOGY

FACULTY OF ENGINEERING AND INFORMATION TECHNOLOGY

SWISS GERMAN UNIVERSITY The Prominence Tower

Jalan Jalur Sutera Barat No. 15, Alam Sutera Tangerang, Banten 15143 - Indonesia

June 2020

Revision after Thesis Defense on 8 July 2020

(2)

Arvan Halim

STATEMENT BY THE AUTHOR

I hereby declare that this submission is my own work and to the best of my knowledge, it contains no material previously published or written by another person, nor material which to a substantial extent has been accepted for the award of any other degree or diploma at any educational institution, except where due acknowledgement is made in the thesis.

Arvan Halim

_____________________________________________

Student Date

Approved by:

Dipl.-Inf. Kho I Eng

_____________________________________________

Thesis Advisor Date

James Purnama, M.Sc

_____________________________________________

Thesis Co-Advisor Date

Dr. Maulahikmah Galinium, S.Kom., M.Sc.

_____________________________________________

Dean Date

(3)

Arvan Halim

ABSTRACT

FRONT-END USER EXPERIENCE(UX) DESIGN AND EVALUATION OF ONLINE MARKETPLACE FOR BEAUTY CARE SERVICES (KERENAJA)

By Arvan Halim

Dipl.-Inf. Kho I Eng, Thesis Advisor James Purnama, M.Sc, Co-Advisor

SWISS GERMAN UNIVERSITY

As the online marketplace and beauty care services is growing rapidly, many customers are booking services and buying products online, as it is more convenient.

KerenAja is a platform where customers can book services and buy products that is aimed towards male. But as online marketplace’s structure is kind of confusing, users tends to leave. Therefore, it is important to measure the user experience of the user when using the online marketplace, so the user experience can be improved. So, user experience questionnaire is used to measure the user experience of vendors and customers when using KerenAja. After the business analyst and back-end developer performs user requirement and system analysis, the mockup will be designed and the web application is then developed. Later on, after gathering the data from customers and vendors, the user experience can then be evaluated, and user satisfaction is also measured. The result shows that the user experience of KerenAja’s customer side is above average, while the user experience of KerenAja’s vendor side is below average.

And as for the user satisfaction, the majority are satisfied with KerenAja.

Keywords: User Experience, UX, User Experience Questionnaire, Front-end, Beauty Care, Online Marketplace.

(4)

Arvan Halim

(5)

Arvan Halim

DEDICATION

I dedicate this work for my family, team KerenAja, friends, programmers, and designers all around the world.

(6)

Arvan Halim

ACKNOWLEDGEMENTS

I would like to thank all my friends from the 2016 batch, it has been an amazing 4 years with you guys, thank you for the amazing memories that I got during my university life.

I would like to thank my group members, Ivan Arnoldi Rahardja and Victor Saputra for being there when times are hard.

I would like to thank my thesis advisor, Mr. Kho I Eng, and thesis co-advisor, Mr.

James Purnama for guiding me through hard times during the thesis period. Not to mention, I would also like to thank other lecturers and staffs from SGU.

I would like to thank Zedechiah Tingiecieh, Geraldo Genesius, Kevin Siaufandi, Richie Chen, Vincentius Geraldo, Fernando Wijaya, Christian Ardianto for the amazing time in DOTA 2.

Lastly, I would like to thank my family, for always supporting me and for being the reason why I can always move forward. I hope that in the future I can repay all your kindness.

(7)

Arvan Halim

TABLE OF CONTENTS

Page

STATEMENT BY THE AUTHOR 2

ABSTRACT 3

DEDICATION 5

ACKNOWLEDGEMENTS 6

TABLE OF CONTENTS 7

LIST OF FIGURES 12

LIST OF TABLES 16

CHAPTER 1 - INTRODUCTION 17

1.1 Background 17

1.2 Research Problems 19

1.3 Research Objectives 20

1.4 Scope 20

1.5 Research Limitations 20

1.6 Significance of Study 20

1.7 Research Questions 21

1.8 Hypothesis 21

CHAPTER 2 - LITERATURE REVIEW 22

2.1 Online Marketplace 22

2.2 Beauty Service Provider 22

(8)

Arvan Halim

2.4 User Experience (UX) Design 22

2.5 User Experience Evaluation 23

2.6 Web Application 23

2.7 HTML 23

2.8 CSS 23

2.9 JavaScript 24

2.10 PHP 24

2.11 Adobe XD 24

2.12 Questionnaire 25

2.13 Previous Studies 25

2.13.1 The User Experience Questionnaire – Schrepp et al. (2018). 25 2.13.2 Mobile Website User Experience (UX) Evaluation Indonesia's Online

Marketplace – Khosyi Yoga Pratama (2016). 27

2.13.3 Applying user experience (UX) design in interior space for art, science museums, and learning environments – Zainab Al-Hajji. (2017). 28

CHAPTER 3 – RESEARCH METHODS 29

3.1 KerenAja’s Team Research Diagram 29

3.1.1 Research Framework 30

3.2 System Design 31

3.2.1 Use Case Diagram 31

3.2.2 Activity Diagram 31

3.3 Data Gathering Methods 31

3.3.1 Background Questions 31

3.3.2 User Experience Questionnaire 32

3.3.3 User Satisfaction Questionnaire 33

3.3.4 Testing Scenario 33

3.3.5 Scenario Flowchart 34

(9)

Arvan Halim

3.4.1 Data Transformation 35

3.4.2 Mean Value Calculation 35

3.4.3 Confidence Intervals 36

3.4.4 Scale Consistency 36

3.4.5 Data Benchmarking 37

3.4.6 Inconsistencies 37

3.5 Development 37

3.5.1 Web Application Development 37

3.5.2 Mockup 38

CHAPTER 4 – RESULTS AND DISCUSSIONS 39

4.1 System Design 39

4.1.1 Use Case Diagram 39

4.1.2 Activity Diagram 41

4.1.2.1 Customer Activity Diagram 41

4.1.2.2 Vendor Activity Diagram 48

4.2 Development 54

4.2.1 Mockup - Customer Side 55

4.2.2 Mockup - Vendor Side 68

4.2.3 Front-end Side - Customer Side 81

4.2.4 Front-end Side - Vendor Side 94

4.3 Analysis 107

4.3.1 Demographic Profile of Respondents - Customer Side 107

4.3.1.1 Gender 107

4.3.1.2 Age 108

4.3.1.3 Occupation 109

4.3.1.4 Location 110

4.3.1.5 Experience with Online Marketplace 111

4.3.2 User Experience Questionnaire Result – Customer 112

4.3.2.1 Mean Value Analysis 112

4.3.2.2 Confidence Intervals 114

(10)

Arvan Halim

4.3.2.4 Data Benchmarking 115

4.3.2.5 Data Inconsistencies 115

4.3.3 User Satisfaction Questionnaire Result - Customer 117

4.3.3.1 KerenAja Works As Expected 117

4.3.3.2 Satisfied with KerenAja 118

4.3.3.3 Satisfied with KerenAja’s Features 119

4.3.3.4 Will Use KerenAja to Book a Service 120

4.3.3.5 Will Use KerenAja to Buy a Product 121

4.3.3.6 Will Recommend KerenAja 122

4.3.4 Demographic Profile of Respondents – Vendor 123

4.3.4.1 Gender 123

4.3.4.2 Age 124

4.3.4.3 Occupation 125

4.3.4.4 Location 126

4.3.4.5 Experience with Online Marketplace 127

4.3.5 User Experience Questionnaire Result - Vendor 128

4.3.5.1 Mean Value Analysis 128

4.3.5.2 Confidence Intervals 130

4.3.5.3 Scale Consistency 130

4.3.5.4 Data Benchmarking 131

4.3.5.5 Data Inconsistencies 131

4.3.6 User Satisfaction Questionnaire Result – Vendor 132

4.3.6.1 KerenAja Works As Expected 132

4.3.6.2 Satisfied with KerenAja 133

4.3.6.3 Satisfied with KerenAja’s Features 134

4.3.6.4 Will Use KerenAja 135

4.3.6.5 Will Recommend KerenAja 136

4.4 Feedbacks 136

4.4.1 Customer Feedbacks 136

4.4.2 Vendor Feedbacks 137

(11)

Arvan Halim

5.1 Conclusions 138

5.2 Recommendations 138

5.3 Future Works 138

REFERENCES 140

APPENDIX 142

CURRICULUM VITAE 147

(12)

Arvan Halim

LIST OF FIGURES

Figures Page

Figure 1.1 Statistics of E-Commerce Activities (Hootsuite, 2019) 17 Figure 1.2 Statistics of E-Commerce Spend by Category (Hootsuite, 2019) 18

Figure 2.1 A framework for questionnaire design – Gendall (1998) 25

Figure 2.2 List of Assesments 26

Figure 2.3 Mean Value of Each Scales of Tokopedia Compared with Bukalapak 27

Figure 3.1 KerenAja’s Team Research Diagram 29

Figure 3.2 Workflow 30

Figure 3.3 An Example of a Question - UEQ 32

Figure 3.4 An Example of a Question - User Satisfaction 33

Figure 3.5 Scenario Flowchart 34

Figure 3.6 Original Item Value 35

Figure 3.7 Transformed Item Value 35

Figure 3.8 Cronbach’s Coefficient Formula 36

Figure 4.1 Customer Use Case Diagram 39

Figure 4.2 Vendor Use Case Diagram 40

Figure 4.3 Login as Customer Activity Diagram 41

Figure 4.4 Register as Customer Activity Diagram 42

Figure 4.5 View Service Activity Diagram 42

Figure 4.6 View Product Activity Diagram 43

Figure 4.7 View Product Activity Diagram 43

Figure 4.8 Book Service Activity Diagram 44

Figure 4.9 Buy Product Activity Diagram 44

Figure 4.10 View Shopping Cart Activity Diagram 45

(13)

Arvan Halim

Figure 4.12 View Transaction History Activity Diagram 46 Figure 4.13 View Transaction History Activity Diagram 46

Figure 4.14 Change Password Activity Diagram 47

Figure 4.15 Login as Vendor Activity Diagram 48

Figure 4.16 Register as Vendor Activity Diagram 49

Figure 4.17 View Transaction List Activity Diagram 50 Figure 4.18 Add Walk in Transaction Activity Diagram 50 Figure 4.19 View Service or Product List Activity Diagram 51 Figure 4.20 Edit Service or Product Activity Diagram 51

Figure 4.21 Add Service Activity Diagram 52

Figure 4.22 Add Product Activity Diagram 53

Figure 4.23 Update Vendor Profile Activity Diagram 54

Figure 4.24 Home Page - Customer Mockup 55

Figure 4.25 Login as Customer Page - Customer Mockup 56 Figure 4.26 Register as Customer Page - Customer Mockup 57

Figure 4.27 Item Browsing Page - Customer Mockup 58

Figure 4.28 Service Details Page - Customer Mockup 59 Figure 4.29 Service Booking Pop Up - Customer Mockup 60

Figure 4.30 Product Details Page 61

Figure 4.31 Shopping Cart Page - Customer Mockup 62

Figure 4.32 Checkout Page - Customer Mockup 63

Figure 4.33 Vendor Profile Page - Customer Mockup 64 Figure 4.34 Customer Profile Page - Customer Mockup 65 Figure 4.35 Change Password Page - Customer Mockup 66 Figure 4.36 Transaction History Page - Customer Mockup 67

Figure 4.37 Login as Vendor Page - Vendor Mockup 68

Figure 4.38 Register as Vendor Page 1/4 - Vendor Mockup 69 Figure 4.39 Register as Vendor Page 2/4 - Vendor Mockup 70 Figure 4.40 Register as Vendor Page 3/4 - Vendor Mockup 71 Figure 4.41 Register as Vendor Page 4/4 - Vendor Mockup 72

Figure 4.42 Vendor Home Page - Vendor Mockup 73

Figure 4.43 Services Transaction List Page - Vendor Mockup 74

(14)

Arvan Halim

Figure 4.45 Services List Page - Vendor Mockup 76

Figure 4.46 Products List Page - Vendor Mockup 77

Figure 4.47 Add Service Page - Vendor Mockup 78

Figure 4.48 Add Product Page - Vendor Mockup 79

Figure 4.49 Edit Profile Page - Vendor Mockup 80

Figure 4.50 Home Page - Customer 81

Figure 4.51 Login as Customer Page - Customer 82

Figure 4.52 Register as Customer Page - Customer 83

Figure 4.53 Item Browsing Page - Customer 84

Figure 4.54 Service Details Page - Customer 85

Figure 4.55 Service Booking Pop Up - Customer 86

Figure 4.56 Product Details Page - Customer 87

Figure 4.57 Shopping Cart Page - Customer 88

Figure 4.58 Checkout Page - Customer 89

Figure 4.59 Vendor Profile Page - Customer 90

Figure 4.60 Customer Profile Page - Customer 91

Figure 4.61 Change Password Page - Customer 92

Figure 4.62 Transaction History Page - Customer 93

Figure 4.63 Login as Vendor Page - Vendor 94

Figure 4.64 Register as Vendor Page 1/4 - Vendor 95

Figure 4.68 Vendor Home Page - Vendor 99

Figure 4.69 Services Transaction List Page - Vendor 100 Figure 4.70 Products Transaction List Page - Vendor 101

Figure 4.71 Services List Page - Vendor 102

Figure 4.72 Products List Page - Vendor 103

Figure 4.73 Add Service Page - Vendor 104

Figure 4.74 Add Product Page - Vendor 105

Figure 4.75 Edit Profile Page - Vendor 106

Figure 4.76 Gender Distribution Chart - Customer 107

(15)

Arvan Halim

Figure 4.78 Occupation Distribution Chart - Customer 109 Figure 4.79 Occupation Distribution Chart - Customer 110 Figure 4.80 Experience Distribution Chart - Customer 111 Figure 4.81 KerenAja’s Mean Value per Item - Customer 112 Figure 4.82 KerenAja’s Graph of Mean Value per Scale - Customer 113 Figure 4.83 KerenAja’s UEQ Data Compared to Others - Customer 115 Figure 4.84 KerenAja Works As Expected Chart - Customer 117 Figure 4.85 Satisfied with KerenAja Chart - Customer 118 Figure 4.86 Satisfied with KerenAja’s Features Chart - Customer 119 Figure 4.87 Will Use KerenAja to Book a Service Chart - Customer 120 Figure 4.88 Will Use KerenAja to Buy a Product Chart - Customer 121 Figure 4.89 Will Recommend KerenAja Chart - Customer 122

Figure 4.90 Gender Distribution Chart - Vendor 123

Figure 4.91 Age Distribution Chart - Vendor 124

Figure 4.92 Occupation Distribution Chart - Vendor 125 Figure 4.93 Occupation Distribution Chart - Vendor 126 Figure 4.94 Experience Distribution Chart - Vendor 127 Figure 4.95 KerenAja’s Mean Value per Item - Vendor 128 Figure 4.96 KerenAja’s Graph of Mean Value per Scale - Vendor 129 Figure 4.97 KerenAja’s UEQ Data Compared to Others - Vendor 131 Figure 4.98 KerenAja Works As Expected Chart - Vendor 132 Figure 4.99 Satisfied with KerenAja Chart - Vendor 133 Figure 4.100 Satisfied with KerenAja’s Features Chart - Vendor 134

Figure 4.101 Will Use KerenAja Chart - Vendor 135

Figure 4.102 Will Recommend KerenAja Chart - Vendor 136

(16)

Arvan Halim

LIST OF TABLES

Table Page

Table 3.1 Item distribution per scale in UEQ 32

Table 4.1 Gender Distribution Table - Customer 107

Table 4.2 Age Distribution Table - Customer 108

Table 4.3 Occupation Distribution Table - Customer 109 Table 4.4 Location Distribution Table - Customer 110 Table 4.5 Experience Distribution Table - Customer 111 Table 4.6 KerenAja’s Mean Value per Scale - Customer 113 Table 4.7 KerenAja’s Confidence Intervals per Scale - Customer 114 Table 4.8 KerenAja’s Scale Alpha Coefficient - Customer 114 Table 4.9 Data Filtration Changes in Mean Value - Customer 116 Table 4.10 Data Filtration Changes in Alpha Coefficient - Customer 116

Table 4.11 Gender Distribution Table - Vendor 123

Table 4.12 Age Distribution Table - Vendor 124

Table 4.13 Occupation Distribution Table - Vendor 125

Table 4.14 Location Distribution Table - Vendor 126

Table 4.15 Experience Distribution Table - Vendor 127 Table 4.16 KerenAja’s Mean Value per Scale - Vendor 129 Table 4.17 KerenAja’s Confidence Intervals per Scale - Vendor 130 Table 4.18 KerenAja’s Scale Alpha Coefficient - Vendor 130