• Tidak ada hasil yang ditemukan

Perancangan Antar Muka Member

BAB V. KESIMPULAN DAN SARAN

ANALISIS DAN PERANCANGAN SISTEM

2. Perancangan Antar Muka Member

Antar muka home (M01)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA Selengkapnya M01 Selengkapnya Selengkapnya MENU MEMBER CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “info” untuk menuju M08 7. Klik link “beli” untuk menuju ke

M10

8. Klik link “profil member” untuk

menuju M11

9. Klik link “ganti password” untuk

menuju M03 10. klik tomboL “kirim testimoni”menuju ke M08

Cari Produk cari LOGOUT Selamat datang | CONTACT LIVE PRODUK TERBARU DOMPET TAS INFO IMAGE IMAGE IMAGE INFO BELI INFO BELI BELI HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi

Antar muka lupa password (M02)

HEADER

HOME PRODUK KAMI

CARA

BELANJA KONTAK KAMI TESTIMONIAL

BERITA

Masukan Email anda

M02 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08 9. KLIK “next” untuk lupa password

Cari Produk cari

CONTACT LIVE

LUPA PASSWORD

HUBUNGI KAMI Keranjang

belanja Lihat detail

NEXT PRODUK SPECIAL image INFO BELI DAFTAR LOGIN |

Gambar 3.34 Perancangan Tampilan lupa password Antar muka ganti password(M03)

HEADER

HOME PRODUK KAMI

CARA

BELANJA KONTAK KAMI TESTIMONIAL

BERITA M03 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08 9. KLIK “ganti password” untuk

mengganti password

Cari Produk cari

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER CONTACT LIVE GANTI PASSWORD HUBUNGI KAMI Keranjang

belanja Lihat detail

Password lama : Password baru : Ulangi Password lama : GANTI PASSWORD LOGOUT Selamat datang |

Antar muka produk (M04)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M04 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “info” untuk menuju M08 7. Klik link “beli” untuk menuju ke

M10

8. Klik link “profil member” untuk

menuju M11

9. Klik link “ganti password” untuk

menuju M03 10. klik tomboL “kirim testimoni”menuju ke M08

Cari Produk cari

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER CONTACT LIVE DOMPET / TAS INFO IMAGE IMAGE INFO BELI BELI HUBUNGI KAMI Keranjang

belanja Lihat detail LOGOUT Selamat datang |

Gambar 3.36 Perancangan Tampilan produk Antar muka cara belanja member(M05)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M05 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08

Cari Produk cari

CONTACT LIVE

CARA BELANJA

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER LOGOUT Selamat datang |

Antar muka kontak kami member (M06)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M06 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08

Cari Produk cari

CONTACT LIVE

KONTAK KAMI

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER LOGOUT Selamat datang |

Gambar 3.38 kontak kami Antar muka testimonial (M07)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M07 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08 9. klik tombol “kirim” untuk mengirim

testimonial

Cari Produk cari

CONTACT LIVE KIRIM HUBUNGI KAMI PESAN : NAMA : Keranjang belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER LOGOUT Selamat datang |

Antar muka info (M08)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M08 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08 9. klik “kembali”untuk menuju ke M04

Cari Produk cari

CONTACT LIVE

INFO PRODUK

HUBUNGI KAMI Keranjang

belanja Lihat detail

image

Produk : Model produk : Warna : Ukuran : Stok yang tersedia : Harga : Diskon : Harga diskon : Kembali Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER LOGOUT Selamat datang |

Gambar 3.40 Perancangan Tampilan info

Antar muka keranjang belanja (M09)

HEADER

HOME PRODUK KAMI

CARA

BELANJA KONTAK KAMI TESTIMONIAL

BERITA M09 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06 4. Klik tombol “testimonial” untuk

menuju ke M016

5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03

8. klik tomboL “kirim testimoni”menuju

ke M08

9. klik tombol “kembali” untuk menuju ke

M13

Cari Produk cari

CONTACT LIVE

KERANJANG BELANJA

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER Merk

barang Produk Harga satuan diskon Qty Berat

Berat per barang dihitung 1 Kg

Aksi Ubah Hapus Jumlah

SUB TOTAL BELANJA (1 Kg) : Rp PILIHAN CARGO

KEMBALI PILIHAN KOTA TUJUAN

Harga Kirim Silahkan Pilih Kota untuk menampilkan harga kirim dan Total Pembayaran Dan untuk memunculkan form penerima

Tiki (JNE)ONS Tiki (JNE)REGULER

LOGOUT Selamat datang |

Antar muka Beli (M10)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M10 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08 9. klik tombol “kembali” untuk menuju

ke M04

Cari Produk cari

CONTACT LIVE

PEMBELIAN PRODUK

HUBUNGI KAMI Keranjang

belanja Lihat detail

image

Produk : Model produk : Warna : Ukuran : Stok yang tersedia : Harga : Diskon : Harga diskon : Qty : Beli Kembali Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER LOGOUT Selamat datang |

Gambar 3.42 Perancangan Tampilan beli

Antar muka profil member (M11)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M11 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6.Klik link “ganti password” untuk

