WIXLIB

ANALISIS DAN PERANCANGAN UI/UX PADAPROTOTYPE APLIKASI MOBILE E-COMMERCEGRAMEDIA.COMSKRIPSIDiajukan Guna Memenuhi Persyaratan Memperoleh GelarSarjana Komputer (S.Kom.)Muhammad Leyri Adzani11110310096PROGRAM STUDI SISTEM INFORMASIFAKULTAS TEKNOLOGI INFORMASI DAN KOMUNIKASIUNIVERSITAS MULTIMEDIA NUSANTARATANGERANG2016

PERNYATAAN TIDAK MELAKUKAN PLAGIATDengan ini, saya,Nama: Muhammad Leyri AdzaniNIM: 11110310096Fakultas: ICTProgram Studi: Sistem InformasiMenyatakan bahwa skripsi ini merupakan hasil ide yang saya buat dankerjakan sendiri, serta bukan merupakan hasil pekerjaan atau penelitian yangdilakukan oleh orang, peneliti, organisasi, dan atau perusahaan lain yangkemudian saya ambil atau tiru. Semua data yang saya ambil dari buku atau karyatulis orang atau lembaga lainnya seluruhnya saya cantumkan pada bagian DaftarPustaka.Apabila ditemukan bahwa adanya kecurangan atau kutipan yang sayalakukan di dalam skripsi ini, saya bersedia untuk dinyatakan GAGAL atauTIDAK LULUS untuk mata kuliah skripsi yang saya tempuh ini.Tangerang, 25 Juli 2016Muhammad Leyri AdzaniiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

PERSETUJUAN LAPORAN SKRIPSIANALISIS DAN PERANCANGAN UI/UX PADAPROTOTYPE APLIKASI MOBILE E-COMMERCEGRAMEDIA.COMOleh :Nama: Muhammad Leyri AdzaniNIM: 11110310096Fakultas: ICTProgram Studi: Sistem InformasiTelah disetujui untuk diujikan pada acara Sidang Tugas AkhirTangerang, 25 Juli 2016Menyetujui,Dosen PembimbingMarcelli Indriana, S.Kom., M.Sc.Mengetahui,Ketua Program StudiWira Munggana, S.Si., M.SciiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

PENGESAHAN LAPORAN SKRIPSISkripsi yang dibuat dengan memakai judul“ANALISISDAN PERANCANGAN UI/UX PADAPROTOTYPE APLIKASI MOBILE E-COMMERCEGRAMEDIA.COM”Oleh :Muhammad Leyri Adzani – 11110310096Telah diujikan pada hari Senin, tanggal 8 Agustus 2016Pukul 09.00 s.d 11.00 dan dinyatakan lulusDengan susunan penguji sebagai berikutPembimbingPengujiMarcelli Indriana, S.Kom., M.Sc.Wira Munggana, S.Si., M.ScKetua SidangIr. Raymond Sunardi Oetama, MCISDisahkan olehKetua Program Studi Sistem InformasiWira Munggana, S.Si., M.SciiiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

KATA PENGANTARPuji syukur penulis panjatkan kepada Allah SWT Tuhan Yang Maha Kuasayang telah melimpahkan rahmat dan berkah-Nya sehingga penulis dapatmenyelesaikan skripsi dengan judul ”ANALISIS DAN PERANCANGAN UI/UXPADA PROTOTYPE APLIKASI MOBILE E-COMMERCE GRAMEDIA.COM”tepat dengan batas waktu yang telah ditentukan sebelumnya. Skripsi ini dibuatoleh penulis untuk Program Strata 1, Program Studi Sistem Informasi, FakultasTeknologi Informasi dan Komunikasi, Universitas Multimedia Nusantara.Pada kesempatan ini juga, penulis ingin mengucapkan terima kasih kepada :a. Bapak Iwan Dani selaku e-business manager Gramedia.com. Bapak EberhardOjong, Bapak Trenggana Natadirja, Yulius Malik yang telah memberikankesempatan kepada penulis untuk melakukan penelitian pada Gramedia.com.b. Bapak Wira Munggana sebagai Ketua Program Studi Sistem Informasi yangselalu memberikan dukungan serta nasihat dalam pengerjaan skripsi ini.c. Ibu Marcelli Indriana, S.Kom., M.Sc. sebagai dosen pembimbing yang telahmemberikan saran dan masukan dalam proses pembuatan skripsi ini.d. Kedua orang tua saya. Yang sudah memberikan saya semangat yang selalumengingatkan untuk tetap semangat dan tidak mudah menyerah selama prosesperkuliahan berlangsunge. Libra, Shaby Valentine, Widytya Pratiwi, dan Dhea.A atas dukungan sertamotivasi yang selama ini diberikan kepada penulis saat mengerjakan laporan.f. Natasha Paramitha, Bimo Dwi yanto, Kevin Sungiardi, Yessica Kasandra, AdiPutra Katili, Aditya Basudewa, Raditya Adi Baskara, Gita Listya AnggrainiivAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

