BAB IV PERANCANGAN SISTEM

BAB IV PERANCANGAN SISTEM 4.1 Tahap IV: Crafting thecustomer Interface (Merancang hubungan antar muka pelanggan) Tahap ke IV ini adalah lanjutan dari tahap III yang ada di bab III. Pada tahap ini perancangan tampilan dari aplikasie-marketingakan dibuat berdasarkan kerangka kerja 7C 4.1.1 Context a) Functional Section Breakdown Pada bagian atas website terdapat menu-menu utama seperti: Home, Profile, Our Services, Contact dan Kritik dan Saran. Di bagian bagian contact terdapat online chat dengan menggunakan Yahoo Messenger, dan pengunjung web dapat melihat apakah Customer Service sedang online atau tidak. Lalu di bagian tengah merupakan isi dari website. Linking Structure Pada beberapa menu memiliki link structure di mana menu tersebut dapat diakses menuju ke halaman yang diinginkan. b) Aesthetic Criteria Website ini menggunakan sebagian besar warna hijau dan coklat dipadukan dengan warna putih untuk latar belakang halaman. Dan untuk warna tulisannya menggunakan warna putih dan hitam. Pemilihan jenis tulisan di website ini menggunakan jenis tulisan Arial, Helvetica, sans-serif. Ukuran tulisan rata-rata menggunakan ukuran 12 dan 14. 64

65 Logo/Nama Perusahaan Menu Home Menu Profile Menu Our Services Menu Contact Menu Kritik dan saran Head Multimedia Mix Gambar Konten kiri Inti website (240 karakter) Konten kanan Testi (140 karakter) Body Web Counter Copyright Footer Gambar 4.1 Rancangan Halaman Home.

66 Pada gambar di atas user interface pada bagian home di web ini di bagi tiga bagian yang pertama header, body dan footer. Di bagian atas header diisi oleh logo/nama perusahaan ini berfungsi untuk memudahkan user untuk mengetahui bahwa webini adalah website resmipt.metricindo dan bagian ini juga menentukan pola websiteini, kemudian di bawah logo/nama perusahaan terdapat Menu seperti home, profile, our services, contact terakhir kritik dan saran yang dapat memudahkan user untuk mencari informasi dan mengakses website ini dengan cara klik pada menu yang ingin digunakan kemudian halaman akan berubah sesuai pilihan user. Di bagian header juga terdapat konten multimedia mix yang membuat tampilan website ini menjadi menarik berupa gambar yang sama setiap page dan berfungsi untuk menggambarkan ciri dari perushaan ini yang terletak di bawah menu. Bagian body terbagi dua bagian yaitu konten kanan dan konten kiri dimana konten kiri menjelaskan tentang isi dari website ini, dimana isi dari website ini jumlah karakternya terbatas sekitar 240 karakter, di bagian konten kanan menampilkan beberapa testimonial sejumlah 140 karakter yang berasaldari customer yang telah menggunakan website ini dan akan berubah ketika ada testimonial lain masuk, testimonisal akan di sortir oleh admin sehingga dapat menghindari kata-kata yang kurang berkenan dan menghindari bot, juga customer diharuskan mengisi captcha sebelum mengisi testimonial di konten kanan tepatnya di bagian bawah terdapat web counter yang berfungsi untuk menghitung berapa banyak web ini dikunjungi sesuai IP. Terakhir di bagian web ini terdapat footer yang berisi hakcipta dari web ini.

67 4.1.2 Content Offering Mix Offering Mix pada website ini adalah konten yang tersedia pada website iniyaitucontoh produkcustom, simulasi perakitan, profil perusahaan, dan lain-lain yang semuanya berbentuk teks dan gambar Appeal Mix Appeal Mix websiteini adalah dengan menampilkan beberapa contoh produk, serta testimonial pada halaman home. Testimonial dapat mendukung penyebaran informasi yang disampaikan secara langsung oleh customer mengenai layanan yang mereka dapatkan Multimedia Mix Multimedia mix yang terdapat pada websiteini hanya sebatas teks, dan gambar. Penggunaan multimedia ini selain untuk menambah estetika website juga berfungsi melengkapi informasi mengenai produk. Content Type Berdasarkan dimensi content type, websiteini menyampaikan testimonial yang diberikan oleh user, yang menampilkan nama, e- mail dan kritik ataupun saran yang dibuat oleh customer.

