Membuat Case Study — Bagian 7: Membuat Wireframe

Pada artikel sebelumnya kita telah membuat user flow dari aplikasi yang akan kita rancang. Berikut adalah user flow nya

Langkah selanjutnya adalah membuat wireframe atau sketsa layout dari tiap langkah yang ada di user flow. Pada gambar diatas, setiap langkah nya diwakili oleh sebuah kotak.

Tips saat merancang wireframe atau sketsa
1. Perhatikan konteks setiap halaman
2. Perhatikan kebutuhan informasi setiap halaman
3. Fokus pada hal hal apa saja yang harus dilakukan user di halaman ini

Mari kita mulai membuat wireframe…

Oiya untuk pembuatan wireframe ini saya pakai Figma, karena udah menjadi kebiasaan 😅

Langkah 1 — User Membuka Aplikasi

Pada halaman awal setelah user membuka aplikasi, kita akan menampilkan beberapa tempat resepsi, dan juga terdapat elemen untuk mencari tempat resepsi yang lebih spesifik sesuai dengan kriteria user.

Dan berikut adalah wireframe dan penjelasan elemen elemen nya

1. Title — Untuk memberitahukan user di halaman mana mereka berada
2. Form Pencarian — Untuk mencari sebuah tempat sesuai dengan kebutuhan user.
3. Foto — Memperlihatkan foto lokasi, agar user lebih tertarik mengetahui lebih detail tentang lokasi nya.
4. Harga Sewa — Salah satu info penting dalam pembuatan keputusan untuk memilih tempat. Dibuat tebal agar user mudah menemukannya
5. Ketentuan Harga Sewa — Beberapa tempat memberlakukan harga sewa yang berbeda beda, ada yang per 3 jam, ada yang per hari, ada yang per 12 jam. Agar user tidak salah paham mengenai harga sewa nya, maka ditambahkan info ini untuk memperjelas.
6. Menu Bar — Ditempatkan di bawah agar user mudah menjangkaunya menggunakan jempol. Terdapat 2 menu, Home dan Tersimpan. Home adalah halaman utama dan Tersimpan adalah menu yang menampilkan semua tempat yang disimpan oleh user.
7. Icon Hati — Berfungsi untuk menambahkan tempat ke daftar penyimpanan. Ditaruh di situ agar user mudah menyimpan tempat tanpa harus melihat detailnya.
8. Daerah / Lokasi — Agar user mengetahui dimana lokasinya. Lokasi merupakan salah satu hal yang dipertimbangkan oleh user. Apakah nantinya tamu undangan mereka terlalu jauh untuk menjangkau lokasinya atau tidak.
9. Luas Tempat — Menginformasikan ke user seberapa luas tempat tersebut, sehingga user bisa mempertimbangkan untuk memilih tempat tersebut atau tidak dengan mempertimbangkan jumlah tamu yang akan hadir.

Langkah 2 — User Melakukan Pencarian dan memasukkan kriteria pencarian

Pada langkah ini, user akan memencet elemen pencarian dan kotak pencarian akan terbuka dan menampilkan beberapa inputan.

Berikut adalah proses membuka form pencarian nya. Pada form pencarian kita akan menampilkan inputan untuk memasukkan lokasi, tipe lokasi dan tanggal pemakaian.

Dan berikut adalah proses yang akan dilalui user saat memasukkan kriteria pencarian

Dapet ide interaksi seperti ini darimana?

Nyoba nyoba app, lumayan nambah referensi tentang layout dan interaksi hehehe… 😁

Langkah 3: User melihat hasil pencarian

Pada langkah ini kita akan menampilkan beberapa tempat yang sesuai dengan kriteria pencarian user.

Btw, coba kita bayangkan menjadi user. Kalau ada 50 hasil pencarian, kayaknya bakal susah juga ya menentukan mana yang cocok.

Coba kita tambahkan fasilitas untuk mengurutkan atau menyaring hasil pencarian. Sehingga wireframe nya jadi seperti ini

Langkah 4 — User melihat detail tempat

Saat merancang halaman detail, ingat kembali apa saja kebutuhan user saat akan menentukan tempat untuk melangsungkan resepsi. Jangan sampai ada informasi yang terlewat.

Berikut adalah wireframe dari halaman detail

1. Tombol Back — Tombol untuk kembali ke halaman sebelumnya
2. Icon Hati — Berfungsi untuk menambahkan tempat ke daftar penyimpanan.
3. Harga — Salah satu info penting dalam pembuatan keputusan untuk memilih tempat. Dibuat tebal agar user mudah menemukannya
4. Ketentuan Harga Sewa — Beberapa tempat memberlakukan harga sewa yang berbeda beda, ada yang per 3 jam, ada yang per hari, ada yang per 12 jam. Agar user tidak salah paham mengenai harga sewa nya, maka ditambahkan info ini untuk memperjelas.
5. Informasi Pengelola Lokasi — Memberitahukan user siapa pengelola lokasi tersebut
6. Icon Telepon — Untuk langsung menelpon pengelola lokasi. Sehingga user bisa menanyakan beberapa hal.
7. Informasi Tanggal Ketersediaan — Menginformasikan kapan tempat tersebut bisa disewa.
8. Deskripsi dan Spesifikasi — Memberitahukan kepada user beberapa informasi mengenai lokasi tersebut dan juga tipe lokasi dan ukuran lokasi tersebut.
9. Peta — Untuk mempermudah user mengetahui lokasi tempat tersebut. Dan bisa menjadi pertimbangan untuk user, apakah tempatnya terlalu jauh atau tidak.

Langkah 5 — User menyimpan tempat

Setelah melalui beberapa langkah, langkah terakhir adalah membantu user untuk menyimpan tempat. Sehingga user memiliki daftar tempat yang siap untuk di-survey.

Berikut adalah wireframe dan proses menyimpan tempat

Setelah user menekan icon hati, maka tempat tersebut sudah tersimpan. dan user bisa mengakses tempat tempat yang telah tersimpan pada tab tersimpan.

Menyatukan seluruh wireframe

Setelah kita menyelesaikan wireframe. Langkah selanjutnya adalah menyatukan semua wireframe, sehingga membantu kita menganalisa jiika terdapat sesuatu yang terlewat atau informasi yang kurang.

Selanjutnya?

Bagian yang paling menyenangkan, High Fidelity Design 🥳