UI/UX Case Study #1.5: Lazada Mobile App

Judulnya agak bingungin ya? Kenapa #1.5? Bukankah ini case study ke #2 setelah case study tentang EduX kemarin?

Jawabannya ya karena case study ini sebenarnya adalah case study pertama saya, bahkan sebelum mengikuti bootcamp kemarin. Saya membuat case study ini dari November 2020 kemarin, setelah promo 11.11 berakhir. Tapi mengendap di draft karena malah sibuk bikin yang lain dan fokus bootcamp.

Setelah selesai bootcamp dan segala macamnya, saya kira sekarang adalah waktunya menyelesaikan case study ini. Terlebih karena saya juga baru menemukan case baru yang patut dibahas saat saya baru meng-install aplikasi Lazada di hp orang tua saya. Sesungguhnya aplikasi yang baik adalah aplikasi yang bisa digunakan oleh orang tua dengan baik hehe.

Nah alasan saya mengangkat Lazada sebagai bahan untuk case study kali ini juga karena saat 11.11 kemarin, salah satu influencer di Twitter bertanya kepada pengikutnya mengenai pengalaman berbelanja mereka di 11.11. Jawaban mereka kebanyakan mengungkapkan kesulitan mereka dalam menggunakan aplikasi mobile Lazada. Hal ini sangat disayangkan karena menurut beberapa dari mereka justru promo dari Lazada lebih menarik daripada marketplace lainnya. Berdasarkan latar belakang tersebut, saya pun tertarik untuk membuat UI/UX case study mengenai Lazada Mobile App.

Objective

Tujuan dari studi kasus ini adalah untuk membuat aplikasi mobile Lazada lebih user-friendly sehingga mudah digunakan oleh kalangan.

Tools

1. Twitter: media untuk mengumpulkan review dan feedback mengenai pengalaman menggunakan apliakasi mobile Lazada
2. Playstore: media untuk mengumpulkan review dan feedback dari user Lazada
3. Figma: aplikasi untuk design dan prototyping UI design

Limitation

1. Data/researh yang didapatkan kurang karena keterbatasan waktu,
2. Design yang dibuat hanya berdasar dari data reliability dan assumption based

Disclaimer!

Seluruh icon yang digunakan dalam design UI bukanlah buatan saya, tapi merupakan plugins dari Figma yang saya dapat dari;

1. Iconify
2. Flaticon

Research

Saya mengumpulkan sekitar sepuluh review user dari media sosial Twitter dan lima feedback user yang saya dapatkan dari komentar di Playstore. Mereka semua datang dari latar belakang usia, pekerjaan, bahkan negara yang berbeda. Melalui komentar dan review dari users ini, saya jadikan data sebagai research mengenai aplikasi mobile Lazada.

Problem #1: “Confusing UI”

Lima review user di atas adalah review yang saya temukan di Twitter. Lima review ini meski datang dari latar belakang usia, gender, dan kewarganegaraan yang berbeda tetapi keluhan yang mereka suarakan tetap sama yaitu UI yang membingungkan.

Kemudian saya pun berhasil untuk follow up mengenai review mereka tentang UI aplikasi Lazada. Beberapa diantaranya berpendapat bahwa warna yang tidak “konsisten” dan pemilihan font yang kurang bagus juga memainkan peran penting terhadap ketidaksukaan mereka kepada UI Lazada.

Problem #2: “A bit too cluterry and not user-friendly”

Dari kelima review di atas, tiga diantaranya adalah review user dari Playstore. Kelima feedback di atas merupakan pain points lanjutan yang masih berkaitan dengan UI dari aplikasi Lazada. Banyaknya komponen yang ditampilkan di halaman muka membuat user kebingungan untuk menggunakan aplikasi. UI yang ramai dan banyak komponen seperti itu memang tidak cocok untuk era serba simpel dewasa ini. Sehingga banyak user yang menginginkan UI yang lebih simpel dan ‘clean’ agar experience dalam menggunakan aplikasinya pun juga semakin baik.

Problem #3: Can’t Differentiate between Sign Up and Log In

Review di atas saya dapatkan dari review di Playstore mengenai aplikasi mobile Lazada. Hal ini juga yang saya rasakan pertama kali saat menggunakan aplikasi Lazada. UX writing juga berperan dalam pain point ini. Tidak adanya clear message yang menavigasi kita untuk sign up atau log in ini membingungkan user ketika pertama kali menggunakan aplikasi.

Problem #4: Doesn’t have a ‘forgot password’ option