menuju M03 7. klik tomboL “kirim testimoni”menuju ke M08 8. klik tombol “kembali” untuk menuju

ke M01

Cari Produk cari

CONTACT LIVE

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER Email : Nama Depan : Nama Belakang : Jenis Kelamin : Alamat : Kota : Telepon : Kode pos : Profil Anda

EDIT PROFIL KEMBALI

LOGOUT Selamat datang |

Antar muka lihat transaksi (M12)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M12 MENU MEMBER CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08 9. klik tombol “bayar” untuk menuju ke

M14

10. klik tombol “lihat detail” untuk

menuju ke M15

Cari Produk cari LOGOUT Selamat datang | PRODUK SPECIAL CONTACT LIVE HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi

TRANSAKSI

NO TRANSAKSI TANGGAL TRANSAKSI TOTAL PEMBAYARANSTATUS AKSI Bayar Lihat detail

Gambar 3.44 Perancangan Tampilan lihat transaksi

Antar muka penerima barang (M13)

HEADER

HOME PRODUK KAMI

CARA

BELANJA KONTAK KAMI TESTIMONIAL

BERITA M13 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk menuju ke M04

2. Klik tombol “Cara belanja” untuk menuju ke M05

3. Klik tombol “Kontak kami” untuk menuju ke M06

4. Klik tombol “testimonial” untuk menuju ke M016

5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk menuju M11

7. Klik link “ganti password” untuk menuju M03

8. klik tomboL “kirim testimoni”menuju ke M08

9. klik tombol “kembali” untuk menuju ke M04

10. klik lanjutkan untuk melihat konfirmasi produk yang dipesan

Cari Produk cari

CONTACT LIVE

KERANJANG BELANJA

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER Merk

barang Produk Harga satuan diskon Qty Berat Berat per barang dihitung 1 Kg

Aksi Ubah Hapus Jumlah

SUB TOTAL BELANJA (1 Kg) : Rp PILIHAN CARGO PILIHAN KOTA TUJUAN

Harga Kirim Tiki (JNE)ONS Tiki (JNE)REGULER Nama Penerima : Alamat Penerima : Nama Belakang : Kode Pos : No.Tlp Penerima :

Pastikan Data Yang Anda Masukan Benar Kembali Lanjutkan PENERIMA BARANG

LOGOUT Selamat datang |

Antarmuka pembayaran transaksi (M14)

HEADER

HOME PRODUK KAMI

CARA

BELANJA KONTAK KAMI TESTIMONIAL

BERITA M14 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk

6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08

Cari Produk cari

CONTACT LIVE

PEMBAYARAN TRANSAKSI

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER NO TRANSAKSI : Pilih Media Pembayaran : : No. Rek Bayar : Atas Nama :

SUBMIT

LOGOUT Selamat datang |

Gambar 3.46 Perancangan Tampilan pembayaran transaksi

Antarmuka lihat detail transaksi (M15)

HEADER

HOME PRODUK KAMI

CARA

BELANJA KONTAK KAMI TESTIMONIAL

BERITA M15 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “Produk kami” untuk

menuju ke M04

2. Klik tombol “Cara belanja” untuk

menuju ke M05

3. Klik tombol “Kontak kami” untuk

menuju ke M06

4. Klik tombol “testimonial” untuk

menuju ke M016 5. Klik cari untuk melakukan pencarian produk 6. Klik link “profil member” untuk

menuju M11

7. Klik link “ganti password” untuk

menuju M03 8. klik tomboL “kirim testimoni”menuju ke M08

Cari Produk cari

CONTACT LIVE

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER TRANSAKSI

NO TRANSAKSI STATUS AKSI PEMBAYARAN TOTAL TANGGAL TRANSAKSI Bayar Lihat detail DETAIL TRANSAKSI

MODEL PRODUK PRODUK QTY SUBTOTAL

Total Transaksi PENERIMA BARANG

NAMA

PENERIMAALAMAT PENERIMAKOTA KODE POS TELP/HP STATUS PENGIRIMAN

LOGOUT Selamat datang |

Antarmuka testimonial (M16)

HEADER

HOME PRODUK KAMI BELANJACARA KONTAK KAMI TESTIMONIAL

BERITA M16 CARA PEMBAYARAN TESTIMONIAL JAM OPERASIONAL TEKS Navigasi :

1. Klik tombol “produk” untuk menuju

ke P03

2. Klik tombol “Guest book” untuk

menuju ke P04

3. Klik tombol “shiping” untuk menuju

ke P05

4. Klik tombol “contact” untuk menuju

ke P06

5. Klik link “Daftar” untuk melakukan

registrasi dan menuju ke P02 6. Klik link “Login” untuk melakukan

login dan menuju ke M01 7. Klik link “teks product” untuk

menuju ke P09

Cari Produk cari

CONTACT LIVE

TESTIMONIAL

HUBUNGI KAMI Keranjang

belanja Lihat detail

Profil member Ganti password Kirim testimoni Lihat transaksi MENU MEMBER LOGOUT Selamat datang |

Gambar 3.48 Perancangan Tampilan pembayaran transaksi

Dokumen terkait