Desain UI
Antarmuka Kongkong
Antarmuka responsif dan mobile-first untuk platform crowdfunding mahasiswa.
- Peran
- UI Designer
- Durasi
- 2020
- Stack
- Interface
- Bootstrap
- Responsive
- Mobile first
Brief
Antarmuka untuk mahasiswa: fleksibel, responsif, dan mampu menampilkan kegiatan yang dijalankan oleh mahasiswa maupun organisasi kemahasiswaan.
Solusi
Dibangun dari nol dengan Bootstrap — tanpa template — dengan memprioritaskan tampilan mobile, karena ponsel adalah perangkat yang paling sering dipakai mahasiswa. Sisi engineering-nya ada di proyek Kongkong.
Dua jenis pengguna, dua perjalanan
Kongkong melayani dua jenis pengunjung yang sangat berbeda. Seorang pendukung datang dari tautan yang dibagikan dan harus bisa sampai ke sebuah proyek lalu mendukungnya tanpa membuat akun. Seorang mahasiswa atau organisasi kemahasiswaan masuk untuk menerbitkan proposal dan memantau perkembangannya. Setiap layar dirancang untuk salah satu dari dua perjalanan itu, masing-masing dengan satu aksi utama.
Keputusan desain
- 01
Mobile first
Layout didesain di lebar ponsel lebih dulu, baru kemudian dibiarkan melebar menjadi kolom di desktop — bukan dijejalkan belakangan.
- 02
Satu kolom pencarian
Halaman beranda punya satu judul, sapaan yang ramah (#SohibKongkong), dan satu kotak pencarian. Tidak ada yang menyainginya.
- 03
Progres di setiap kartu
Setiap kartu proyek menampilkan pemilik, tanggal, dan bar pendanaan, sehingga pendukung bisa membandingkan proyek dalam sekali lihat.
- 04
Navigasi dalam jangkauan jempol
Di mobile, navigasi atas pindah ke tab bar bawah: tiga tab untuk tamu, lima setelah masuk.
- 05
Aksi utama di tengah
Bagi mahasiswa yang sudah masuk, tab tengahnya adalah “+” — membuat proposal berada tepat di tempat jempol beristirahat.
- 06
Komponen yang sama, di setiap ukuran
Kartu, tab, dan ringkasan aktivitas adalah komponen yang sama di desktop dan mobile, hanya disusun ulang.
Rincian komponen
Diambil dari layar-layar di atas, inilah bagian-bagian yang membentuk seluruh antarmuka.
Di mobile, navigasinya berupa tab bar di bawah. Tamu mendapat tiga tab — proposal, dokumentasi, dan masuk, sama dengan item navigasi di desktop:
Setelah masuk, jumlahnya bertambah menjadi lima, dan tombol "+" untuk proposal baru menempati posisi tengah:
Palet
Sengaja dibangun di atas warna default Bootstrap: biru yang familier untuk aksi, teal yang lebih terang untuk tautan dan nama, serta permukaan abu-abu yang sejuk — cepat dibangun, dan mudah dikembangkan oleh developer berikutnya.