UI/UX Portofolio Redesign pada Aplikasi LINE

Latar Belakang

Line adalah aplikasi pesan instan yang populer di Asia. Diluncurkan pada tahun 2011, aplikasi ini dikembangkan sebagai respons terhadap gempa bumi dan tsunami di Jepang. Line menawarkan fitur panggilan suara dan video gratis melalui koneksi internet, stiker, emoji, dan filter kreatif untuk mengekspresikan diri dengan lebih menyenangkan. Selain itu, Line juga memiliki fitur saluran tematik, Timeline, dan ekosistem layanan tambahan seperti Line Pay dan Line Music. Dengan penggunaan yang luas di Asia, Line telah menjadi saluran komunikasi utama bagi jutaan orang di wilayah tersebut.

Pada study case kali ini saya ingin menRedesign aplikasi line dengan cara mencari problem pada aplikasi line dan juga bertujuan untuk mengidentifikasi permasalahan pada aplikasi Line kemudian mencari solusi dari problem statement dari aplikasi Line agar memberikan pengalaman yang lebih baik untuk user.

Research Objektif

Dengan mendalami problem dari aplikasi Line, menganalisa akar permasalahannya serta memahami pain point dari penggunaan aplikasi Line tersebut, tujuan dari research ini adalah agar pengguna mendapatkan pengalaman lebih baik lagi dalam berkomunikasi atau berkirim pesan, tidak kesulitan lagi ketika melakukan login aplikasi, serta agar pengguna aplikasi Line merasa nyaman ketika mendapat chat pribadi tanpa ketimbun oleh iklan ataupun chat dari official Line.

Tools

• Figma
• Google Sheet
• Google Documents
• Google Slides
• Canva

Research Method

Pada re-design aplikasi ini, kami menggunakan Design Thinking untuk menghasilkan produk yang sesuai dengan kebutuhan user. Proses ini terdiri dari Empathize, Define, Ideate, Prototype dan Test.

Research Plan

a. Background

Seiring dengan perkembangan teknologi komunikasi serta meningkatnya pengguna smartphone dan konektivitas yang pesat, kebutuhan akan komunikasi instan yang efisien juga meningkat. LINE adalah salah satu aplikasi pesan instan yang cukup populer di berbagai negara salah satunya di Indonesia. Akan tetapi, belakangan ini penggunaan aplikasi LINE mengalami penurunan dikarenakan terdapat berbagai kendala yang dialami oleh pengguna diantaranya kesulitan ketika login di aplikasi, beberapa fitur tidak penting (useless), serta sering dapat chat dari official atau advertisement.

1. Empathize

Proses awal ini merupakan tahapan untuk menemukan masalah pada Linne. Berikut aalah target pengguna Line :

A. Sample Spesification

1. Pengguna yang sudah menggunakan LINE minimal 3 bulan

2. Pengguna LINE yang menggunakannya sekali dalam sehari

3. Pria/Wanita

4. Usia 18–30 tahun

5. Warga negara Indonesia

B. Key Information Areas

Key information areas merupakan subjek utama yang akan kita eksplorasi lebih dalam pada research aplikasi LINE yang akan digunakan untuk membuat list pertanyaan

1. User profile

2. Memahami perilaku pengguna ketika menggunakan LINE

3. Memahami perilaku pengguna dalam menggunakan aplikasi komunikasi selain LINE

4. Memahami perilaku pengguna dalam menggunakan fitur LINE selain untuk berkomunikasi

C. Questions

1. Sejak kapan Anda menggunakan LINE dan hal apa yang membuat Anda terdorong untuk menggunakan aplikasi LINE itu?

2. Bagaimana pengalaman Anda ketika menggunakan fitur komunikasi LINE?

3. Apa pendapat Anda terkait tampilan antarmuka aplikasi LINE? Apakah mudah untuk digunakan?

4. Apa masalah yang sering Anda alami saat menggunakan aplikasi LINE?

5. Bagaimana pendapat Anda mengenai chat official atau advertisement yang ada di aplikasi LINE?

6. Apakah Anda memiliki pengalaman menggunakan aplikasi pesan instan lainnya? Jika ya, bagaimana perbandingannya dengan LINE?

7. Apakah ada fitur atau perbaikan yang Anda harapkan akan ditambahkan ke LINE di masa depan?

D. Conduct the Research

Metode kualitatif yang digunakan pada research pengguna aplikasi LINE ini dengan melakukan In-depth Interview. Kami mewawancarai beberapa teman-teman yang menggunakan aplikasi LINE dengan beberapa pertanyaan untuk mendapatkan data dari masalah atau kebutuhan pengguna pada aplikasi LINE.

E. Research Insight

• Memberikan opsi lain untuk mengirim kode verifikasi seperti sms atau ke email serta kode verifikasi dikirim dalam waktu 2 detik apabila tidak Flomendapatkan kode bisa meminta untuk mengirimkan kode lagi
• Membuat tampilan aplikasi yang lebih simpel dan memilah fitur yang sekiranya relevan dengan kebutuhan pengguna.
• Membuat chat list yang spesifik untuk obrolan grup, chat pribadi ataupun chat iklan dan lainnya.

2. Define

Pada tahap Define ini kami membuat affinity diagram untuk mengelompokkan informasi, user persona untuk memahami pengguna aplikasi Line, mengelompokkan problem utama serta menjabarkan research insight.

Affinity Diagram

