Evaluasi Akhir Semester: Redesign Aplikasi i.saku

June 27, 2024

Evaluasi Akhir Semester: Redesign Aplikasi i.saku

Oleh Arya Widia Putra / 5025201016

Evaluasi Akhir Semester: Redesign Aplikasi i.saku

Untuk evaluasi akhir semester, saya ditugaskan untuk memperbaiki masalah yang ditemui pada aplikasi i.saku. i.saku merupakan semacam aplikasi finansial yang dapat digunakan untuk perpindahan uang dan pembayaran tagihan. Fitur yang menurut saya sedikit bermasalah adalah halaman 'Home' dan fitur 'Edit menu favorit'. Dengan demikian, saya merancang ulang aplikasi i.saku dengan cakupan halaman 'Home' dan fitur 'Menu lainnya' yang mencantumkan fitur 'Edit Menu Favorit'.

Masalah yang dapat saya ambil ada sebagai berikut:

A. Halaman home

Gambar di bawah menunjukkan halaman depan dan menu Lainnya untuk mengakses fitur Bantuan, fitur Upgrade, fitur Promosi, dan fitur Lokasi Toko. Menu ini diakses melalui tombol lainnya di sebelah kanan menu Transfer.

Menurut saya, fitur Upgrade seharusnya diletakkan di halaman depan aplikasi, bukan di belakang menu tambahan. Hal ini akan membantu menarik lebih banyak perhatian user pada fitur upgrade dan meningkatkan click pada fitur tersebut. Di lain sisi, fitur Bantuan seharusnya juga diletakkan pada halaman depan untuk memudahkan user mencari jawaban dari permasalahan yang ditemui. Selain itu, kedua fitur ini memiliki kaitan yang kurang erat dibandingkan fitur-fitur dalam grupnya (Isi Saldo, Tarik Tunai, Transfer, Lokasi Toko, Promosi) yang cenderung berfokus pada transaksi dan finansial. Selanjutnya, akses fitur promosi melalui menu lainnya ini akan dihapus karena promosi sudah dapat diakses melalui Lihat Semua Promo pada bagian Promosi Menarik di halaman Home. Dengan demikian, kita dapat langsung saja menampilkan fitur Lokasi Toko di sisi fitur Isi Saldo, Tarik Tunai, dan Transfer pada halaman depan.

B. Fitur edit menu favorit

Fitur Edit Menu Favorit dapat diakses melalui menu Lihat Semua pada daftar menu seperti yang dapat dilihat pada gambar di bawah.

Dengan menekan tombol edit di samping Menu Favorit, user dapat mengubah menu yang ingin ditampilkan di halaman Home aplikasi. Namun, terdapat sedikit bug pada fitur tersebut. Saat tombol edit ditekan, fitur menambahkan favorit tidak muncul (diasumsikan karena favorit sudah penuh). Melainkan, jika user menekan salah satu menu yang bukan favorit, user akan diarahkan ke halaman menu tersebut. Behavior aplikasi akan kembali normal jika user mengurangi salah satu menu favorit terlebih dahulu. Setelah itu, walaupun menu favorit penuh, tombol tambah menu akan tetap ada dan user akan tetap berada di halaman edit menu saat menekan salah satu menu. Bug ini dapat dilihat pada gambar di bawah.


Tampilan fitur edit menu favorit sebelum user mengurangi salah satu menu favorit	Tampilan fitur edit menu favorit setelah user mengurangi salah satu menu favorit dan menambahkan salah menu menjadi favorit

Dengan demikian, saya ingin memperbaiki behavior tersebut sehingga user tidak diarahkan ke halaman utama suatu menu ketika melakukan edit menu favorit dan pilihan untuk menambahkan akan tetap ada walaupun menu favorit sudah penuh.

1. Dokumentasi

Programming language (bahasa): Dart (Flutter)
Goal (tujuan): Melakukan redesign pada halaman 'Home' dan fitur 'Edit menu favorit' aplikasi i.saku.
Full code (kode): https://github.com/aryawidiap/isakuredesigned

Penjelasan kode

