PENGEMBANGAN APLIKASI E-COMMERCE MENGGUNAKAN PENDEKATAN USER EXPERIENCE DESIGN (UXD) BERBASIS WEBSITE (Studi Kasus: Ladyfameshop) Didi Susianto

Transkripsi

1 PENGEMBANGAN APLIKASI E-COMMERCE MENGGUNAKAN PENDEKATAN USER EXPERIENCE DESIGN (UXD) BERBASIS WEBSITE (Studi Kasus: Ladyfameshop) Didi Susianto Program Studi Manajemen Informatika AMIK Dian Cipta Cendikia, Bandar Lampung Jl. Cut Nyak Dien No.65 Durian Payung Bandar Lampung, Lampung Indonesia Abstrak. Tujuan dari penelitian ini untuk mengetahui proses bisnis penjualan yang terjadi di ladyfameshop dan untuk menghasilkan konten dan fitur yang user friendly. Kekurangan pada sistem yang berjalan saat ini, tidak adanya fitur e-commerce. Salah satu solusi yang dapat diterapkan pada permasalahan ini adalah dengan mengembangkan aplikasi e-commerce menggunakan pendekatan UXD (user experienced design) berbasis website. Metode pengumpulan data yang digunakan yaitu metode dokumentasi, wawancara dan observasi untuk memperoleh data yang di perlukan melalui data yang telah tersedia. Metode pengembangan sistem menggunakan metode prototipe. Pendekatan yang digunakan yaitu pendekatan user experience design. Evaluasi menggunakan standar ISO Hasil pengujian menggunakan ISO , terdapat beberapa subklausul yang tidak terpenuhi yang dapat dilihat melalui presentase penilaian klausul. Maka penelitian yang dilakukan dapat dikatakan berhasil berdasarkan klausul-klausul yang sudah terpenuhi. Kata Kunci: User experience, Website, E-commerce, ISO 9241,User friendly, prototype I. PENDAHULUAN 1.1 Latar Belakang Mengikuti trend dunia, belanja online mulai mengalami peningkatan di Indonesia. Menurut survey APJII dari 2000 pengguna internet di Indonesia, perempuan yang melakukan belanja online (58%) dibanding pengguna internet lakilaki (42%). Komoditas utama dalam belanja online yaitu busana (dilakukan oleh 72% pengguna). Ladyfameshop merupakan usaha bisnis yang bergerak di bidang penjualan busana, khususnya busana untuk perempuan. Terletak di Jl. Teuku Umar No 21 A Kelurahan Kedaton Kecamatan Kedaton Bandar Lampung. Untuk sistem pemasarannya ladyfameshop memanfaatkan media seperti line dan instagram. Saat ini e-commerce merupakan salah satu alternatif pilihan untuk sebuah perusahaan yang khususnya bergerak di bidang wiraswasta sebagai media informasi yang memudahkan adanya interaksi antara penjual dan pembeli tanpa dibatasi ruang dan waktu. Untuk itu banyak pengembang bisnis yang beralih mengelola bisnisnya lewat e-commerce. Pemanfaatan teknologi e-commerce merupakan sarana penting dalam menerapkan strategi dan promosi secara online sehingga dapat memperluas pangsa pasar (Sandi, 2015). Hal ini didukung dengan pertumbuhan penggunaan internet yang terus mengalami peningkatan, maka Indonesia menjadi sebuah pasar yang sangat luas. Data yang dirilis APJII (Asosiasi Penyelenggara Jasa Internet Indonesia) menunjukkan, jumlah pengguna internet pada 2012 mencapai 24,23%. Sementara survey di tahun 2014 menunjukkan penetrasi pengguna internet di Indonesia adalah 34.9%. Survey ini dilakukan terhadap 2000 pengguna internet. Sistem penjualan yang terjadi di ladyfameshop saat ini customer bisa melihat produk yang telah diupload di akun instagram. Apabila customer ingin memesan produk, customer hanya mengirimkan format pemesanan yang telah ditentukan oleh pihak admin ladyfameshop. Admin akan merespon format order yang telah dikirimkan oleh customer, setelah melakukan total yang akan dibayarkan maka customer akan melakukan transfer seharga produk yang dipilih. Setelah melakukan transaksi, customer mengirimkan format konfirmasi ke admin ladyfameshop, dan admin akan melakukan pengiriman barang yang telah dipesan. Kekurangan pada sistem yang berjalan saat ini, tidak adanya fitur e-commerce sehingga para customer tidak dapat melihat persediaan barang yang tersedia. Salah satu solusi yang dapat diterapkan yaitu dengan mengembangkan aplikasi e-commerce untuk Ladyfameshop menggunakan pendekatan user experiece design. UXD (User Experience Design) adalah tentang bagaimana pengguna merasa, berpikir, dan bereaksi terhadap produk yang kita buat. UX design tidak berbicara mengenai seni, namun lebih ditekankan pada perencanaan interaksi antara pengguna dengan produk. Hal

