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
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.
Menu Kritik dan saran
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, email dan kritik ataupun saran yang dibuat oleh customer.
68
METRICINDO
Home
Profile
Our Services
Contact
Head Gambar
WELCOME TO OUR SITE
Download Body
Copyright Footer
Gambar 4.2 Rancangan Halaman Profile
Kritik dan Saran
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
Home
Profile
Header
Our
Contact
Services Gambar
Our Services
Our Product
Body simulasi
Copyright
Footer
Gambar 4.3 Rancangan Halaman Our Services
Kritik dan Saran
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
Home Header
Profile
Our
Contact
Services
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
Home
Profile
Our
Header
Contact
Services GAMBAR
Isi saran, kritik dan komentar anda Nama:
Body
xxx -15-xxx
Email:
[email protected]
Pesan:
xxx-140-xxxx
simpan
Copyright Footer
Gambar 4.5 Halaman Kritik dan Saran
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 emarketing.
METRICINDO
Home
Profile
Header
Our
Contact
Services
Kritik dan saran
GAMBAR
Body
Jenis barang xxx
99
999.999.999
Jenis barang xxx
99
999.999.999
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
Home Header
Profile
Our
Contact
Services GAMBAR
Product Gambar
Code : 9999 Name : xxxx-50-xxxx
Body
Description: xxx -50- xxxx Price: 999.999
Copyright Footer
Gambar 4.7 Rancangan Halaman Produk
Kritik dan saran
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
[email protected]
Komentar
xxx-140-xxx
Nama
xxx-14-xxx
Tanggal
dd-mm-yy
E-Mail
[email protected]
Komentar
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
Testimonial
Product
Partner
Header Gambar
Administrator Product Partner Testimonial Body
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
: xxx-15-xxx
Jenis
: xxx-10-xxx
Deskripsi
:
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
:
xxx-10-xxx
Deskripsi
:
Harga
:
Status
:
xxx-50-xxx
999.999.999
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 Clarimond
SELARAS,
yang
memiliki
seperti
website
kerjasama
pada
dengan
PT. 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 Product
Exploration
Adanya
list -Menyediakan
produk
informasi
dengan
produk
keterangan
lengkap
Commitment
Dissolution
-Menyesuaikan -Produk produk dengan sudah tidak
yang keinginan
dibutuhkan
customer
yang
-User
dapat
mendetail
memberikan
pada setiap
testimonial
produknya. Pricing
-Tertera
-Penawaran
harga fix
harga
-menyesuaikan
yang harga
bersaing
-Penawaran
sesuai harga yang
keinginan
lebih rendah
customer tanpa dari memotong
harga
produksi
biaya produksi Communication
-Company
-Yahoo
-Melakukan
-Tidak
Profile
Messenger
komunikasi
menanggapi
-Memasang
-Contact us
dengan
customer
banner
customer
yang
advertising
secara
serius
di
konsisten dan
perusahaan
menanggapi
lain
customer
tdak
secara cepat Community
-Yahoo
-Aktif
-Kedua
belah -Customer
Messenger
mengakses
pihak
saling tidak
-Facebook
Account Yahoo menjaga nama menghargai
-Twitter
milik perusahaan -Membuka Fan Pages/Group di facebook
Distribution
baik
kinerja perusahaan
83 -Pemberian
Branding
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
implementasikannya
waktu strategi
tertentu)
setelah
di
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 EMarketing pada PT. METRICINDO SELARAS.
•
Marketing Spend Mengevaluasi biaya yang dikeluarkan untuk implementasi Emarketing, 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.
87
4.5
Usecase Diagram
88
Gambar 4.15Usecasediagram pada PT. METRICINDO SELARAS
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
mitra
produk 1..* 1..1
-id_produk -nama -jenis -deskripsi -harga
1..*
-id_partner -nama_partner -link_web +menginput() +menghapus()
1..1 1..1 1..1
detil_produk
simulasi
-id_produk -nama -jenis -deskripsi -harga +mengupdate() +menghapus()
-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 in
L O G IN
A D M IN
M E N U
U T A M A
A D M IN
in p u tU s e r n a m e _ P a s s w o r d
c h e c k U s e rn a m e _ P a s s w o rd
v e r ifie 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 ta m a
Gambar 4.17 Sequence Diagram Admin
M ENU PRODUK
E D IT D A T A P R O D U K
PRODUK
A D M IN
M a s u k _ M e n u _ P ro d u k u p d a te D a ta _ P ro d u k s h o w D a ta _ P r o d u k d e le te D a ta _ P ro d u k s h o w D a ta _ P r o d u k
e d itD a ta _ P r o d u k
s h o w D a ta _ P ro d u k
Gambar 4.18 Sequence Diagram Produk
91
Gambar 4.19 Sequence Diagram Mitra
