BAB 4 PERANCANGAN. 4.1 Hasil Kesimpulan Wawancara Perancangan CRM Berbasis Web

(1)

BAB 4 PERANCANGAN

4.1 Hasil Kesimpulan Wawancara Perancangan CRM Berbasis Web

Pada sub bab ini akan dibahas mengenai perancangan tampilan (interface) website CRM PT.

Armada Samudra Persada dengan kerangka 7’C elemen desain situs web yaitu context, content, community, customization, communication, connection, dan commerce. Dari hasil kesimpulan wawancara dengan pihak PT. Armada Samudra Persada, perusahaan akan menggunakan lima elemen (5’C) dari tujuh eleman (7’C) elemen desain situs web yang ada.

Hasil kesimpulan penggunaan 5’C ini disesuaikan dengan kebutuhan dan kemampuan PT.

Armada Samudra Persada. Berikut ini adalah uraiannya:

• Context

Context dalam situs merupakan gambaran tampilan fungsional dari sebuah situs meliputi nilai estetika yang ada dalam situs tersebut. Halaman situs PT. Armada Samudra Persada menggunakan warna dasar atau latar belakang putih pada setiap halamannya, penggunaan warna putih dimaksudkan agar pengguna dapat lebih mudah dalam melihat gambar dan navigasi selain itu tampilan dikombinasikan dengan warna biru mudah untuk memberikan kesan santai, serta ada beberapa warna khusus seperti warna ungu dan kuning keemasan merupakan warna yang sudah menjadi “image” PT. Armada Samudra Persada selama. Peletakan menu navigasi pada setiap halaman pun konsisten dan mudah dilihat dan digunakan oleh pengguna, baik pengguna baru maupun lama selain itu pengunjung juga dimudahkan dengan adanya pemilihan penggunaan bahasa, terdapat dua plihan bahasa yaitu Indonesia dan Inggris

95

(2)

• Content

Isi dapat ditegaskan dengan semua hal-hal yang sifatnya digital dalam sebuah website, media yang digunakan antara lain teks, video, audio, dan gambar atau grafik. Pada perancangan website CRM PT. Armada Samudra Persada, media yang digunakan antara lain teks dan gambar, penggunaan video dan audio tidak diperlukan dalam perancangan website ini, rancangan desain CRM ini lebih memfokuskan pada konten-konten yang memiliki manfaat bagi pengunjung (khususnya pelanggan PT. Armada Samudra Persada).

Disini disediakan fitur-fitur mengenai daftar detail kapal yang dimiliki perusahaan, pemesanan kapal, history penggunaan jasa, fitur komunikasi dua arah dengan pihak perusahaan, link-link berita terkini, terhubung dengan situs-situs terkait yang menarik dan bermanfaat, testimonial, informasi mengenai perusahaan, informasi mengenai kontak dengan perusahaan dan FAQ.

• Community

Community atau komunitas merupakan wadah interaksi antara sesama pengguna situs yang memiliki ketertarikan yang sama yang terjadi karena kesamaan minat atau hobi.

Berdasarkan hasil wawancara dengan pihak perusahaan, community tidak dibutuhkan pada website CRM PT. Armada Samudra Persada ini, karena perusahaan lebih mengutamakan adanya interaksi antara pengguna situs dengan perusahaan.

• Customization

Pelanggan dapat melakukan personalisasi didalam website CRM, seperti halnya dapat merubah sandi (password), ubah profil pribadi, ubah ukuran dan ketebalan penulisan dalam fitur kotak pesan, menambahkan lampiran didalam perpesanan (message) dan melihat detail historis pemesanan kapal. Personalisasi tersebut dapat dengan mudah

(3)

dilakukan oleh pengguna, dengan adanya simbol-simbol atau penjelasan yang mudah dimengerti.

• Communication

Didalam website CRM ini, disediakan fitur komunikasi berupa adanya menu hubungin kami yang didalamnya terdapat informasi mengenai alamat perusahaan, nomor telepon, fax dan email perusahaan. Selain itu disediakan juga fitur komunikasi dua arah antara perusahaan dengan pelanggan atau sebaliknya, yaitu dengan kotak pesan atau live chat.

Melalui live chat pengguna dapat mengajukan pertanyaan tentang jasa layanan yg ditawarkan perusahaan, konsultasi mengenai cara pemesanan kapal, prosedur yang harus dipenuhi, tata cara pembayaran dan lain sebagainya. Untuk kotak pesan lebih banyak digunakan untuk mengirim dokumen-dokumen seperti surat penawaran, surat penagihan serta untuk mengirim ucapan selamat ulang tahun atau hari perayaan besar dari perusahaan ke pelanggan.

• Connection

Connection atau koneksi merupakan kemampuan suatu situs berhubungan dengan situs yang lain melalui hyperlink. Website CRM pada PT. Armada Samudra Persada memiliki hubungan dengan situs lain yang dapat memberikan informasi, berita yang menarik dan bermanfaat bagi pelanggan, situs lain yang terhubung dengan website seperti situs Pelabuhan Indonesia, Indonesian Maritime News dan Biro Klasifikasi Kapal.

