PERANCANGAN UI/UX APLIKASI E-COMMERCE BERBASIS …

1 PERANCANGAN UI/UX APLIKASI E-COMMERCE BERBASIS WEBSITE PADA TOKO AEMA KACAMATA SURABAYA MENGGUNAKAN MODEL LEAN USER EXPERIENCE TUGAS AKHIR Program Studi S1 sistem informasi Oleh : Anis Dwi Setyani 17410100159 FAKULTAS TEKNOLOGI DAN INFORMATIKA UNIVERSITAS DINAMIKA 2021 PERANCANGAN UI/UX APLIKASI E-COMMERCE BERBASIS WEBSITE PADA TOKO AEMA KACAMATA SURABAYA MENGGUNAKAN MODEL LEAN USER EXPERIENCE TUGAS AKHIR Diajukan sebagai salah satu syarat untuk menyelesaikan Program Sarjana sistem informasi Oleh : Nama : Anis Dwi Setyani NIM : Jurusan : sistem informasi FAKULTAS TEKNOLOGI DAN INFORMATIKA UNIVERSITAS DINAMIKA 2021iii iv v Bismillahirrohmanirrohim vi Selalu ada harapan bagi mereka yang sering berdoa dan selalu ada jalan bagi mereka yang gemar berusaha vii ABSTRAK Toko AEMA Kacamata merupakan toko yang menjual berbagai aksesoris yang berdiri sejak tahun 2010, di toko tersebut menyediakan berbagai aksesoris berkendara seperti kacamata, slayer kain, buff masker, sarung tangan, topi, masker dan sabuk.

2 Permasalahan yang terjadi di toko AEMA Kacamata adalah pelanggan hanya bisa melakukan transaksi dan melihat katalog jika datang ke toko dan pegawai toko juga mengalami kesulitan dalam melakukan pencatatan penjualan dan perhitungan omzet toko karena pada toko AEMA ini masih menggunakan buku dan sebuah kalkulator dalam proses transaksinya, sehingga menyebabkan sering terjadinya perbedaan jumlah perhitungan barang. Berdasarkan masalah diatas maka solusinya yaitu PERANCANGAN UI/UX APLIKASI E-COMMERCE BERBASIS web dengan metode Lean UX karena metode ini memiliki kelebihan pada tingkat keberhasilan yang cepat namun juga tetap fokus pada tingkat pemahaman terhadap product experience yang akan dibuat.

3 Jumlah sampel dalam penelitian ini adalah 37 orang dengan perincian 30 orang pelanggan toko dan 7 orang karyawan toko. Berdasarkan hasil analisis dan observasi, maka dibuat rancangan prototype dengan metode Lean UX kemudian diuji cobakan kepada 30 pelanggan dan 7 karyawan AEMA Kacamata yang menghasilkan 150 task dan dapat berhasil diselesaikan oleh customer sebanyak 108 task, dengan rata-rata durasi penyelesaian customer setiap task adalah 45 detik dan nilai success rate pengujian prototype untuk customer mencapai 72 % dan hasil pengujian untuk admin menghasilkan 35 task, yang dapat diselesaikan admin sebanyak 30 task.

4 Dengan rata-rata durasi penyelesaian admin setiap task adalah 48 detik dan nilai success rate pengujian prototype untuk admin mencapai 86 %. Kata Kunci: user interface, user experience, lean ux, E-COMMERCE , prototype. viii KATA PENGANTAR Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang telah memberikan rahmat dan karunianya, sehingga penulis dapat menyelesaikan Laporan Tugas Akhir dengan judul PERANCANGAN UI/UX APLIKASI E-COMMERCE BERBASIS Website Pada Toko Aema Kacamata Surabaya Menggunakan Model Lean User Experience yang merupakan salah satu syarat untuk menyelesaikan Program Studi Sastra Satu di Universitas Dinamika.

5 Dengan selesainya Laporan Tugas Akhir ini tidak terlepas dari bantuan banyak pihak yang telah memberikan masukan-masukan kepada penulis. Untuk itu penulis mengucapkan banyak terimakasih kepada : 1. Orangtua dan kakak yang selalu memberikan doa, bantuan,dan nasihat kepada penulis. 2. Ibu Ayouvi Poerna Wardhanie, , Selaku dosen pembimbing I yang telah memberikan bimbingan dan dukungan berupa wawasan dan pemahaman selama pembuatan Laporan Tugas Akhir. 3. Ibu Sulistiowati, , selaku dosen pembimbing II yang telah memberikan bimbingan dan dukungan berupa wawasan dan pemahaman selama pembuatan Laporan Tugas Akhir. 4. Bapak Anjik Sukmaaji, , selaku dosen pembahas yang bersedia meluangkan waktu untuk membantu dalam meyelesaikan tugas akhir.