2 ini didukung dengan terjadi transformasinya sebuah web pada dekade terakhir ini. Tidak hanya karena web ada di mana-mana, web telah memiliki setidaknya 1.5 miliar pengguna secara global di tahun 2008, tetapi juga menjadi begitu kompleks, kaya fitur, sehingga untuk menjadi efektif harus ada desain UX yang bagus. Lebih lagi, pengguna di dunia sudah mengakses website dengan berbagai cara seperti perangkat bergerak, browser yang lebar dan koneksi internet yang bermacam-macam (Jacob Gube). Pada tahap strategi hal yang dilakukan adalah menentukan kebutuhan pengguna dengan persona, selanjutnya pada tahap bidang yang dilakukan adalah mengidentifikasi konten dan fitur yang digunakan, pada tahap strukur yang dilakukan adalah membuat arsitektur informasi dan site map, tahapan keempat menentukan kerangka dengan teknik wireframe dan tahapan kelima menentukan permukaan. Kelima tahap ini saling berkaitan, dan tahap ini harus dilalui oleh pengembang. Pada tahapan akhir dilakukan pengujian menggunakan standar ISO Rumusan masalah pada penelitian ini adalah sebagai berikut: a. Bagaimana cara mengembangkan aplikasi e- commerce untuk ladyfameshop menggunakan pendekatan user experience design? b. Bagaimana merancang aplikasi website e- commerce sebagai media penjualan yang dapat mempermudah penyampaian informasi dan transaksi? Tujuan dari penelitian ini adalah sebagai berikut: a. Menerapkan pendekatan user experience design untuk merancang aplikasi e- commerce. b. Merancang aplikasi e-commerce untuk Ladyfameshop berbasis website. c. Menghasilkan konten dan fitur yang user friendly. Manfaat yang dapat diperoleh dari penelitian ini adalah: a. Dapat memberikan kemudahan kepada customer dalam mendapatkan informasi tentang produk pakaian yang masih ada di Ladyfameshop. b. Mempermudah Ladyfameshop dalam mengelola penjualan pakaian. c. Menerapkan e-commerce untuk penjualan agar memudahkan bagi para pengusaha bisnis dalam mempromosikan produk barang tersebut melalui internet. II. METODE PENELITIAN 2.1 Kerangka Pemikiran Kerangka penelitian ini menggunakan metode proactive research (Robert, dkk, 2005). Kerangka pemikiran merupakan alur utama dari penelitian dengan urutan problem (masalah), opportunity (peluang), approach (pendekatan), identification and assessment (identifikasi dan pemetaan), a proposed (pemodelan), evaluasi dan result (hasil). Pada dasarnya adalah kerangka hubungan antara konsep-konsep yang ingin diamati atau diukur melalui penelitian yang akan dilakukan. Penelitan ini di dasarkan pada permasalahan penjualan Ladyfameshop, yaitu tidak adanya fitur e-commerce, maka kerangka penelitian yang digunakan secara keseluruhan dapat dilihat pada Gambar 1.

3 Gambar 1: Linier Sequence Model Untuk menghasilkan sebuah fitur e- commerce dan pengaturan fitur dan konten. Dapat dilakukan menggunakan beberapa pendekatan User Experience Design (UXD) dan E-commerce untuk penjualan berbasis website. Pendekatan tersebut di dukung dengan perancangan model user interface dan analisa usability user experience pada aplikasi berbasis website. Penelitian dilakukan dengan melakukan identifikasi proses bisnis sistem penjualan Ladyfameshop dan identifikasi konten dan fitur. Hasil dari identifikasi akan menghasilkan fitur dan konten penjualan dan menerapkan e-commerce untuk penjualan ladyfameshop. Dari temuan tersebut maka selanjutnya divalidasi dengan menggunakan ISO Hasil dari ISO ini akan digunakan sebagai penentuan hasil akhir penelitian dan penerapan user experience design untuk parancangan e-commerce pada ladyfameshop. 2.2 Tahapan Penelitian Penelitian merupakan kegiatan penelitian yang dilakukan secara terencana, teratur, dan sistematis untuk mencapai tujuan tertentu. Tahapan penelitian ini juga merupakan pengembangan dari kerangka penelitian, dan terbagi lagi menjadi beberapa sub menu yaitu:

4 Gambar 2: Tahapan Penelitian 2.3 Rancangan Sistem Dalam tahapan ini akan dibuat perancangan menggunakan pemodelan Unified Modelling Language (UML) yang meliputi perancangan Use Case Diagram, Activity Diagram dan Class Diagram. Dengan adanya perancangan design sistem ini akan dapat membantu peneliti untuk membangun sebuah Aplikasi E-commerce sesuai dengan tujuan peneliti Use Case Diagram Actor : berupa orang atau sesuatu yang harus atau selalu berinteraksi dengan sistem yang dibangun.

5 Tabel 1. Actor pada Use Case No Aktor Deskripsi User sebagai pengguna 1 User Aplikasi e-commerce untuk ladyfameshop Actor yang bertugas 2 Admin dalam pengelolaan data member dan pengolahan data barang. Untuk mendapatkan gambaran mengenai sistem yang digunakan proses dan data model dari sistem dimodelkan dengan diagram use case. Diagram use case ini dapat mendeskripsikan tipikal interaksi antara user (pengguna) dengan sistem, dan interaksi antara sistem itu sendiri. Diagram use case dapat dilihat pada Gambar 3. Gambar 3. Use Case Aplikasi E-commerce untuk Ladyfameshop Activity Diagram Activity diagram menggambarkan alur proses kegiatan yang dilakukan oleh admin dan user. Pada laporan ini terdapat 2 diagram aktifitas yaitu admin dan user. Activity diagram dapat dilihat pada gambar 4.

6 Gambar 4. Activity Diagram Admin III. HASIL DAN PEMBAHASAN 3.1 Kebutuhan Pengguna Pada tahap identifikasi pengguna, kita mengidentifikasi apa saja keinginan pengguna. Pada tahap ini dilakukan dengan persona. Dilakukan dengan mewawancarai pengguna sebanyak 44 orang. Umur responden berkisar antara umur tahun, karena rata-rata umur pelanggan Ladyfameshop remaja. Dalam penentuan strategi ini menjadi tahapan yang sangat penting, karena produk dirancang untuk orang lain. Background warna yang digunakan pada header website adalah warna biru. Warna yang digunakan dalam desain adalah warna biru. Biru adalah warna favorit pria dan wanita dari segala usia. Sedangkan pria memiliki preferensi kuat untuk biru daripada wanita, itu masih menjadi pilihan utama. Ini mungkin efek menenangkan dari warna biru yang membuatnya warna populer bagi pria dan wanita (Jacci Howard Bear). Warna biru diperoleh berdasarkan hasil persona dengan mewawancarai sebanyak 44 orang perempuan. Dengan rincian, perempuan yang memilih warna biru sebanyak 22 orang, warna pink sebanyak 15 dan warna hijau sebanyak 7 orang. Gambar grafik background header website dapat dilihat pada gambar 6. Gambar 5. Activity Diagram User Gambar 6. Grafik Background Header Website Warna font yang digunakan pada aplikasi adalah warna hitam dengan kode # Warna ini diperoleh berdasarkan hasil persona dengan rincian perempuan yang memilih warna hitam sebanyak 32 orang, warna coklat sebanyak 3 orang dan warna abu-abu sebanyak 9 orang. Gambar grafik warna font dapat dilihat pada gambar 7.

