Ahmad Jordan
8 min readSep 11, 2023

UI/UX Designer Case Study #1 : Lazada Mobile App;

Hai semua…, ini merupakan case study pertama saya yang berasal dari bootcamp yang saya ikuti. Saya membuat case study ini dari July 2023 akhir — 8 Agustus 2023 dengan waktu yang singkat, tapi terkendala di waktu karena saya juga bekerja full-time dan waktu yang didapatkan sedikit serta anggota juga sedikit.

Nah alasan saya mengangkat Lazada sebagai bahan untuk case study kali ini karena aplikasi e-commerce ini salah satu yang paling banyak membakar uang (promo, iklan, dan lain sebagainya) yaitu Lazada, namun anehnya penggunanya tidak bertahan atau bahkan cuman saat event promo. Saya bertanya kepada grup angkatan kuliah dan juga grup kelas kuliah mengenai aplikasi Lazada, khususnya pembayaran. Jawaban mereka kebanyakan mengungkapkan kesulitan mereka dalam menggunakan aplikasi mobile Lazada, terutama dalam journey pembayaran checkout. 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 dengan waktu yang singkat.

Objective Case

Tujuan dari studi kasus ini adalah untuk membuat journey pembayaran checkout pada aplikasi mobile Lazada lebih user-friendly sehingga aman dan tidak membuat user kebingungan dalam bertransaksi.

Tools

  1. Survei: media untuk mengumpulkan review dan feedback mengenai pengalaman dalam journey pembayaran checkout menggunakan apliakasi mobile Lazada.
  2. Interview : media langsung untuk mengumpulkan review dan feedback mengenai pengalaman dalam menggunakan aplikasi Lazada.
  3. Playstore & Appstore: media untuk mengumpulkan review dan feedback dari user Lazada
  4. Figma: aplikasi untuk design dan prototyping UI design
  5. Maze : Aplikasi untuk usability testing ketika prototype telah siap untuk ditest

Limitation

  1. Design yang dibuat hanya berdasar dari data reliability dan assumption based yang didapatkan
  2. Data testing pada hasil ux nya tidak maksimal dikarenakan terkendala waktu dan situasi

Research

Saya mengumpulkan sekitar delapan responden dari form survei dan interview dan delapan belas feedback user yang saya dapatkan dari komentar di Playstore dan AppStore. 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: “Tampilan dan Tata Letak (UI)

Sumber Form Survei : Responden 1 dan Responden 2
Sumber Form Survei : Responden 3 dan Responden 4
Sumber Form Survei : Responden 5 dan Responden 6
Sumber Interview : Narasumber 1 dan Narasumber 2

Delapan review user di atas adalah review yang saya kumpulkan pada media survei dan interview. Delapan review ini meski datang dari latar belakang usia dan gender, yang berbeda tetapi keluhan yang mereka suarakan tetap sama yaitu UI yang membingungkan.

Beberapa diantaranya berpendapat bahwa warna yang tidak “konsisten” dan pemilihan font yang kurang bagus juga memainkan peran penting terhadap ketidaksukaan mereka kepada UI Lazada.

Sedangkan dari 12 review apps from Google PlayStore and Apple AppStore, bahwa rata-rata pengguna Lazada mengeluhkan Information Architecture (Deskripsi produk, UI nya terlalu ramai ads, banyak penjual yang tidak jujur) . Kebanyakaan dari pengguna merasa fitur iklan terlalu spam sehingga pengguna tidak sengaja mengklik iklan tersebut dan diahlikan ke website mereka dan fitur informasi detail product yang ditampilkan tidak sesuai bahkan tidak sinkron apa yang ditampilkan, apa yang disajikan, apa yang ditawarkan dan output yang diberikan.

Problem #2: “Payment Methode

Sumber : Form Survei, Interview, dan Playstore & AppStore

