Analisis dan Perancangan, Charlie Pierre Piay, FTI UMN,...
Transcript of Analisis dan Perancangan, Charlie Pierre Piay, FTI UMN,...
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.
ANALISIS DAN PERANCANGAN APLIKASI M-
COMMERCE VINANDOTECH
SKRIPSI
Diajukan Guna Memenuhi Persyaratan Memperoleh
Gelar Sarjana Komputer (S.Kom.)
Charlie Pierre Piay
14110310091
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2019
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
iv
ANALISIS DAN PERANCANGAN APLIKASI M-COMMERCE VINANDOTECH
ABSTRAK
Oleh: Charlie Pierre Piay
Vinandotech saat ini masih menggunakan sistem tatap muka. sistem ini dinilai
masih lambat terlebih jika customer memesan secara bersamaan. Vinandotech tertarik
untuk memasuki era e-commerce dengan membuat aplikasi m-commerce.
Dalam penelitian ini dibuat sebuah rancangan sistem aplikasi mobile e-
commerce atau m-commerce untuk Vinandotech. Penelitian ini bertujuan untuk
menganalisa kebutuhan dan merancang aplikasi mobile untuk Vinandotech. Penelitian
ini menggunakan metode 8 Golden Rules sebagai panduan untuk merancang user
interface aplikasi. Axure Rp digunakan untuk merancang prototype aplikasi, dan untuk
merancang sistem menggunakan Unified Modeling Language (UML) lalu untuk
melakukan penguian kelayakan menggunakan UAT (User Acceptance Test), serta
System Usability Scale (SUS).
Dari hasil penelitian ini berhasil membuat rancangan sistem untuk aplikasi m-
commerce Vinandotech yaitu alur sistem aplikasi dengan menggunakan unified
modeling language yang berhasil membuat use case, activity diagram, class diagram,
dan sequence diagram dari aplikasi yang akan dibuat. Selain perancangan sistem
penelitian ini juga telah berhasil merancang 2 macam tampilan aplikasi dengan
menggunakan Axure Rp. Hasil tampilan ini juga berhasil diujikan kepada Vinandotech
dengan menggunakan UAT dan SUS dengan skor SUS untuk tampilan tahap pertama
yaitu 72,5 yang berarti sudah baik, dan untuk tampilan tahap ke 2 dengan skor SUS 80
dengan kenaikan 10,34% dari tampilan tahap pertama.
Kata kunci:8 Golden Rules, System Usability Scale, Unified Modeling Language, User
interface, User Acceptance Test
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
v
ANALYSIS AND DESIGN OF VINANDOTECH M-COMMERCE
APPLICATIONS
ABSTRACT
By: Charlie Pierre Piay
Vinandotech is currently still using a face-to-face system. this system is
considered still slow especially if the customer orders simultaneously. Vinandotech is
interested in entering the era of e-commerce by creating an m-commerce application.
In this study, a deisgn e-commerce or m-commerce mobile application system
was created for Vinandotech. This study aims to analyze the needs and design of mobile
applications for Vinandotech. This study uses the 8 Golden Rules method as a guide
for designing the application user interface. Axure Rp is used to design application
prototypes, and to design systems using the Unified Modeling Language (UML) then
to conduct feasibility studies using UAT (User Acceptance Test), and System Usability
Scale (SUS).
The results of this study succeeded in creating a system design for the
Vinandotech m-commerce application, creating the application system flow by using a
unified modeling language that succeeded in making use cases, activity diagrams, class
diagrams, and sequence diagrams of applications to be made. In addition to designing
the research system, it has also succeeded in designing 2 types of applications
prototype using Axure Rp. The results of this display were also successfully tested with
Vinandotech using UAT and SUS with the SUS score for the first prototype display
which is 72.5 which means it is good, and for the second prototype display with the
SUS 80 score with a 10.34% increase from the first prototype.
Keywords: 8 Golden Rules, System Usability Scale, Unified Modeling
Language, User interface, User Acceptance Test
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
vi
KATA PENGANTAR
Puji Syukur kepada Tuhan Yang Maha Esa sehingga laporan skripsi dengan
judul “Analisis dan Perancangan Aplikasi Mobile VinandoTech” ini dapat selesai
dengan tepat waktu.
Dalam menyusun laporan skripsi ini tidak terlepas dari dukungan dan
bimbingan beberapa pihak. Maka penulis mengucapkan rasa hormat dan terima kasih
kepada seluruh pihak yang sudah membantu. Pihak – pihak yang terkait diantaranya:
1. Bapak Wira Munggana, S.Si., M.Sc selaku dosen pembimbing yang
telah sabar mendukung dan membimbing penulis dalam menyelesaikan
laporan skripsi ini.
2. Rekan – rekan penulis yang telah membantu memberikan semangat bagi
penulis dalam membuat laporan agar selesai tepat waktu.
Tak lupa penulis menyampaikan terima kasih kepada keluarga dan orang tua
yang telah memberikan dukungan semangat dan doa kepada penulis sehingga proses
pembuatan laporan dapat berjalan dengan baik. Semoga dengan adanya laporan ini
dapat memberikan wawasan tambahan bagi para pembacanya.
Tangerang 16 Juli 2018
Penulis
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
vii
DAFTAR ISI
PERNYATAAN ................................................................................................................ ii
HALAMAN PENGESAHAN ......................................................................................... iii
ABSTRAK ........................................................................................................................ iv
ABSTRACT......................................................................................................................... v
KATA PENGANTAR ..................................................................................................... vi
DAFTAR ISI ................................................................................................................... vii
DAFTAR TABEL ............................................................................................................ xi
DAFTAR GAMBAR ...................................................................................................... xii
BAB I PENDAHULUAN ................................................................................................. 1
1.1. Latar Belakang ................................................................................................... 1
1.2 Rumusan Masalah .............................................................................................. 4
1.3 Batasan Masalah................................................................................................. 5
1.4 Tujuan dan Manfaat Penelitian ......................................................................... 5
1.5 Hasil dan Keluaran ............................................................................................. 5
BAB II LANDASAN TEORI........................................................................................... 6
2.1 Smartphone ......................................................................................................... 6
2.2 Android ............................................................................................................... 7
2.3 Aplikasi Mobile .................................................................................................. 8
2.4 User interface .................................................................................................... 9
2.5 8 Golden Rules ................................................................................................... 9
2.6 E-Business/E-Commerce ................................................................................. 12
2.7 Usability Testing .............................................................................................. 12
2.8 System Usability Scale (SUS).......................................................................... 14
2.9 AXURE Rp ....................................................................................................... 15
2.10 Just in Mind Prototyping ................................................................................. 17
2.11 Adobe XD .......................................................................................................... 18
2.12 Metode Pengembangan Prototyping ............................................................... 19
2.13 Metode Pengembangan Rapid Application Development (RAD) ................. 19
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
viii
2.14 Metode Pengembangan Waterfall ................................................................... 19
2.15 Unified Modeling Language ............................................................................ 20
2.15.1 Use Case Diagram ....................................................................................... 20
2.15.2 Activity Diagram....................................................................................... 22
2.15.3 Class Diagram .............................................................................................. 23
2.15.4 Sequence diagram ........................................................................................ 25
2.16 Penelitian Terdahulu ........................................................................................ 26
BAB III METODOLOGI PENELITIAN ...................................................................... 28
3.1. Objek Penelitian ............................................................................................... 28
3.1.1 Tentang Vinandotech ............................................................................... 28
3.2. Metodologi Penelitian ...................................................................................... 29
3.2.1 Perbandingan Metodologi ........................................................................ 29
3.3 Tahap Penelitian ............................................................................................... 31
3.3.1 Komunikasi ............................................................................................... 32
3.3.2 Perencanaan Secara Cepat ....................................................................... 32
3.3.3 Permodelan Perancangan Secara Cepat ........................................................ 34
3.3.4 Pembentukan Prototype ........................................................................... 34
3.3.5 Penyebaran Sistem & Pengiriman Feedback .......................................... 35
BAB IV ANALISIS DAN HASIL PENELITIAN ....................................................... 36
4.1 Prototype Tahap Pertama ................................................................................ 36
4.1.1 Komunikasi ............................................................................................... 36
4.1.1.1 Hasil Wawancara Dengan Vinandotech.............................................. 36
4.1.2 Perencanaan Secara Cepat ....................................................................... 39
4.1.2.1 Use Case Aplikasi VinandoTech ......................................................... 39
4.1.2.2 Activity Diagram Aplikasi VinandoTech ............................................ 40
4.1.2.2.1 Activity Diagram Sign up ................................................................. 41
4.1.2.2.2 Activity Diagram Sign In.................................................................. 43
4.1.2.2.3 Activity Diagram sistem Shop ......................................................... 45
4.1.2.2.4 Activity Diagram Sistem build PC .................................................. 47
4.1.2.2.5 Activity Diagram Sistem Chat ......................................................... 49
4.1.2.2.6 Activity Diagram Transaksi Pembayaran ........................................ 51
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
ix
4.1.3 Permodelan Perancangan Cepat .............................................................. 52
4.1.3.1 Alur Prototype Tahap Pertama ............................................................... 52
4.1.3.2 Wireframe Prototype tahap Pertama ...................................................... 52
4.1.4 Pembentukan Prototype Tahap Pertama ................................................. 66
4.1.5 Penyebaran Sistem dan Pengiriman Feedback Tahap Pertama ............. 85
4.1.5.1 Hasil Uji Coba User Acceptance Test Tahap Pertama ....................... 85
4.1.5.2 Hasil Tes Usability dengan menggunakan SUS ke pihak VinandoTech
92
4.1.5.3 Hasil Testing Sistem pada partisipan acak ............................................ 96
4.2 Prototype tahap kedua........................................................................................... 97
4.2.1 Komunikasi ..................................................................................................... 97
4.2.1.1 Hasil Wawancara Prototype tahap kedua .............................................. 97
4.2.2 Perencanaan Secara Cepat ............................................................................. 97
4.2.2.1 Class Diagram Aplikasi Vinandotech................................................. 97
4.2.2.2 Sequence diagram Aplikasi Vinandotech ............................................ 101
4.2.2.2.1 Sequence diagram Login ................................................................ 101
4.2.2.2.2 Sequence diagram Register............................................................ 103
4.2.2.2.3 Sequence diagram Shop ................................................................. 105
4.2.2.2.4 Sequence diagram Build By item ................................................... 107
4.2.2.2.5 Sequence diagram Build by budget ............................................... 109
4.2.2.2.6 Sequence diagram chat .................................................................. 111
4.2.2.3 Entity Relationship Diagram Vinandotech ....................................... 112
4.2.3 Permodelan Perancangan Cepat .................................................................. 115
4.2.3.1 Alur Prototpe Tahap Kedua .................................................................. 115
4.2.3.2 Wireframe Prototype Tahap kedua ...................................................... 115
4.2.4 Pembentukan Prototype Tahap Kedua ........................................................ 127
4.2.5 Penyebaran Sistem dan Pengiriman Feedback Tahap Kedua .................... 144
4.2.5.1 Hasil Uji Coba User Acceptance Test Tahap Kedua .......................... 144
4.2.5.2 Hasil Test Usability Tahap Kedua dengan menggunakan SUS ke Pihak
Vinandotech. ...................................................................................................... 150
4.2.5.3 Hasil Testing Prototype Tahap Kedua Kepada Partisispan ................ 153
BAB V KESIMPULAN DAN SARAN ...................................................................... 155
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
x
5.1 Kesimpulan .................................................................................................... 155
5.2. Saran ............................................................................................................... 156
DAFTAR PUSTAKA ................................................................................................... 157
LAMPIRAN .................................................................................................................. 160
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
xi
DAFTAR TABEL
Tabel 2. 1 Tabel penelitian terdahulu ............................................................................. 26
Tabel 3.1 Tabel Perbandingan Metodologi ................................................................... 30
Tabel 3. 2 Tabel Perbandingan tools Purwarupa Aplikasi............................................ 33
Tabel 4. 1 Activity Diagram Sign Up ............................................................................. 41
Tabel 4. 2 tabel Activity Diagram sign in ...................................................................... 43
Tabel 4. 3 Activity Diagram sistem shop ....................................................................... 45
Tabel 4. 4 tabel Activity Diagram sistem build PC ....................................................... 47
Tabel 4. 5 Activity Diagram sistem chat ........................................................................ 49
Tabel 4. 6 Activity Diagram Transaksi Pembayaran ..................................................... 51
Tabel 4. 7 Hasil UAT task prototype tahap pertama ..................................................... 86
Tabel 4. 8 Hasil SUS pada VinandoTech ...................................................................... 93
Tabel 4. 9 hasil percobaan sistem kepada partisipan .................................................... 96
Tabel 4. 10 Tabel Hasil UAT test case tahap kedua ................................................... 144
Tabel 4. 11 Hasil Test SUS prototype tahap ke 2 kepada Vinandotech .................... 151
Tabel 4. 12 Pengujian SUS kepada 10 pelanggan icafe daily bites and base ............ 154
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
xii
DAFTAR GAMBAR
Gambar 1. 1 Hasil Survey Pengguna Internet oleh APII 2016....................................... 2
Gambar 2. 1 bagian utama sistem Android ..................................................................... 7
Gambar 2. 2 Susunan Arsitektur Sistem Andorid ........................................................... 8
Gambar 2. 3 Tampilan Aplikasi Axure Rp .................................................................... 15
Gambar 2. 4 just in mind prototyping ............................................................................ 17
Gambar 2. 5 tampilan Adobe XD ................................................................................... 18
Gambar 2. 6 Contoh Use Case ....................................................................................... 20
Gambar 2. 7 simbol dalam Use Case ............................................................................. 21
Gambar 2. 8 Contoh Activity Diagram .......................................................................... 22
Gambar 2. 9 simbol Activity Diagram ........................................................................... 23
Gambar 2. 10 Contoh Class Diagram ............................................................................ 23
Gambar 2. 11 contoh sequence diagram........................................................................ 25
Gambar 3. 1 Tahapan protiping ...................................................................................... 31
Gambar 4. 1 Use Case Diagram aplikasi VinandoTech ............................................... 39
Gambar 4. 2 Alur Aplikasi Vinandotech ....................................................................... 52
Gambar 4. 3 Wireframe Halaman Login........................................................................ 53
Gambar 4. 4 Wireframe Halaman Register.................................................................... 54
Gambar 4. 5 Wireframe Halaman Home ....................................................................... 55
Gambar 4. 6 Isi dari Menu Account ............................................................................... 56
Gambar 4. 7 Wireframe Halaman Shop ......................................................................... 57
Gambar 4. 8 Wireframe Detail Produk .......................................................................... 58
Gambar 4. 9 Wireframe Halaman build PC................................................................... 59
Gambar 4. 10 Wireframe Build by budget ..................................................................... 60
Gambar 4. 11 Wireframe Halaman Build by item ......................................................... 61
Gambar 4. 12 Wireframe Halaman Konfirmasi Build PC ............................................ 62
Gambar 4. 13 Wireframe Halaman Chat ....................................................................... 63
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
xiii
Gambar 4. 14 Sitemap Aplikasi Vinandotech ............................................................... 64
Gambar 4. 15 Halaman Register .................................................................................... 67
Gambar 4. 16 Halaman login aplikasi ............................................................................ 69
Gambar 4. 17 Halaman Home Aplikasi ......................................................................... 70
Gambar 4. 18 Halaman Shop .......................................................................................... 72
Gambar 4. 19 Halaman Shop Kategori Laptop ............................................................. 74
Gambar 4. 20 Halaman shop Detail ............................................................................... 75
Gambar 4. 21 Halaman Build PC ................................................................................... 77
Gambar 4. 22 Halaman build by item............................................................................. 78
Gambar 4. 23 Halaman build by budget ........................................................................ 80
Gambar 4. 24 Halaman konfirmasi perakitan ................................................................ 81
Gambar 4. 25 Halaman shopping basket ....................................................................... 83
Gambar 4. 26 Halaman chat ........................................................................................... 84
Gambar 4. 27 Halaman login sebelum dilakukan perubahan (kiri) dan halaman login
setelah dilakukan perubahan (kanan). ............................................................................ 89
Gambar 4. 28 Halaman shop detail sebelum dilakukan UAT (kiri) dan sesudah
dilakukan UAT (kanan) .................................................................................................. 90
Gambar 4. 29 Halaman build by budget sebelum dilakukan perubahan (kiri) dan
halaman sesudah dilakukan perubahan (kanan) ............................................................ 91
Gambar 4. 30 Grafik grade penilaian skor SUS............................................................ 95
Gambar 4. 31 Class Diagram Aplikasi Vinandotech.................................................... 98
Gambar 4. 32 Sequence diagram Login ....................................................................... 101
Gambar 4. 33 Gambar sequence diagram proses register .......................................... 103
Gambar 4. 34 sequence diagram shop ......................................................................... 105
Gambar 4. 35 Sequence diagram Build By item ......................................................... 107
Gambar 4. 36 sequence diagram build by budget ....................................................... 109
Gambar 4. 37 Sequence diagram chat ......................................................................... 111
Gambar 4. 38 Entity Relationship Diagram Aplikasi Vinandotech ........................... 112
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
xiv
Gambar 4. 39 Wireframe prototype ke 2 bagian halaman awal, login, dan register. 115
Gambar 4. 40 Wireframe Prototype ke 2 bagian Home, dan menu Akun halaman
Home .............................................................................................................................. 117
Gambar 4. 41 Wireframe Prototype ke 2 bagian shop, menu search dan menu filter.
........................................................................................................................................ 118
Gambar 4. 42 Wireframe Prototype ke 2 bagian shop detail dan added to cart. ...... 119
Gambar 4. 43 Wireframe prototype ke 2 bagian build PC.......................................... 120
Gambar 4. 44 Wireframe prototype ke 2 bagian menu build by budget dan build by
item. ................................................................................................................................ 121
Gambar 4. 45 Wireframe prototype ke 2 bagian konfirmasi build PC dan Pc added to
cart .................................................................................................................................. 122
Gambar 4. 46 Wireframe Prototype ke 2 bagian halaman chat. ................................ 123
Gambar 4. 47 Wireframe Prototype ke 2 bagian shopping cart dan checkout. ......... 124
Gambar 4. 48 Wireframe prototype ke 2 bagian account settings. ............................ 125
Gambar 4. 49 wireframe tahap kedua halaman notifikasi .......................................... 126
Gambar 4. 50 wireframe tahap ke 2 halaman about us ............................................... 127
Gambar 4. 51 Halman Front prototype ke 2. .............................................................. 128
Gambar 4. 52 Perbandingan Register dari prototype tahap ke 2 (atas) dan tahap 1
(bawah). ......................................................................................................................... 129
Gambar 4. 53 perbandingan Login pada prototype ke 2 ( kiri ) dan prototype pertama
( kanan ) ......................................................................................................................... 130
Gambar 4. 54 perbandingan home pada prototype tahap ke 2 ( kiri ) dan tahap ke 1 (
kanan ). ........................................................................................................................... 131
Gambar 4. 55 Perbandingan shop tahap ke 2 (kiri) dan tahap pertama (kanan). ...... 133
Gambar 4. 56 Halaman detail shop prototype tahap ke 2 ........................................... 134
Gambar 4. 57 Perbandingan Build PC tahap ke 2 (kiri) dan tahap 1 (kanan) ........... 135
Gambar 4. 58 perbandingan build by budget tahap ke 2 dan tahap pertama. ............ 136
Gambar 4. 59 Perbandingan build by item tahap ke 2 dan tahap pertama ................ 137
Gambar 4. 60 perbandingan halaman konfirmasi prototype ke 2 dan pertama. ........ 138
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019
xv
Gambar 4. 61 perbandingan shopping cart tahap ke 2 dan tahap pertama ................ 139
Gambar 4. 62 perbandingan chat tahap ke 2 dan tahap pertama. ............................... 140
Gambar 4. 63 prototype ke 2 halaman account settings ............................................. 141
Gambar 4. 64 tampilan halaman notifikasi prototype tahap ke 2. .............................. 142
Gambar 4. 65 halaman about us prototype tahap ke 2 ................................................ 143
Gambar 4. 66 lambang icon menu sebelum (kiri) dan setelah UAT (kanan) ............ 148
Gambar 4. 67 Perubahan font halaman about us ......................................................... 149
Gambar 4. 68. Perubahan warna pada menu sidebar .................................................. 150
Analisis dan Perancangan..., Charlie Pierre Piay, FTI UMN, 2019