7 Gambar 7. Grafik Warna Font Jenis font yang digunakan sans serif adalah jenis huruf yang tidak memiliki tangkai. Ujung-ujung kakinya polos begitu saja. Font yang digunakan adalah Helvetica. Sans Serif adalah huruf tanpa serif (kait di ujung). Font sans serif dianggap lebih mudah dibaca pada layar elektronik (komputer dan device lain) sehingga banyak digunakan untuk blog dan website. Jenis font ini diperoleh berdasarkan hasil persona dengan rincian perempuan yang memilih jenis font times new roman sebanyak 3 orang, jenis font arial sebanyak 9 orang dan helvetica sebanyak 32 orang. Gambar grafik jenis font dapat dilihat pada gambar 8. Gambar 9. Penempatan Informasi Penting Untuk penempatan informasi rinci pengguna lebih menyukai pada bagian tengah. Rinci yang dimaksudkan mengenai penjelasanpenjelasan dari fitur maupun konten yang terdapat pada aplikasi. Untuk penempatan gambar pengguna lebih menyukai pada bagian tengah sebelah kiri. Hasil ini diperoleh berdasarkan persona dengan rincian sebanyak 34 orang memilih bagian tengah sebelah kiri dan 10 orang memilih bagian tengah sebalah kanan. Gambar grafik penempatan gambar dapat dilihat pada gambar 10. Gambar 8. Grafik Jenis Font Untuk penempatan informasi paling penting pengguna lebih menyukai pada bagian tengah. Hasil ini diperoleh dari persona dengan rincian sebanyak 32 orang memilih bagian tengah, sebanyak 6 orang memilih bagian kiri dan sebanyak 6 orang memilih bagian kanan. Gambar grafik penempatan informasi paling penting dapat dilihat pada gambar 9. Gambar 10. Grafik Penempatan Gambar Untuk layout yang digunakan, pengguna lebih menyukai T layout. Hasil ini diperoleh berdasarkan persona dengan rincian sebanyak 30 orang memilih T layout, sebanyak 6 orang memilik 2 column layout, sebanyak 3 orang memiih 3 column layout dan sebanyak 5 orang memilih single layout. Gambar grafik layout dapat dilihat pada gambar 11.

8 Gambar 11. Grafik layout Warna background yang digunakan adalah warna putih, alasan kombinasi yang baik dengan warna lain. Warna Putih menjadi dominasi dari keseluruhan desain website ini berfungsi sebagai warna background dan warna dominan, pemilihan warna putih dimaksudkan untuk mencapai tingkat informasi yang tinggi atau mudah terbaca oleh user atau pengguna. Dibawah ini adalah diagram penggunan untuk warna background. Hasil ini diperoleh berdasarkan persona dengan rincian sebanyak 32 orang memilih background putih dan sebanyak 12 orang memilih background abuabu. Gambar grafik warna untuk background dapat dilihat pada gambar 12. Gambar 12. Warna Background 3.2 Arsitektur Informasi Arsitektur Informasi merupakan skema organisasi dan navigasi yang memungkinkan pengguna bergerak melalui konten situs secara efisien dan efektif. Memungkinkan pengguna untuk menemukan informasi dengan mudah. Rancangan interface dapat dilihat pada gambar 13. HOME PENCARIAN CUSTOMER CARE KERANJANG BELANJA TRACKING AKUN KATALOG PRODUK ATASAN BAWAHAN DESKRIPSI PRODUK ZOOM OUT FILTER INFORMASI TENTANG KAMI HUBUNGI KAMI SYARAT DAN KETENTUAN KEBIJAKAN DAN PRIVASI PANDUAN BELANJA KONFIRMASI PEMBAYARAN FAQ PENGEMBALIAN BARANG PENGIRIMAN WISHLIST PENGIRIMAN ALAMAT JASA PENGIRIMAN RINGKASAN PEMESANAN METODE PEMBAYARAN DAFTAR LOGIN PROFIL ALAMAT PESANAN PESANAN HARGA TERENDAH HARGA TERTINGGI PRODUK BARU TRANSFER BNI COD RETUR LOGOUT BESTSELLER 3.3 Desain Interaksi Desain interaksi adalah menggambarkan kemungkinan perilaku pengguna dan Gambar 13. Arsitektur Informasi mendefinisikan bagaimana sistem akan mengakomodasi dan menanggapi perilaku. Desain interaksi digambarkan dengan site map.

