My #1 Redesign: Bima+ redesign user interface. (mini research)

Firman Jabbar Prakoso
3 min readJun 14, 2020

--

Yap! Selamat pagi, siang, sore atau malem tergantung kalian baca tulisan ini. Assalamualaikuum, selamat datang ditulisan pertama saya yang bisa dibilang “belagu banget baru pertama nulis udah tentang desain aja” hehe.

Di tulisan pertama ini, saya ingin menjelaskan proses singkat yang saya lakukan dalam melakukan sebuah Redesign atau mendesain ulang sebuah user interface atau ‘tampilan antarmuka’ suatu aplikasi. Disini saya baru banget belajar tentang Design Thinking yang ternyata luas banget cakupannya. Bukan tentang sekedar pola pikir yang digunakan untuk menciptakan sebuah design, tapi juga dipake untuk menyelesaikan berbagai masalah di berbagai aspek. Kalian bisa googling sendiri dah tentang Design Thinking itu pokonya seru banget! Dijamin deh!

Yap! Kembali ke topik awal, sesuai dengan judulnya, di tulisan pertama ini saya akan menjelaskan bagaimana proses redesign tampilan antarmuka aplikasi Bima+. Buat yang gatau apa itu bima+, Bima+ adalah aplikasi yang dapat digunakan para pengguna provider 3 (tri) untuk mengecek sisa kuota, membeli paket, melakukan top up game dan lain sebagainya. Nah, alasan saya memilih aplikasi ini untuk di redesign adalah saat saya mendengar adik saya mengeluh kesusahan saat pertama kali menginstall aplikasi ini dan ingin membeli paket melalui aplikasi ini.

tampilan user interface asli bima+
Tampilan awal saat aplikasi ini dibuka

Saat pertama kali kalian melihat tampilan itu, masih cukup bisa dimengerti bukan? Okay, lalu saya ingin bertanya, screen pertama yang anda lihat itu screen apa? Masuk ke section apa? Apakah screen tempat anda bisa membeli paket? Atau screen tempat anda mengecek sisa kuota anda? Apakah itu Home screen dari apps tersebut? Lalu dimana anda bisa melihat indikator screen yang sedang ada di layar itu? Apakah itu home? Berapa lama anda bisa menemukan button home? Berapa lama anda tahu cara untuk membeli paket? Mengisi pulsa? butuh waktu berapa lama sampai anda bisa bilang “Oalaaahh ini too caranya”?

Hasil Redesign Saya

Bagaimana dengan yang ini? Apakah anda tahu screen yang sedang aktif ini screen apa? Masuk ke section apa? Apakah anda tahu button mana yang harus anda tekan saat ingin membeli paket? Berapa lama anda menemukan cara untuk mengisi pulsa?

Design asli yang disajikan di aplikasi bima+ sebeneranya sudah cukup informatif dengan informasi yang lengkap bahkan sangat detail. Namun, peletakan elemen-elemen yang tidak sesuai dengan behaviour user, membuat user kebingungan. Seperti contoh tombol navigasi yang ada di bagian bawah screen.

Navigasi pada aplikasi asli bima+
Navigas pada aplikasi bima+ hasil redesign saya

Strategi yang saya lakukan adalah menyederhanakan navigation bar (nav-bar) dengan mengelompokan item yang sejenis. Untuk home, sudah pasti menjadi screen yang independen dan berdiri sendiri karena sudah spesifik konten apa saja yang ada di home. Begitupula dengan Produk3 saya buat menjadi independen karena sudah jelas konten apa saja yang ada dalam produk3. Namun untuk music, movies, apps & games dan Creative Hub saya kelompokan menjadi satu kesatuan dalam item Hiburan.

Produk3 Hasil Redesign
Hiburan hasil redesign

Silahkan anda lihat dan amati hasil redesign saya, apakah sudah lebih mudah dipaham? Atau malah membuat anda semakin pusing?

Sejatinya, design antarmuka bertujuan untuk menterjemahkan bahasa sistem ke bahasa yang dapat dimenegrti manusia dengan lebih mudah. Karena dalam desain antarmuka, bukan hanya sekedar estetika yang dikedepankan, usability dari desain itu sendiri menjadi poin penting dalam memecahkan masalah user.

--

--

Firman Jabbar Prakoso

Learning how to make a system language become understandable for people through visual arts