Hal ini adalah permasalahan yang baru saya temukan saat saya membantu ibu saya sign in aplikasi Lazada siang tadi. Namanya orang tua, pasti gampang lupa akan password yang beragam di tiap tiap aplikasinya. Normalnya, setiap aplikasi tentu memiliki opsi forget password yang akhrinya mereset password kita saat kita lupa dengan password kita. Seperti yang terjadi pada ibu saya.

Tapi uniknya, Lazada justru seperti memaksa usernya untuk mengingat password dan tidak diberikan kesempatan untuk mereset.

Alhasil ibu saya disuruh kembali satu jam karena salah memasukkan password terus-terusan. Tentu pengalaman yang buruk bagi seorang user.

Data dari komentar-komentar user tersebut kemudian saya kumpulkan dan saya susun dalam affinity map.

Affinity Mapping

Dari hasil research dan affinity map ini saya simpulkan bahwa;

1. User menginginkan UI Lazada menjadi lebih bersih, rapi, dan simpel tanpa terlalu banyak informasi di dalam satu page
2. User menginginkan laman log in dan sign up page terpisah dengan jelas
3. User membutuhkan opsi ‘lupa password’ agar bisa menggunakan akun lamanya

User Persona

user persona

User persona ini saya buat sebagai representasi segmen user berdasarkan hasil research sebelumnya. Digambarkan seseorang bernama Siti berusia 35 tahun. Ia sebelumnya sering berbelanja online via Instagram yang mana prosesnya lebih mudah karena ia hanya perlu ke Instagram penjual dan melakukan transaksi saat itu juga. Saat sale 11.11 datang, teman-teman Siti merekomendasikan Lazada untuk berbelanja karena promonya yang lebih baik daripada e-commerce lainnya.

User Flow

User flow ini dilakukan secara terpisah berdasarkan pagenya. User flow pertama adalah user flow untuk page Log In/Sign Up.

user flow

Dalam page Log In/Sign Up ini saya merubah tampilan dan flow saat ingin Log In atau Sign Up. Hal ini untuk membedakan dan mengurangi kebingungan user ketika ia ingin sign up atau log in.

Hal lain yang saya rubah adalah copy writingnya yang menurut saya tidak konsisten akan pemakaian Log In di bahasa Inggris dan Daftar di bahasa Indonesia. Sehingga di user flow saya menggunakan copy writng dalam bahasa Inggris untuk keduanya, menjadi Log In dan Sign Up. Jika ingin bahasa Indonesia maka copy yang cocok adalah Masuk dan Daftar.

Lalu selanjutnya adalah user flow dari page Flash Sale.

user flow flash sale

Di user flow ini yang saya rubah adalah dengan menambah CTA yang jelas agar pengguna pun tidak bingung klik dimana ketika menemukan barang yang mereka inginkan. Perubahan akan lebih terlihat di high-fidelity design.

User flow yang dirubah selanjutnya adalah user flow dari tab Paling Populer. Page ini berada di bawah tab Flash Sale dan memiliki direktori yang cukup membingungkan. Hal ini dikarenakan steps yang dilalui oleh user terlalu banyak dengan navigasi yang kurang jelas. Dalam produk pilihan terdapat pilihan lain yang justru membingungkan user.

user flow paling populer

Banyak sekali direktori yang ‘boros’ dan tidak efektif yang kemudian membuat quick action di homepage seakan tidak berguna. Mungkin tujuan awalnya adalah mengurangi jumlah tabs yang ada di homepage. Tapi pilihan ini justru menurut saya membuat user bingung. Sehingga tab Paling Populer ini saya sederhanakan dengan membaginya menjadi tabs terpisah. Terdapat tab Lazada’s Pick atau Pilihan Lazada, tab Produk Terlaris, tab Sedang Tren, dan tab Hot Deals. Tab Paling Populer pun saya hapus untuk mengurangi kebingungan user.

Ideasi

Dalam proses ideasi ini saya melihat kembali mengenai brand color dari Lazada dan mengidentifikasi kembali secara spesifik apa yang membuat UI Lazada terlihat berantakan di mata user. Saya pun bertanya kepada salah satu user Lazada yang kini tidak lagi menggunakannya. Berikut jawabannya;

Apa yang disampaikan oleh dia, selaras dengan apa yang disebutkan oleh user lainnya di awal. Sehingga fokus utama saya saat membuat design nanti adalah warna dan penempatan tiap-tiap elemen.

Dalam proses ideasi ini pun juga saya mencari insight lebih mengenai UI maupun UX Lazada dari akun instagram @designrant yang sebelumnya juga mengkritik perihal UI/UX aplikasi Lazada.