Perbaikan halaman 'Home' dan penambahan button 'Upgrade' dan 'Bantuan' pada AppBar
Kode tampilan utama dari aplikasi yang dibuat terdapat pada main.dart. Pengembang menambahkan AppBar, dengan 'action' 'Upgrade', 'Notifikasi', dan 'Bantuan'. Lalu, pada halaman 'Home' (home_page.dart), pengembang hanya menyisakan menu 'Lokasi toko' untuk dideretkan (MainTransactionSection) dengan menu yang sudah ditampilkan pada aplikasi sebenarnya (Isi Saldo, Tarik Tunai, dan Transfer). Menu 'Promosi' dihilangkan karena sudah termasuk dalam section 'Promosi menarik'.
Perbaikan halaman 'Semua Menu' dengan mengatur logika pada AppState
Pengembang mencoba memperbaiki fitur 'Edit favorit' pada 'Semua Menu' dengan membedakan antara widget yang ditampilkan saat mode Edit dan mode Tidak Edit. Mode ini digambarkan melalui state isEditFavoriteMenu. State ini digunakan oleh MenuListPage untuk menentukan apakah harus menampilkan menu yang dapat ditekan dan berpindah ke halaman menu tersebut atau menampilkan menu yang terdapat button 'Add' atau 'Remove'. State ini diubah oleh button 'Edit'/'Simpan' yang terdapat pada halaman 'Semua Menu'. Button ini mengubah state tersebut dengan memanggil fungsi toggleEditFavoriteMenu pada AppState. Lalu, tiap tombol 'Add'/'Remove akan mentrigger fungsi toggleFavoriteMenu pada AppState, yang akan menambahkan menu yang terkait ke state List tempFavoriteMenus.

List tempFavoriteMenus adalah tempat penyimpanan untuk menu favorit sementara saat diedit. Penyimpanan untuk semua menu menggunakan List allMenus dan menu favorit yang permanen (disimpan setelah diedit) disimpan di favoriteMenus. Kontrol untuk jumlah menu yang boleh dimasukkan sebagai favorite dilakukan oleh state isFavoriteFull dan maxFavorites. State isFavoriteFull akan selalu dicek saat dilakukan penambahan atau pengurangan menu pada favorit.
Permasalahan yang belum bisa diselesaikan
Penggunaan tempFavoriteMenu dan favoriteMenu masih bermasalah. Saat user belum menekan button 'Simpan', semua Widget yang mengobservasi favoriteMenu ikut berubah walaupun secara logika yang diinginkan seharusnya favoriteMenu hanya berganti saat button 'Simpan' ditekan yang mentrigger 'toggleEditFavouriteMenu'.
Selain itu, state 'isEditFavoriteMenu' juga belum kembali ke false saat user menutup halaman 'Semua Menu'. Hal ini menyebabkan menu-menu tetap dalam kondisi edit walaupun user sudah berpindah-pindah halaman.

2. Tampilan UI

Berikut adalah rancangan UI yang sudah dibuat

Gambar 1. Tampilan rancangan halaman 'Home' saat tidak dalam mode edit.

Gambar 2. Tampilan rancangan halaman 'Semua Menu' saat tidak dalam mode edit.

Gambar 3. Tampilan rancangan halaman 'Semua Menu' saat tidak dalam mode edit.

Berikut adalah UI yang terimplementasikan dengan aplikasi.

Pada Gambar 4, dapat terlihat bahwa tombol untuk 'Upgrade' dan 'Bantuan' berada bersama tombol 'Notifikasi' di AppBar pada pojok kanan atas. Pemindahan ini dapat meningkatkan visibilitas dari fitur-fitur tersebut dan meningkatkan click ratenya juga.

Gambar 4. Tampilan halaman 'Home' yang baru.

Gambar 5 menunjukkan halaman 'Semua Menu' yang baru. Gambar 6 menunjukkan bahwa button tambah atau kurang akan secara otomatis muncul pada menu-menu saat menekan button 'Edit'. Masalah yang terjadi pada aplikasi yang sebenarnya adalah button hanya muncul saat user sudah menekan button 'Remove' pada salah satu menu favorit dan menu-menu masih dapat ditekan untuk menuju halaman terkait saat posisi sedang mengedit. Hal ini agak sulit ditampilkan dengan gambar statis karena merupakan masalah pada interaksi, bukan tampilan semata.