Dari review feedback di atas merupakan pain points lainnya dari aplikasi Lazada, yaitu dari segi metode pembayaran. Banyaknya flow yang ditawarkan membuat pengguna merasa kebingungan dan bahkan mengurungkan untuk melanjutkan pembayaran sampai selesai. Sulit mengganti metode pembayaran, tidak semua bank tersedia dalam pembayaran, dan sering terjadi kegagalan dalam melakukan transaksi. Sehingga banyak user yang menginginkan UI dan flow yang lebih simpel dan ‘clean’ agar experience dalam menggunakan aplikasinya pun juga semakin baik.

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 flow pembayaran checkout dipermudah dan dibuat simpel

User Persona

User persona ini saya buat sebagai representasi segmen user berdasarkan hasil research sebelumnya. Digambarkan seseorang bernama Patricia Simanjuntak berusia 28 tahun. Ia memiliki hobi berbelanja online untuk mengisi waktu luang disela-sela kesibukannya sebagai desainer. Salah satu platform belanja online yang digunakannya adalah aplikasi Lazada. Meskipun terdapat beberapa kekurangan pada aplikasi Lazada, Patricia lebih sering menggunakan aplikasi tersebut untuk memenuhi kebutuhan pekerjaannya dengan alasan cost yang lebih terjangkau dibandingkan platform e-commerce lain.

User Flow

User flow ini dilakukan secara terstruktur karena problem yang ditemukan merupakan satu kesatuan dalam satu proses transaksi di aplikasi Lazada.

https://miro.com/app/board/uXjVMtAjSZo=/?share_link_id=572262164788

Disini yang membedakan antara yang baru dan yang lama adalah terletak pada metode pembayarannya saja yang bisa diubah metode pembayarannya sesuai dengan keinginan pengguna atau ketika user salah memilih metode pembayaran dan terlanjur mengklik dan harus membatalkan pesanannya, sehingga kupon dan promo yang telah diaplikasikan ke pesanan akan hangus.

Priorization Ideas

Dalam prioritas ini, terdapat 4 bagian berdasarkan user value dan effort, yaitu high priority, hight feasibility, low priority and, low feasibility. Hasil dari Ideate, saya menentukan bahwa terdapat 2 yang posisinya di high priority dikarenakan problem tersebut sangat fatal bagi sisi user dan sisi bisnis dari aplikasi Lazada dan harus segera diperbaiki, sedangkan 1 problem yang menjorok ke low priority dikarenakan membuat fitur membutuhkan effort yang tinggi dan butuh beberapa test dan research yang mendalam.

High-Fidelity (Hi-Fi) Design

Tampilan Utama (Home Page), Tampilan Search Page, dan Tampilan Hasil Search Product

Saya langsung meloncat pada tahap Hi-Fi (Sebelumnya ada WireFrame dan Lo-Fi Design) pada tulisan ini dikarenakan efesiensi waktu untuk pembaca dan hasil Hi-FI merujuk pada Lo-Fi. Untuk tampilan awal (Home Page) pada aplikasi Lazada banyak user mengeluhkan tampilannya terlalu berwarna (mencolok), ramai, membuat bingung, dan kurang menarik, sehingga saya meredesign tampilannya dengan 3 warna primer yang digunakan pada simbol/logo Lazada. Perubahan total ini pun terdapat pada menu bar, product bar, button bottom bar dan search bar, hasil pencarian produk, serta tata letak dan refreshment pada icon dan bentuk nya pada tampilan utama.

Tampilan Detail Product

Perubahan selanjutnya ada pada halaman produk, sebelumnya user mengeluhkan information architecture nya berantakan yang dimana, deskripsi produk, foto produk, lokasi penjual, harga produk, dan ulasan sangat tidak sinkron dengan hasil keyword pencarian produk. Maka dari itu, saya merubah total tampilan tersebut sesuai dengan keluhan user yang dimana saya membuat button untuk detail produk dan ulasan sehingga user bisa mengetahui detail produk nya dengan mudah, dan juga tampilan produk nya di refreshment agat lebih enak untuk dilihat serta menambahkan kolom forum QnA tanpa harus mengirim pesan ke penjual secara pribadi.