Brand identity Lazada dari yang saya tangkap (mohon masukannya jika salah wahai suhu design) memiliki tiga warna utama, warna oranye dengan hex color #F05900, warna pink dengan hex color #EE093E, dan warna biru dengan hex color #000083. Warna ini saya dapatkan dari warna logo Lazada sendiri.

logo lazada

Dari warna tersebut saya kemudian mencari tint dan shade untuk menghiasi high-fidelity design saya nantinya.

High-fidelity Design

Saya kira mungkin akan lebih baik untuk langsung menunjukkan visual dari re-design mobile app Lazada. Hal ini juga guna mempersingkat tulisan ini.

Dalam splash screen, tentunya saya menyamakan dengan aplikasi yang sekarang dengan menggunakan 3 warna utama dari Lazada. Di halaman home (disitu saya crop karena saya membuatnya untuk scrolling) yang saya rubah adalah dengan menambahkan bar untuk scan QR code, Lazada Credit, dan Voucher Saya.

Di aplikasi, fitur Lazada Credit dan Voucher Saya baru bisa diakses jika kita membuka page profile/akun. Tentu jika Lazada menginginkan fitur Lazada Credit ini berhasil, maka fitur ini harus ditampilkan di depan yaitu di Homepage ini karena Homepage ini menjadi halaman pertama yang dilihat oleh user pertama kali saat membuka aplikasi. Saat melihat fitur tersebut tentu akan muncul rasa penasaran user dan kemudian user mengakses fitur tersebut. Hal itu juga saya terapkan pada fitur Voucher Saya. Alasan saya menaruh fitur Voucher Saya di Homepage adalah user bisa tertarik berbelanja di Lazada setelah ia melihat voucher yang ada.

Hal lain yang saya ubah adalah saya menambahkan icon ‘heart’ dan ‘bell’ di sebelah search bar. Hal ini saya gunakan untuk memudahkan user dalam melihat wishlist dan notifikasi dari aplikasi yang sebelumnya juga perlu pergi ke Profile page terlebih dahulu untuk bisa mengakses fitur tersebut.

Perubahan lain yang saya buat adalah seperti yang sudah dijelaskan di bagian user flow bahwa tab Paling Populer saya pecah menjadi beberapa tab yang terpisah. Dengan begitu, antarmuka terlihat lebih rapi dan tertata sesuai dengan kategorinya. Untuk tab Hot Deals saya buat menjadi fitur scroll seperti dengan LazMall, LazGlobal, dll.

Di Homepage ini juga terdapat copywriting yang saya rubah seperti Diskon Terbesar > Hot Deals, Sedang Tren > Produk Populer, dan Lanjutkan Belanja > Lihat Lainnya. Perubahan ini dikarenakan menurut saya lihat lainnya lebih tepat untuk memberikan kesan “masih ada produk lain untuk flash sale ini”. Sedangkan di kepala saya ketika melihat lanjutkan belanja agak rancu, lanjutkan belanja kemana? Masih flash sale atau bukan? Seperti itu. Begitu juga dengan yang lainnya.

Perubahan selanjutnya yang saya buat adalah perubahan di Profile page beserta dengan sign up/log in page.

Di profile page ini saya kembali menempatkan Lazada Credit, Voucher Saya, dan ditambah dengan Koin Saya bersama di bagian atas. Hal ini untuk menarik user mengenai fitur Lazada Credit, Voucher Saya, dan Koin Saya tanpa perlu scroll ke bawah lagi. Lalu bagian Layanan saya buat menjadi horizontal scroll bukan vertical scroll karena di bagian ini karena layanannya itu ganjil, saat menerapkan vertical scroll, di page selanjutnya hanya tersisa satu seperti yang tergambar di bawah.

Hal ini saya nilai seperti wasting time user yang harus scroll ke kanan khusus untuk menemukan satu fitur tersebut. Sehingga solusi yang saya berikan adalah membuat semua layanan menjadi horizontal scroll. Dengan itu, user hanya perlu scroll sekali dan bisa melihat semua layanan yang ditawarkan oleh Lazada. Di sisi copy writingnya juga saya rubah dari Lihat Semua Pesanan menjadi Lihat Riwayat Pesanan untuk menegaskan daftar riwayat pesanan terdapat di laman tersebut.

Di bagian Lucky Egg juga saya tambahkan tanda seru (!) di judul untuk memberikan suara excited atau meriah, memberitahukan kepada user bahwa “kamu dapet 1 lucky egg loh!”. Tidak datar tanpa ada rasa excitement kepada user yang telah beruntung untuk mendapatkan lucky egg.

