Redesign SocioEmpathy Apps

Halo! Kali ini gue ingin mempost hal yang selama beberapa tahun ini menjadi fokus gue dalam kuliah. Ya, hal itu merupakan User Experience atau yang biasa disingkat menjadi UX.


Sebenarnya apa sih UX itu? Untuk lebih jelasnya bisa dilihat gambar dibawah ini betapa UX itu amatlah luas.

Sumber: http://uxindo.com/user-experience-dan-user-interface/

Nah UX ini gampangnya adalah bagaimana pengguna itu merasakan sebuah aplikasi, apakah aplikasi ini nyaman untuk mereka, user merasa dengan menggunakan aplikasi ini mereka dapat memecahkan masalahnya. Nah ini nantinya akan berimplikasi pada kepuasan pengguna dan akhirnya menjadikan aplikasi kita digunakan secara terus menerus oleh pengguna.

Tentunya untuk mendapatkan kepuasan tersebut diperlukan sebuah riset yang panjang dengan disertai dengan testing di setiap iterasinya. Untuk itu dalam mendesign sebuah aplikasi memang tidak main-main. Perlu proses yang panjang untuk pada akhirnya mendapatkan aplikasi yang dibutuhkan dan dipakai terus menerus oleh pengguna.

Oke cukup bahas tentang UX nya.

SocioEmpathy

SocioEmpathy. Merupakan sebuah platform kepekaan sosial yang berbasis ICT untuk membantu keluarga korban perceraian dan KDRT guna menurunkan tingkat depresi dan stress.

Jadi, pada hari rabu kemarin tanggal 18 Oktober 2017, gue beserta Guntur dan juga Yoga teman satu Ilmu Komputer di IPB berkesempatan mengikuti Hackathon Firebase yang diselenggarakan oleh Google. Ya, ini merupakan Hackathon perdana gue dan langsung di plotin sebagai hipster. Karena Guntur merupakan seorang Hustler dan Yoga sebagai Hackernya. Alhasil gue mencoba untuk melakukan redesign terhadap tampilan aplikasi SocioEmpathy yang sebelumnya memang sudah pernah di-develop oleh mereka.

Setelah melihat aplikasi SocioEmpathy ini, gue mencoba untuk melakukan beberapa perombakan disana sini. Tidak semua tampilan diubah namun hanya pada beberapa fitur/halaman yang dianggap kurang efisien dan mempunyai ke-ambiguitas yang akan membingungkan user.

Redesign Halaman Profile

Halaman setting sebelum redesign

Awalnya SocioEmpathy memiliki 5 bar dalam navbar yang disediakan untuk pengguna. Namun setelah melihat bahwa halaman setting ternyata memiliki ambiguitas yang akan membingungkan pengguna karena di navbar tertulis setting sedangkan pada halaman atas tercantum bahwa halaman tersebut adalah profile, maka saya akhirnya memutuskan bahwa halaman setting ini dapat dijadikan halaman profile dengan tambahan ditampilkan fitur followers dan following. Pergantian tampilan ini dimaksudkan untuk menghilangkan ambiguitas karena profile dan setting merupakan 2 hal yang berbeda. Selain itu tampilan navbar dengan 4 button lebih nyaman untuk dipandang dibandingkan dengan 5 button.

Halaman Profile setelah redesign

Pada halaman profile setelah redesign, ditampilkan hanya 4 button pada navbar dengan menghilangkan button friend. Fitur friendlist dapat dilihat pada button following atau followers. Disini pengguna juga mendapatkan rekapan berupa post yang telah mereka publish sebelumnya.

Halaman setting berupa fitur anonymous mode, set profile name dan lain-lain dapat diakses dengan menekan tombol titik tiga yang berada di pojok kanan atas.

Redesign Halaman Setting

Halaman setting setelah redesign

Fitur setting untuk mode anonymous, set profile name, set username, set description, set email address, dan set password yang sebelumnya diganti dengan satu persatu setelah redesign dimudahkan dengan mengganti semuanya dengan sekali klik save. Lebih mudah dan tidak berulang!

Redesign Halaman Friendlist

Halaman Followers setelah redesign

Sebelumnya telah disinggung bahwa button friend dalam navbar dihilangkan. Untuk menggantikannya maka dibuatkan halaman followers yang akan menampilkan user mana saja yang sudah memfollow profile sang pengguna. Jika ingin menambah teman, maka pengguna dapat menekan tombol add friend pada pojok kanan atas. Pengguna juga dapat mem-follow back pengguna lain dengan menekan tombol + pada halaman ini.

Redesign Halaman Timeline

Halaman Timeline sebelum redesign

Pada halaman timeline sudah baik dan tidak membingungkan pengguna. Terkadang orang yang mengalami masalah cenderung untuk melampiaskan perasaannya di sosial media. Dan disini pengguna dapat menulis apapun perasaan mereka yang selama ini membuncah dalam hati mereka. Dan jika mereka menginginkan privasi pada postingan mereka, yang harus dilakukan adalah mengaktifkan mode anonymous dan boom pada timeline tidak akan ditampilkan nama dari profile melainkan menjadi anonymous. Fitur ini dirasa penting karena beberapa dari pengguna yang mengalami masalah tidak ingin dirinya diketahui, mereka hanya butuh untuk didengarkan masalahnya.

Sekilas mungkin tidak ada masalah dalam tampilan ini. Tapi tunggu dulu, ternyata ketika ingin mengetikkan sesuatu dan tulisan yang akan kita buat ingin kita review kembali, pengguna akan kesulitan karena field yang disediakan terbatas untuk tulisan yang panjang.

Field yang terbatas dalam fitur Express your feeling

Untuk itu, terjadilah perombakan tampilan dalam fitur Express your feeling ini untuk memudahkan pengguna mereview tulisannya.

Halaman Timeline setelah redesign

Pada halaman ini pengguna dapat menuliskan segala keluh kesah mereka dengan menekan bulatan biru berlambang pensil yang berada tepat diatas button profile. Ketika menyentuh button tersebut pengguna akan di-direct ke halaman posting. Perubahan lainnya yang terlihat adalah perubahan warna pada fitur how’s your mood today? hal ini dimaksudkan untuk mempertegas status kebahagiaan pengguna. Jika pengguna mengalami depressi maka button yang dipilih adalah warna merah karena merah cenderung dengan status “bahaya” dan jika pengguna sedang happy maka pengguna dapat memilih warna biru terang karena menurut psikologi, warna biru merupakan salah satu warna yang akan memberikan kedamaian. Selain biru, warna putih dan abu-abu juga dapat memberikan kenyamanan pada orang yang melihatnya. Itulah mengapa dalam aplikasi SocioEmpathy warna yang digunakan adalah ketiga warna tersebut

Halaman Express your feelings setelah redesign

And that’s it! semoga dapat menjadi referensi dalam melakukan redesign. Mohon maaf apabila banyak kesalahan disana-sini, penulis juga masih perlu banyak belajar. Segala kritik dan saran sangat penulis terima dengan tangan terbuka. Have a nice day!

Belajar berbuat kebaikan dari hal-hal yang kecil, kepada lingkungan, dan orang-orang sekitar tanpa pembedaan status sosial
“If you try to fix violence with violence, you do nothing but create violence” — Tom delonge

Tambahan foto ketika kelompok kami mengikuti perlombaan Firebase Hackathon yang diselenggarakan oleh Google.