[UX Case Study — Gramedia Redesign] To Improve UX and UI Gramedia Mobile Apps

Berikut ini adalah konsep yang saya buat untuk meningkatkan User Experience pada aplikasi belanja buku Gramedia.

Introduction

Seketika saya langsung mencari aplikasi untuk membeli buku secara online supaya lebih praktis, dan bertemulah dengan :

Alasan saya memilih Gramedia karena merupakan salah satu toko buku terbesar yang saya tau, sehingga saya rasa akan lebih mudah mencari buku yang saya cari.

Kenapa redesign Gramedia?

Setelah saya install dan mencoba menggunakan aplikasinya ternyata cukup sulit mencari buku yang sesuai dengan interest saya yaitu UX Design, karena saat pertama membuka aplikasi saya bingung bagaimana mencari buku yang saya inginkan, saya mencari fitur “Search” beberapa saat sampai akhirnya saya sadar bahwa untuk menggunakan fitur “Search” saya harus memilih tab “Search”, hal itu kurang efektif karena untuk mencari kata kunci buku saja harus pindah halaman terlebih dahulu.

Penasaran

Dari pengalaman yang saya alami membuat saya penasaran apakah orang lain juga merasakan hal yang sama atau tidak. Rasa penasaran tersebut membuat saya melakukan riset sederhana dengan bertanya kepada beberapa orang yang suka membeli buku secara online.

1. Apa problem yang kamu rasain saat belanja buku secara online?
2. terus kaya gimana sih biasanya proses kamu belanja buku online?
3. Apa yang kamu butuhin supaya ketika kamu belanja buku lebih mudah dan menyenangkan?

Dan ternyata orang-orang yang saya tanya memberikan insight diluar ekspektasi saya.

1. Tidak ada review dan rating buku jadi sebagai calon pembeli ga tau buku yang dipilih bagus atau ngga. Terus juga ga ada fitur buat save buku yang menarik supaya bisa dibeli lain waktu.
2. Sebelum mencari buku biasanya mencari referensi dari buku lain dan mendapatkan saran dari teman
3. Kalau ada forum di toko buku buat bahas buku, itu bakalan bagus sih

Design Proses

Saya mencoba seluruh fungsi pada aplikasi dan berusaha memahami apa yang aplikasi sediakan untuk pengguna. Dan juga mempelajari visual identity serta mencari tau apa yang user butuhkan untuk mendapatkan pengalaman yang lebih baik ketika membeli buku.

Pada proses redesign ini ada empat tahap yang saya lakukan :

Pada case redesign ini saya akan mencoba untuk mencapai 3 goals utama :

1. Membuat design yang sesuai dengan kebutuhan saya sebagai user dan kebutuhan beberapa orang yang telah saya tanya untuk meningkankan user experience yang baik pada aplikasi.
2. Menambahkan beberapa fitur yang dapat meningkatkan user experience pada aplikasi.
3. Membuat design yang realistis dan yang benar-benar akan berguna bagi pengguna.

Define Problem

Pada cerita di atas sudah didapatkan beberapa problem yang dapat diselesaikan, diantaranya :

1. Melakukan pencarian buku yang masih cukup sulit karena fitur search ada pada tab lain. Selain itu juga kita tidak bisa mencari buku berdasarkan kata yang related.
2. Tidak ada review dan rating pada buku yang tersedia.
3. Tidak ada fitur save yang digunakan untuk menyimpan buku untuk dibeli lain kali.
4. Forum untuk membahas buku dan referensi

User Research

Berikut ini adalah segmentasi user yang dibuat berdasarkan latar belakang saya sebagai user dan beberapa orang yang telah saya tanya :

• Umur : 20–28
• Perangkat : Android

User Needs

Menemukan buku dengan mudah, ingin mengetahui bahwa buku yang dipilih bagus, menyimpan buku-buku yang menarik untuk dibeli lain waktu, membahas buku dengan pecinta buku.

