1.

website yang memiliki UI dan UX paling baik

AirBNB

website milik AirBNB. Walaupun, tampilan visualnya yang terlihat simple dan minimalis.
Tetapi, AirBNB memiliki desain website terbaik.Pada halaman depan website terdapat video latar
yang sarat emosi yang menceritakan perjalanan bisnis dari AirBNB. Selain itu, AirBNB juga memiliki
user interface dan user experience yang bisa memberikan pengalaman interaksi yang mudah
dimengerti dan difungsikan dengan baik oleh para penggunanya. Pengunjung akan merasakan
kenyamanan selama berada di dalam website Airbnb. Karena, bisa melihat angle foto dari berbagai
apartemen, villa, dan penginapan yang ditampilkan dengan kualitas grafis seni fotografi yang
mengesankan.AirBNB adalah sebuah perusahaan penyedia layanan penginapan untuk disewakan.
Hampir sama seperti Traveloka dan sejenisnya. Namun, bedanya AirBNB tidak menawarkan
penginapan di Hotel. AirBNB lebih memilih menawarkan penginapan di rumah, vila, atau apatemen
sebagai tempat menginap. Penginapan yang ditawarkan di website AirBNB, sebelumnya sudah
dirancang oleh tim desain kreatif AirBNB agar dibuat lebih nyaman dan semenarik mungkin.
JOHO’S Bean

Website ini didesain sangat responsif, membuat pengunjung merasa nyaman dengan kualitas
grafis dan sound video yang ditampilkannya. Saat masuk ke website, kecepatan loading page sangat
baik. Kemudian, setelah di home page, pengunjung bisa memutar video yang tersedia, pilihan sound
on or off bisa diatur sendiri.Menurut para web designer, desain dari website ini cukup berhasil.
Karena, minimalist, simple, dan mempunyai UI yang baik, sehingga bisa dengan mudah dimengerti
dan digunakan oleh semua pengguna perangkat jenis apapun. Dari sekian banyak kelebihan dari
desain website JOHO’s Bean. Maka dapat dikatakan bahwa website ini mempunyai UX yang baik,
karena dapat membuat pengunjung berlama-lama dan merasa nyaman selama berada di dalam
website.Website JOHO’s Beans didesain seperti cerita online yang menceritakan kisah perjalanan
yang edukatif dan menarik tentang penjelajahan biji kopi. Cerita perjalanan menjelajahi kopi itu
menggunakan video dengan kualitas grafis dan sound engineering yang menakjubkan. Saat
menyaksikan rekaman video yang ditampilkan itu, kita seperti menyaksikan sebuah film dokumenter
dengan format HD.Story telling, grafis video, sound yang dirancang itu membuat website menjadi
lebih menarik. Website Joho’s Bean ini menceritakan kisah perjalanan J.Hornig yang menjelajahi
kopi pilihan di Fazendas sebuah wilayah perkebunan kopi terbesar di pedalaman Brazil.
Simply Chocolate

Simply Chocolate adalah website yang mendapatkan penghargaan desain website terbaik Site of The
Year pada tahun 2017 dari kontes website internasional yang diadakan oleh Awwwards.Setelah
melihat website ini, anda pasti langsung ingin makan cokekat. Hal ini mungkin memang sengaja
didesain oleh web designernya agar gambar-gambar produk cokelat yang ditampilkan, bisa
menggugah selera setiap pengunjung website yang melihatnya.Tampilan grafis atau visualnya sangat
baik menggunakan teknologi 3D, sehingga anda merasa batang-batang cokelat itu seperti ada di dekat
anda dan anda sangat ingin sekali merengutnya dari layar gadget anda. Hal ini berarti pemilik website
dan web designer telah berhasil mendesain website supaya memiliki UX yang baik.

2.wireframe untuk tampilan dari salah satu studi kasus :

a. Website profil instansi / perusahaan

