• Tidak ada hasil yang ditemukan

Perancangan Antarmuka Member

ANALISIS DAN PERANCANGAN

III. 36 Struktur Menu Admin Pada Data Profil

2. Perancangan Antarmuka Member

Antarmuka Home (M01)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori

Customer Service

Testimonial

IMAGE

Produk Lainnya

Image Image Image Image

Image Image Image Image Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout M01

Antarmuka Lupa Password (M02)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori

Customer Service

Testimonial

Produk Lainnya

Image Image Image Image

Image Image Image Image Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Lupa Password Email * : Kirim Keterangan : *) Harus Diisi M02

Gambar III.58 - Antarmuka Lupa Password

Antarmuka Profil (M03)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

15. Klik tombol “edit” untuk menuju M08

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori

Customer Service

Testimonial Produk Lainnya

Image Image Image Image

Image Image Image Image Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Profil Member Edit ID Member : Nama Depan : Nama Belakang : Jenis Kelamin : Alamat : Kodepos : Provinsi : Kota : Telepon : Email : M03

Antarmuka Ubah Password (M04)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori

Customer Service

Testimonial Produk Lainnya

Image Image Image Image

Image Image Image Image Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Ubah Password Password Lama * : Ubah Password Baru * : Re-type Password Baru * :

Keterangan : *) Harus Diisi

Ulang M04

Gambar III.60 - Antarmuka Ubah Password

Antarmuka Testimonial (M05)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori

Customer Service

Testimonial Produk Lainnya

Image Image Image Image

Image Image Image Image Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Testimonial Nama Depan Simpan Nama Belakang Email Ulang Komentar M05

Antarmuka Keranjang Belanja (M06)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

15. Klik tombol “belanja lagi” untuk menuju P02

16. Klik tombol “checkout” untuk menuju M09

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial Image Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Keranjang Belanja

Produk Diskon Qty Harga Subtotal Edit Hapus

Belanja Lagi Checkout Total Belanja

Teks M06

Gambar III.62 - Antarmuka Keranjang Belanja

Antarmuka Riwayat Pesanan (M07)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

15. Klik link “bayar pesanan” untuk menuju M12

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial No Pesanan Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Tgl Expired Status Pesan Status Bayar Status Kirim Total BayarAksi

Halaman : | Total Pesanan : Pesanan

Antarmuka Edit Profil (M08)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori

Customer Service

Testimonial Produk Lainnya

Image Image Image Image

Image Image Image Image Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Nama Produk Harga Asli Harga Diskon Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Profil Member Simpan ID Member : Nama Depan : Nama Belakang : Jenis Kelamin : Alamat : Kodepos : Provinsi : Kota : Telepon : Email : Pria Wanita ▼ ▼ Batal Keterangan : *) Harus Diisi

M08

Gambar III.64 - Antarmuka Edit Profil

Antarmuka Konfirmasi Pengiriman (M09)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

15. Klik tombol “kembali” untuk menuju M06

16. Klik tombol “lanjutkan” untuk menuju M10

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Checkout Step #1 Alamat Pengiriman

Alamat Lain Kembali Alamat Tujuan Nama Depan * : Nama Belakang * : Alamat * : Kodepos * : Provinsi * : Kota * : Telepon/HP : Email * :

-- Pilih Tujuan Pengiriman --▼

-- Pilih Provinsi --▼ -- Pilih Kota --▼

Lanjutkan Keterangan : *) Harus Diisi

Biaya Pengiriman

Paket Pengiriman * -- Pilih Paket Pengiriman --▼ Total Berat : Rp.

Ongkos Kirim Per Kg : Rp. Ongkos Kirim : Rp.

M09

Antarmuka Konfirmasi Pembelian (M10)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

15. Klik tombol “kembali” untuk menuju M09

16. Klik tombol “selesai belanja” untuk menuju M11

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Konfirmasi Pembelian Alamat Pengiriman No

Aturan, syarat dan ketentuan Nama Produk Ukuran Warna Berat Satuan Qty Harga Satuan Subtotal

Total Sementara Rp. Total Berat Kg Nama

Alamat

Jenis Pengiriman yang digunakan Layanan Pengiriman yang digunakan : Tujuan : Biaya Pengiriman : Total Sementara : Biaya Pengiriman : Total Tagihan : Rp. Rp. Rp.

Kembali Selesai Belanja Saya telah membaca dan menyetujui semua aturan, syarat dan ketentuan di atas M10

Gambar III.66 - Antarmuka Konfirmasi Pembelian

Antarmuka Pembelian Selesai (M11)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Pembelian Selesai Alamat Pengiriman

No Nama Produk Ukuran Warna Berat Satuan Qty Harga Satuan Subtotal

Total Sementara Rp. Total Berat Kg Nama

Alamat

Jenis Pengiriman yang digunakan Layanan Pengiriman yang digunakan : Tujuan : Biaya Pengiriman : Total Sementara : Biaya Pengiriman : Total Tagihan : Rp. Rp. Rp. Transfer Bank Paypal COD Invoice : Tanggal Order : Tanggal Expired : TEKS M11

Antarmuka Bayar Via Transfer Bank (M12)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

15. Klik “COD” untuk menuju M13

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Bayar Via Transfer Bank

COD Paypal No Pesanan : Jumlah yang Harus Dibayar :

No Rekening * : Nama Bank * : Atas Nama * : Kode Transaksi * : Tanggal Pembayaran * : -- Pilih Bank --▼ Jumlah Bayar * :

Keterangan : *) Harus Diisi

Konfirmasi Contoh : 76250 M12

Gambar III.68 - Antarmuka Bayar Via Transfer Bank

Antarmuka COD (M13)

Navigasi :

1. Klik tombol “Home” untuk menuju P01

2. Klik tombol “All Produk” untuk menuju P02

3. Klik tombol “Panduan-Belanja” untuk menuju P03 4. Klik tombol “Panduan- Pembayaran” untuk menuju P04 5. Klik tombol “Panduan- Pengiriman” untuk menuju P05 6. Klik tombol “Panduan-Retur” untuk menuju P06 7. Klik tombol “Kategori” untuk menuju P09

8. Klik tombol link “Nama Produk” untuk menuju P10

9. Klik link “profil” untuk menuju M03

10. Klik link “ubah password” untuk menuju M04

11. Klik link “testimonial” untuk menuju M05

12. Klik link “keranjang belanja” untuk menuju M06 13. Klik link “riwayat pesanan” untuk menuju M07

14. Klik link “logout” untuk menuju P01

FOOTER HEADER LOGO

Home | All Produk | Panduan

Semua Produk▼ Cari

Kategori Customer Service Testimonial Mandiri BNI Paypal JNE Keranjang Belanja Clien Area

Most View Product

Best Selling Product Image Nama Produk Harga Asli Harga Diskon Image Nama Produk Harga Asli Harga Diskon Hallo, Nama Member

Profil Ubah Password Testimonial Keranjang Belanja Riwayat Pesanan Logout Konfirmasi Pembayaran

Terima kasih telah melakukan konfirmasi, secepatnya konfirmasi anda akan kami proses dahulu untuk di cek kebenarannya, tunggu konfirmasi dari kami selanjutnya. Agar konfirmasi anda segera kami proses, sebaiknya anda melakukan konfirmasi kepada kami melalui telepon atau via live chat.

M13

Dokumen terkait