User Goals

1. Menemukan buku dengan mudah

• User dapat mencari buku yang sesuai dengan interest nya dengan mudah.
• Menemukan buku yang related dengan keyword yang user cari.

2. Mengetahui bahwa buku yang dipilih bagus

• User dapat melihat rating buku untuk memastikan bahwa buku yang dia pilih worth untuk dibeli.
• User dapat melihat review yang diberikan oleh user lain yang pernah membeli buku tersebut.

3. Menyimpan buku yang menarik untuk dibeli lain waktu

• User dapat menggunakan fitur save untuk menyimpan buku yang menarik.

4. Membahas buku dengan sesama pecinta buku

• User dapat membahas buku dengan para pecinta buku lainnya melalui forum yang disediakan, sehingga user dapat membedah buku yang ingin mereka beli dengan user lain.

Lalu apa yang harus dilakukan agar user dapat mencapai goals yang di inginkan?

Untuk dapat membantu user mendapatkan apa yang mereka butuhkan sehingga user dapat mencapai goals yang mereka tuju adalah dengan membuat aplikasi yang memiliki design delightful dan memiliki user experience yang baik. Yang harus dilakukan selanjutnya adalah membuat Information Architecture :

Information Architecture

Penjelasan dari Information Architecture Gramedia :

1. Home : Pada halaman home, user dapat melihat ads banner, buku populer, buku paling dicari dan buku pilihan.

2. Category : Pada halaman category, user dapat memilih category seperti buku, ebook, fashion, olahraga, mainan.

3. Search : Pada halaman search, user dapat mencari buku dengan judul buku.

4. Keranjang : Pada halaman keranjang, user dapat melihat daftar buku yang akan mereka beli.

5. Akun : Pada halaman akun, user dapat mengganti password, melihat transaksi pesanan, pengaturan alamat dan logout.

IA Main issue

1. Untuk melakukan pencarian buku harus berpindah halaman.
2. Memilih kategori juga harus berpindah halaman.
3. Melihat transaksi pesanan harus masuk dulu ke halaman akun.

User Journey Map

User journey dapat menggambarkan bagaimana user menggunakan aplikasi dan dapat membantu untuk menemukan apa kebutuhan user dan apa pain point yang dia rasakan. Disini saya membuat beberapa user journey dari aplikasi Gramedia :

User pain point

1. Mencari buku — “Home”

• Tidak adanya rating buku
• Tidak bisa memfilter buku yang diinginkan

2. Mencari buku — “Search”

• Tidak bisa mencari buku berdasarkan keyword yang related dengan isi buku
• Search buku harus berpindah menu

3. Transaksi pesanan — “Transaksi Pesanan”

• Transaksi pesanan tersembunyi karena ada pada menu akun

Redesign

Pada tahap ini mulai melakukan redesign pada aplikasi dengan menggunakan data-data dan berbagai analisis yang dilakukan sebelumnya. Pada tahap ini juga saya akan memberikan suggestion yang diharapkan dapat menyelesaikan problem yang ada.

Old Informatin Architecture vs New Information Architecture

Berikut ini adalah perbandingan terhadap IA lama dan IA baru hasil redesign. pada IA baru terdapat beberapa perubahan dan penambahan fitur, seperti : Save dan Forum. Selain itu juga Chart dipindahkan pada bagian atas aplikasi, hal ini bertujuan agar user lebih mudah manage buku yang akan mereka beli. Transaksi pesanan juga dibuatkan menu sendiri dengan nama Order, hal tersebut bertujuan untuk memudahkan user dalam melihat order yang mereka lakukan.

Berikut perbandingan IA dapat dilihat pada gambar dibawah ini.

wireframe

Seperti pada Information Architecture baru, terdapat beberapa fitur baru dan reorganized fitur yang lama sehingga akan lebih memudahkan user dalam menggunakan fitur yang ada dan menjadi lebih visible.

