4.2.2 USER DESIGN
4.2.2.6 DESAIN USER INTERFACE SISTEM INFORMASI E-CRM CV KARYA MANDIRI SEJAHTERA
a. USER INTERFACE HALAMAN UTAMA SISTEM INFORMASI E-CRM
Furniture kami
Pembelian
Servis
Buat Baru
Desain Interior
Kursi tamu Meja makan Meja rias Meja belajar
Home Profil Perusahaan Cara Transaksi Hubungi Kami
Banner Perusahaan
Promo Perusahaan
Login Registrasi
Copyright @2013 E-CRM
Gambar 4.75 USER INTERFACE halaman utama e-crm
Gambar 4.75 merupakan tampilan saat browser menampilkan URL dari sistem E-CRM. Tampilan tersebut merupakan halaman system sebelum dilakukan proses login ke dalam sistem.
b. USER INTERFACE FORM LOGIN SISTEM INFORMASI E-CRM
Email Password Enter Text Enter Text Submit LOGIN E-CRM
CV KARYA MANDIRI SEJAHTERA
Form login pada gambar 4.76, merupakan form yang harus diisi ketika pengguna telah melakukan registrasi dan ingin mengakses sistem sesuai hak akses yang dimilikinya.
c. USER INTERFACE FORM REGISTRASI SISTEM INFORMASI E-CRM
REGISTRASI E-CRM CV KARYA MANDIRI SEJAHTERA
NAMA DEPAN*
ID TWITTER ID FACEBOOK
DARI MANA ANDA MENDAPAT INFORMASI E-CRM INI? NOMOR HP* TELEPON* ALAMAT* EMAIL* TANGGAL LAHIR* TEMPAT* NAMA BELAKANG ID YM ID SKYPE PASSWORD* RE-PASSWORD* Enter Text Enter Text Enter Text Enter Text Enter Text Enter Text MM-DD-YY ALAMAT Enter Text Enter Text Media sosial Teman Search Engine Lainnya Enter Text Enter Text Enter Text Enter Text
Kolom yang bertanda (*) wajib diisi
Submit
Pengunjung yang belum memiliki hak akses terhadap sistem E-CRM, diharuskan untuk melakukan pendaftaran melalui form registrasi yang terdapat dalam sistem. Pada gambar 4.77, seluruh form diharapkan untuk diisi oleh pendaftar sebagai data pribadi perusahaan, sehingga memudahkan dalam berkomunikasi dan perancangan pemasaran perusahaan dan memberikan hak akses terhadap sistem bagi pendaftar.
d. USER INTERFACE DETAIL DATA BARANG SISTEM INFORMASI E-
CRM
Meja Makan Minimalis Harga Diskon Bahan 1800000 0 Jati Jawa Komen Barang Wagiyo Amir Keren! Mantap
Admin Bisa langsung di order sekarang
Enter Text Submit
Gambar 4.78 merupakan tampilan detail data barang. Detail data barang menyajikan tampilan barang yang lebih rinci dan memungkinkan pengguna untuk menyampaikan pesan ataupun komentar mengenai data barang tersebut.
e. USER INTERFACE LIHAT DATA BARANG OLEH MEMBER SISTEM
INFORMASI E-CRM
Kategori Semua Kategori
Pilih Barang yang Anda Inginkan!
Detail Pilih Barang Lemari Minimalis Rp 800,000 Detail Pilih Barang
Meja Makan Minimalis Rp 1,800,000
Detail Pilih Barang
Meja Rias Minimalis Rp 800,000 1 2 3 4 6 of 23 Detail Pilih Barang Dipan Minimalis Rp 1,200,000 Detail Pilih Barang
Meja Belajar Minimalis Rp 700,000 Detail Pilih Barang Buffet Minimalis Rp 900,000 BUY
Gambar 4.79 USER INTERFACE Lihat Data Barang
Tampilan lihat data barang di atas menampilkan data barang milik perusahaan yang dapat ditampilkan berdasarkan kategori yang dipilih oleh pengguna. Melalui tampilan ini pula pengguna dapat secara langsung untuk melihat detail barang dan juga memilihnya untuk dipesan.
f. USER INTERFACE PESAN BARANG SISTEM INFORMASI E-CRM
Form Pembelian Barang
2 1
Saya setuju dengan pembelian ini
Submit
Gambar 4.80 USER INTERFACE Form Pembelian Barang
Gambar 4.80 menampilkan formulir pembelian data barang. Barang yang telah dipilih dan ingin dibeli akan ditampilkan seperti gambar 4.80 di atas. Member hanya cukup memilih jumlah barang yang akan dibeli untuk selanjutnya dikirim datanya ke basisdata.
g. USER INTERFACE HUBUNGI KAMI SISTEM INFORMASI E-CRM
Pembelian
Servis
Buat Baru
Desain Interior
Home Profil Perusahaan Cara Transaksi Hubungi Kami Banner Perusahaan Login Registrasi Copyright @2013 E-CRM Hubungi Kami Nama Email Pesan Enter Text Enter Text Enter Text Enter More Text
Kontak Kami 021-xxx 08xxx Alamat Kami PUP blok AB 4 No 30 Pesan Udin
Gimana cara login?
Admin
Klik mene login yang diatas mas, tapi kalo belum registrasi, registrasi dulu aja
Submit
Gambar 4.81 USER INTERFACE hubungi kami
Fungsi komunikasi yang terdapat pada sistem, salah satunya adalah fungsi “hubungi kami”. Melalui fungsi ini, pengunjung yang tidak memiliki haks akses khusus terhadap sistem tetap berkomunikasi dengan sistem tanpa harus melakukan registrasi dan mendapatkan tanggapan dari admin maupun pengunjung lainnya.
h. USER INTERFACE MONITOR PEMBELIAN Monitor Pembelian Id Pesanan Tanggal Selesai Tanggal Produksi Total Biaya Status Pesanan Qty Nama Barang Alamat Pengiriman Tanggal Pesanan 000000298 21-04-2013 Ciputat
Meja Makan Minimalis 2
Kursi Tamu Minimalis 1
4950000 2-05-2013 7-05-2013 Belum Terkirim
Komen Pesan
Admin Maaf mas, pengiriman tidak bisa tepat waktu karena cuaca buruk
Enter Text Submit
Gambar 4.82 USER INTERFACE Monitor Pesanan
Member yang telah melakukan pesanan pada sistem dapat memonitor progress dari pesanannya melalui fungsi monitor pesanan. Pada tampilan gambar 4.82, terdapat kolom untuk menuliskan komentar terhadap pesanan yang anda buat. Sehingga komunikasi antara member dengan perusahaan lebih mudah dan lebih tertata dengan rapi.
i. USER INTERFACE FORM MANAJEMEN PEMASARAN SISTEM INFORMASI E-CRM
Manajemen Data Pemasaran
Judul Pemasaran ID Pemasaran Gambar Pemasaran Tanggal Selesai Tanggal Mulai Deskripsi Pemasaran Enter Text Enter Text Enter Text Enter Text
Enter Text Upload
Enter Text Enter More Text
Submit
Gambar 4.83 USER INTERFACE Manajemen Pemasaran
Gambar 4.83 merupakan tampilan sebuah form yang harus diisi oleh admin ketika ingin menyimpan data pemasaran yang nantinya akan ditampilkan oleh sistem. Adapun gambar yang harus diunggah ke dalam sistem merupakan banner dari promosi yang dilakukan oleh perusahaan.
j. USER INTERFACE KONFIRMASI PEMBAYARAN Konfirmasi Pembayaran Id Pesanan Total Biaya Tanggal bayar Rekening Pembayaran Jumlah Pembayaran Enter Text Enter Text Enter Text BNI Mandiri BCA Enter Text Submit
Gambar 4.84 USER INTERFACE Konfirmasi Pembayaran
Member yang ingin melakukan konfirmasi terhadap pembelian barang yang dia lakukan, diharuskan untuk mengisi data konfirmasi sesuai form pada gambar 4.84. member diharuskan mengisi data pembayaran sesuai dengan data sebenarnya atau data konfirmasi tersebut dihapus oleh admin.
k. USER INTERFACE KELOLA DATA PENGGUNA SISTEM INFORMASI E-CRM
KELOLA DATA PENGGUNA
Data Pengguna
1 2 3 4 10 of 4 Tambah Data Pengguna
Data Pengunjung
*) Klik id pengguna untuk detail pengguna
1 2 3 4 10 of 4
Gambar 4.85 USER INTERFACE kelola data pengguna
Tampilan pada gambar 4.85, menampilkan seluruh data pengunjung yang berkomunikasi dengan perusahaan melalui fungsi “hubungi kami” dan seluruh pengguna yang tercatat dalam sistem. Dalam tampilan tersebut juga terdapat tombol untuk menambah data pengguna serta tombol untuk menghapus data pengguna tersebut.
l. USER INTERFACE DETAIL PENGGUNA SISTEM INFORMASI E-CRM
Detail Data Pengguna
NAMA DEPAN* ID TWITTER ID FACEBOOK NOMOR HP* TELEPON* ALAMAT* EMAIL* TANGGAL LAHIR* TEMPAT* NAMA BELAKANG ID YM ID SKYPE PASSWORD* Bayu Budhi Baskoro muhammad bayuintifadha@gmail.com Kebumen Bekasi 08787xxxxxxxxxxxx 021-888xxxx @bayuintifadha null null
BAYU BUDHI BASKORO INFO WEB Lainnya
11-05-1991
STATUS Member
EDIT KEMBALI TINGKATAN CUST Utama
Gambar 4.86 USER INTERFACE detail data pengguna
Pada gambar 4.86, ketika kita meng-klik id pengguna yang dimiliki oleh pengguna maka akan muncul detail data pengguna tersebut. Pada gambar 4.86, detail data pengguna yang ditampilkan terdapat tombol untuk mengubah data pengguna tersebut dan juga tombol yang menghubungkan dengan URL penyedia layanan email untuk menghubungi pengguna secara khusus.
m. USER INTERFACE FORM INPUT DATA BARANG
Form Input Data Barang
Kategori Gambar Barang Jumlah Barang Bahan Nama Barang Id barang Harga Barang Diskon Barang Enter Text Enter Text Enter Text
Enter Text Upload
Jati Jawa Triplek 6mm dll Enter Text Enter Text Enter Text Submit
Gambar 4.87 USER INTERFACE Form input data barang
Admin yang ingin menambah data barang yang dimiliki perusahaan, dapat mengisi form input data barang seperti gambar 4.87. Admin wajib untuk mengisi seluruh data yang disajikan oleh form tersebut. Data yang telah lengkap kemudian akan disimpan dengan menekan tombol “submit” dalam gambar 4.87.
n. USER INTERFACE KELOLA DATA PESANAN
Kelola Data Pemesanan Tambah Pesanan
1 2 3 4 10 of 4
Gambar 4.88 USER INTERFACE kelola data pesanan
Gambar 4.88 merupakan tampilan pengelolaan data pesanan yang ditampilkan jika pengguna memiliki hak akses sebagai admin. Pada tampilan tersebut, admin dapat melakukan pengelolaan dengan menghapus data, melihat detail data, dan menambah data pesanan tersebut.
o. USER INTERFACE KELOLA BERITA
Gambar 4.89 menjelaskan mengenai tampilan dari formulir yang harus diisi oleh admin ketika ingin membuat berita. Formulir tersebut berisikan id berita, judul, tanggal, gambat, dan isi dari berita itu sendiri yang dapat diakses oleh admin, dan dapat ditampilkan di sistem untuk semua hak akses.
p. USER INTERFACE SUPPORT
Nama barang Jenis perawatan Pertayaan Jawaban Kursi tamu KL-T-3 Cat
Bagaimana agar cat tidak kusam?
Cari
Apakah jawaban kurang memuaskan? Silahkan isi pesan dibawah ini!
Pesan Enter Text
Enter More Text
Submit
Pesan
Bayu Mas, untuk barang KL-M-4, gan cara merawat kain sofanya?
Tampilan pada gambar 4.90, menjelaskan mengenai tampilan support
yang harus diisi oleh pelanggan ketika ingin mendapatkan informasi mengenai perawatan dan perbaikan sistem. dengan memasukkan memasukkan kriteria tertenttu maka sistem akan menampilkan informasi yang pelanggan butuhkan. Apabila informasi tidak tersedia, pelanggan juga dapat menulis pesan yang nantinya akan ditanggapi oleh admin melalui sistem.
q. USER INTERFACE FORM RETUR
Id pesanan
Pilih barang yang ingin di retur Batas garansi
Keluhan
Aksi yang dipilih
Enter Text Enter More Text Enter Text
Enter Text
Kursi tamu KL-$-T Lemari minimalis new york Meja makan patayat
Kemblikan Pebaiki
Submit
Gambar 4.91 User interfaceform retur
Gambar 4.91 merupakan tampilan dari formulir pengembalian barang yang harus diisi oleh pelanggan jika ingin mengembalikan barang. Untuk tanggapan dan tindak lanjut dari perusahaan, maka perusahaan akan menghubungi pelanggan untuk onfirmasi penjemputan barang.
r. USER INTERFACE LAPORAN
Penanggungjawab
Grafik Keuntungan Perusahaan
Bayu
Komentar Enter Text
Enter More Text
Cetak
Gambar 4.92 User interface laporan
Gambar 4.92 menerangkan tentang tampilan laporan yang disajikan oleh sstem mengenai laporan laba perusahaan. Laporan yang disertai komentar dari admin digunakan untuk nenjelaskan keadaan secara lebih jelas bagi pemilik.