BAB V ULASAN KARYA PERANCANGAN A. Konsep Perancangan Domain Setelah melalui tahap kajian maka nama yang akan digunakan sebagai domain website duvet shop adalah www.myduvetshop.com Teknologi Menggunakan teknologi Content Management System (CMS) Peta Situs Home Bed Cover Sprei Bantal Promo Accessories Blog Media Sosial Facebook Twitter Delivery Order Jasa pengiriman Cash On Delivery (COD) 32
1. Sketsa Website Gambar 5.1 Sketsa Layout Home Sumber : Priyo Adi Pamuji, 2014 33
Gambar 5.2 Sketsa Layout Halaman Sumber : Priyo Adi Pamuji, 2014 34
2. Story Board No Kategori Keterangan 1 Home Menampilkan menu utama halaman depan website 2 Bed Cover Menampilkan aneka produk bed cover 3 Sprei Menampilkan aneka produk sprei 4 Bantal Menampilkan aneka produk bantal 5 Promo Menampilkan produk yang sedang diskon 6 Accessories Menampilkan produk lainnya 7 Blog Menampilkan artikel seputar produk duvet shop Gambar 5.3 Tabel Story Board 35
3. Site Map/Peta Situs Gambar 5.4 Tabel Site Map 36
Site Map www.myduvetshop.com Home Produk o Sprei o Bed Cover o Bantal Accessories o Gorden o Wallpaper o Mukena Blog o Blog o Facebook o Twitter About Us o Tentang Duvet Shop Contact Us o Alamat Toko dan No. Telp. 37
B. Karya Perancangan 1. Layout Gambar 5.5 Layout Website Sumber : www.myduvetshop.com, 2014 38
Pada gambar 5.5 diatas, penulis ingin menampilkan kesan minimalis dalam tampilan website duvet shop. Dapat diperhatikan pada halaman depan tampilan website bahwa warna dominan putih memberikan kesan yang simple dan pandangan yang bersih bagi pengunjung. Gambar 5.6 Layout Header Sumber : www.myduvetshop.com, 2014 Header Header memiliki tampilan navigasi sebagai berikut Logo Toko Mengklik pada logo ini akan mengarahkan pelanggan kembali ke halaman depan toko. Teks Selamat Datang Menyambut pengunjung dan memberikan mereka pilihan untuk login atau create a new account. Link Link pelanggan ke halaman depan, daftar belanja, akun saya, keranjang belanja, dan checkout. Return Jaminan barang dapat dikembalikan apabila terdapat kerusakan akibat produksi. 24 Jam Online Jaminan website toko akan aktif selama 24 jam untuk memberikan kenyamanan bagi konsumen. 39
Keranjang Belanja Menampilkan jumlah barang yang dibeli, dan harga total pesanan. Mengklik pada ikon ini akan menampilkan kotak drop-down yang berisi semua produk yang dimasukkan kedalam keranjang dan pilihan untuk lihat keranjang atau checkout. Kotak Pencarian Para pelanggan dapat mengetik dikotak pencarian untuk mencari produk dalam kategori produk toko. Gambar 5.7 Layout Kategori Sumber : www.myduvetshop.com, 2014 Kategori Kategori menampilkan produk yang ada pada toko online duvet shop, ketika kategori induk diklik maka akan menampilkan semua produk dalam kategori tersebut. Home Menampilkan menu utama halaman depan website Bed Cover Menampilkan aneka produk bed cover Sprei Menampilkan aneka produk sprei Bantal Menampilkan aneka produk bantal Promo Menampilkan produk yang sedang diskon Accessories Menampilkan produk lainnya Blog Menampilkan artikel seputar produk duvet shop 40
Slide Foto Konsep slideshow dalam website ini menampilkan spanduk atau banner beberapa produk pilihan dengan selingan gambar dalam tayangan slide. Setelah jangka waktu tertentu, satu banner akan bergeser ke banner berikutnya. Banner ditayangan slide ini berguna untuk menyoroti produk tertentu agar mudah diakses oleh pelanggan. Ketika banner diklik, pelanggan akan diarahkan ke produk pada halaman banner tersebut. Gambar 5.8 Layout Slide Foto Sumber : www.myduvetshop.com, 2014 41
Banner Banner bertujuan untuk menampilkan gambar pilihan yang akan dijadikan sebuah banner iklan. Gambar 5.9 Layout Banner Sumber : www.myduvetshop.com, 2014 Promo Toko menampilkan pilihan pada produk unggulan tertentu dan memberikan potongan harga sebagai promo. Gambar 5.10 Layout Promo Sumber : www.myduvetshop.com, 2014 42
Footer Footer tidak hanya terletak pada bagian bawah halaman depan toko, tapi disetiap halaman website duvet shop. Berguna untuk memilah halaman yang relevan bagi pelanggan. Gambar 5.11 Layout Footer Sumber : www.myduvetshop.com, 2014 43
Halaman Produk Gambar 5.12 Layout Halaman Produk Sumber : www.myduvetshop.com, 2014 Halaman produk dapat dibagi menjadi beberapa bagian sebagai berikut: Kategori, semua produk di toko akan disusun dalam kategori, link kategori disebelah kiri pada sisi halaman produk akan memungkinkan pelanggan untuk menelusuri produk lainnya berdasarkan kategori. Gambar Produk, gambar produk ditampilkan dibawah judul disebelah kiri bersama dengan gambar alternatif dari produk dibawahnya dalam kotak kecil. Ketika mengklik gambar utama akan memperluas gambar dalam jendela bagi pelanggan untuk melihatnya secara lebih rinci. Rincian Produk, kode produk, ketersediaan barang, dan harga yang ditampilkan sesuai untuk gambar produk. Beli/Keranjang, Pelanggan dapat memilih jumlah dan menambahkan produk kedalam keranjang wish list mereka atau membandingkan. Penilaian/Bagikan, dibawah keranjang belanja konsumen dapat menilai produk/berbagi produk diberbagai situs sosial media. Keterangan, area untuk memberikan penjelasan rinci tentang produk. Review, area bagi konsumen untuk menulis review pada produk. 44
Shopping Cart/Keranjang Belanja Setelah pelanggan menambah produk kedalam keranjang belanja, mereka dapat mengakses keranjang belanja di header di bawah keranjang belanja. Gambar 5.13 Layout Shopping Cart Sumber : www.myduvetshop.com, 2014 Keranjang Belanja memberikan gambaran produk yang dipilih dengan adanya kategori gambar, nama produk, model, kuantitas, harga per unit, dan total. Konsumen memiliki opsi untuk menambahkan kupon diskon atau voucher hadiah yang bisa didapatkan apabila telah mendaftarkan emailnya sebagai pelanggan website duvet shop, sebelum selesai. Klik tombol Lanjut Berbelanja maka konsumen akan kembali ke halaman depan toko. 45
Creating an Account/Membuat Akun Sebelum konsumen dapat terus memeriksa produk dari keranjang belanja, konsumen perlu untuk memilih create an account atau login ke akun mereka. Adapun cara untuk membuat akun baru adalah Header Create an Account Gambar 5.14 Layout Header Sumber : www.myduvetshop.com, 2014 Mengklik create an account di header kiri atas akan mengarahkan pelanggan ke halaman daftar akun. Rincian pribadi mengenai nama dan alamat serta telephone akan perlu untuk dilengkapi 46
Gambar 5.15 Layout Create an Account Sumber : www.myduvetshop.com, 2014 47
Checkout Setelah produk telah dimasukkan dalam keranjang belanja, konsumen dapat melanjutkan ke checkout untuk melakukan pembelian produk mereka. Halaman checkout dapat diakses di bagian header dari setiap halaman (dapat juga ditemukan dibawah kotak pencarian). Checkout konsumen adalah proses sederhana yang dapat diselesaikan dalam 6 (enam) langkah Gambar 5.16 Layout Checkout Sumber : www.myduvetshop.com, 2014 48
Langkah 1: Pilihan CheckOut Konsumen dapat login ke akun mereka atau mendaftar (seperti dijelaskan diatas). Langkah 2: Rincian Penagihan Rincian pribadi termasuk nama depan, nama belakang, email, dan telephone yang diisi kedalam formulir. Halaman ini juga memerlukan rincian alamat pelanggan. Langkah 3: Rincian Pengiriman Dalam rincian penagihan, konsumen dapat memeriksa kotak untuk menunukkan bahwa rincian pengiriman dan rincian penagihan sama. Hal ini akan menyebabkan konsumen melewatkan langkah ini kemetode pengiriman. Jika rincian pengiriman berbeda dari rincian tagihan konsumen dapat memasukan dalam bentuk informasi dibagian ini. Langkah 4: Cara Pengiriman Sebuah metode pengiriman yang dipilih disini. Sebuah kotak komentar disisipkan bagi pelanggan untuk menambah komentar tentang pesanan mereka. Langkah 5: Cara Pembayaran Pelanggan memilih metode pembayaran mereka disini dan dapat menambahkan komentar dikotak komentar Langkah 6: Konfirmasi Pesanan Pada langkah terakhir, konsumen akan melihat gambaran dari pembelian mereka, termasuk deskripsi produk, jumlah dan harga (dengan pengiriman). 49
2. Warna Duvet shop memiliki produk serta warna yang menjadi andalan dari setiap produknya, oleh sebab itu disini penulis hanya akan menerapkan unsur warna tersebut kedalam perancangan website agar lebih memperkuat image serta brand dari duvet shop itu sendiri. Gambar 5.17 Warna Layout Website Sumber : www.myduvetshop.com, 2014 Pemilihan warna dilakukan berdasarkan pilihan dari pemilik toko duvet shop, warna dominan yang diambil dari beberapa pilihan warna adalah warna merah muda dengan keterangan R:252, G:103, B: 169 warna ini dipilih karena dianggap dapat menggambarkan brand dari produk duvet shop. 50
3. Tipografi Pemilihan font yang tepat sangat diperlukan demi mempermudah keterbacaan navigasi web dan teks pada isi halaman website. Gambar 5.18 Tipografi Website Sumber : www.myduvetshop.com, 2014 Dalam hal ini penulis bersama pemilik usaha duvet shop akhirnya memutuskan untuk menggunakan font verdana karena memiliki keterbacaan yang jelas serta memiliki unsur yang minimalis. 51
4. Media Sosial Media sosial juga memiliki peranan penting dalam kegiatan promosi suatu produk ataupun badan usaha. Maka duvet shop juga akan menggunakan media sosial untuk melakukan pendekatan yang lebih untuk memberikan kepercayaan dimasyarakat. Gambar 5.19 Link Media Sosial Sumber : www.myduvetshop.com, 2014 52
C. Media Pendukung Ada beberapa media promosi cetak yang digunakan untuk membantu mempromosikan website duvet shop, diantaranya Gambar 5.20 Brosur Duvet Shop Sumber : Priyo Adi Pamuji, 2014 53
Ada dua bentuk brosur yang digunakan sebagai media promosi, dengan bentuk portrait dan landscape. Tujuannya selain untuk mencantumkan alamat toko duvet shop juga tercantum nama website duvet shop pada bagian bawah beserta alamat email. Ukuran yang digunakan adalah kertas A5 (14,8 cm x 21 cm) agar nyaman dipegang oleh konsumen serta font yang digunakan masih terbaca dengan jelas. Gambar 5.21 Brosur Duvet Shop Sumber : Priyo Adi Pamuji, 2014 54
Gambar 5.22 Banner Duvet Shop 55
Selain brosur media promosi lain yang digunakan adalah banner serta spanduk dengan ukuran yang lebih besar bertujuan untuk dapt menarik perhatian dari masyarakat yang sekiranya sedang melintas disekitar area toko duvet shop. Ukuran yang digunakan untuk banner adalah 80 cm x 180 cm, sedangkan untuk spanduknya 100 cm x 200 cm. Gambar 5.23 Spanduk Duvet Shop Sumber : Priyo Adi Pamuji, 2014 56
Media promosi katalog produk juga digunakan untuk memberikan informasi produk terbaru kepada konsumen. Ukuran yang digunakan adalah A4 (21 cm x 29,7 cm) Gambar 5.24 Katalog Produk Duvet Shop 57
D. Perincian Biaya :;<('(0"#,!="$"!"#$"% &"'("# )"*+",&"'("# -(./"0, 12'"/ D! G A A;@"=#,B;*"#E"#+"#!"#$%&'%#()%*% +,(-../... 0&%#1,2&*%1' +,(-../...!&'#*(!&2,21%3(4"5'#%& 6(+%#78%, 9"5:%& +,(6.. +,(6-/;.. B*2F(%@=,:"*$" <21*'#7(=()25%'# 0%>?# +,(@;./... B".;*"#,B*",1D A&21?& B. 9"5:%& +,(C;. +,(D./... E%*%327(!&2F?8 G. 9"5:%& +,(-/;.. +,(D./... H3I"&(J6 B 9"5:%& +,(6/... +,(@G/... A%##"& - K5 +,(-@;/... +,(-@;/... 4,%#F?8(A%$8F&2, - K5 +,(;;/... +,(;;/...!'#(4"#I?5 @. A?%> +,(6/... +,(D./... 4*'$8"& - 9"5:%& +,(6./... +,(6./... L?7 -. A?%> +,(-C/... +,(-C./... M2*"1(A?8?(0%5? @ A?%> +,(;/... +,(-./... B".;*"#,1D 4"N%(!%&*'1' - A?%> +,(GO./... +,(GO./... 12'"/ 1;*<=/"#+,>,?.4"',3"'(@,A;/"4"#,B(/(0,&"'(,3=<(,C=.",3"'(@,3(4="0 +,(@6-/;.. +,(@;./... +,(;OG/... +,(GO./... 34,567876799 Gambar 5.25 Perincian Biaya Perancangan Pameran TA Sumber : Priyo Adi Pamuji, 2014 58
E. Pameran Tugas Akhir Pada tanggal 5 dan 6 Juli 2014 diadakan pameran tugas akhir di Atrium Universitas Mercu Buana. Dengan mengambil konsep miniatur toko duvet shop, yang dilengkapi dengan stand untuk menampilkan koleksi sprei dan bed cover duvet shop. Berikut adalah liputan foto dekorasi stan pameran Gambar 5.26 Stan Pameran Tampak Depan Sumber : Priyo Adi Pamuji, 2014 59
Gambar 5.27 Stan Pameran Media Promosi Sumber : Priyo Adi Pamuji, 2014 60
Gambar 5.28 Stan Pameran Tampak Samping Sumber : Priyo Adi Pamuji, 2014 61
Gambar 5.29 Bersama Rekan Didepan Stan Pameran Sumber : Priyo Adi Pamuji, 2014 62
F. Kesimpulan dan Saran 1. Kesimpulan Dalam perancangan website toko duvet shop sebagai media informasi online terdapat beberapa hal yang perlu diperhatikan yaitu: a. Website merupakan media informasi yang bersifat online dimana diperlukan koneksi internet untuk dapat melihat dan melakukan akses didalamnya b. Website toko duvet shop bersifat dinamis, dimana setiap materi didalamnya akan selalu mendapatkan perubahan sesuai dengan produk yang dipasarkan. c. Website toko duvet shop juga bersifat responsif sehingga dapat diakses disetiap perangkat seperti komputer desktop, laptop, gagdet smartphone maupun tablet. d. Selain sebagai media informasi, konsumen juga dapat melakukan sistem belanja secara online dengan mengikuti tahapan yang telah diberikan. e. Konsumen juga dapat menghubungi pihak duvet shop baik secara langsung melalui datang ketoko ataupun melalui media email dan telephone yang telah tercantum pada website. 2. Saran Dalam perancangan media informasi online berupa website ini, diharapkan dapat membantu mahasiswa lain dalam merancang sebuah website untuk keperluan online shopping. Selain itu juga sebelum merancang sesuatu diharapkan memahami selain ilmu dasar perancangan, tetapi semua aspek yang dibutuhkan dalam perancangan. 63