68 METRICINDO Home Profile Our Services Contact Kritik dan Saran Head Gambar WELCOME TO OUR SITE Download Body Copyright Footer Gambar 4.2 Rancangan Halaman Profile

69 Pada halaman profile web ini menjelaskan tentang informasi secara keseluruhan tentang PT. METRICINDO SELARAS yang memudahkan user mengetahui secara jelas tentang informasi perusahaan ini, penjelasan tentang profil perusahaan ini karakternya tidak terbatas karena page ini tidak dapat dirubah oleh admin maupun costumer. Kemudian costumer dapat mendownloadcompany profile PT.METRICINDO SELARAS dengan mengklik button download yang tersedia di bagian bawah pada bagian body ini difungsikan agar lebih memudahkan costumer mengetahui profil PT. METRICINDO SELARAS. METRICINDO Header Home Profile Our Services Contact Kritik dan Saran Gambar Our Services Our Product Body simulasi Copyright Footer Gambar 4.3 Rancangan Halaman Our Services

70 Pada halaman our services tampilan dasar web masih sama tetapi dibedakan dari segi konten yang ada di bagian konten kiri terdapat penjelasan apa yang dikerjakan oleh PT.METRICINDO SELARAS dan dilengkapi oleh link simulasi perakitan yang dapat lansung diklik untuk memudahkan user mengetahui berapa biaya yang dibutuhkan untuk merakit produk sesuai dengan spesifikasi yang ditentukan oleh user sendiri. Kemudian di konten kanan terdapat our product yang tentunya berisi tentang produk yang diperjualbelikan yang juga dilengkapi dengan link yang langsung menampilkan gambar dari jenis produk tersebut. METRICINDO Header Home Profile Our Services Contact Kritik dan saran GAMBAR Contact us Cutomer Service Yahoo messenger Body Yahoo messenger Copyright Footer Gambar 4.4 Rancangan Halaman Contact

71 Di bagian ini user akan dijelaskan tentang kontak yang dapat dihubungi seperti nomor telepon office, fax beserta e-mail, dan di konten lainnya pada halaman ini terdapat customer service berbentuk messenger yang akan telihat jika sedang online yang memudahkan user untuk berkomunikasi dengan admin website ini. Messenger yang ada pada halaman contact ini terbagi oleh bagian produk dan website, sehingga costumer dapat menyampaikan informasi dengan tujuan yang jelas. METRICINDO Header Home Profile Our Services Contact Kritik dan saran GAMBAR Isi saran, kritik dan komentar anda Body Nama: Email: Pesan: xxx -15-xxx xxx@xxxx.com xxx-140-xxxx simpan Copyright Footer Gambar 4.5 Halaman Kritik dan Saran

72 Di halaman ini user dapat memberikan komentar, saran dan kritik dengan mengisi kolom yang tersedia dengan syarat yang telah di tentukan seperti di kolom nama user hanya dapat mengisi 15 karakter untuk nama. Setelah mengisi nama, e-mail dan pesan user dapat mengirim pesan tersebut dengan klik tombol simpan yang terdapat di bagian bawah konten tersebut. Ini berfungsi agar user merasa mudah untuk berkomunikasi dan bagi perusahaan ini merupakan feedback yang bagus untuk menunjang aplikasi e- marketing. METRICINDO Header Home Profile Our Services Contact Kritik dan saran GAMBAR Jenis barang xxx 99 999.999.999 Jenis barang xxx 99 999.999.999 Body Jenis barang xxx 99 999.999.999 Jenis barang xxx 99 999.999.999 999.999.999 Reset Copyright Footer Gambar 4.6 Rancangan Halaman Simulasi Perakitan

