Salaam Aplication Redesign
UI Exploration
Salaam is the Islamic application for knowing the time to pray, read Al-Qur'an, and pray guide. This is my first time trying to redesign an application with the design thinking method.
Disclaimer, this is not official.
Summary
Untuk yang tidak bisa membaca lama berikut saya kasih ringkasan sedikit tentang case study ini. Case study ini merupakan case study pertama yang saya buat dan dalam case study ini membahas tentang redesign dari aplikasi Salaam yaitu sebuah aplikasi kegiatan keagamaan agama Islam, dalam aplikasi ini berisi seperti Al-Qur'an, hadits-hadits pilihan, jadwal salat, dan panduan kegiatan keagamaan.
Overview
📱 Redesign pada tampilan utama saja.
⭐ Case study ini berdasarkan masukan yang ada pada fitur rating dari Play Store.
💡 Case study menggunakan metode design thinking.
Sebagai seorang Muslim kita diwajibkan untuk menjalankan ibadah salat 5 waktu dan juga diharuskan membaca Al-Qur’an. Salaam merupakan aplikasi Islam dari Samsung Indonesia yang berisi fitur Al-Qur’an, jadwal waktu salat, penunjuk arah kiblat, konten harian dan kontekstual, serta panduan haji dan umroh. Fitur Al-Qur’annya pun sudah menggunakan Al-Qur’an versi digital yang telah mendapatkan Sertifikat Lajnah Pentashihan Mushaf Al-Qur’an dari Kementerian Agama Republik Indonesia. Dan dalam kesempatan kali ini saya akan mencoba me-redesign aplikasi Salaam.
📄 Additional Information
Work Duration
3 minggu
Role
• UX Designer
• UI Designer
• UX Researcher
Tools
• Figma
• Maze
✍ Analisis Masalah & Users Challenges
Dalam case study ini saya mengambil data dari review para pengguna yang ada di Play Store dan dapat saya simpulkan sebagai berikut.
1. "Bookmark pada surat yang sering hilang sehingga sulit untuk melanjutkan membaca."
Dari review yang saya baca beberapa pengguna mengalami kesulitan dalam mengakses bookmark atau penanda mereka bahkan para pengguna juga mengeluhkan bookmark mereka sering menghilang.
2. "Tidak adanya fitur pencarian kata pada terjemahan Al-qur'an."
Dalam aplikasi sebenarnya terdapat fitur pencarian namun apabila kita akses fitur tersebut bukan fitur pencarian kata melainkan lebih ke pencarian fitur dalam aplikasi Salaam.
3. "Perpindahan antar menu yang masih ada jeda."
Para pengguna juga ada yang mengeluhkan perpindahan menu dalam aplikasi Salaam tidak begitu smooth karena masih ada jeda.
4. "Penambahan visual agar lebih menarik."
Secara fungsi aplikasi Salaam sudah cukup baik untuk mengakomodasi pengguna untuk membaca Al-Qur'an dan melihat jadwal salat namun dari segi visual aplikasi Salaam masih terasa kaku karena hanya ada icon saja sehingga pengguna menginginkan penambahan visual dari aplikasi tersebut.
5. "Perlu adanya upgrade pada tampilan."
Beberapa review yang saya baca juga banyak yang memuji dari segi fungsional dari aplikasi ini namun menyayangkan tampilan yang masih sangat flat sehingga sebagian dari mereka banyak yang meminta untuk ada upgrade pada tampilan aplikasi ini.
Selain 5 hal di atas berdasarkan review di Play Store ada juga kebiasaan pengguna dalam menggunakan aplikasi ini yaitu hanya mengakses salah satu fitur saja dan hal ini saya validasi dengan mewawancarai dua orang teman yang menggunakan aplikasi serupa.
🙋♂️ User Persona
Persona merupakan sebuah cerita yang mendeskripsikan dari seseorang secara spesifik dan dalam hal ini persona juga mempunyai sebuah nama, sebuah kehidupan, dan sebuah kepribadian. Perlu diingat juga bahwa persona ini tidak memakai orang sungguhan melainkan gambaran dari seseorang yang mewakili sebuah karakteristik pengguna.
"Because you simply cannot make a single design be the best for everyone, it is better to have a small percentage of the user population completely satisfied than the whole population halfsatisfied."
- (Hartson and Pyla, 2012)
♻ Perancangan User Flow
Dari review yang saya baca, banyak dari pengguna menggunakan aplikasi Salaam hanya untuk membuka salah satu fitur saja dan jika sudah selesai maka aplikasi tersebut langsung ditutup, maka berikut ini flow chart yang saya buat.
✏ Sketch
Di atas merupakan sketsa kasar dari aplikasi yang saya buat, mari kita bedah satu-satu.
Sketch - Beranda
Nomor 1 - Menu bar, di dalam menu bar terdapat menu-menu dari fitur utama dari aplikasi tersebut seperti fitur Al-Qur'an dan jadwal salat.
Nomor 2 - User Profile dan Setting, untuk menghemat space, profil pengguna dan pengaturan dibuat menjadi satu halaman dikarenakan fitur login pada aplikasi hanya untuk menyimpan data pengguna seperti bookmark Al-Qur'an saja.
Nomor 3 - Fitur Tambahan, fitur seperti panduan haji dan panduan salat sebelumnya tersembunyi pada hamburger menu aplikasi tersebut dipindahkan di halaman beranda agar memudahkan pengguna untuk menemukan dan memakai fitur tersebut, selain itu ditambahkan juga fitur panduan zakat seperti yang dikeluhkan pengguna tentang kurangnya fitur panduan zakat. Hamburger menu pada aplikasi ini juga saya hapus karena isinya hanya berupa fitur utama dan fitur tambahan sehingga tidak terlalu efektif dalam penggunaannya.
Nomor 4 - Selengkapnya, button ini berfungsi untuk menampilkan daftar ceramah lengkap pada hari tersebut.
Nomor 5 - Ceramah, dalam cards ini ditampilkan cuplikan ceramah pada hari tersebut untuk membaca secara lengkap pengguna hanya tinggal men-tap cards tersebut.
Nomor 6 - Pencarian Menu/Ceramah, fitur pencarian ini untuk membantu pengguna untuk mencari fitur atau ceramah yang ada pada aplikasi.
Sketch - Al-Qur'an
Nomor 1 - Menu bar, masih sama seperti yang sebelumnya di dalam menu bar terdapat menu-menu dari fitur utama.
Nomor 2 - Halaman yang sedang dibaca, dalam cards ini menampilkan informasi surat yang sedang dibaca oleh pengguna sehingga pengguna bisa lebih cepat mengakses ayat tersebut untuk melanjutkan membaca Al-Qur'an.
Nomor 3 - Bookmark, membantu pengguna untuk menemukan penanda ayat yang sudah mereka baca contohnya ketika pengguna menemukan suatu arti dari ayat yang sangat relevan dengan dirinya fitur ini sangat membantu pengguna untuk menemukan kembali ayat tersebut apabila ingin membacanya lagi sewaktu-waktu.
Nomor 4 - Pencarian, bar ini membantu pengguna untuk menemukan arti atau topik tertentu yang ada pada Al-Qur'an.
Nomor 5 - Surat, dalam cards ini menampilkan nama surat serta nomor surat tersebut bila pengguna ingin membaca secara lengkap pengguna hanya tinggal men-tap cards tersebut.
Sketch - Salat
Nomor 1 - Menu bar, masih sama seperti yang sebelumnya di dalam menu bar terdapat menu-menu dari fitur utama.
Nomor 2 - Penghitung Waktu Mundur Salat Berikutnya, salah satu fitur andalan dalam aplikasi ini adalah penghitung waktu mundur untuk salat berikutnya.
Nomor 3 - Lokasi, menampilkan lokasi berdasarkan lokasi pengguna saat itu.
Nomor 4 - Arah Kiblat, button ini berfungsi untuk menampilkan arah kiblat.
Nomor 5 - Jadwal Salat, menampilkan tanggal hari ini beserta jadwal salat.
Nomor 6 - Next & Previous, untuk melihat jadwal salat hari kemarin dan hari berikutnya.
Wireframe
🎨 Design System
Menggunakan warna hijau dan jenis font sans serif yang bernama Product Sans sebagai font utama.
🔎 Perubahan Pada Tampilan Utama Aplikasi
Beranda
Beberapa fitur yang tersembunyi pada hamburger menu dipindahkan ke beranda agar user bisa mudah memakai dan menemukan fitur tersebut.
Menu Salat
Ditambahkan visual yang menunjukan waktu salat berikutnya dan warna langit akan berubah seiring perubahan waktu salat.
Menu Al-Qur'an
Fitur seperti surat dan ayat yang terakhir sedang dibaca dipindahkan ke tampilan utama menu Al-Qur’an untuk menjawab beberapa keluhan pengguna.
Prototyping
✅ Usabillity Testing
Usabillity testing menggunakan website Maze.co, dengan dua skenario yaitu skenario melihat keseluruhan tampilan aplikasi lalu menilainya dan skenario selanjutnya untuk mengakses halaman "lanjutkan membaca surat".
Pada skenario pertama yaitu melihat keseluruhan tampilan aplikasi lalu dinilai hasilnya adalah sebagai berikut.
Dan berikut alasan dari penilaian tiga orang tersebut.
Berikutnya usabillity testing pada skenario untuk mengakses halaman “lanjutkan membaca surat” terlihat tidak ada yang direct success bahkan 1 dari 3 orang tersebut melakukan give-up atau menyerah pada skenario ini.
Jika diambil kesimpulan dari keluhan di atas maka perlunya perbaikan agar pengguna bisa lebih jelas melihat fitur “lanjutkan membaca Al-qur’an” sehingga pengguna bisa lebih sadar terhadap fitur tersebut ketika masuk ke menu Al-qur’an dan maka dari itu diperlukannya iterasi dari redesign ini.
Penutup
Setelah melakukan mentoring dengan orang yang sudah berprofesi sebagai UI designer dalam case study ini masih banyak yang perlu diperbaiki dari case study ini seiring berjalannya waktu saya akan terus belajar mengenai cara membuat sebuah study case yang baik dan efisien.