• Commerce

Commerce merupakan bagaimana suatu situs memiliki kapasitas transaksi atau pembayaran di dalamnya. Berdasarkan dari hasil wawancara dengan pihak perusahaan disimpulkan bahawa fasilitas commerce belum diperlukan perusahaan untuk saat ini.

(4)

Kegiatan yang dapat dilakukan dalam situs PT. Armada Samudra Persada ini hanya sebatas pemesanan kapal oleh para member atau pelanggan yang telah mendaftarkan diri ke situs web PT. Armada Samudra Persada saja, namun untuk pemnbayarannya masih dilakukan diluar situs web ini.

4.2 Proses Bisnis CRM Berbasis Web (e-CRM)

Gambar 4.1 Proses Bisnis CRM Bebasis Web (e-CRM) Sumber : Penulis

Penjelasaan:

1. User dapat mendapatkan informasi yang dibutuhkan dan diharapkan melalui website CRM tanpa dibatasi ruang dan waktu, dapat diakses kapan pun dan

(5)

dimana pun (perusahaan memberikan kesempatan self service dalam hal informasi kepada user). Selain itu user pun dapat berkomunikasi langsung dengan pihak perusahaan baik secara real time melalui live chat atau pun melalui pesan (message).

2. Informasi yang terdapat pada website crm perusahaan dipantau dan diupdate oleh administrator.

3. Administrator berhubungan dengan bagian operasional untuk mendapat informasi lapangan/operasional kapal.

Tabel 4.1 Fitur-Fitur Pada Webiste CRM

Fitur-Fitur Yang Ada Pada Website CRM (e-CRM) PT.Armada Samudra Persada

Fitur-Fitur Keterangan Tentang Kami Menyediakan sekilas profile perusahaan, visi dan misi

perusahaan

Kapal Kami Berisi tentang infromasi kapal-kapal yang dimiliki perusahaan

Hubungi Kami Menyediakan informasi kontak perusahaan, meliputi alamat, telepon, fax, email

FAQ Menampilkan pertanyaaan-pertanyaan umum yang sering ditanyakan beserta jawabannya

Testimonial Menampilakan pesan atau kesan dari para pelanggan yang sudah menggunakan jasa perusahaan

Berita dan Artikel Berisi berita-berita terkini yang berkaitan dengan industri perkapalan serta jasa yang ditawarkan perusahaan

Link-Link Terkait Menampilkan link-link terkait yang terhubung dengan

(6)

website perusahaan, link-link terkait tersebut seperti link ke situs Pelabuhan Indonesia, Maritim News dan BKI

Registrasi Untuk melakukan pendaftaran secara online agar dapat memanfaatkan fasilitas CRM pada website perusahaan Live Chat Menghubungkan komunikasi dua arah secara realtime,

antara pelanggan dengan perusahaan

Search Mempermudah pengunjung mencari informasi yang

diinginkan

Login Untuk masuk ke website CRM perusahaan dan

mendapatkan fasilitas lebih dari website ini

Akun Saya Berisi informasi tentang user atau pelanggan yang sudah melakukan pendaftaran

Pemesanan Kapal Memungkinkan user atau pelanggan untuk mengecek ketersediaan kapal dan apabila kapal tersedia maka user dapat melakukan pemesanan kapal

Histori Pemesanan Kapal User atau pelanggan dapat melihat histori pemesanan kapal yang sudah pernah dilakukannya, terdapat fasilitas tracking dimana user atau pelanggan dapat mengetahui status muatan barang

Kotak Pesan User atau pelanggan dapat mengirim pesan atau dokumen kepada perusahaan begitu juga sebaliknya perusahaan dapat mengirim pesan atau dokumen ke pelanggan. Kotak pesan juga digunakan perusahaan untuk mengirimkan pesan ucapan selamat ulang tahun atau perayaan hari besar

Sumber : Kesimpulan Hasil Wawancara Penulis

(7)

4.3 Site Map User

Berikut ini Site map user website Customer Relationship Management pada PT. Armada Samudra Persada :

1. Peta Situs User Sebelum Login

Gambar 4.2 Peta Situs Sebelum Login Sumber : Penulis

(8)

2. Peta Situs Sesudah Login

Gambar 4.3 Peta Situs Setelah Login Sumber : Penulis

(9)

4.4 Rancangan Layar User

4.4.1 Rancangan Layar User Sebelum Login 1. Rancangan Layar Halaman Utama

PT. ARMADA SAMUDRA PERSADA

ENGLISH

IND ONESIA Ca ri

Te nta ng K a mi FA Q B er ita &

A rt ik e l

Te st im onial Re gistr as i

Ga m bar

Link-Link Terk ait

- xxxxxxxxxxxxxxx

Id P engguna :

Sandi :

Ma suk

Lupa Sandi ?, klik disini Se nin, dd-mm-y yyy

Statistik Situs

Online

Online Chat Dengan Ka mi

C opyrigh t @ 2011 PT. A rm ada Samu dra Persad a Ka pa l

