Case Study: Redesign Illustrasi Halaman Benefit Mister Aladin
Di tulisan kali ini saya akan menceritakan proses pengerjaan illustrasi untuk halaman Benefit pada aplikasi Mister Aladin.
Sebelum masuk lebih jauh mengenai halaman tersebut, saya akan ceritakan sedikit mengenai halaman Benefit.
Tapi.. sudah download Mister Aladin kah?
Kalau belum, boleh download di link berikut.
Jadi, halaman Benefit ini akan bercerita mengenai apa keuntungan yang akan di peroleh pengguna ketika menggunakan aplikasi Mister Aladin, salah satunya mengenai promo, harga, customer service dan lain-lain.
Mari kita lihat desain benefit Mister Aladin sebelum di redesign
Lalu, kenapa diperlukan redesign? Berikut penjelasannya
- Mengganti style design. 2016, Mister Aladin menggunakan halaman screenshot langsung dengan highlight-highlight, 2017 halaman ini mulai menggunakan illustrasi vector dan outline dan pada 2018 Mister Aladin menggunakan style illustrasi tanpa outline.
- Mengikuti perkembangan visual dari brand Mister Aladin. https://www.behance.net/gallery/61584071/Guideline-KV-Banner-Misteraladincom
- Mencari style illustrasi. Saat ini Mister Aladin belum memiliki style illustrasi, maka dari itu diperlukan style guide untuk illustrasi khas Mister Aladin yang dapat diaplikasikan ke seluruh halaman baik website maupun apps.
- Perkembangan konten. Seiring berjalannya waktu, Mister Aladin memiliki fitur yang bertambah dan ini yang akan di jelaskan di halaman benefit.
Jika dilihat ke beberapa kompetitor sejenis, lebih banyak style yang digunakan adalah illustrasi atau vector, apalagi ketika kita lihat atau mencari referensi, jarang ditemukan halaman onboarding (atau Benefit) ini dengan style foto — screenshot seperti yang kami gunakan.
Coba kita lihat hasil Googling atau Dribbling halaman onboarding. Saat ini mayoritas style yang digunakan adalah illustrasi.
Jadi, poin-poin diatas adalah dasar kenapa kami ingin me-redesign halaman Benefit Mister Aladin.
Lalu, selanjutnya?
- Membaca Brief
Pada proses ini, User dalam artian di kami adalah Team Bisnis, akan memberikan brief, konten-konten apa yang akan di tuangkan ke dalam illustrasi. Mereka akan share dokumen dalam bentuk text dan sudah disertai dengan copy final yang sudah di kerjakan tim copywriter.
2. Keywording
Dari poin-poin yang ada, masing-masing di baca dan dipahami dan mulai mencoba membuat keyword-keyword yang akan memudahkan untuk masuk ke proses visualisasi. Keyword ini dapat dituangkan sebebas-bebasnya dan seliar mungkin.
3. Referensi
Ketika semua keyword sudah terkumpul, mulai hayalkan kira-kira visual-visual apa yang dapat dibuat dan dikembangkan. Referensi? tidak ada salahnya untuk memulai dengan mencari referensi untuk menguatkan ide-ide yang ada di kepala kita. Referensi bisa dicari dari berbagai macam situs.
https://id.pinterest.com/
Khusus dibagian illustrasi ini saya banyak terpengaruh dengan style illustrasi yang di buat teman-teman Gojek-UX
https://asphalt.gojek.io/foundations/Communication/
4. Sketsa
Pensil, penghapus dan kertas (bekas sekalipun) tidak pernah berbohong. Tuangkan ide kedalam kertas, pastinya sesuai dengan keyword dan referensi yang telah dibuat.
5. Scan/Foto Sketsa dan Coloring
Scan/foto sketsa yang sudah dibuat, lalu mulai masuk ke proses digital. Pada tahap ini saya menggunakan Adobe Illustrator.
6. Presentasi ke user
Setelah semua illustrasi selesai, proses selanjutnya adalah presentasi ke user. Jelaskan illustrasi yang sudah dibuat dan jelaskan maksud dari setiap gambar yang ada. Dan pastinya, di proses ini akan ada penyesuaian alias REVISI. Tapi, designer tidak boleh anti dengan poin ini.
Ambil value positifnya saja dari REVISI dengan tetap saat menjelaskan, kita harus punya argumen untuk setiap visual yang kita buat, jangan sampai 100% tunduk dengan kemauan user yang mungkin (sekali lagi mungkin) terlalu subjektif atau tidak sesuai dengan visual kita, kembalikan itu semua ke goal yang akan dibuat.
7. Asseting
Proses panjang revisi dan review pada akhirnya pasti akan selesai juga. Untungnya dalam proses pengerjaan page ini, team saya ‘hanya’ terkena 1x minor revisi. Proses akan dilanjutkan dengan mengirim asset yang ada khususnya asset illustrasi ke rekan-rekan developer yang akan upload ini ke aplikasi Mister Aladin.
8. Live!
Feeling yang paling menggembirakan adalah ketika kita melihat karya yang kita buat sudah live di aplikasi Mister Aladin.
Kesimpulan
Proses pembuatan illustrasi atau halaman apapun pasti akan berbeda prosesnya, apakah itu di team kami dan juga pastinya di team lain, tapi intinya ketika kita membuat sesuatu, yang paling pertama harus diketahui adalah goal dari apa yang mau kita buat. Contohnya pada illustrasi yang sudah saya kerjakan, kami tau inti dari masing-masing poin di Benefit ini dan di terjemahkan ke keyword lalu mulai di visualisasikan sampai ke desain final.
Semoga bermanfaat :)
- note: Mari berjejaring di dribbble dan behance
