website e-commerce ini menawarkan pengalaman berbelanja online yang unik dan menarik dengan menggabungkan estetika minimalis dan fungsionalitas yang tinggi. Website ini dibuat khusus untuk para pecinta fashion yang ingin mencari produk fashion terbaru dengan mudah dan nyaman.

Wireframe

Wireframe merupakan tahapan awal yang berbentuk sketsa, hal ini berguna untuk menerapkan visualisasi dari struktur website. pada sketsa diatas, terdapat beberapa bagian struktur halaman website, yaitu home, shop, single page, cart sidebar, checkout, cart, form registrasi, dan login.

halaman registrasi dan login : untuk menggunakan website pengguna diharuskan untuk membuat akun terlebih dahulu dan login sebelum membeli produk .

Halaman Awal (home)

pada halaman utama terdapat elemen-elemen fungsionalitas sebagai berikut:

Header

• Logo: Logo yang ditempatkan di bagian kiri atas halaman. Logo ini berfungsi untuk menunjukkan identitas toko online dan membangun brand awareness.

• Navigasi utama: Menu navigasi utama yang terdiri dari tautan ke halaman utama "Home", "Shop", "About", dan "Contact". Menu navigasi ini berfungsi untuk memudahkan pengguna dalam mengakses berbagai halaman di website.

• Searching: fitur search memungkinkan pengguna untuk mencari produk yang di inginkan pengguna sehingga user mendapatkan produk dengan mudah.

• Keranjang belanja: Ikon keranjang belanja yang menunjukkan jumlah item yang telah ditambahkan oleh pengguna. Ikon ini berfungsi untuk mengarahkan pengguna ke halaman keranjang belanja untuk menyelesaikan proses checkout.

• Akun pengguna: Ikon akun pengguna yang menunjukkan status login pengguna. Ikon ini berfungsi untuk mengarahkan pengguna ke halaman akun pengguna untuk mengelola profil, pesanan, dan informasi lainnya.

Konten utama:

• Judul halaman: Judul halaman yang menunjukkan kategori produk yang ditampilkan. Judul halaman ini berfungsi untuk memberikan informasi kepada pengguna tentang produk yang sedang mereka lihat.

• Produk: Daftar produk yang ditampilkan dalam bentuk grid. Setiap produk memiliki gambar, judul, harga, dan label. Daftar produk ini berfungsi untuk menampilkan produk-produk yang tersedia di toko online.

Footer:

• Informasi kontak: Informasi kontak toko online, seperti alamat email, nomor telepon, dan alamat fisik. Informasi kontak ini berfungsi untuk memberikan informasi kepada pengguna tentang cara menghubungi toko online.

• Tautan media sosial: Tautan ke akun media sosial toko online. Tautan media sosial ini berfungsi untuk menghubungkan toko online dengan pelanggan di media sosial.

• Hak cipta: Informasi hak cipta yang menunjukkan tahun pembuatan website dan pemilik website. Informasi hak cipta ini berfungsi untuk melindungi hak cipta website.

Halaman Shop , pada halaman ini berisi informasi-informasi produk secara detail, sama seperti pada halaman home, produk-produk disajikan dengan tampilan grid namun bedanya ialah pada halaman ini lebih luas dan terdapat beberapa fitur yaitu :

• Sorting : Tombol sorting yang memungkinkan pengguna untuk mengurutkan produk berdasarkan harga, popularitas, dan atribut lainnya. Tombol sorting ini berfungsi untuk membantu pengguna menemukan produk yang mereka inginkan dengan mudah.

• Kontrol Pagination : Kontrol pagination memungkinkan pengguna menavigasi beberapa halaman daftar produk, memastikan bahwa semua produk yang tersedia dapat diakses dengan mudah. Fitur ini mencegah halaman produk menjadi berlebihan dan memfasilitasi pengalaman penelusuran yang lancar.

Single page, pada halaman ini menampilkan informasi-informasi detail dari sebuah produk, seperti nama produk, spesifikasi produk, deskripsi, harga , ulasan, dll. Selain itu terdapat elemen-elemen fungsional seperti :