Ka m i

H ubungi Ka m i

Gambar

H a la m an U tam a

Tenta ng Ka mi

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx Bac a Se len gk ap n ya. ..

Selam at Dat ang Di Website PT . Armad a Sam ud ra Persada

Tota l Pegunjung :

Diliha t : xxxxx

xxxxx

Gambar 4.4 Rancangan Layar Halaman Utama Sumber : Penulis

Halaman ini merupakan tampilan awal dari website CRM PT. Armada Samudra Persada, pada halaman ini terdapat ucapan selamat datang dari PT. Armada Samudra Persada yang ditujukan kepada user yang membuka halaman website, terdapat statistik situs, link-link

(10)

terkait, live chat, menu untuk login, serta menu-menu utama seperti tentang kami, kapal kami, hubungi kami, FAQ, berita dan artikel, testimonial dan registrasi.

2. Rancangan Layar Tentang Kami

ENGLISH

Ka pa l Ka m i

Hubungi

Ka m i FA Q B er ita &

A rt ik e l

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Statistik Situs

Online

Online Chat Dengan Ka mi Vis i :

C opyrigh t @ 2011 PT. A rm ada Samu dra Persad a H a la m an

U tam a

Te nta ng K a mi

Te ntang PT. A rm ada Sa mudr a Pe r sa da

Mis i :

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxx

Ga mb ar

Id P engguna :

Gambar 4.5 Rancangan Layar Tentang Kami Sumber : Penulis

Pada halaman ini penjelasan mengenai PT. Armada Samudra Persada, disini dijelaskan sekilas tentang profile PT. Armada Samudra Persada serta visi dan misi perusahaan.

(11)

3. Rancangan Layar Kapal Kami

ENGLISH

IND ONESIA Cari

Te nta ng K a mi Re gistr as i

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Lupa Sandi ?, klik disini Senin, dd-m m-yy

Statistik Situs

Online

C opyrigh t @ 2011 PT. A rm ada Samu dra Persad a H ala ma n

Uta m a

H ubungi

Ka m i FA Q B er ita &

A rt ik e l

Te st im onial

B ar ge/Tongka ng (Klik unt uk det ail spe sifik as i) :

N ama Kap al

N ama Kap al N ama Kap al N ama Kap al

Tugboa t (K lik unt uk det ail spe sifik as i) : N ama Kap al

Nama Ka pal N ama Kap al N ama Kap al N ama Kap al K apa l K a mi

Total Pegunjung :

D ilihat : xxxxx

xxxxx

Id P engguna :

Gambar 4.6 Rancangan Layar Kapal Kami Sumber : Penulis

Halaman ini berisi list nama-nama kapal yang dimiliki oleh PT. Armada Samudra Persada yang dibagi dalam dua bagian yaitu barge/tongkang dan tugboat. Untuk mengetahui spesifikasi kapal dapat dilakukan dengan mengklik nama kapal, setelah itu akan muncul tampilan detail spesifikasi kapal seperti dibawah ini :

(12)

ENGLISH

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Lupa Sandi ?, klik disini Senin,dd-m m-yyyy

Statistik Situs

Online

Uta m a

H ubungi

Ka m i FA Q B er ita &

A rt ik e l

Te st im onial

De ta il Spe s if ik a si Ba rge /Tongka ng : K apa l K a mi

N ama Kapal – 300 feet

Je nis Ka pal : Kl lasifikasi :

Be ndera :

Tahu n d ibang un : Pa njang :

Lebar :

Deadwe ight : Ka pasitas Karg o :

xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx

xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxx

xxxxxxxxxx Gross Tonn age : xxxxxxxxxxx

Net Tonnag e :

xxxxxxxxxxx Total Pegunjung :

xxxxx

Gambar ^IdP engguna :

Gambar 4.7 Rancangan Layar Detail Spesifikasi Barge/Tongkang Sumber : Penulis

Halaman ini akan mucul setelah mengklik nama kapal barge/tongkang, dimana di halaman ini ditampilan informasi mengenai detail kapal barge/tongkang seperti tipe kapal, status klasifikasi kapal, kapal berbendera apa, tahun kapal dibangun, panjang kapal dan lebar kapal dalam satuan meter, gross tonnage dan net tonagge yang menyatakan besar kapasitas volume dalam ruang muat kapal, deadweight (berat kepala secara keseluruhan) dan kapasitas kargo.

(13)

ENGLISH

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Statistik Situs

Online

Uta m a

H ubungi

Ka m i FA Q B er ita &

A rt ik e l

Te st im onial

De ta il S pe s if ik a si Tugboat : K apa l K a mi

N ama Kapal

Je nis Ka pal : Kl lasifikasi :

Be ndera :

Tahu n d ibang un : Pa njang :

Lebar :

Je nis Me si n : Ka pasitas Tangki :

xxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxxx

xxxxxxxxx xxxxxxxxxx xxxxxxxxxx

xxxxxxxxxx Gross Tonn age : xxxxxxxxxx

Net Tonnag e :

xxxxxxxxx

Ke ce patan : xxxxxxxxxx