6 5. Semua teman-teman mahasiswa khususnya angkatan 2017 yang telah memberikan dukungan dan masukan dalam pembuatan Laporan Tugas Akhir. 6. Pemilik toko AEMA yang telah memberikan kesempatan untuk melakukan penelitian ini Penulis sadar bahwa penyusunan Laporan Tugas Akhir ini masih jauh dari kata sempurna. Sehingga kritik dan saran baik dari dosen maupun rekan-rekan mahasiswa sangat diharapkan untuk membantu memperbaiki penulisan. Akhir kata penulis berharap semoga Laporan Tugas Akhir ini bermanfaat bagi pembaca. Amin. Surabaya, 21 Januari 2021 Penulis ix DAFTAR ISI ABSTRAK .. vii KATA PENGANTAR .. viii DAFTAR ISI .. ix DAFTAR GAMBAR.

7 Xii DAFTAR TABEL .. xiv DAFTAR LAMPIRAN .. xv BAB I .. 1 PENDAHULUAN .. 1 Latar Belakang .. 1 Rumusan Masalah .. 4 Batasan .. 5 Tujuan .. 5 Manfaat .. 5 BAB II .. 6 LANDASAN TEORI .. 6 Penelitihan Terdahulu .. 6 E-COMMERCE .. 7 User Interface .. 7 User Experience .. 9 Lean UX .. 10 Declare Assumption .. 10 Create An Minimum Viable Product (MVP) .. 11 Run An Experiment .. 12 Feedback and Research .. 12 x Analisis Deskriptif .. 12 Jumlah Sampel .. 12 Teori Warna .. 12 BAB III .. 14 METODOLOGI PENELITIAN .. 14 Tahap Awal .. 15 15 Studi Literatur .. 15 Observasi .. 15 Identifikasi Permasalahan .. 15 Analisis Kebutuhan Pengguna .. 16 Use Case Diagram.

8 17 Tahap Pengembangan .. 17 Deklarasi Asumsi .. 18 Tahap Membuat Minimum Viable Product (MVP) .. 19 Run an 20 Tahap Feedback and Research .. 21 Tahap Akhir .. 22 BAB IV .. 23 HASIL DAN PEMBAHASAN .. 23 Tahap Awal .. 23 23 Studi Literatur .. 23 Observasi .. 23 Tahap Pengembangan .. 23 Deklarasi Asumsi .. 23 xi Membuat MVP .. 24 Run An Experiment .. 46 Feedback and Research .. 46 BAB V .. 50 PENUTUP .. 50 Kesimpulan .. 50 Saran .. 50 DAFTAR PUSTAKA .. 51 LAMPIRAN .. Error! Bookmark not defined. xii DAFTAR GAMBAR Gambar Tahapan Metodologi Penelitian .. 14 Gambar Use Case Diagram .. 17 Gambar wireframe Login Customer .. 25 Gambar 25 Gambar Wireframe Kategori.

9 26 Gambar Wireframe Sub 26 Gambar Wireframe Detail Produk .. 27 Gambar Wireframe Keranjang .. 27 Gambar Wireframe Transaksi .. 28 Gambar Wireframe Pembayaran .. 28 Gambar Wireframe Detail Pembayaran .. 29 Gambar Wireframe Status Pesanan .. 29 Gambar Wireframe Riwayat 30 Gambar Wireframe Detail Riwayat Pembelian .. 30 Gambar Wireframe Login Admin .. 31 Gambar Wireframe Dashboard Admin .. 31 Gambar Wireframe Master Data 32 Gambar Wireframe Master Data Jenis .. 32 Gambar Wireframe Master Data Merk .. 33 Gambar Wireframe Master Data 33 Gambar Wireframe Pesanan .. 34 Gambar Wireframe Detail Pesanan .. 34 Gambar Wireframe Nota Penjualan .. 35 Gambar Wireframe Transaksi Penjualan.

10 35 Gambar Wireframe Laporan Penjualan sistem .. 36 Gambar Wireframe Laporan Penjualan Toko .. 36 Gambar Login Customer .. 37 Gambar Dashboard Customer .. 37 Gambar Kategori .. 38 Gambar Sub Kategori .. 38 Gambar Detail 39 xiii Gambar Keranjang .. 39 Gambar Transaksi Pembelian .. 39 Gambar Pembayaran .. 40 Gambar Detail Pembayaran .. 40 Gambar Status Pesanan .. 41 Gambar Riwayat Pembelian .. 41 Gambar Detail Riwayat Pembelian .. 41 Gambar Login Admin .. 42 Gambar Dashboard Admin .. 42 Gambar Master Data .. 43 Gambar Transaksi .. 44 xiv DAFTAR TABEL Tabel Penelitian Terdahulu .. 6 Tabel Prinsip PERANCANGAN User Interface .. 8 Tabel Identifikasi Permasalahan.