Perancangan Antarmuka Pengunjung Perancangan Antar Muka Program Aplikasi

6. Perancangan antar muka menu utama REGISTER MEMBER BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM P06 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 REGISTRASI REGISTER RESET EMAIL LOGIN MEMBER … … … …. …. … …. … … … … ... ACCOUNT INFO USERNAME PASSWORD KONFIRMASI PASSWORD NAMA LENGKAP ALAMAT NO TELPON KOTAKABUPATEN KODE POS CARI F ktp browse Anda bersedia dan menyetujui peraturan Gambar 3.34 Perancangan Antarmuka Register Member 7. Perancangan antar muka menu utama CARA PEMESANAN BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM PO7 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … CARA PEMESANAN CARI F Gambar 3.35 Perancangan Antarmuka Cara Pemesanan 8. Perancangan antar muka menu utama CARA PENGIRIMAN BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM P08 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … CARA PENGIRIMAN CARI F Gambar 3.36 Perancangan Antarmuka Cara Pengiriman 9. Perancangan antar muka menu utama CARA PEMBAYARAN BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM P09 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … CARA PEMBAYARAN CARI F Gambar 3.37 Perancangan Antarmuka Cara Pembayaran

3.2.5.2 Perancangan Antarmuka Member

1. Perancangan antar muka menu utama HOME BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE M01 Lates produck Best sellerproduk Best sellerproduk NAMA PRODUK NAMA PRODUK NAMA PRODUK NAMA PRODUK NAMA PRODUK NAMA PRODUK NAMA PRODUK NAMA PRODUK NAMA PRODUK HARGA DISCON HARGA DISCON HARGA DISCON HARGA DISCON HARGA DISCON HARGA DISCON HARGA DISCON HARGA DISCON HARGA DISCON INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 CARI F Gambar 3.38 Perancangan Antarmuka Home 2. Perancangan antar muka menu utama LOGIN BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM M02 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 LOGIN LOGIN LUPA PASSWORD USERNAME PASSWORD REGISTRASI MEMBER … … … …. …. … …. … … … … ... CARI F Gambar 3.39 Perancangan Antarmuka Login 3. Perancangan antar muka menu utama LUPA PASSWORD BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART LOGIN REGISTER YM M03 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke P01 Klik tombol PRODUK menuju Ke P02 Klik tombol TENTANG KAMI menuju Ke P03 Klik tombol TENTANG KAMI menuju Ke P04 Klik tombol CART menuju Ke P05 Klik tombol LOGINREGISTER menuju Ke P06 Klik tombol REGISTER MEMBER menuju Ke P07 Klik GAMBAR PRODUK menuju Ke P08 Klik CARA PEMESANAN menuju Ke P09 Klik CARA PENGIRIMAN menuju Ke P10 Klik CARA PEMBAYARAN menuju Ke P11 LUPA PASSWORD SUBMIT EMAIL LOGINREGISTER … … … …. …. … …. … … … … ... CARI F Gambar 3.40 Perancangan Antarmuka Lupa Password 4. Perancangan antar muka menu utama HISTORY ORDER BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART ACCOUNT YM M04 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke M01 Klik tombol LOGIN menuju Ke M02 Klik tombol LUPA PASSWORD menuju Ke M03 Klik tombol HISTORY ORDER menuju Ke M04 Klik tombol KONFIRMASI menuju Ke M05 Klik tombol PROFIL menuju Ke M06 Klik tombol UPDATE menuju Ke M07 Klik tombol UBAH PASSWORD menuju Ke M08 Klik tombol CHECKOUT menuju Ke M09 Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10 Klik tombol PEMBAYARAN TRANSFER menuju Ke M11 Klik tombol RETUR menuju Ke M12 HISTORI ORDER CARI F LOGOUT NO NO PESANAN NO TRAKING TANGGAL PESAN TOTAL HARGA DETAIL PESANAN DAFTAR RETUR STATUS AKSI HISTORI ORDER PROFILE Gambar 3.41 Perancangan Antarmuka Histori Order 5. Perancangan antar muka menu utama KONFIRMASI TRANSAKSI BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART ACCOUNT YM M05 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke M01 Klik tombol LOGIN menuju Ke M02 Klik tombol LUPA PASSWORD menuju Ke M03 Klik tombol HISTORY ORDER menuju Ke M04 Klik tombol KONFIRMASI menuju Ke M05 Klik tombol PROFIL menuju Ke M06 Klik tombol UPDATE menuju Ke M07 Klik tombol UBAH PASSWORD menuju Ke M08 Klik tombol CHECKOUT menuju Ke M09 Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10 Klik tombol PEMBAYARAN TRANSFER menuju Ke M11 Klik tombol RETUR menuju Ke M12 DETAIL TRANSAKSI CARI F LOGOUT HISTORI ORDER PROFILE NO Jenis barang MERK PRODUK HARGA JUMLAH SUB BERAT SUB TOTAL NAMA ALAMAT NO TELEPONHP EMAIL KABUPATEN KODE POS SETATUS PEMESANAN TANGGAL PEMESANAN PAKET ONGKOS KIRIM TOTAL BERAT TOTAL BIAYA KIRIM TOTAL BELANJA Gambar 3.42 Perancangan Antarmuka Konfirmasi Transaksi 6. Perancangan antar muka menu utama PROFIL BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART ACCOUNT YM M06 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke M01 Klik tombol LOGIN menuju Ke M02 Klik tombol LUPA PASSWORD menuju Ke M03 Klik tombol HISTORY ORDER menuju Ke M04 Klik tombol KONFIRMASI menuju Ke M05 Klik tombol PROFIL menuju Ke M06 Klik tombol UPDATE menuju Ke M07 Klik tombol UBAH PASSWORD menuju Ke M08 Klik tombol CHECKOUT menuju Ke M09 Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10 Klik tombol PEMBAYARAN TRANSFER menuju Ke M11 Klik tombol RETUR menuju Ke M12 NAMA PROFIL CARI F LOGOUT HISTORI ORDER PROFILE ACCOUNT DETAIL PERSONAL DETAIL UPDATE UBAH PROFIL UBAH PASSWORD …. … … …. ….. …. …. …. … … …. ….. …. …. …. … … …. ….. …. …. …. … … …. ….. …. …. …. … … …. ….. …. …. …. … … …. ….. …. …. Gambar 3.43 Perancangan Antarmuka Profil 7. Perancangan antar muka menu utama UPDATE PROFIL BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART ACCOUNT YM M07 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke M01 Klik tombol LOGIN menuju Ke M02 Klik tombol LUPA PASSWORD menuju Ke M03 Klik tombol HISTORY ORDER menuju Ke M04 Klik tombol KONFIRMASI menuju Ke M05 Klik tombol PROFIL menuju Ke M06 Klik tombol UPDATE menuju Ke M07 Klik tombol UBAH PASSWORD menuju Ke M08 Klik tombol CHECKOUT menuju Ke M09 Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10 Klik tombol PEMBAYARAN TRANSFER menuju Ke M11 Klik tombol RETUR menuju Ke M12 NAMA PROFIL CARI F LOGOUT HISTORI ORDER PROFILE SAVE BATAL EMAIL USERNAME PASSWORD KONFIRMASI PASSWORD PERSONAL INFO NAMA LENGKAP ALAMAT NO TELPON KOTAKABUPATEN KODE POS ACCOUNT INFO Gambar 3.44 Perancangan Antarmuka Update Profile 8. Perancangan antar muka menu utama UBAH PASSWORD BENNER HOME PRODUK TENTANG KAMI HUKUM KEPEMILIKAN CART ACCOUNT YM M08 INFORMASI PEMBAYARAN VIA OFFICE RESI PENGIRIMAN Klik tombol HOME menuju Ke M01 Klik tombol LOGIN menuju Ke M02 Klik tombol LUPA PASSWORD menuju Ke M03 Klik tombol HISTORY ORDER menuju Ke M04 Klik tombol KONFIRMASI menuju Ke M05 Klik tombol PROFIL menuju Ke M06 Klik tombol UPDATE menuju Ke M07 Klik tombol UBAH PASSWORD menuju Ke M08 Klik tombol CHECKOUT menuju Ke M09 Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10 Klik tombol PEMBAYARAN TRANSFER menuju Ke M11 Klik tombol RETUR menuju Ke M12 UBAH PASSWORD CARI F LOGOUT HISTORI ORDER PROFILE SAVE BATAL KONFIRMASI PASSWORD PASSWORD Gambar 3.45 Perancangan Antarmuka Ubah Password