xxxxx

Gambar ^IdP engguna :

Gambar 4.8 Rancangan Layar Detail Spesifikasi Tug Boat Sumber : Penulis

Pada halaman ini user/pengguna dapat melihat detail sepesifikasi kapal tugboat, detail spesifikasi tugboat dan barge/tongkang pada umumnya sama namun pada halaman detail spesifikasi tugboat ini terdapat beberapa perbedaan yaitu adanya penjelasan mengenai jenis mesin, kapasitas tangki dan kecepatan kapal.

(14)

4. Rancangan layar Hubungi Kami

ENGLISH

INDONESIA Cari

Tentang Kami

FAQ Berita &

Artikel Testimonial Registrasi

Gambar

Link-Link Ter kait

- xxxxxxxxxxxxxxx

Sandi :

Masuk

Lupa Sandi ?, klik dis ini Senin, dd-mm-yy yy

Statistik Situs

Online

Online Chat De ngan Kam i

Co pyrigh t @ 2011 PT. A rm ada Sam udra Persada Halaman

Utama

Kapal Kami

Hubungi Kami

Hubungin Kami:

PT. Armada Samudr a Per sada

Alamat : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Fax : Te lepo n :

Email :

xxxxxxxxxxxxxx

xxxxxxxxxxxxxx xxxxxxxxxxxxxx

Dilihat : xxxxx

xxxxx

Id Pengguna:

Gambar

Gambar 4.9 Rancangan Layar Hubungi Kami Sumber : Penulis

Pada halaman hubungi kami, terdapat informasi mengenai alamat, nomor telepon, fax dan email PT. Armada Samudra Persada.

(15)

5. Rancangan Layar FAQ

Gambar 4.10 Rancangan Layar FAQ Sumber : Penulis

Pada halaman FAQ (Frequently Ask Question) akan ditampilkan pertanyaan- pertanyaan yang sering ditanyakan oleh para pengguna jasa PT. Armada Samudra Persada disertai dengan jawabannya.

(16)

6. Rancangan Layar Berita dan Artikel

ENGLISH

IND ONESIA Ca ri ASP Google

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Statistik Situs

Online

Uta m a

H ubungin

Ka m i FA Q B er ita &

A rt ik e l

B e rita da n Ar tike l

Te st im onial

dd-mm-yyyy Judul be rita atau artikel

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Selen gka pn ya

1 2 3 Total Pegunjung :

xxxxx

Id P engguna :

Gambar 4.11 Rancangan Layar Berita & Artikel Sumber : Penulis

Halaman ini menampilkan artikel dan berita-berita terkini terkait dibidang industri pelayaran serta bidang-bidang lain yang terkait dengan indutri pelayaran nasional.

(17)

7. Rancangan Layar Testimonial

ENGLISH

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Statistik Situs

Online

Uta m a

H ubungin

Ka m i FA Q B er ita &

A rt ik e l

Te stim onial

Te st im onial

Nama Pe lang gan

Nama Pe lang gan Nama Pe lang gan Nama Pe lang gan

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

1 2 3 Tota l Pegunjung :

xxxxx

Id P engguna :

Gambar 4.12 Rancangan Layar Testimonial Sumber : Penulis

Halaman ini menampilkan testimonial dari para pengguna jasa dari PT. Armada Samudra, isi testimonial ini berupa kesan yang didapatkan pengguna melalui pengalaman pengguna selama menggunakan jasa PT. Armada Samudra Persada.

(18)

8. Rancangan Layar Registrasi

ENGLISH

Te nta ng K a mi

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

Ma suk

Statistik Situs

Online

Uta m a

H ubungi

Ka m i FA Q B er ita &

A rt ik e l

Nama / Perus ahaan : Tanggal Lahir / Berdiri :

Al am at :

Telepon : Fax : Em ai l : Negara :

Registrasi Personal atau Perusahaa n

ID Pengguna & S andi

ID Pengguna : Sandi : Konfi rmas i S andi :

V erif ikas i

Verifi kasi : R Y 4 T 7 U

M as ukan K ode V erif ikas i

Kirim Hapus

Kot a :

xxxxx

Id P engguna :

Gambar 4.13 Rancangan Layar Registrasi Sumber : Penulis

Halaman ini adalah halaman registrasi dimana user dapat mendaftarkan diri untuk mendapatkan fasilitas-fasiltas pelayanan yang lebih melalui website PT. Armada Samudra Persada.

(19)

9. Rancangan Layar Lupa Sandi

ENGLISH IND ONESIA

Ga m bar

- xxxxxxxxxxxxxxx

Sandi :

ma s uk

Statistik Situs

Online

C opyrigh t @ 2011 PT. A rm ada Samu dra Persad a H a la m an

U tam a

H ubungin

Ka m i FA Q B er ita &

A rt ik e l

Lupa S andi ?

Te st im onial

ID Pe nggun a :

Email :

Ki ri m Bata l

Ka mi akan mengir im sandi ke email Anda

xxxxx

Id P engguna : Cari

Gambar 4.14 Rancangan Layar Lupa Sandi Sumber : Penulis