73 Pada halaman ini user yang mengklik submenu simulasi perakitan pada halaman our services akan ditampilkan form yang berisi beberapa jenis barang yang tersedia beserta kuantitinya dan harga per-satuannya, di sini user dapat memilih jenis barang yang ingin dirakit dan memasukan jumlah berapa yang diinginkan kemudian sistem akan mencetak harga yang ada di kolom harga sesuai jumlah yang dimasukan oleh user. Jenis barang dipilih melaui nama barang dan jumlah barang hanya terbatas sesuai yang tersedia di gudang. METRICINDO Header Home Profile Our Services Contact Kritik dan saran GAMBAR Body Product Gambar Code : 9999 Name : xxxx-50-xxxx Description: xxx -50- xxxx Price: 999.999 Footer Copyright Gambar 4.7 Rancangan Halaman Produk

74 Halaman ini menampilkan detail berbagai produk yang dipergunakan untuk perakitan lengkap dengan kode, nama dan harga barang, description pada kolom ini menjelaskan tentang sepsifikasi barang tersebut dan jumlah yang tersedia dari barang tersebut. 4.1.3 Community Melalui testimonial, PT. METRICINDO SELARAS berusaha untuk menjalin hubungan dengan para usernya sehingga mereka dapat melihat pendapat dari user lainnya terhadap setiap produk yang ditawarkan serta dapat memberikan pendapatnya sendiri. Testimonial Nama xxx-14-xxx Tanggal dd-mm-yy E-Mail xxx@xxxx.com Komentar xxx-140-xxx Nama Tanggal E-Mail Komentar xxx-14-xxx dd-mm-yy xxx@xxxx.com xxx-140-xxx Gambar 4.8 Isi Testimonial 4.1.4 Customization Customization pada website ini hanya dapat dilakukan pada halaman admin oleh seorang administrator. Dalam hal iniuser tidak diberi hak untuk mengubah tampilan website.

75 METRICINDO Header Testimonial Product Partner Gambar Body Administrator Product Partner Testimonial Copyright Footer Gambar 4.9 RancanganAdmin Control Panel Ini adalah halaman administrator yang hanya bisa diakses oleh admin, yang berkepntingan untuk input data, edit data dan menghapus data yang berasal dari database. Pada halaman unu terdapat dua buah menu yang dapat diklik yaitu product, testimonialdan partner.

76 Isi Data Produk Nama : Jenis : Deskripsi : xxx-15-xxx xxx-10-xxx xxxx-50-xxxxx Harga : 999.999.99 Nama file gambar: xxxx.xxx Status : xxx Keterangan kode status : ketik 1 = produk baru, 0 = produk lama Simpan Batal Data Produk ID NAMA PRODUK EDIT DELETE 9999 XXXX-15-XXXX EDIT DELETE 9999 XXXX-15-XXXX EDIT DELETE 9999 XXXX-15-XXXX EDIT DELETE 9999 XXXX-15-XXXX EDIT DELETE 9999 XXXX-15-XXXX EDIT DELETE 9999 XXXX-15-XXXX EDIT DELETE Gambar 4.10Rancangan Halaman productuntuk Admin.

77 Pada bagian ini terdapat nama produk yang dapat diisi dengan karakter yang terbatas hanya 15 karakter, kemudian jenis yang hanya 10 karakter dan deskripsi yang menjelaskan tentang spesifikasi produk hanya mampu menjangkau 50 karakter, kemudian kolom harga yang dapat diisi oleh admin sesuai yang telah ditentukan sebelumnya, kemudian terdapat nama file gambar di kolom ini admin dapat memasukan nama file gambar dalam format.jpg yang berguna untuk memunculkan gambar pada web METRICINDO, serta terdapat keterangan kode status barang, jika diketik 1 maka produk tersebut baru dan jika diketik 0 oleh admin produk tersebut adalah produk lama. Kemudian admin dapat menyimpan dan membatalkan perintah melalui button yang tersedia jika admin ingin menyimpan data maka admin klik button simpan jika ingin membatalkan admin dapat klik batal. Data yang disimpan akan tertera pada tabel yang terletak di bagian bawah halaman ini. Edit Data Produk Nama produk : xxx-15-xxx Jenis : Deskripsi : xxx-10-xxx xxx-50-xxx Harga : 999.999.999 Status : 0-1 Keterangan kode status : ketik 1 = produk baru, 0 = produk lama Nama file gambar : xxxxx.xxx Update Kembali Gambar 4.11RancanganHalaman Edit Productuntuk Admin

