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 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 laki-laki (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
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.
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 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:
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
1 User
User sebagai pengguna
Aplikasi e-commerce
untuk ladyfameshop
2 Admin
Actor yang bertugas
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
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.
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.
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 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 9. Penempatan Informasi Penting
Untuk penempatan informasi rinci
pengguna lebih menyukai pada bagian tengah. Rinci yang dimaksudkan mengenai penjelasan-penjelasan 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 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.
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 abu-abu. 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 INFORMASI TENTANG KAMI HUBUNGI KAMI SYARAT DAN KETENTUAN KEBIJAKAN DAN PRIVASI CUSTOMER CARE PANDUAN BELANJA KONFIRMASI PEMBAYARAN FAQ PENGEMBALIAN BARANG PENGIRIMAN KATALOG PRODUK ATASAN BAWAHAN DESKRIPSI PRODUK ZOOM OUT FILTER HARGA TERENDAH HARGA TERTINGGI PRODUK BARU BESTSELLER AKUN DAFTAR LOGIN PROFIL ALAMAT PESANAN LOGOUT PESANAN RETUR KERANJANG BELANJA PENGIRIMAN METODE PEMBAYARAN ALAMAT JASA PENGIRIMAN RINGKASAN PEMESANAN COD TRANSFER BNI WISHLIST TRACKING
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
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
Gambar 15. Wireframe Alamat
Gambar 16. Wireframe Deskripsi Produk
Gambar 18 Wireframe Keranjang Belanja
Gambar 19. Konfirmasi Pembayaran
Gambar 20. Wireframe Pencarian
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
E-Commerce Bojana Sari Menggunakan
Metode Prototype, Jurnal Tugas Akhir, https://repository.telkomuniversity.
ac.id/pustaka/files/100143/jurnal_eproc/pen
gembangan-web-e-commerce
bojana-sari-menggunakan-metode-prototype.pdf APJII, 2014, Profil Pengguna Internet 2014,
Puskakom,http://
www.slideshare.net/internetsehat/profil- pengguna-internet-indonesia-2014-riset-oleh-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-e- commerce-liliput-edu-toys-dengan-metode-paper-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 E-Commerce 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-usability-
untuk-mengetahui-user-experience-pada-aplikasi-berbasis-web.pdf] diakses pada