Pada halaman ini user yang lupa sandi (password) dapat memperoleh sandi baru dengan mengisi ID pengguna dan email. Sandi baru akan dikirimkan ke email user yang bersangkutan.

(20)

10. Rancangan Layar Live Chat

ENGLISH

IN DONESIA Ca ri

Te nta ng K a mi FA Q B er ita &

A rt ik e l

Ga m bar

- xxxxxxxxxxxxxxx

Na m a :

Sandi :

Login

Statistik Situs

Online

C opyrigh t @ 2011 PT. A rm ada Samu dra Persad a Ka pa l

Ka m i

H ubungi Ka m i H a la m an

U tam a

xxxxx

Gambar 4.15 Tampilan Live Chat Sumber : Penulis

Halaman ini adalah halaman live chat, dimana user dapat berkomunikasi langsung dengan pihak perusahaan melalui aplikasi Yahoo Messenger. User mengklik tombol online maka secara otomatis akan muncul jendela launch application.

OK Cancel

Remember my ch oice for ymsgr links Y ahoo! Messenger

YahooMessenger.exe

This link needs to be opened with application . Send to :

Launch Ap plicat io n X

(21)

4.4.2 Rancangan Layar User Setelah Login 1. Rancangan Layar Halaman Utama Setelah Login

ENGLISH

Tentang Kami FAQ Berita &

Art ikel Test imonial Registrasi

Selamat Datang, (nama / perusahaan)

Online

Online Chat Dengan Kami

C opyrigh t @ 2011 PT. A rm ada Samu dra Persad a Kapal

Kami

Hubungin Kami

Senin, dd-mm-yyyy

Akun Saya Pemesanan Kapal Histori Pemesanan Kapal Kotak Pesan

Gambar

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Halaman

Utama

Keluar

Link-Link Terkait - xxxxxxxxxxxxxxxxxx - xxxxxxxxxxxxxxxxxx

Gambar 4.16 Rancangan Layar Halaman Utama Setelah Login Sumber : Penulis

Berikut ini adalah tampilan halaman utama setelah login, dimana terdapat penambahan fitur-fitur baru yang tidak ditemukan pada tampilan halaman utama sebelum login, fitur-fitur tersebut antara lain adalah akun saya (my profile), pemesanan kapal, histori pemesanan kapal dan kotak pesan.

(22)

2. Rancangan Layar Testimonial Setelah Login

ENGLISH

Art ikel Registrasi

Kami

Halaman Utama

Testimonial Nama Pela nggan

Nama Pela nggan Nama Pela nggan

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx

Tambah Testimonial :

Kirim H apus

Test imonial

1 2 3

Keluar

Online

Gambar 4.17 Rancangan Layar Testimonial Setelah Login Sumber : Penulis

Pada halaman testimonial ini, selain user dapat melihat testimonial-testimonial dari para pengguna jasa PT. Armada Samudra Persada, user juga dapat mengirim testimonial pribadinya dengan mengisi field yang sudah disediakan pada menu tambah testimonial.

(23)

3. Rancangan Layar Ubah Akun

ENGLISH

Halaman

Utama Tentang Kami FAQ Berita &

Kami

xxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx Nama / Perusaha an :

Tel epon :

Kota :

Nega ra :

Tan ggal la hir/berdiri :

Alamat :

Fax :

E-mai l :

Simpan Ubah Akun Ub ah Sa nd i

Keluar

Online

Gambar 4.18 Rancangan Layar Ubah Akun Sumber : Penulis

Pada halaman akun saya terdapat dua sub menu yaitu ubah akun dan ubah sandi, halaman ini merupakan halaman ubah akun, dimana pada halaman ini user dapat

mengubah data-data pribadinya.

(24)

4. Rancangan Layar Ubah Sandi

ENGLISH

Kami

Hubungin Kami Halaman

Utama

Ub a h Ak un Ubah Sandi

ID Pen gguna : Sandi La ma :

Sandi Baru :

Kon fi rmasi Sand i Ba ru : xxxxxxxx

Kiri m Hapu s

Keluar

Online

Gambar 4.19 Rancangan Layar Ubah Sandi Sumber : Penulis

Halaman ini adalah halaman ubah sandi, dimana halaman ini memungkinkan user untuk mengubah sandi lama dengan sandi barunya.

(25)

5. Rancangan Pemesanan Kapal

ENGLISH

Kami

Hubungi Kami Halaman

Utama

Friday, dd-mm-yyyy

Akun Saya Pemesanan Kapal Histori Pemesanan Kapal Kotal Pesan

Nama : Email : Telepon :

Pelabuhan Tujuan : Tanggal Keberangkatan :

Ukuran Tongkang/Barge Pelabuhan Keberangkatan :

2 30 fee t 250 feet 270 fe et 30 0 feet 330 feet Kapal Yang Tersedia :

ASP 9 ASP 1 0

Jenis Muatan : Persyaratan Tambahan :

Pesan Batal

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx

Online

Link-Link Terkait - xxxxxxxxxxxxxxxxxx - xxxxxxxxxxxxxxxxxx Keluar