selaku sahabat yang telah banyak membantu dan memberikan semangatnyadalam proses pembuatan skripsi ini.g. Semua pihak yang telah membantu penulis dalam menyelesaikan laporankerja magang ini yang namanya tidak bisa penulis tuliskan satu per satu.Akhir kata penulis mengucapkan terima kasih kepada semua pihak yangtelah membantu dalam proses pembuatan skripsi ini. Dan semoga semua pihakyang telah membantu mendapatkan berkah yang berlimpah. Semoga skripsi inidapat memberikan bantuan kepada para pembaca.Tangerang, 25 Juli 2016Muhammad Leyri AdzanivAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

ANALISIS DAN PERANCANGAN UI/UX PADAPROTOTYPE APLIKASI MOBILE E-COMMERCEGRAMEDIA.COMABSTRAKNama : Muhammad Leyri AdzaniNim : 11110310096Aplikasi e-commerce berbasis mobile menjadi salah satu yang sedang naikdaun saat ini. Kemudahan menjadi salah satu alasan mengapa aplikasi ecommerce berbasis mobile tersebut menjadi marak digunakan oleh para penggunasaat ini.Gramedia Asri Media merupakan anak perusahaan Kompas Gramediayang menyediakan jaringan toko buku dengan nama Toko Buku Gramedia yangsudah tersebar di beberapa kota di Indonesia dan Malaysia.Kecenderungan dari para pelanggan Gramedia yang mulai mengaksesGramedia.com menggunakan device smartphone ataupun tablet membuatGramedia ingin membuat aplikasi berbasis mobile yang dapat digunakan olehpara pelanggan Gramedia.Task Centered System Design adalah metode dalam membangun HumanComputer Interaction (HCI) yang berguna untuk mengidentifikasi kebutuhan taskdan kebutuhan dari user. Metode TCSD ini meliputi 4 tahap, yaitu identification,User-centered Requirements Analysis, Design as scenario, dan walkthoughevaluate.Dari hasil penelitian didapatkan kesimpulan prototype yang telah dibuatsudah berdasarkan requirement yang didapat. Dari pengujian menggunakan UserAcceptance Testing (UAT) didapatkan hasil 80% diterima, 20% diterima dengancatatan, dan 0% ditolak danSystem Usability Scale (SUS) dengan nilai akhiradalah 80.9 yang berarti kebergunaannya sudah di atas rata-rata.Kata Kunci : Task Centered System Design, System Usability ScaleviAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

UI/UX ANALYSIS & DESIGN FOR MOBILE ECOMMERCE APPLICATION PROTOTYPE ONGRAMEDIA.COMABSTRACTNama : Muhammad Leyri AdzaniNim : 11110310096Mobile-based ecommerce application has begun to gain its trend. Userfriendliness is one of the reasons why it becomes so popular amongstusersrecently.Gramedia Asri Media is a subsidiary of Kompas Gramedia corporationthat managed a book store chain named Toko Buku Gramedia that spreads acrossIndonesia and rtsaccessingGramedia.com using their gadgets such as smartphones or tablets. Gramediaplans to create a mobile app that is accessible to its customers.Task Centered System Design is a method in building Human ComputerInteraction (HCI) thatis useful to identify task-requirements and user needs.TCSD method consists of 4 steps, which are (1) identification,(2) user-centeredrequirements analysis,(3) design as scenario,and (4) walkthrough evaluate.The prototype has met the requirements as the User Acceptance Testing(UAT) shows that 80% acceptance whilstanother 20% is accepted with notice,and 0% is rejected. The method of System Usability Scale (SUS) performs a finalscore 80.9 showing that its usability quality is high.Keyword : Task Centered System Design, System Usability ScaleviiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

DAFTAR ISIPERNYATAAN TIDAK MELAKUKAN PLAGIAT . iPERSETUJUAN LAPORAN SKRIPSI . iiPENGESAHAN LAPORAN SKRIPSI . iiiKATA PENGANTAR . ivABSTRAK . viABSTRACT . viiDAFTAR ISI.viiDAFTAR GAMBAR . xiiDAFTAR TABEL . xiBAB I PENDAHULUAN . 11.1Latar Belakang Masalah . 11.2Rumusan Masalah . 31.3Batasan Masalah . 31.4Tujuan Penelitian . 41.5Manfaat Penelitian . 41.6Sistematika Penulisan . 5BAB II LANDASAN TEORI . 62.1Smartphone . 62.1.1Pengertian Smartphone . 62.1.2Sistem Operasi Smartphone . 62.2Android . 7viiiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

2.2.1Versi Android . 72.2.2Sejarah Android . 82.3E-commerce . 122.3.1Pengertian E-commerce . 122.3.2Jenis E-commerce. 132.4Interaksi Manusia dan Komputer . 152.4.1Pengertian Interaksi Manusia dan Komputer . 152.4.2Lima Faktor Manusia Terukur . 152.4.38 Golden Rules . 162.4.4Task Centered System Design (TCSD) . 182.5User Interface . 192.6User Experience . 192.7Usability . 202.7.1System Usability Scale . 222.8Wawancara . 232.9Axure . 23BAB III METODOLOGI PENELITIAN. 253.1Objek Penelitian . 253.1.1Gramedia Asri Media . 253.1.2Struktur Organisasi . 263.1.3Visi dan Misi Perusahaan . 273.2Metode Penelitian . 273.2.1Identification . 28ixAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