Setelah melakukan wawancara dengan in depth interviews, kami memperoleh hasil kemudian direpresentasikan menggunakan affinity diagram. Menggunakan teknik affinity diagram membantu kami menemukan intisari permasalahan kemudian menyortir dan mengelompokkan data dari informasi yang sudah diperoleh.

User Persona

User persona memudahkan kami dalam memahami kesulitan pengguna, kebutuhan pengguna serta tujuan pengguna dari memakai aplikasi LINE.

Problem

• Kesulitan ketika melakukan login ke aplikasi LINE.

Ketika melakukan login, kode verifikasi yang dikirim terlalu lama bahkan tidak muncul kodenya sama sekali.

• Terdapat beberapa fitur yang tidak penting.

Aplikasi jejaring sosial seperti LINE dibutuhkan hanya untuk berkomunikasi dan hiburan, dengan adanya fitur lain seperti split bill serta line bank tidak terlalu dibutuhkan oleh pengguna. Sehingga aplikasi yang tidak penting hanya bikin aplikasi tambah berat dan tampilannya bikin pengguna bingung.

• Terlalu sering dapat chat official dan advertisement.

Kebanyakan chat official dan advertisement sehingga membuat chat penting yang masuk jadi tertimbun dan bikin aplikasinya lemot.

Research Insight

• Memberikan opsi lain untuk mengirim kode verifikasi seperti sms atau ke email serta kode verifikasi dikirim dalam waktu 2 detik apabila tidak mendapatkan kode bisa meminta untuk mengirimkan kode lagi
• Membuat tampilan aplikasi yang lebih simpel dan memilah fitur yang sekiranya relevan dengan kebutuhan pengguna
• Membuat chat list yang spesifik untuk obrolan grup, chat pribadi ataupun chat iklan dan lainnya

3. Ideate

Dalam tahap Ideation ini kami memulai dengan membuat User Flow, Information Architecture, Wireframe, Design System, kemudian Mockup hingga selesai.

User Flow

Berikut terdapat 3 user flow yang menjelaskan mengenai pemecahan permasalahan dari aplikasi LINE.

User Flow Login LINE

User Flow Fitur Folder Obrolan LINE

User Flow Halaman Obrolan LINE

Information Architecture

Berikut adalah Information Architecture aplikasi LINE berupa halaman login, bottom navbar, beranda, obrolan dan panggilan.

Wireframe

Wireframe adalah tahap perancangan sebelum memasuki tahap mockup, tahap ini masih dalam bentuk desain kasar. Di sini dijelaskan di mana letak fitur-fitur dan komponen apa yang akan dirancang dalam bingkai.

Design System

Design system adalah kumpulan panduan, aturan, dan komponen desain yang digunakan untuk menciptakan konsistensi visual dan fungsional dalam suatu produk atau platform. Design system membantu memastikan bahwa setiap elemen desain yang digunakan di berbagai bagian produk tetap konsisten. Mengembangkan menjadi desain UI, dan kami membuat beberapa elemen Colors, typography, iconography, button dll.

MockUp

Mock-up adalah representasi high-level dari desain produk. Pada tahap ini, kami membuat kombinasi gaya, tipografi, warna, dan lainnya. Setelah melalui beberapa tahap research dan ideation, berikut adalah desain mockup untuk redesain aplikasi LINE.

• Login

Berdasarkan hasil research melalui review App Store Aplikasi LINE, banyak yang kesulitan untuk melakukan login karena harus menunggu waktu yang cukup lama untuk kode verifikasinya. Sehingga kami menyediakan solusi dengan memberikan opsi lain untuk pengiriman kode verifikasi tidak hanya dengan sms tapi bisa dengan gmail.

• Home

Menurut hasil wawancara dengan beberapa user LINE, aplikasi ini terlalu banyak fitur sehingga membuat tampilannya terlalu ramai dan user sering mengalami kebingungan saat menggunakan aplikasi. Sehingga kami menyediakan solusi dengan membuat tampilan lebih simple dan lebih clean agar user merasa nyaman menggunakan aplikasi LINE.

• Fitur Folder Obrolan

Dengan problem user yang kesulitan karena chat sering tertimbun, solusi yang kami peroleh adalah membuat fitur folder obrolan. Selain membagi chat berdasarkan tab yang sesuai kebutuhan user, tampilan antarmuka obrolan pun terlihat lebih simpel dan clean sehingga tidak membingungkan user dalam menggunakan aplikasi chatting.

• Obrolan

Untuk problem user yang menyatakan chat sering tertimbun oleh chat yang tidak penting seperti dari official LINE maupun iklan, kami memberikan solusi dengan membuat folder obrolan. Sehingga user bisa membuat tab khusus obrolan pribadi, grup maupun tab obrolan lainnya.

4. Prototype and Test

Setelah semua tahap yang telah saya lakukan, selanjutnya saya membuat prototype yang digunakan untuk tahap akhir yaitu User Testing. Prototype ini saya buat menggunakan Platform Figma berikut link untuk melihat prototype dari aplikasi LINE.

Setelah membuat Prototype, saya melakukan testing menggunakan Maze kepada 5 orang user dengan beberapa skenario untuk mencapai goals pada fitur baru LINE. Kemudian setelah user selesai melakukan Usability Testing, didapatkan report pada link berikut:

Conclusion

Pada Projek ReDesign ini saya kerjakan sebagai bahan pempelajaran bagi saya dan juga tentunya untuk mengasah skill saya sendiri. Saya juga lagi dalam masa mempelajari/memperdalam lagi skill saya untuk bisa lebih baik lagi dari projek2 yang sudah saya kerjakan.

Thankyou for the Time.