Gambar 4.20 Rancangan Layar Pemesanan Kapal Sumber : Penulis

Halaman ini adalah halaman pemesanan kapal, dimana pada halaman ini user dapat mengecek ketersediaan kapal yang ada sesuai dengan kebutuhan dan keinginan user, setelah mengecek kapal yang tersedia user dapat melakukan pemesanan atau booking kapal Field nama, email, telepon akan terisi secara otomatis, untuk field-field lainnya user mengisi sendiri, user wajib mengisi field pelabuhan keberangkatan, pelabuhan tujuan, tanggal keberangkatan serta memilih ukuran barge atau tongkang, untuk field tipe muatan dan persyaratan tambahan user tidak wajib mengisi field ini.

(26)

ENGLISH

Kami

Utama

Pelabuhan Tujuan : Tanggal Keberangkatan :

Ukuran Tongkang/Barge Pelabuhan Keberangkatan :

ASP 1 ASP 2

Pesan Batal

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx

Online

Gambar 4.21 Rancangan Layar Pemesanan Kapal Sudah Dikirim Sumber : Penulis

Apabila user sudah melakukan pemesanan kapal maka akan muncul tampilan seperti diatas, dimana terdapat kode pemesanan serta pesan yang berisi pemberitahuan bahwa permintaan pemesanan kapal sudah dikirim dan akan ada konfirmasi selanjutnya dari pihak perusahaan.

Nomor Pemesanan : xxxxxxxxxxxxxxxxxxx

Permintaan Anda Sudah Dikirim, Mohon Tunggu Konfirmasi Dari Kami,

Terima Kasih

(27)

ENGLISH

Kami

Utama

Pelabuhan Tujuan : Tanggal Keberangkatan : Ukuran Tongkang/Barge : Pelabuhan Keberangkatan :

ASP 1 ASP 2

Pesan Batal

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx

Online

Gambar 4.22 Rancangan Layar Antrian Pemesanan Kapal Sumber : Penulis

Halaman ini adalah halaman antrian pemesanan kapal, dimana sebelum user (pelanggan kedua) melakukan pemesanan sudah ada user lain (pelanggan pertama) yang terlebih dahulu melakukan pemesanan kapal dengan tanggal keberangkatan serta ukuran kapal tongkang yang sama, selanjutnya pihak perusahaan akan segera memberikan konfirmasi kepada pihak kedua setelah perusahaan memutuskan kesepakatan dengan pelanggan pertama.

Nomor Pemesanan : xxxxxxxxxxxxxxxxxxx

Anda dalam antrian pemesanan,kami akan segera memberikan konfirmasi

kembali, Terima Kasih

(28)

ENGLISH

Halaman Utama

Kami

Hubungi Kami

Pelabuhan Tujuan : Tanggal Keberangkatan : Ukuran Tongkang/Barge : Pelabuhan Keberangkatan :

2 30 fee t 250 feet 270 feet 3 00 fee t 330 feet Kapal Yang Tersedia :

Pesan Batal

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx

Maaf, kapal tidak tersedia

Online

Gambar 4.23 Rancangan Layar Kapal Tidak Tersedia Sumber : Penulis

Halaman ini adalah halaman kapal tidak tersedia, setelah user mengisi field pelabuhan keberangkatan, pelabuhan tujuan, tanggal keberangkatan kapal serta ukuran tongkang/barge, sistem akan langsung melakukan pengecekan, dan apabila tidak ada kapal yang tersedia pada waktu yang diminta user karena jumlah kapal sudah full dipesan atau karena kapal masih dalam kegiatan operasionalnya, maka akan muncul pesan “Maaf, kapal tidak tersedia”.

(29)

6. Rancangan Histori Pemesanan Kapal

Gambar 4.24 Rancangan Layar Histori Pemesanan Kapal Sumber : Penulis

Halaman ini menjelaskan histori pemesanan kapal yang dilakukan oleh user, setiap pemesanan yang dilakukan oleh user akan tercatat langsung di dalam sistem dan akan ditampilkan di halaman ini, pada halaman ini terdapat fasilitas tracking, dimana user dapat mengetahui keberadaan barang yang dikirim dengan kapal dalam keadaan loading, unloading, terkirim. Histori ini berisi transaksi yang dilakukan user dengan perusahaan selama satu tahun

(30)

7. Rancangan Layar Tulis Pesan

ENGLISH

Kami

Utama

Tulis Pesan Pe sa n M asu k P esa n k el ua r

Tuli s Pesan

Top ik :

Pe sa n:

Kirim Bata l

Lampi rka n size

Keluar

Online

Gambar 4.25 Rancangan Layar Tulis Pesan Sumber : Penulis

Pada menu message terdapat sub menu yaitu tulis pesan, pesan masuk dan pesan keluar, halaman ini merupakan halaman tampilan tulis pesan, pada halaman ini user dapat menulis pesan atau mengirim dokumen yang akan dikirimkan kepada pihak admin.

(31)

8. Rancangan Layar Pesan Masuk