78 Di halaman ini admin dapat meng-update produk dengan mengisi kolomkolom yang tersedia dengan karakter yang ditentukan, dan tersedia button update yang berfungsi untuk menambahkan produk dan jika ingin kembali terdapat button kembali untuk kembali ke menu utama. Isi Data Mitra Nama Mitra : xxx-30-xxx Alamat Website : www.xxx-20-xxx.com Simpan Batal Daftar Mitra Bisnis ID Nama Mitra Bisnis Delete 99 xx.xxx-30-xxxxx Delete Gambar 4.12 Halaman View User untuk Admin Pada halaman ini admin dapat melakukan update daftar mitra bisnis dengan cara memasukan nama perushaan pada kolom yang disediakan dengan kriteria yang ditentukan, dan mengisi alamat website perusahaan yang ingin bekerja sama dengan PT.METRICINDO. Data yang disimpan akan tersimpan di database dengan tabel yang terletak di bawah halaman ini, dan akan muncul di halaman home untuk user. 4.1.5 Communication Communication pada website ini menggunakan dua jenis komunikasi yaitu broadcast (komunikasi satu arah) dan interactive (komunikasi dua arah). - Broadcast atau komunikasi satu arah Informasi mengenai promosi-promosi yang dilakukan oleh PT. METRICINDO SELARAS.

79 Testimonial yang merupakan respon atau tanggapan balik dari pengguna terhadap perusahaan. - Interactive atau komunikasi dua arah Interaksi yang dilakukan oleh website inimelalui yahoo messenger, dan Contact us yang dapat digunakan oleh pengunjung untuk menghubungi langsung bagian customer service dan bertanya mengenai masalah yang dihadapi oleh pengunjung website ini. 4.1.6 Connection Dimensi koneksi pada website ini terletak pada link yang terdapat pada website. Kumpulan link tersebut berfungsi sebagai penghubung antara halaman-halaman yang terdapat pada website, selain itu juga terdapat eksternal link, yaitu link yang menghubungkan website ini dengan website lainnya yang memiliki hubungan dengan website perusahaan. Gambar 4.13Link ke Website Partner 4.1.7 Commerce Pada dimensi commerce, secara spesifik website ini tidak melayani transaksi dalam bentuk apapun sehubungan dengan jenis dari layanan yang ditawarkan. Namun di websiteini customer bisa melakukan simulasi perakitan panel listrik, lengkap dengan total harganya dan untuk proses pembayarannya akan diinformasikan lebih lanjut oleh staff marketing.

80 4.2 Tahap V: Designing Marketing Program (Merancang Program Pemasaran) 4.2.1 Building Customer Relationship Terdapat 4 tahap dalam membangun hubungan antara perusahaan dengan user yaitu: Awareness Pada tahap ini akan dilakukan beberapa hal untuk membuat user mengetahui keberadaan websiteini dan mengunjungi website tersebut, antara lain: 1. Nama domain Websiteini akan menggunakan nama domain www.metricindo.web.id agar user mudah mengingatnya. 2. Logo perusahaan Logo yang akan digunakan dalam website sama dengan logo perusahaan PT. METRICINDO SELARAS 3. Pencantuman alamat web pada company profile Alamat web juga dicantumkan pada berbagai leaflet yang akan disebarluaskan pada user, baik individu maupun perusahaan. 4. Iklan pada media online Untuk menyebarluaskan keberadaan website ini, maka akan dilakukan pemasangan banner advertising pada websitewebsite lain yang sering dikunjungi oleh para customer dan memiliki target customer yang hampir sama dengan PT. METRICINDO SELARAS, seperti website pada PT. Clarimond yang memiliki kerjasama dengan PT. METRICINDO SELARAS. Exploration Web ini memberikan kesempatan kepada para customer untuk memperoleh informasi yang lebih lengkap mengenai produkproduk yang ditawarkan pada website perusahaan. Attraction Bagian yang menarik dari website ini adalah tampilannya yang sederhana namun menarik. Hal ini dapat dilihat dari penggunaan warna yang menarik untuk menampilkan penawaran-penawaran