3.2.2User-Centered Requirements Analysis . 293.2.3Design as Scenario . 293.3.4Walkthrough Evaluate . 29BAB IV ANALISIS DAN HASIL PENELITIAN . 304.1Identification . 304.2User-Centered Requirement Analysis . 464.3Design as Scenario . 474.4Walkthrough Evaluate . 724.4.1User Acceptance Testing (UAT) . 724.4.2System Usability Scale . 72BAB V KESIMPULAN DAN SARAN . 785.1Kesimpulan . 785.2Saran . 79DAFTAR PUSTAKA . 80LAMPIRAN . 82xAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

DAFTAR GAMBARGambar 1.1 Data google Analytics Gramedia.com . 2Gambar 2.1 Versi Android 2016 . 8Gambar 2.2 Semua versi Android . 12Gambar 2. 3 SUS Score . 22Gambar 2.4 Logo axure. 23Gambar 3.1 Struktur perusahaan Gramedia . 26Gambar 3.2 Metode TCSD . 27Gambar 4.1 Grafik Pengguna Gramedia.com . 31Gambar 4.2 Jenis Kelamin Responden . 33Gambar 4.3 Range Umur Responden. 33Gambar 4.4 Pekerjaan Responden . 34Gambar 4.5 Penghasilan Perbulan Responden. 35Gambar 4.6 Pengguna Aplikasi e-commerce. 36Gambar 4.7 Aplikasi e-commerce yang pernah dipakai . 37Gambar 4.8 Aplikasi e-commerce yang sering digunakan. 38Gambar 4.9 Keseringan menggunakan aplikasi e-commerce . 39Gambar 4.10 Alasan berbelanja menggunakan aplikasi tersebut. 40Gambar 4.11 Fitur paling dibutuhkan dalam aplikasi . 41Gambar 4.12 Tingkat pengguna website Gramedia.com . 42Gambar 4.13 Keseringan membuka website Gramedia.com . 42Gambar 4.14 Yang dilakukan jika membuka website Gramedia.com . 43xiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

Gambar 4.15 Melakukan pembelian dari website Gramedia.com . 44Gambar 4.16 Seberapa sering melakukan pembelian di website Gramedia.com . 44Gambar 4.17 Kemudahan melakukan pembelian dari website Gramedia.com . 45Gambar 4.18 Storyboard . 48Gambar 4.19 Axure Dekstop . 50Gambar 4.20 Perbandingan aplikasi mobile e-commerce . 51Gambar 4.21 Tampilan home prototype aplikasi mobile Gramedia.com . 54Gambar 4.22 Tampilan menu sebelum login . 56Gambar 4.23 Tampilan detail category produk buku . 57Gambar 4.24 Tampilan form login . 58Gambar 4.25 Tampilan error message pada form login . 59Gambar 4.26 Tampilan form pendaftaran member baru . 60Gambar 4.27 Tampilan error message pada form pendaftaran . 61Gambar 4.28 Tampilan menu setelah login . 62Gambar 4.29 Tampilan detail salah satu produk . 63Gambar 4.30 Pop-up barang sudah masuk ke keranjang belanja . 64Gambar 4.31 Tampilan keranjang belanja . 65Gambar 4.32 Tampilan status pembelian . 66Gambar 4.33 Tampilan review pembelian . 67Gambar 4.34 Tampilan pick up on store . 68Gambar 4.35 Tampilan metode pembayaran . 69Gambar 4.36 Tampilan detail pembelian . 70Gambar 4.37 Tampilan menu konfirmasi pembayaran . 71xiiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

DAFTAR TABELTabel 4.1 Trafik Gramedia.com September 2015 – Februari 2016 . 30Tabel 4.2 Trafik Gramedia.com Maret 2015 – September 2016 . 31Tabel 4.3 Hasil requirement dengan pihak Gramedia . 46Tabel 4.4 Requirement dari hasil kuisioner . 46Tabel 4. 5 Perbandingan mobile e-commerce Lazada . 52Tabel 4. 6 Perbandingan mobile e-commerce Bukalapak . 52Tabel 4. 7 Perbandingan mobile e-commerce Tokopedia . 53Tabel 4.8 Skenario Login . 73Tabel 4.9 Skenario Pembelian. 73Tabel 4.10 Nilai SUS pada prototype aplikasi mobile Gramedia.com . 76Tabel 4.11 Penilaian Evaluator Terhadap Prototype . 77Tabel 4.12 Hasil pengujian SUS prototype aplikasi mobile Gramedia.com . 77xiiiAnalisis dan perancangan., Muhammad Leyri Adzani, FTI UMN, 2016

iii PENGESAHAN LAPORAN SKRIPSI Skripsi yang dibuat dengan memakai judul "ANALISIS DAN PERANCANGAN UI/UX PADA PROTOTYPE APLIKASI MOBILE E-COMMERCE GRAMEDIA.COM" Oleh : Muhammad Leyri Adzani - 11110310096