9 Site map adalah sesuatu yang menggambarkan tentang peta dari website, yaitu segala informasi mengenai halaman atau file-file yang ada pada sebuah website. Gambar 14. Desain Interaksi Keterangan 1. Home 2. Atasan 3. Bawahan 4. Deskripsi Produk 4.1 Zoom Out 4.2 Wishlist 5. Keranjang Belanja 6. Lanjutkan Belanja 7. Lanjutkan ke pembayaran 8. Pengiriman 8.1 Alamat 8.2 Jasa Pengiriman 8.3 Ringkasan Pemesanan 9. Metode Pembayaran 9.1 Transfer BNI 9.2 COD 10. Akun 11. Daftar 12. Login 13. Profil 14. Alamat 15. Pesanan 15.1 Pesanan 15.2 Retur 16. Logout 17. Customer Care 18. Panduan Belanja 19. Konfirmasi Pembayaran 20. FAQ 21. Pengembalian Barang 22. Pengiriman 23. Informasi 24. Tentang kami 25. Hubungi Kami 26. Syarat dan ketentuan 27. Kebijakan dan privasi 28. Filter 29. Pencarian 30. Tracking

10 Gambar 15. Wireframe Alamat Gambar 16. Wireframe Deskripsi Produk Gambar 17. Wireframe Filter

11 Gambar 18 Wireframe Keranjang Belanja Gambar 19. Konfirmasi Pembayaran Gambar 20. Wireframe Pencarian Gambar 21. Wireframe Wishlist

12 Gambar 22. Wireframe Tentang Kami Gambar 23. Wireframe Home V. KESIMPULAN 1. Perancangan aplikasi e-commerce yang dibuat berdasarkan tahapan-tahapan yang terdapat dalam user experience design 2. Pengembangan yang dilakukan menggunakan tahapan uxd, dimana pengguna terlibat langsung dalam penentuan kebutuhan. Kebutuhan fitur dan konten didapatkan dari hasil persona berdasarkan needs atau goals. 3. Pengujian telah dilakukan menggunakan ISO , hasil pengujian yaitu banyak klausul yang sudah terpenuhi maka penelitian yang dilakukan dapat dikatakan berhasil berdasarkan syarat yang terdapat pada klausul 4,5 dan 6. PUSTAKA Afghan, dkk, 2014, Pengembangan Web E- Commerce Bojana Sari Menggunakan Metode Prototype, Jurnal Tugas Akhir, ac.id/pustaka/files/100143/jurnal_eproc/pen gembangan-web-e-commerce bojana-sarimenggunakan-metode-prototype.pdf APJII, 2014, Profil Pengguna Internet 2014, Puskakom, Hanif Al Fatta, 2007, Analisis Dan Perancangan Sistem Informasi Untuk Keunggulan Bersaing Perusahaan Dan Organisasi Modern, Andi, Yogyakarta. I Putu Agus, 2015, E-commerce E-Business dan Mobile Commerce : Bandung., Informatika.

13 Jacob Rossi, What Is User Experience Design? Overview, Tools And Resources [ /jacobrossi/] diakses pada tanggal 19 Juni 2016 Mira Kania S, dkk Perancangan Model User Interface untuk Website E-commerce Liliput Edu Toys dengan Metode Paper Prototyping. [ staka/files/100693/jurnal_eproc/perancangan -model-user-interface-untuk-website-ecommerce-liliput-edu-toys-dengan-metodepaper-prototyping.pdf] diakses pada tanggal 29 Juni 2016 Rudy, dkk (2010 Perancangan E-commerce Pada PT DAF. Jurnal ComTech Binus Vol.1 No.1 Juni Sandi, K, 2015, Perancangan Sistem E- Commerce Untuk Produk Pembuatan Kue, CSRID Journal, No.1, Vol 7, 55-65, [ /penelitian/penerbitan_jurnal/153perancanga n_sistem_ecommerce_untuk_produk_pembu atan_kue.pdf] diakses pada tanggal 11 Juli 2016 Wiryawan, M.B. (2011) User Experience (UX) Sebagai Bagian Dari Pemikiran Desain Dalam Pendidikan Tinggi Desain Komunikasi Visual. Jurnal Humaniora Binus Vol.2 No.2 Oktober Yudho Giri S, dkk Analisa Usability untuk mengetahui User Experience pada Aplikasi Berbasis Web. Konferensi Nasional Sistem dan Informatika [ 9/11/ knsi analisa-usabilityuntuk-mengetahui-user-experience-padaaplikasi-berbasis-web.pdf] diakses pada tanggal 19 Juni 2016.