Pengalaman mendesain sebuah desain pengalaman pengguna
Hai, halo, selamat datang di my medium stories. Dalam tulisan kali ini saya mau berbagi sedikit pengalaman ketika mendapat kesempatan untuk berkolaborasi mendesain sebuah tampilan applikasi atau istilah kerennya itu UX (User Experience) Design atau Desain Pengalaman Pengguna (perlu diingat ya UX Design lebih dari sekedar visual design).
Namun dalam projek desain kali ini saya mendapat kesempatan sebagai visual designer, atau lebih tepatnya translator wireframe yang sudah jadi kemudian di percantik menjadi tampilan aplikasi yang lebih “tangible” maksudnya lebih jelas/gamblang/clear dari segi tampilannya.
Oh ya, untuk nama aplikasinya adalah Fajar Warrior (weis, berasa mau perang ya? tapi memang setiap muslim harus berperang melawan syetan kalau ingin bangun fajar). Dan kenapa aplikasinya berbahasa inggris?. Ya karena aplikasi ini buatan orang Malaysia. Aplikasi ini sudah rilis sejak akhir tahun 2018 dan sudah ada di play store.
Pasti kalian ada rasa penasaran bagaimana bisa saya ikut dalam project aplikasi ini? Jadi, ceritanya begini. Projek ini adalah projek sosial/solidaritas untuk team YDKMM di Malaysia dan berkolaborasi dengan tim dari Halotec Indonesia (btw thanks untuk Bang Odel yang sudah memberikan kesempatan pada saya untuk bergabung dalam projek ini), YDKMM adalah kependekan dari Yayasan Dana Kebajikan Muslim Malaysia. Ceritanya YDKMM memiliki sebuah ide untuk membangkitkan semangat gerakan sholat subuh berjamaah di masjid bagi para pemuda muslim di Malaysia. Namun karena keterbatasan biaya untuk development apps maka dilempar deh projek ini ke Indonesia. Dan pada akhirnya saya dapat kesempatan untuk ikut andil dalam pembuatan apps ini.
FYI, ada sebuah pernyataan dari pemuka agama yang menyebutkan bahwa kebangkitan umat muslim bisa terjadi ketika jumlah jamaah sholat subuh sama banyaknya dengan sholat jum`at.
Namun sayangnya banyak sekali muslim yang belum menyadari keutamaan sholat subuh, dan justru pemuka agama lain yang mengetahuinya. Dari kenyataan tersebut tercetuslah ide untuk membuat sebuah Applikasi yang dapat mengingatkan users untuk melaksanakan sholat subuh tepat waktu. Selain itu aplikasi ini juga berfungsi sebagai pengingat/reminder ibadah dan daily activities.
Nah, bagi kalian yang penasaran bagaimana detail aplikasinya, bisa kunjungi Play Store ketik “Fajar Warrior”, atau langsung klik link berikut ini yaa. Kalau kalian berkenan silakan install, boleh ngasih feedback juga lo.
Memulai Membuat Desain dengan Mencatat
Hmm mungkin cara saya membuat design sedikit berbeda, karena saya orangnya sering lupa jadi saya sering mencatat dan menuliskan coretan-coretan di kertas atau apapun medianya (meskipun terkadang catatannya juga sering kelupaan entah ditaruh dimana :D). Karena menurut saya ketika kita mendapatkan ide terkadang ide itu cepat hilang entah kemana.
Ideas are abstract, make it concrete by words
Ya memang begitulah sifat ide, ide itu abstrak dan kadang kalau tidak segera dicatat terkadang ide bisa menghilang begitu saja. Maka cara paling mudah yaitu dengan menuliskan dengan kata-kata. Begitulah kata om Chris Do dari The Futur.
Berikut beberapa catatan ide dan eksekusi visual design untuk design experience (UX Design) dari applikasi Fajar Warrior.
Bagi teman-teman yang belum familiar mengenai UX design, sedikit berbagi pengetahuan yang saya dapatkan selama bergulat dengan dunia UX design. Sepengetahuan saya, ketika merancang sebuah applikasi ataupun produk biasanya melalui beberapa tahap/proses, waktu awal-awal belajar tentang UX design, saya sering menggunakan metode element of UX -nya Bapak Jesse James Garret. Konsep tersebut menjelaskan bahwa merancang sebuah UX (Pengalaman Pengguna) itu seperti merancang sebuah bangunan. Dimulai dari membangun pondasinya terlebih dahulu. Kalau dalam UX design ya tentu pondasi awalnya yaitu kebutuhan user. Untuk lebih jelasnya bisa baca buku dari Jesse James Garret Elemet of User Experience atau bisa lihat link PDF singkatnya.
Nah dari sedikit pemaparan diatas maka untuk applikasi Fajar Warrior ini, apabila di kembalikan pada konsep Element of UX milik bapak JJG maka bisa dijabarkan sebagai berikut:
1. User Needs/Site Objectives
Untuk tahap ini adalah tahap dimana memahami apa yang sebenarnya dibutuhkan oleh user. Pada tahap inilah umumnya dilakukan user research. Namun pada projek ini sayangnya saya tidak banyak ikut andil dalam penentuan user needsnya. Jadi saya hanya mendapatkan hasil dari brainstorming, hasil user researchnya dan catatan kecil untuk apa yang dibutuhkan user pada pembuatan aplikasi ini, berikut sedikit catatanya:
- Users membutuhkan pengingat untuk bangun subuh tepat pada waktunya.
- Bisa mencari lokasi masjid terdekat dengan segala informasi atau jadwal kajian dari masjid yang disediakan.
- Users membutuhkan dorongan/motivasi untuk melakukan sholat subuh berjamaah.
Sebenarnya pada tahap pertama ini, bisa digali dengan menggunakan metode mencatat yang konstruktif dan merubah permasalahan-permasalahan yang ada disekitar kita atau yang kita dengar dengan metode HMW (How Might We?) Question dari framework Design Thinking.
2. Functional/Content Requirements
Dari kebutuhan user bisa diterjemahkan bahwa fitur/content yang dibutuhkan users adalah sebagai berikut:
- Alaram untuk membangunkan user pada waktu sholat.
- Feed untuk nasehat dan keutamaan-keutamaan sholat subuh.
- Pencarian lokasi masjid terdekat.
3. Information Architecture
Untuk Information Architecturenya (atau sering disingkat dengan IA) dalam apps ini saya tidak banyak ikut andil dalam pembuatanya. Sangat disayangkan saya tidak mengikuti semua proses penggalian Ide dan pembuatan flowcart untuk apps ini. Adapun tampilan dari Flowcart seperti berikut ini:
4. Interface Design (wireframe)
Pada tahap ke-4 ini sudah sedikit terlihat lebih tangible bentuk dan tampilan applikasinya, namun masih sebatas wireframe atau sering disebut dengan
lo-fi/low fidelity, designnya belum tampil cantik dan mempesona. Adapun wireframe appilkasi Fajar Warior seperti berikut ini:
5. Visual Design
Nah, sekarang kita masuk ke tahap paling atas sendiri yaitu Visual Design. Setelah semua tahapan proses di lewati dan sudah di tentukan bersama, kemudian tugas utama saya yaitu mempercantik wireframe yang sudah di bikin oleh team YDKMM, memang sedikit ada kendala karena bekerja secara remote dan ada sedikit miss komunikasi ketika penentuan flowcart, banyak misskomunikasi dari tim development ke produk manager dan produk owner yang ada disana. Tapi karena objektif yang sudah di tentukan maka mau tidakmau app harus segera di develop dan di publish untuk di lempar ke pasar dan ditest secara online pada akhir tahun 2018.
Saat itu saya membuat app berdasarkan flowchart yg sudah ditentukan apa adanya, dengan sedikit memberi sentuhan illustrasi pada bagian onboarding/splash screen yang tampil pada waktu pertama kali app ini digunakan oleh user, dengan tujuan untuk mempermudah dan memperjelas fungsi dari app ini.
Dalam proses membuat illustrasi ataupun sering menggunakan moodboard pada tahap awal untuk meng-combine beberapa inspirasi yang ada di kepala, kemudian membuat illustrasi baru sehingga bisa mendapatkan feel and looks yang bisa mencapai objektif yang di tentukan dan disepakati bersama, adapun catatan proses pembuatan illustrasi untuk mascot/icon app dan berbagai visual design dalam aplikasi ini adalah sebagai berikut:
Moodboard/Inspiration Board
Moodboard atau juga sering disebut Inspiration board sangat sering digunakan di berbagai macam disiplin ilmu desain. Moodboard merupakan satu cara untuk membantu membuat konsep desain yang lebih matang. Juga merupakan dasar dimana hal ini menjadi guide atau arahan bagi designer untuk mengembangkan apa yang diinginkan klien.
Berikut adalah moodboard yang saya gunakan dalam pembuatan concept dan visual design aplikasi Fajar Warrior ini.
Sketsa illustrasi dan final artwork untuk mascot dan icon app
Pada process pembuatan sketsa illustrasi biasanya saya menggunakan software Adobe Photoshop namun terkadang menggunakan Krita (btw ini software free/open source). Untuk nama karakter dan mascot pada app ini adalah Hasan.
Illustrasi Onboarding dan Splash Screen
Proses untuk membuat illustrasi untuk onboarding screen apps ini dimulai dengan membuat sketsa dari moodboard yang sudah dikumpulkan di tahap awal tadi, kemudian membuat sketsa kasar (rough-sketch) secara digital, biasanya menggunakan photoshop, kemudian untuk final artworknya sering menggunakan Adobe illustrator untuk hasil format vector (tergantung kebutuhan juga. Misal: kalau minta outputnya vector saya lebih sering menggunakan Adobe illustrator). Setelah beberapa kali iterasi illustrasi dan akhirnya jadi seperti beikut ini.
Hi-fi (High Fidelity) UI Design
Setelah selesai tahap pembuatan illustrasi kemudian masuk pada tahap pembuatan UI Design dan prototype, atau lebih tepatnya clickable UI Design untuk mempresentasikan micro-interaction pada onboarding, splash screen dan semua screen ui design pada applikasi ini, supaya lebih memudahkan tim enginer waktu mendevelope semua mockup yang sudah ada.
Untuk prototype sederhana pada aplikasi Fajar Warrior bisa di lihat pada link berikut ini.
Nah begitulah sedikit proses untuk pembuatan illustrasi, visual design, UI Design serta proses eksekusi dari sebuah UX Design pada aplikasi Fajar Warrior ini.
Saya sadari bahwa masih banyak kekurangan pada user flow applikasi yang sudah publish di Google Playstore saat ini, dan design update terbaru yang belum sempat tereksekusi dalam app ini. Mengingat karena terlalu mepetnya deadline dan resources yang ada.
Semoga kedepannya Apps ini bisa bermanfaat bagi umat muslim sedunia bukan hanya khusus di Malaysia saja. Senang rasanya bisa berkontribusi untuk membangun umat muslim ini meskipun hanya sedikit yang bisa saya berikan tapi semoga bisa menjadi amal sholeh untuk bekal kelak di akhirat aamiin.
Saran, constructive feedback dan kripik pedasnya(eh, kritik) saya tunggu lo. sebagai bahan untuk mengembangkan app ataupun tulisan yang masih jauh dari kata bagus ini. Semoga bermanfaat ya !!!,hehehe. Sampai jumpa di cerita berikutnya. Wassalam