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

Jurnal AMIK Serang Edisi Keempat Februari 2017

ISSN : 2477-2526

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 [email protected] 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 9241-210. Hasil pengujian menggunakan ISO 9241-210, 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


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 9241-210.. Rumusan masalah pada penelitian ini adalah sebagai berikut: a. Bagaimana cara mengembangkan aplikasi ecommerce untuk ladyfameshop menggunakan pendekatan user experience design? b. Bagaimana merancang aplikasi website ecommerce sebagai media penjualan yang dapat mempermudah penyampaian informasi dan transaksi? Tujuan dari penelitian ini adalah sebagai berikut:

ISSN : 2477-2526

a. Menerapkan pendekatan user experience design untuk merancang aplikasi ecommerce. 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.


ISSN : 2477-2526

Gambar 1: Linier Sequence Model Untuk menghasilkan sebuah fitur ecommerce 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 9241-210. Hasil dari ISO 9241-210 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:


ISSN : 2477-2526

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. 2.3.1 Use Case Diagram Actor : berupa orang atau sesuatu yang harus atau selalu berinteraksi dengan sistem yang dibangun.


Tabel 1. Actor pada Use Case No Aktor Deskripsi User sebagai pengguna 1 User Aplikasi e-commerce untuk ladyfameshop Actor yang bertugas dalam pengelolaan data 2 Admin member dan pengolahan data barang.

ISSN : 2477-2526

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 2.3.2 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.


ISSN : 2477-2526

Gambar 4. Activity Diagram Admin

Gambar 5. Activity Diagram User 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 18-25 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 6. Grafik Background Header Website Warna font yang digunakan pada aplikasi adalah warna hitam dengan kode #585858. 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.


ISSN : 2477-2526

Gambar 7. Grafik Warna Font Gambar 9. Penempatan Informasi Penting 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.

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 Gambar 10. Grafik Penempatan Gambar 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.

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.


ISSN : 2477-2526

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

KATALOG PRODUK ATASAN BAWAHAN

INFORMASI TENTANG KAMI HUBUNGI KAMI

DESKRIPSI PRODUK

SYARAT DAN KETENTUAN

ZOOM OUT

KEBIJAKAN DAN PRIVASI

FILTER

KERANJANG BELANJA

CUSTOMER CARE

PENCARIAN

PANDUAN BELANJA

KONFIRMASI PEMBAYARAN

WISHLIST PENGIRIMAN

TRACKING

AKUN DAFTAR

LOGIN ALAMAT PROFIL

FAQ

JASA PENGIRIMAN ALAMAT

PENGEMBALIAN BARANG

PENGIRIMAN

HARGA TERENDAH

RINGKASAN PEMESANAN METODE PEMBAYARAN TRANSFER BNI

PESANAN

PESANAN RETUR

HARGA TERTINGGI

COD

PRODUK BARU

LOGOUT

BESTSELLER

Gambar 13. Arsitektur Informasi 3.3 Desain Interaksi Desain interaksi adalah menggambarkan kemungkinan perilaku pengguna dan

mendefinisikan bagaimana sistem akan mengakomodasi dan menanggapi perilaku. Desain interaksi digambarkan dengan site map.


Site map adalah sesuatu yang menggambarkan tentang peta dari website, yaitu segala informasi

ISSN : 2477-2526

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. 14. 15. 15.1 15.2 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30.

Profil Alamat Pesanan Pesanan Retur Logout Customer Care Panduan Belanja Konfirmasi Pembayaran FAQ Pengembalian Barang Pengiriman Informasi Tentang kami Hubungi Kami Syarat dan ketentuan Kebijakan dan privasi Filter Pencarian Tracking


Gambar 15. Wireframe Alamat

Gambar 16. Wireframe Deskripsi Produk

Gambar 17. Wireframe Filter

ISSN : 2477-2526


Gambar 18 Wireframe Keranjang Belanja

Gambar 19. Konfirmasi Pembayaran

Gambar 20. Wireframe Pencarian

Gambar 21. Wireframe Wishlist

ISSN : 2477-2526


ISSN : 2477-2526

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 9241-210, 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 ECommerce Bojana Sari Menggunakan

Metode Prototype, Jurnal Tugas Akhir, https://repository.telkomuniversity. ac.id/pustaka/files/100143/jurnal_eproc/pen gembangan-web-e-commerce bojana-sarimenggunakan-metode-prototype.pdf APJII, 2014, Profil Pengguna Internet 2014, Puskakom,http:// www.slideshare.net/internetsehat/profilpengguna-internet-indonesia-2014-risetoleh-apjii-dan-puskakom-ui 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.


Jacob Rossi, 2010. What Is User Experience Design? Overview, Tools And Resources [https://www.smashingmagazine.com/author /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. [https://repository.telkomuniversity.ac.id/pu 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 2010. Sandi, K, 2015, Perancangan Sistem ECommerce Untuk Produk Pembuatan Kue, CSRID Journal, No.1, Vol 7, 55-65, [http://riset.potensi-utama.ac.id/upload /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 2011. Yudho Giri S, dkk Analisa Usability untuk mengetahui User Experience pada Aplikasi Berbasis Web. Konferensi Nasional Sistem dan Informatika 2008. [https://yudiagusta.files.wordpress.com/200 9/11/186-191-knsi08-033-analisa-usabilityuntuk-mengetahui-user-experience-padaaplikasi-berbasis-web.pdf] diakses pada tanggal 19 Juni 2016.

ISSN : 2477-2526

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

Recommend Documents