Pada Information Architecture baru akan ada menu “home”, “save”, “forum”, “order”, dan “profile” serta “chart”.

Wireframe redesigned

UX Suggestion and UI Redesign

Setelah melakukan analisis terhadap user pain point dan menganalisis data seputar problem dan kebutuhan user yang di dapat dari riset yang dilakukan, berikut ini adalah hasil perancangan UX dan Redesign UI yang akan dibahas satu persatu :

1. Home

• Search — Menambahkan search form pada bagian home, dengan adanya search form pada home maka ketika user membuka aplikasi, user akan langsung dapat mencari buku yang user inginkan dengan menulis keyword pada search form.
• Rating — User juga dapat melihat rating buku dengan melihat bintang yang diberikan oleh orang yang pernah membeli buku tersebut. Sehingga user dapat memastikan bahwa buku tersebut bagus untuk dibaca.
• Reorganized content — Pada redesign juga konten di tata ulang dengan menampilkan lebih banyak buku. Design juga dibuat lebih minimalis dan aestetik.
• Filter — User dapat melakukan filter sehingga hanya buku yang sesuai filter akan ditampilkan.

Current home vs Redesigned home

2. Save

• Pada menu save, user dapat melihat buku-buku yang disimpan untuk dibeli lain kali. Menyimpan buku pada menu save cukup menekan “love” icon yang ada pada setiap buku.
• User dapat menghapus buku yang telah disave.

Saved

3. Forum

• User dapat bertanya dan berbagi informasi pada menu forum, sehingga user dapat melihat-lihat referensi dari orang-orang dan berbagi pengalaman tentang buku yang pernah dibaca.

Forum

4. Order

• User dapat melihat order yang sedang dilakukan maupun order yang telah selesai. Order ini juga mengadaptasi dari fitur transaksi pesanan dari aplikasi yang sekarang, namun menu order dibuat sendiri supaya user dapat mudah mengecek order yang dilakukan.

5. Profile

• Menu ini seperti aplikasi pada umumnya yang berisi profile user dan beberapa setting seperti ganti password dan menambahkan alamat, saya membuat sama data menu profile dengan aplikasi Gramedia.

Profile

6. Book Details

• Tampilan detail buku setelah di redesign memiliki rating dan review buku sehingga user akan mudah untuk mengetahui kualitas buku yang akan dibeli dengan melihat review dari orang yang sudah membeli.
• Ketika user scroll kebawah maka akan ada buku yang similar atau sejenis dengan buku yang user pilih, hal tersebut akan menarik user untuk belanja buku lebih banyak lagi.

Book details

Final Thoughts and Reflection

Gramedia merupakan toko buku favorit saya, saat saya ingin beli buku pasti yang terpikirkan pertama adalah Gramedia karena koleksi bukunya yang cukup lengkap dan dengan adanya aplikasi untuk membeli buku secara online oleh Gramedia akan memudahkan user untuk membeli buku tanpa harus keluar rumah.

Tetapi kebanyakan produk digital memiliki kekurangan dari segi UX, maka dari itu saya berusaha untuk bisa meningkatkan UX yang ada pada aplikasi Gramedia dengan melakukan redesign dan riset kecil-kecilan. Karena sebagai seorang UX Design Enthusiast, saya sangat menyukai proses design thinking untuk membuat suatu design aplikasi nyaman dan mudah untuk digunakan. Jadi saya berusaha untuk meningkatkan User Experience dan User Interface untuk meningkatkan kenyamanan dan solving problem yang ada pada aplikasi ini.

“If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful.”
— Alan Cooper

Terima kasih sudah mampir dan mau membaca tulisan saya. Jika ada masukan atau hal yang ingin ditanyakan feel free to comment! :)

Dribbble | LinkedIn

Inspired by : Borrys Hasian & Rizki Rahmat Ridha