ENGLISH

Kami

Utama

Akun Saya Ketersediaan Kapal Histori Pemesanan Kotak Pesan (1) Tul is P esa n Pesan Masuk (1) P esa n k el ua r

H apus Se mu a

Dari Kete ra ngan Ta nggal

xxxxx xxxxxxxxxxx dd/mm/yyyy Hapus Hapus Hapus

xxxxx xxxxxxxxxxx dd/mm/yyyy

Pesan Masuk

Online

Gambar 4.26 Rancangan Layar Pesan Masuk Sumber : Penulis

Halaman ini adalah halaman pesan masuk, halaman pesan masuk ini memberikan informasi mengenai surat elektronik yang dikirim oleh admin kepada user. Informasi- informasi yang dikirim ke pesan masuk antara lain surat penawaran, ucapan selamat ulang tahun, ucapan selamat hari raya dan surat tagihan.

(32)

9. Rancangan Layar Baca Pesan Masuk

ENGLISH

Kami

Utama

Akun Saya Pemesanan Kapal Histori Pemesanan Kapal Kotak Pesan Tul is P esa n Pesan Masuk P es an Kel ua r

Topik :

Pesan :

Bal as Kembal i

Keluar

Online

Gambar 4.27 Rancangan Layar Baca Pesan Masuk Sumber : Penulis

Ini adalah halaman baca pesan masuk, halaman ini akan muncul setelah user mengklik salah satu list pesan (tabel list pesan dapat dilihat digambar sebelumnya). User dapat membalas pesan dengan mengklik reply.

(33)

10. Rancangan Layar Pesan Keluar

ENGLISH

Kami

Utama

Tul is P esa n Pe sa n Ma su k Pesan Keluar

Keluar Ha pus Semua

Dari Ke teran gan Tan ggal

xxxxx xxxxxxxxxxx dd/mm/yyyy H apus H apus H apus xxxxx xxxxxxxxxxx dd/mm/yyyy xxxxx xxxxxxxxxxx dd/mm/yyyy Pesan Keluar

Online

Gambar 4.28 Rancangan Layar Pesan Keluar Sumber : Penulis

Halaman ini adalah halaman pesan keluar, tabel yang berisi list-list pesan yang pernah dikirim oleh user kepada admin.

(34)

11. Rancangan Baca Pesan Keluar

ENGLISH

Kami

Utama

Tu li s Pe sa n Pes an Ma suk Pesan Keluar

Topik :

Pesan :

Teruskan Kembal i

Keluar

Online

Gambar 4.29 Rancangan Layar Baca pesan Keluar Sumber : Penulis

Ini adalah halaman baca pesan keluar, halaman ini akan muncul setelah user mengklik salah satu list pesan keluar (tabel list pesan keluar dapat dilihat digambar sebelumnya). User dapat mengirim pesan yang sama dengan mengklik tombol forward.

Apabila user mengklik tombol forward maka akan masuk ke halaman “tulis pesan” dengan topik dan pesan yang sama.

(35)

4.5 Site Map Admin

Gambar 4.30 Site Map Admin Sumber : Penulis

(36)

4.6 Rancangan Layar Admin

1. Rancangan Layar Halaman Login Admin

Gambar 4.31 Rancangan Layar Halaman Login Admin Sumber : Penulis

Tampilan ini merupakan tampilan admin paling awal dimana tersedia field box kosong yaitu ID pengguna dan sandi (password). Jika admin sudah mengisi username dan password dengan benar maka klik ”Login” untuk masuk ke halaman utama. Jika admin lupa dengan sandinya maka admin dapat mengklik ”Lupa Sandi” .

(37)

2. Rancangan Layar Lupa Sandi Admin

Gambar 4.32 Rancangan Layar Lupa Sandi Admin Sumber : Penulis

Tampilan di atas ini merupakan tampilan ketika admin lupa akan sandinya, sandi akan dikirimkan ke email secara otomatis jika ID pengguna dan email yang dimasukan sesuai dengan database perusahaan.

(38)

3. Rancangan Layar Halaman Utama Admin

Gambar 4.33 Rancangan Layar Halaman Utama Admin Sumber : Penulis

Tampilan ini merupakan halaman utama admin setelah admin melakukan login, pada halaman utama ini akan muncul data statistik situs.

(39)

4. Rancangan Layar Daftar Member

Gambar 4.34 Rancangan Layar Daftar Member Sumber : Penulis

Halaman ini adalah halaman daftar user yang telah melakukan registrasi pada website ini, user yang sudah melakukan registrasi disebut sebagai member. Pada halaman ini, admin dapat melihat informasi mengenai ID pengguna, tanggal bergabung member, nama member, kota, alamat, fax, email, frekuensi transaksi dan total transaksi. Frekuensi transaksi menunjukkan berapa kali pelanggan/member melakukan transaksi dengan perusahaan. Total transaksi menunjukkan jumlah total transaksi (dalam rupiah) pelanggan.

(40)

5. Rancangan Layar Daftar Ulang Tahun

Gambar 4.35 Rancangan Layar Daftar Ulang Tahun Sumber : Penulis