• tombol Kuantitas : tombol kuantitas memungkinkan pengguna memilih jumlah unit yang ingin mereka beli.

• Tombol Tambahkan ke Keranjang: Tombol "Tambahkan ke Keranjang" yang menonjol memungkinkan pengguna dengan mudah menambahkan produk ke keranjang belanja mereka dan melanjutkan ke pembayaran.

Cart Sidebar , jika menekan icon keranjang pada navbar maka akan menampilkan popup modal yang berisikan produk-produk yang telah dipilih sebelumnya, pada popup tersebut terdapat tombol-tombol seperti tombol checkout untuk melanjutkan pembayaran, tombol cart untuk melihat barang yang dipilih secara detail.

Halaman Checkout, pada halaman ini pengguna akan melakukan pembayaran terhadap produk yang dipilih. terdapat beberapa elemen di dalam halaman tersebut yaitu :

• Judul halaman: Judul halaman yang menunjukkan proses checkout. Judul halaman ini berfungsi untuk memberikan informasi kepada pengguna tentang tahap yang sedang mereka lalui dalam proses checkout.

• Formulir informasi pelanggan: Formulir yang berisi kolom untuk memasukkan informasi pelanggan, seperti nama lengkap, alamat email, alamat pengiriman, dan nomor telepon. Formulir ini berfungsi untuk mengumpulkan informasi yang diperlukan untuk memproses pesanan.

• Formulir informasi pengiriman: Formulir yang berisi kolom untuk memilih metode pengiriman dan memasukkan informasi alamat pengiriman. Formulir ini berfungsi untuk menentukan cara pengiriman produk kepada pelanggan.

• Formulir informasi pembayaran: Formulir yang berisi kolom untuk memilih metode pembayaran dan memasukkan informasi pembayaran. Formulir ini berfungsi untuk memproses pembayaran pesanan.

• Ringkasan pesanan: Ringkasan pesanan yang menunjukkan daftar produk yang dibeli, harga total, dan biaya pengiriman. Ringkasan pesanan ini berfungsi untuk memverifikasi informasi pesanan sebelum menyelesaikan proses checkout.

• Tombol checkout: Tombol yang memungkinkan pengguna untuk menyelesaikan proses checkout dan melakukan pembayaran. Tombol checkout ini berfungsi untuk menginisiasi proses pembayaran dan menyelesaikan transaksi.

User Flow

User Flow merupakan diagram yang menggambarkan tahapan-tahapan pengguna untuk mencapai tujuan atau kebutuhan tertentu, hal ini membantu tim dalam perancangan produk yang lebih mudah dan intuitif.

pada user flow diatas terdapat beberapa langkah-langkah pengguna untuk mencapai tujuan yaitu memesan sebuah produk.

Pertama pengguna berada di halaman home, untuk memilih produk terdapat section list produk yang dimana jika memilih produk di halaman tersebut maka akan diarahkan ke single page atau dengan menekan tombol shop maka akan diarahkan ke halaman shop. kemudian pada halaman shop terdapat fitur cari produk jika produk yang dicari tidak ditemukan maka akan menampilkan pesan "tidak ditemukan", lalu pengguna memilih produk dan diarahkan ke halaman single page. jika pengguna akan menambahkan ke keranjang dan checkout maka sistem akan memverifikasi apakah user sudah login, jika belum maka akan diarahkan ke halaman login, jika user belum mempunya akun maka user dipersilahkan untuk membuat akun terlebih dahulu di halaman registrasi.

jika user sudah login maka akan menampilkan keranjang di sidebar, disini user bisa memilih cara untuk membuat pesanan di web, pertama user memasukkan produk yang ia mau ke keranjang sidebar lalu ia mengecek produk tersebut ke halaman cart, kemudian user melakukan checkout. yang kedua user pada keranjang sidebar bisa langsung melakukan checkout tanpa harus pergi ke halaman cart terlebih dahulu.

Desain Akhir

berikut merupakan desain akhir dari wireframe yang telah dibuat.