Selain itu saya juga menambahkan keterangan “Pecahkan untuk mendapat bonus Rp30.000”. Tentu banyak yang sudah mengerti dengan ilustrasi telur serta palu berarti dipecahkan, tapi lagi-lagi ada saja mungkin kasus dimana user bingung. Karena tujuan dibuat aplikasi adalah aplikasi yang ramah digunakan oleh semua umur dan semua kalangan. Dengan memberi pesan yang tepat maka implementasinya juga akan lebih baik. Rp30000nya juga dibuat decimal untuk membantu user yang mungkin kesusahan untuk menghitung 0 yang ada sehingga membuat kesalahan persepsi antar user.

Lalu di bagian Sign Up/Log In page saya membedakan keduanya menjadi dua page yang berbeda. Untuk mengaksesnya tinggal klik Sign Up (Daftar) atau Log In (Masuk) atau juga dengan swipe ke kanan untuk Sign Up dan swipe ke kiri untuk Log In.

Solusi yang saya berikan untuk permasalahan lupa password seperti yang dijelaskan sebelumnya adalah dengan benar-benar menghubungkan akun dengan Google, sehingga tidak perlu menggunakan password yang berbeda khusus untuk akun di Lazada itu sendiri. Karena di Lazada, meski pilihannya adalah masuk/daftar dengan google, kita tetap dialihkan untuk input gmail kita secara manual beserta passwordnya (berbeda dengan password gmail). Hal ini tentu tidak efektif dan menyusahkan user. Itulah yang terjadi pada ibu saya.

Oleh karena itu saya menggantinya dengan pop up screen sebagaimana kita saat mendaftar dengan google di situs lain. Hal ini untuk memudahkan orang-orang yang tidak bisa menghapal banyak password untuk akun-akunnya. Jadi dengan sekali tap, menghubungkan dengan akun google, ia langsung masuk.

Selanjutanya, flow yang saya ambil contoh di case study kali ini adalah dari Homepage hingga Checkout page. Maka setelah log in/masuk, user kembali ke Homepage dan kemudian meng-klik Lihat Lainnya di bagian Flash Sale.

Di page Flash Sale, CTA untuk membeli saya perjelas dengan CTA “Beli”. Dibandingkan grafik harga awal ke harga turun yang justru membingungkan user untuk klik kemana. Saya kira dengan menampilkan harga awal dicoret itu sudah cukup sebagai perbandingan harga, dibandingkan dengan grafik seperti di bawah

Di bagian Pengiriman saya ubah dengan memperjelas adanya pilihan Gratis Ongkir dengan minimal pembayaran. Hal ini saya nilai dapat menarik user secara psikologis untuk berbelanja karena ia bisa mendapatkan gratis ongkos kirimnya.

Perubahan lainnya adalah saya menghilangkan button toko di bagian bawah, jadi hanya ada button Chat Seller, Tambah ke Troli, dan Beli Sekarang. Bentuknya pun saya ubah jadi button Chat Seller dan Tambah ke Troli menjadi button text saja, sedangkan Beli Sekarang menjadi contained button.

Kenapa?

Tujuan saya adalah untuk menekankan atau meng-emphasize Beli Sekarang sehingga user langsung tertarik untuk menekan button tersebut. Menurut material.io pun button juga memiliki hirarki dan penempatannya sendiri.

Sehingga saya mengubah button Lazada yang awalnya keduanya menggunakan contained button menjadi hanya satu yang menggunakan contained button.

Beli Sekarang menjadi button yang high emphasis sedangkan yang lainnya itu low emphasis.

Terakhir adalah Checkout page

Saya tidak mengubah banyak dari sisi design. Saya merubah di sisi copy writingnya. Pertama di bagian pilihan pengiriman saya menjelaskan pengiriman ‘Standar’ yang dimaksudkan Lazada itu dengan pengiriman standar kurir LazExpress. Lalu di bagian Subtotal saya membedakan Subtotal Produk dan Subtotal Pengiriman. Selanjutnya adalah dari Jumlah Pesanan saya ubah jadi Total Pembayaran karena menurut saya jumlah pesanan itu berarti jumlah produk yang dibeli seperti berapa pcs baju yang dibeli atau berapa unit charger yang dibeli. Jumlah Pesanan tidak memberi kesan jumlah total yang dibayar, sehingga saya menggantinya jadi Total Pembayaran.

Selain itu saya juga membuat versi Interactive Design dari re-design aplikasi Lazada ini. Hasilnya bisa seperti yang terlihat di gif di bawah

Sekian dari case study saya, saya meminta maaf apabila terdapat salah kata yang menyakiti salah satu pihak. Bila ada masukan bisa langsung di sampaikan di sini atau via Instagram di @syel2n. Terima kasih banyak!