Perancangan desain layout wireframing website kasakata di pt. Inovasi tanpa batas
Surabaya
Bedasarkan hal tersebut pengerjaan desain web kali ini sampai pada desain wireframe saja, karena
nantinya di presentasikan dahulu, kalau sudah dikonfirmasi PT. Kasakata Kimia Indonesia maka
selanjutnya akan ke tahap selanjutnya pada pembuatan desain web ini. Bagaimana membuat desain
web yang baru sebagai peningkatan UI/UX dari desain web dari kasakata sebelumnya?
b. Website e-learning
Website E-Learning untuk Meningkatkan Minat Belajar Pemrograman Dasar Dalam Bahasa
Pemrograman Java bagi Mahasiswa Fakultas Ilmu Komputer Universitas Brawijaya
Fakultas Ilmu Komputer (FILKOM) Universitas Brawijaya merupakan salah satu fakultas
yangmendalami ilmu tentang teknologi dan komputer di Indonesia, dari data responden yang saya
dapatkan melalui kuesioner yang disebar ke 100 mahasiswa FILKOM ada sekitar 67% menganggap
bahwa pemrograman itu penting, namun 52% responden merasa kesulitan mengikuti pembelajaran
pada tahun pertama perkuliahan dengan berbagai alasan, salah satunya yaitu kurangnya referensi
bahan belajar yang relevan sehingga penelitian ini bertujuan untuk megembangkan antarmuka situs
web e-learning untuk mahasiswa Fakultas Ilmu Komputer Universitas Brawijaya menggunakan
metode Goal Directed Design (GDD). Metode GDD memiliki enam tahapan yang memberikan solusi
pengembangan situs web sesuai dengan tujuan pengguna, yaitu Research, Modelling, Requirement,
Framework, Refinement, dan Support.
Detail desain antarmuka yang sudah dibuat berupa wireframe dilanjutkan ke tahap design refinement
menjadi sebuah purwarupa. Hal ini menghasilkan prototype jenis high-fidelty (prototype hi-fi) yakni
desain yang disempurnakan dengan sifat mendekati wujud produk akhir dan digambarkan atau dibuat
dengan sepenuhnya interaktif, mewakili keseluruhan fungsi inti produk. Hasil akhir purwarupa yang
telah dibuat akan digunakan untuk eksplorasi dan pengujian tampilan dan nuansa produk akhir pada
tahap selanjutnya. Berikut contoh utama purwarupa yang telah dibuat yakni halaman Beranda
(Gambar 5) yang merupakan salah satu dari 14 desain yang telah dibuat.

A
Pada Gambar A menjelaskan bahwa purwarupa ini memberikan informasi ke pengguna bahwa proses
yang dilakukan mengalami kesalahan yaitu NIM atau Kata sandi salah ketika melakukan login. Pada
Gambar B menjelaskan bahwa Purwarupa ini memberikan pilihan kepada user untuk menampilkan
daftar pertanyaan yang sesuai dengan keinginan user.
C. WEBSITE E-COMMERCE

E-COMMERCE BERBASIS WEBSITE PADA TOKO AEMA KACAMATA SURABAYA

MENGGUNAKAN MODEL LEAN USER EXPERIENCE
Berdasarkan masalah diatas maka solusinya yaitu perancangan UI/UX aplikasi e-commerce berbasis
web dengan metode Lean UX karena metode ini memiliki kelebihan pada tingkat keberhasilan yang
cepat namun juga tetap fokus pada tingkat pemahaman terhadap product experience yang akan dibuat.
Jumlah sampel dalam penelitian ini adalah 37 orang dengan perincian 30 orang pelanggan toko dan 7
orang karyawan toko. dapat dirumuskan sebuah masalah yaitu bagaimana merancang UI/UX aplikasi
e-commerce berbasis website pada toko AEMA Kacamata Surabaya menggunakan model Lean User
Experience.
wireframe
1) Login

wireframe Login Customer

Desain wireframe untuk login customer, akan muncul saat pengguna mengakses link yang telah
tersedia, pada login berisi username, password, button sign in, dan button register.
2) Dashboard

Dashboard

Desain wireframe Dashboard yang dapat diakses saat sukses login, pada dashboard ini berisi
list promosi produk yang paling laris dan produk yangs sedang promo.
3) Kategori

Wireframe Kategori

Desain wireframe kategori yang dapat diakses saat memilih “kategori” lalu salah satu dari kategori
“kacamata” pada sidebar, pada kategori kacamata ini berisi list produk kacamata yang terdapat tombol

4) Detail Produk

Desain wireframe detail produk yang dapat diakses saat menekan salah satu produk, pada menu detail
produk ini berisi keterangan produk, gambar beserta harga, button keranjang, button beli, button
5) Transaksi

Wireframe Transaksi
Desain wireframe transaksi yang dapat diakses saat menekan button beli pada menu detai
keranjang ataupun detail produk, pada menu transaksi ini berisi list produk yang dipilih untuk
dibeli beserta detail harga dan pemesanan, button dan button bayar.