[UX Case Study — Wattpad Re-design ] To Improve UX and UI Wattpad Mobile Apps

Berikut ini adalah konsep yang saya buat untuk meningkatkan User Experience pada aplikasi baca buku Wattpad.

Introduction

Seketika saya langsung mencari aplikasi untuk membaca buku secara online supaya lebih praktis bisa dibaca kapanpun dan dimanapun , dan bertemulah dengan :

Alasan saya memilih Wattpad karena merupakan salah satu aplikasi baca dan tulis buku terpopuler dan banyak digunakan oleh orang yang saya tau, sehingga saya rasa akan lebih mudah mencari buku terbaik di aplikasi tersebut karena telah banyak digunakan.

Kenapa Re-design Wattpad?

Design UI wattpad lama

Setelah saya install dan mencoba menggunakan aplikasinya ternyata cukup sulit mencari buku yang sesuai dengan interest saya yaitu Novel sejarah islami, 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.

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 membaca dan menulis 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 meningkatkan 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.
2. Tampilan di home yang sangat sulit dipahami dan membingungkan, karena di tampilan buku home tidak menampilkan author.
3. Tampilan sebelum home yang berisi identifikasi diri yang terlalu banyak tapi isinya terlalu sederhana sehingga membuat user malas dahulu sebelum masuk ke home.
4. Tampilan profile yang begitu rumit dan sederhana selain itu tidak terletak di bottom navigation tapi di menubar home.

User Research

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

• Umur : 19 tahun
• Perangkat : Android

User Needs

Menemukan buku dengan mudah, ingin mengetahui bahwa buku yang dipilih bagus, dan mempercepat user untuk ke tampilan home dengan menyederhanakan tampilan profile awal sebelum home.

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. Menemukan buku dengan cerita yang bagus

• User dapat menemukan buku dengan cerita yang bagus dengan menggunkan filter di search
• User dapat melihat review atau komentar yang diberikan oleh user lain yang pernah membaca buku tersebut.

3. Menyederhanakan tampilan awal profile sebelum home

• User dapat lebih mudah melengkapi data dirinya dan tidak terlalu lama untuk ke tampilan home sehingga user tidak merasa malas.

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

Wattpad Information Architecture

IA Wattpad lama

Penjelasan dari Information Architecture Gramedia :

1. Home : Pada halaman home, user dapat melihat buku berdasarkan 3 kategori yang user sukai yang telah user pilih diawal sebelum ke home.

2. Jelajah : Pada halaman jelajah, user dapat mencari buku berdasar kategori yang telah disediakan oleh aplikasi wattpad tersebut, dan berdasar judul buku. Bisa mencari berdasarkan penulis juga.

3. Library : Pada halaman Library, user dapat menemukan buku yang telah disimpan library khususnya, terdapat 3 tempat ditab ini yakni yang sedang dibaca, arsip, dan list baca pribadi. Disini juga user dapat membaca buku secara offline.

4. Buat Cerita : Pada halaman ini, untuk menambahkan cerita dari user (untuk menyalurkan bakat menulis si user)

5. Notifikasi : Pada halaman ini akan muncul notifikasi dan chat.

IA Main issue

1. Untuk melakukan pencarian buku harus berpindah halaman dan tidak ada search dihome.
2. Akun tidak terdapat di buttom navigation jadi sulit jika ingin ke akun padahal ini penting.
3. Halaman library yang telalu boros tampilan, karena disini dibagi 3 tab padahal fungsinya sama saja dan bisa di campur menjadi 1.

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 : Akun yang bertujuan memudahkan user untuk mengatur akunnya, melihat cerita yang dibuatnya dan masuk ke setting . Selain itu juga Notifikasi dipindahkan pada bagian atas aplikasi, hal ini bertujuan agar user lebih mudah melihat notifikasi yang muncul .

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”, “jelajah”, “buat cerita”, “library”, dan “profile” serta “notifikasi”.

Wireframe redesign

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.
• Author — User juga dapat melihat penulis dari buku tersebut karena berdasar User Experience user lebih sering melihat buku berdasar siapa penulisnya, sehingga disini ditampilkan judul dan penulis buku.
• Reorganized content — Pada redesign juga konten di tata ulang dengan menampilkan lebih banyak buku. Design juga dibuat lebih minimalis dan aestetik.
• Notifikasi — Tampilan notifikasi dipindah di atas bagin home, fungsinya untuk memudahkan user melihat notifikasi yang muncul secara langsung tanpa harus pindah ke tab lain, karena berdasarkan User Experience mayoritas user lebih suka melihat notifikasi secara langsung ketika masuk ke sebuah tab awal aplikasi.
• Kategori Menu Baru — Tampilan ditambahi dengan menu Rekomendasi buku untuk user, Buku terpopuler, dan 3 Genre buku yang disukai user saat setting awal profil aplikasi sebelum ke home.

Current Home VS Redesign Home

2. Jelajah

• Pada menu jelajah, user dapat melakukan pencarian buku berdasarkan judul buku, penulis dan tag terbanyak.
• Dapat melakukan pencarian melalui kategori/genre buku yang sudah ditentukan oleh wattpad.
• Melakukan pencarian dengan filter , agar lebih mudah dan mendapatkan buku yang bagus dan sesuai dengan keinginan.

Current Search VS Re-Design Search

3. Library

• User dapat membaca buku di library pribadinya, tempat yang digunakan untuk menyimpan buku yang telah ditemukan user, sehingga user bisa membaca secara langsung di library ini tanpa harus mencari kembali . Disini user juga bisa membaca buku yang diinginkan secara offline.

Current Libary VS Re-Design Library

4. Buat Story

• User dapat menambah cerita di tab ini maksudnya ialah dengan menulis cerita, disinilah user akan menyalurkan bakat dan hobinya dengan menulis cerpen/novel yang nantinya bisa dipublish di Wattpad dan bisa dibaca dan direview oleh user lain.

Current Add Story VS Re-Design Add Story

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 Wattpad cuman berbeda tampilan dan letaknya. Untuk letak profile sendiri di UI lama terdapat diatas di tab Home, namun untuk sekarang berada di bottom navigation.

Current Profile VS Re-Design Profile

Final Thoughts and Reflection

Wattpad merupakan aplikasi baca dan tulis buku favorit saya, saat saya ingin baca buku online pasti yang terpikirkan pertama adalah Wattpad karena sudah banyak digunakan oleh user dan disinilah kita bisa menyalurkan bakat kita menulis sebagai penulis yang nantinya buku kita bisa diterbitkan, karena banyak buku yang beredar di Gramedia dan toko buku lain merupakan terbitan dari wattpad ini.

Tetapi kebanyakan produk digital memiliki kekurangan dari segi UX, maka dari itu saya berusaha untuk bisa meningkatkan UX yang ada pada aplikasi Wattpad dengan melakukan redesign dan riset kecil-kecilan. Karena sebagai seorang UI/UX Designer , 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.

Tampilan Re-Design Semua Wattpad

“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! :)

Dribble