Perubahan terakhir terletak pada metode pembayaran, khususnya fitur ubah metode pembayaran yang dimana sebelumnya tidak bisa mengganti metode pembayaran ketika user sudah mengklik tombol checkout / buat pesanan sehingga user harus membatalkan terlebih dahulu pesanannya kemudian bisa mengganti metode pembayarannya. Dalam perubahan ini terdapat pada halaman metode pembayaran menggunakan Bank Transfer, ketika sudah memilih dan mengklik buat pesanan, akan ada halaman untuk kode VA sesuai bank yang dipilih dan button ubah metode pembayaran terletak pada bawah yang dimana memudahkan user untuk mengubah metode pembayaran sesuai dengan user inginkan.

Usability Testing

Ketika Hi-Fi telah final sesuai dengan hasil research, tahap selanjutnya adalah testing hasil Hi-Fi tersebut ke user testing yang dipilih secara acak dengan orang yang berbeda dari survei sebelumnya. Tujuan UT agar untuk mengetahui apakah aplikasi yang dibuat sudah dapat digunakan oleh pengguna dengan mudah, sedangkan User Testing bertujuan untuk mengetahui apakah aplikasi yang dibuat sudah sesuai dengan kebutuhan pengguna. Tahap testing dilakukan dua tahap, yaitu metode uji coba langsung dengan user dan secara aplikasi Maze.

Task Planning Guide

Dengan adanya task planning guide yang saya buat, membuat UT berjalan dengan lancar sesuai dengan harapan. Task tersebut akan mengarahkan user testing sesuai dengan flow yang kita buat. Hasil testing meliputi uji coba secara langsung dan menggunakan aplikasi Maze, berikut merupakan hasil kesimpulan dari UT yang telah dilakukan :

Hasil UT secara langsung dengan user
Success Matric via aplikasi Maze

Dari hasil tersebut, kebanyakan user yang telah uji coba mengeluhkan proses pembayaran yang dibuat terlalu bingung (tidak dapat menemukan button lanjutkan pembelian dan checkout ketika berada di page metode pembayaran) dan tampilan metode pembayarannya terlalu kaku, termasuk ukuran fontnya terlalu gede.

Usability Testing — Recommendation

Rekomendasi hasil UT tersebut saya simpulkan bahwa “Tampilan dari Revamp Lazada perlu diperbaiki lagi supaya terlihat lebih fresh dan simple, ukuran fontnya diperkecil dan sesuai dengan proporsinya. Alur payment product sedikit lebih dipermudah dan tombol checkout, serta melanjutkan pembelian lebih diperhatikan kembali.”

TAMPILAN (UI)

Halaman Utama aplikasi Lazada; (Kiri, Before) (Kanan, After)
Tampilan Cart Product dan Description Product; (Kiri, Before) (Kanan, After)
Before ; After (Tampilan Deskripsi Produk bagian button Produk)
Before ; After
Before ; After

Sekian dari case study saya, saya meminta maaf apabila terdapat kesalahan dalam penulisan ini dan membuat pembaca merasa tidak nyaman atas penggunaan kata-kata yang saya gunakan. Hasil case study ini sebenarnya masih jauh dari sempurna. Namun, saya senang dan bangga telah berhasil mempelajari suatu kemampuan dan hal baru yang saya sukai dan belum memperdalam kembali dikarenakan berbeda dengan background pendidikan saya. Namun semua itu tak membuat saya pantang menyerah dan tetap belajar dan terus berinovasi dalam bidang ini. Saya berharap hasil case study ini bisa bermanfaat baik untuk perbaikan oleh pihak yang terkait, maupun kepada para pembaca. Saya menerima kritik, saran, dan masukan kepada para pembaca supaya saya bisa meningkatkan dan mengimprove skill saya dan bisa jadi masukan juga buat Lazada kedepannya, kalian bisa langsung di sampaikan di sini atau via social media saya :
- Instagram : @ahdiru_
- LinkedIn : Ahmad Jordan
- Notion :
https://plant-cougar-636.notion.site/Hi-Folks-I-m-Ahmad-Jordan-4598123305c543929b95fbf6fc2d05d4?pvs=4

Terima kasih banyak!

Ahmad Jordan
Ahmad Jordan

Written by Ahmad Jordan

0 Followers

An electrical technician who has a work experience of approximately 1 year and I've discovered two new passions: UI/UX Design and Front-End Development.

No responses yet