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


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


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


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


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


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


x

5.1 Kesimpulan .................................................................................................... 155

5.2. Saran ............................................................................................................... 156

DAFTAR PUSTAKA ................................................................................................... 157

LAMPIRAN .................................................................................................................. 160


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


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


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


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


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


160

LAMPIRAN

1. User Acceptance Test pada Vinandotech

2. SUS ke 10 Partisipan

3. Form Konsultasi Skripsi

4. Notulen Wawancara


Analisis dan Perancangan, Charlie Pierre Piay, FTI UMN,...

Documents

Transcript of Analisis dan Perancangan, Charlie Pierre Piay, FTI UMN,...