Membuat tampilan Crisp mobile app menjadi lebih clean dan simple

Dwinawan
Paperpillar
Published in
4 min readJan 16, 2020

Tentang Klien

Crisp adalah sebuah aplikasi yang membantu para pemilik website untuk berkomunikasi dengan pengunjung website mereka melalui chat secara live atau real time atau pada saat itu juga.

Simplenya, ketika ada seseorang mengunjungi websitemu, dan orang tersebut menekan tanda chat di websitemu dan mengirimkan pesan, maka pesan tersebut akan langsung kamu terima di handphone mu.

Kebutuhan Klien

Crisp sudah memiliki aplikasi mobile yang telah berjalan selama beberapa tahun, kita sebut saja aplikasi mereka dengan Crisp versi 1.

Saat tim Crisp menghubungi Paperpillar, mereka ingin mengembangkan aplikasi tersebut, kita sebut saja aplikasi yang terbaru ini adalah Crisp versi 2.

Di Crisp versi 2 ini mereka ingin memperbarui tampilan aplikasi dan menambahkan beberapa fitur baru.

Tampilan Crisp versi 1

Berikut adalah tampilan aplikasi Crisp sebelum kami lakukan redesign

Mencari Konsep Visual

Kami lalu mencoba aplikasi Crisp versi 1 dan kami lihat apa yang bisa ditingkatkan dari tampilan ini dengan mempertimbangkan beberapa fitur baru yang akan ditambahkan.

Kami lalu menyampaikan ke klien bahwa kami akan melakukan eksplorasi design untuk mencari visual style yang tepat untuk aplikasi Crisp versi 2. Dan berikut adalah beberapa eksplorasi design yang kami lakukan.

Seperti project project lain nya, setelah melakukan eksplorasi design kami mengirimkan hasilnya ke klien dan melakukan diskusi.

Setelah berdiskusi dengan klien dan internal team, kami mencoba melakukan eksplorasi design lagi, kali ini kami mencoba untuk melihat lebih banyak referensi dan mencari inspirasi untuk pola pola layout ataupun navigasi.

Dan berikut adalah hasil eksplorasi yang kemudian menjadi design yang terpilih untuk menjadi landasan.

Konsep Redesign: Clean dan Bold

Fokus pertama kami adalah membuat aplikasi versi 2 terlihat lebih clean atau bersih.

Di halaman home kami mengusulkan untuk menghilangkan nama halaman pada menu bar di bawah dan memperlebar area di bagian atas agar terlihat lebih lega.

Di halaman settings, kami mengusulkan untuk mengubah beberapa elemen. Salah satunya adalah tombol Invisibility Mode, yang diubah menjadi Availability dan posisi nya kami ubah ke bawah agar semakin dekat dengan jempol, sehingga user mudah untuk menjangkau nya.

Kami juga menambahkan icons untuk semua pengaturan agar memperjelas fungsi nya.

Di halaman notifications, kami mengusulkan menggunakan warna putih sebagai background untuk memperjelas kesan Clean/Bersih.

Untuk menambah kesan lega, kami memperlebar jarak elemen, sehingga area tap user menjadi semakin luas.

Di halaman chat, kami tidak mengubah banyak hal. Hanya memperhalus warna dan menambahkan icon untuk mengirim chat di sebelah kanan, dan memindahkan opsi untuk mengirimkan pesan selain teks (gambar, file, suara) ke sebelah kiri

Salah satu fitur yang kami usulkan untuk dirubah adalah pada bagian pengiriman pesan suara.

Untuk mengirimkan pesan suara, kami mengusulkan agar user cukup memencet tombol mulai merekam dan mengirimkannya. Sehingga user tidak perlu repot repot menahan tombol untuk merekam suara.

Merombak halaman login dan register

Setelah menyelesaikan redesign untuk halaman halaman utama aplikasi Crisp, selanjutnya kami melakukan redesign untuk halaman login.

Karena pada halaman login tidak terjadi perubahan fitur atau fungsionalitas, maka yang kami lakukan hanya sebatas mengubah tampilan nya. Dan berikut beberapa eksplorasi design yang kami lakukan

Dan setelah berdiskusi, akhirnya dipilihlah design nomor 2. Dan berikut versi lengkapnya

Tertarik bekerja dengan Paperpillar?

Silahkan mengirimkan email ke hello@paperpillar.com
Kami tunggu email dari kalian 😉

--

--

Dwinawan
Paperpillar

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_