81 terbaru dari perusahaan, serta penggunaan fasilitas online chatagar mempermudah customer berkomunikasi dengan Customer Service. Trust Dengan mencantumkan informasi mengenai perusahaan dengan jelas pada website perusahaan untuk meningkatkan kepercayaan customer terhadap website tersebut. Selain itu, produk-produk yang ditampilkan pada website tersebut juga sesuai dengan kenyataan dan tidak dimanipulasi. Satisfaction PT. METRICINDO SELARAS dapat mengetahui tingkat kepuasan customer melalui testimonial yang diberikan dan dari pertanyaan yang diajukan oleh customer melalui online chat dan juga contact us. Commitment Pada tahap ini, agar user berkunjung kembali ke websiteini maka website tersebut harus mudah diakses dan juga diupdate secara berkala baik itu informasi mengenai produk, gallery photo, maupun testimonial. Dissolution Customer dapat memutuskan hubungan dengan PT. METRICINDO SELARAS dengan cara berhenti mengunjungi website ini ketika produk-produk yang ditawarkan oleh perusahaan sudah tidak sesuai lagi dengan kebutuhan customer atau ketika customer telah menemukan produk lain yang lebih sesuai dengan keinginannnya.

82 4.2.2 Market Place Mix Awareness Exploration Commitment Dissolution Product Adanya list -Menyediakan -Menyesuaikan -Produk produk informasi produk dengan sudah tidak dengan produk yang keinginan dibutuhkan keterangan lengkap customer yang -User dapat mendetail pada setiap memberikan testimonial produknya. Pricing -Tertera harga fix Communication -Company Profile -Memasang banner advertising di perusahaan lain Community -Yahoo Messenger -Facebook -Twitter Distribution -Penawaran -menyesuaikan -Penawaran harga yang bersaing -Yahoo Messenger -Contact us -Aktif mengakses Account Yahoo milik perusahaan -Membuka Fan Pages/Group di facebook harga sesuai keinginan customer tanpa memotong biaya produksi -Melakukan komunikasi dengan customer secara konsisten dan menanggapi customer secara cepat -Kedua belah pihak saling menjaga nama baik harga yang lebih rendah dari harga produksi -Tidak menanggapi customer yang tdak serius -Customer tidak menghargai kinerja perusahaan

83 Branding -Pemberian logo perusahaan pada produk yang dihasilkan Table 4.1 Market Place Mix 4.3 Tahap VI: Leveraging Customer Information ( Mendapatkan Informasi Pelanggan Melalui Teknologi ) 4.3.1 Marketing Research Beberapa aspek yang dapat diambil untuk melakukan riset pemasaran antara lain: Page Counter Dengan adanya Page Counter ini perusahaan dapat mengetahui berapa banyak pengunjung situs ini Testimonial Pada menu Testimonial, Customer dapat memberikan komentar terhadap pelayanan yang ditawarkan. Dari sini, maka perusahaan ini dapat menganalisa feedback dari Customer sehingga dapat dijadikan sebagai referensi untuk perbaikan kualitas. 4.3.2 Database Marketing Produk Nama table: Produk Primary key: id Nama Field Tipe data Ukuran Field Deskripsi id int 11 Id order nama Varchar 50 Nama Produk jenis Varchar 50 Jenis Produk deskripsi text 50 Penjelasan tentang produk - produknya harga int 11 Harga dari

84 produk gambar text Nama gambar yang digunakan Table 4.2 Database Produk Testimonial Nama table: testimonial Primary key: Nama Field Tipe data Ukuran FIeld Deskripsi Nama Varchar 11 Nama customer E-mail Varchar 35 e-mail Customer Tanggal date 50 Tanggal dimana customer mengisi testimonial Pesan text 140 Pesan yang dibuat oleh customer Table 4.3 Database Testimonial Mitra Nama table: mitra Primary key: Nama Field Tipe data Ukuran FIeld Deskripsi Id int 5 Id mitra Nama Varchar 30 Nama mitra Link Varchar 30 Link dari web mitra yang sudah diinput Table 4.4Database Mitra 4.3.3 Customer Relationship Management