Ini adalah halaman daftar ulang tahun member atau pelanggan. Halaman ini menampilkan ID pengguna, nama , tanggal lahir dan email dari member atau pelanggan yang sedang berulang tahun pada hari itu. Sistem akan secara otomatis mengirimkan pesan ucapan selamat ulang tahun ke email member atau pelanggan. Admin dapat mengecek pesan yang dikirimkan lewat status pengiriman pesan.

(41)

6. Rancangan Layar Pengaturan Tentang Kami

Gambar 4.36 Rancangan Layar Pengaturan Tentang Kami Sumber : Penulis

Halaman ini adalah halaman pengaturan tentang kami, pada halaman ini admin dapat mengubah isi dari kontent tentang kami, admin juga dapat melakukan mengubah gambar yang sudah ada.

(42)

7. Rancangan Layar Pengaturan Hubungi Kami

Gambar 4.37 Rancangan Layar Pengaturan Hubungi Kami Sumber : Penulis

Halaman ini adalah halaman pengaturan tentang kami, pada halaman ini admin dapat mengubah isi dari kontent hubungi kami pada field yang tersedia, admin juga dapat melakukan mengubah gambar yang sudah ada dengan mengklik tombol browse.

(43)

8. Rancangan Layar Pengaturan FAQ

Gambar 4.38 Rancangan Layar Pengaturan FAQ Sumber : Penulis

Halaman ini adalah halaman pengaturan FAQ, pada halaman ini admin dapat menambah pertanyaan FAQ yang ada dengan menakan tombol tambah baru, selain itu admin juga dapat menghapus pertanyaan yang ada dengan menu hapus.

(44)

9. Rancangan layar Tambah Baru FAQ

Gambar 4.39 Rancangan Layar Tambah Baru FAQ Sumber : Penulis

Halaman ini adalah tampilan tambah baru FAQ, Halaman ini akan muncul setelah admin mengklik tombol tambah baru, admin dapat memasukan pertanyaan serta jawaban, kemudian menyimpannya sebagai tambahan list FAQ.

(45)

10. Rancangan Layar Pengaturan Berita & Artikel

Gambar 4.40 Rancangan Layar Pengaturan Berita Dan Artikel Sumber : Penulis

Halaman ini adalah halaman pengaturan berita dan artikel, pada halaman ini terdapat konten berupa tabel yang berisikan judul berita dan alamat link berita. Admin dapat melakukan perubahan terhadap berita dan artikel yang ada dengan mengklik menu edit, selain itu admin juga dapat menambah berita baru dengan mengklik menu tambah baru.

(46)

11. Rancangan Layar Pengaturan Link-Link Terkait

Gambar 4.41 Rancangan Layar Pengaturan Link-Link Terkait Sumber : Penulis

Halaman ini adalah halaman pengaturan link-link terkait. Pada tampilan ini terdapat konten berupa tabel yang berisikan nama link dan alamat link. Admin dapat melakukan perubahan terhadap link-link terkait yang ada dengan mengklik menu edit, selain itu admin juga dapat menambah link baru dengan mengklik menu tambah baru.

(47)

12. Rancangan Layar ID YM Admin

Gambar 4.42 Rancangan Layar Pengaturan ID YM Admin Sumber : Penulis

Halaman ini adalah halaman pengaturan Id YM live chat . Pada halaman pengaturan Id YM (Yahoo Messenger) terdapat informasi mengenai Id YM dan nama orang yang nantinya akan bertugas melayani pelanggan secara langsung lewat live chat. Admin dapat menambah Id YM apabila ada penambahan petugas yang melayani pelanggan lewat live chat.

(48)

13. Rancangan Layar Daftar Kapal

Gambar 4.43 Rancangan Layar Daftar Kapal Sumber : Penulis

Pada Halaman Daftar kapal ini, admin dapat melihat nama kapal, jenis kapal, jumlah kapal yang tersedia, admin dapat melakukan penambahan nama kapal apabila perusahaan memiliki kapal baru dengan mengklik menu tambah baru, selain itu terdapat link untuk mengedit.

(49)

14. Rancangan Layar Edit Kapal

Gambar 4.44 Rancangan Layar Edit Kapal Sumber : Penulis

Halaman ini adalah halaman layar Edit Kapal, pada halaman ini, admin dapat mengubah informasi mengenai detail kapal seperti jenis kapal, klasifikasi, bendera, tahun bangun, panjang dan lebar kapal, gross tonnage, net tonnage, deadweight dan kapasitas kargo. Selain itu admin juga dapat mengubah gambar kapal dengan mengklik browse.

(50)

15. Rancangan Layar Testimonial

Gambar 4.45 Rancangan Layar Testimonial Sumber : Penulis

Halaman ini menampilkan kumpulan testimonial yang dikirim oleh pengguna jasa PT.

Armada Samudra Persada. Di halaman ini admin memilih testimonial dari pengirim, manakah yang layak untuk ditampilkan pada layar user. Admin mempunyai hak untuk menghapus testimonial dari pengirim.