85 Untuk memfasilitasi hubungan dengan customer, website ini mengandalkan online customer support dengan online chat pada website. Penggunaan Email juga dimaksimalkan untuk memberikan informasi-informasi penting yang berguna bagi para calon customer ataupun customer aktif. Gambar 4.14Yahoo Messenger Pingbox. 4.4 Tahap VII: Evaluating Marketing Program( Mengevaluasi Program Pemasaran) 4.4.1 Customer Based Metrics Diukur berdasarkan jumlah pengunjung web yang mengunjungi situs ini. Hal ini untuk mencerminkan seberapa besar minat user yang ingin mencari produk dan memberikan testimonial. Dari sini dapat dilihat seberapa besar keberhasilan program pemasaran pada websiteini. 4.4.2 Financial Matrics Diukur dengan menggunakan tiga dimensi yaitu sales, revenue dan marketing spend : Sales

86 Untuk dimensi ini, dapat dilakukan pengukuran pada jumlah penjualan (dalam waktu tertentu) setelah di implementasikannya strategi E-Marketing. Hasil dari penjualan ini dapat dijadikan tolak ukur berhasil atau tidaknya strategi E-Marketing yang diimplementasikan. Revenue Jika terjadi peningkatan pada penjualan maka akan terjadi peningkatan pada pendapatan. Hal ini juga dapat menjadi tolak ukur untuk melihat seberapa berhasil implementasi E- Marketing pada PT. METRICINDO SELARAS. Marketing Spend Mengevaluasi biaya yang dikeluarkan untuk implementasi E- marketing, dan dibandingkan dengan pendapatan. Setelah dilakukan perbandingan maka dapat dilihat tingkat efektivitas dari E-Marketing yang diimplementasikan. 4.4.3 Implementation Matrics Untuk mengetahui performa implementasi situs web ini digunakan metode observasi berdasarkan page counterdata pengunjung, yang dilihat dari seberapa sering customer mengunjungi situs web.

4.5 Usecase Diagram 87

Gambar 4.15Usecasediagram pada PT. METRICINDO SELARAS 88

89 Gambar 4.15 menjelaskan struktur Usecase Diagram pada PT. METRICINDO SELARAS. Actor pada Usecase diagram ini adalah admin, karena sistem ini digunakan oleh admin untukupdatedatabase. 4.6 Class Diagram 1..1 admin -id_admin -nama -e-mail +mengupdate() +menghapus() +melihat() 1..1 1..* produk -id_produk -nama -jenis -deskripsi -harga 1..* mitra -id_partner -nama_partner -link_web +menginput() +menghapus() 1..1 1..1 1..1 1..1 detil_produk -id_produk -nama -jenis -deskripsi -harga +mengupdate() +menghapus() simulasi -nama_barang -harga_barang Gambar 4.16 Class Diagram Gambar 4.16 menjelaskan struktur Class Diagram pada PT. METRICINDO SELARAS dibagi menjadi lima class yaitu Admin, Produk, detil_produk, mitra dan simulasi.

90 4.7 Sequence Diagram M e n u L o g i n L O G I N A D M I N M E N U U T A M A A D M I N i n p u t U s e r n a m e _ P a s s w o r d c h e c k U s e r n a m e _ P a s s w o r d v e r i f i e d U s e r n a m e _ P a s s w o r d s h o w M e n u U t a m a Gambar 4.17 Sequence Diagram Admin M E N U P R O D U K E D IT D A T A P R O D U K P R O D U K A D M IN M a s uk _ M en u _ P ro d uk up d a te D a ta _ P ro d u k showd ata _ Produk d e le te D a ta _ P ro d uk showd ata _ Produk editd ata _Produk show Data _ Produk Gambar 4.18 Sequence Diagram Produk

Gambar 4.19 Sequence Diagram Mitra 91