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

Jogianasimangunsong
7 min readNov 4, 2022

This is my first redesign case study which was made to fulfill a mini project assignment on the Merdeka Campus program at Alterra Academy organized by the Ministry of Education, Culture, Research, and Technology of the Republic of Indonesia. In this mini project assignment, I redesigned an online novel application, Wattpad.

INTRODUCTION

Wattpad is an online platform that allows users to read and write stories. Wattpad has millions of stories in various languages ​​and genres, and provides other interesting features such as vote, comment, share and others.

Disclaimer: This portofolio is written in English, but some of the pictures will be written in Bahasa.

WHAT HAPPENED?

I am one of the wattpad application users who have not been actively using this application for a long time. I’ve been using the wattpad app for a few months now and I’ve seen a lot of feature changes made to improve the quality of the app. However, I still find some things that I find quite difficult to use this application. The first time I installed and used the Wattpad application, it turned out that I was having trouble finding books that were interesting to me. This happens because the “Search” feature has a different tab from “Home”, so if you want to use the “Search” feature, you have to select the “Search” tab, in my opinion, this is less effective to search for keywords, you just have to move pages first

This also makes me curious, whether other Wattpad application users experience the same problem as me or even experience other problems. Therefore, I made this case study to explore the problems experienced by Wattpad application users and find the right solution for the existing problems.

DESIGN PROCESS

For this case study, i use the Design Thinking methodology.

EMPHATIZE

In the empathize stage, I try to empathize with users through observation and doing research. Starting from myself as a Wattpad user. The problems I experienced were:

  • to do a book search, you have to switch pages because there is no search feature on the home page
  • the book display on the home page does not display the author
  • to see the notification that appears you have to move to another tab

To find out if other Wattpad application users experience problems/difficulties like mine, user research is carried out. In addition to knowing whether these problems are experienced by other users, it is also to find out if they have other problems in using the Wattpad application.

User Research Results :

Platform : Google Form
Number of respondents : 10 respondents
Respondent category Age : 19–22th
Occupation : Student

Insight :

  • 90% of users have had problems searching for books
  • 90% of users support the author feature on the book display on the home page
  • 100% of users support the notification display being moved to the top of the home
  • 30% of users experience problems in the bottom bar, namely the use of icons and layouts that are less attractive and uninformative
  • Suggestions and feedback from users:
    - reorganized content on the home page, content can be reorganized by displaying more books according to categories, for example book recommendations, most popular books and others. The design can be made more minimalist and informative.
    - the display on the profile is made more simple, attractive and informative

DEFINE

After researching what problems experienced by Wattpad application users, several points were obtained.

User Persona
To find out what kind of users will benefit from the solution that will be provided, I created a user persona.

IDEATE

PROBLEM STATEMENT
After obtaining the existing problems, the following problem statement was found:
“Users need features on the home page that can make it easier to find the book they are looking for without having to move pages, find out the title and author of the book easily without having to click on the book first, and easily understand the function of each feature used at home.”

HOW MIGHT WE
To find out the idea or solution to the problem statement, I took the How Might We approach

  • How can we help users find the book they are looking for easily without having to switch pages?
  • How can we help users to easily find out the title and author of the book without having to move pages to the details of the book first?
  • How to improve the ease of use and user convenience in using the Wattpad application?

THE IDEAS

  • Added a search feature in the home section
    With the search feature on the home, when the user opens the application, the user will immediately be able to search for the book that the user wants by writing keywords in the search feature
  • Add book title and author
    Users can see the author of the book without having to move pages to the details of the book, because based on User Experience users see books more often based on who the author is
  • Reorganized content to make it more interesting, simple, informative and easy to understand

USER FLOW
Create a user flow to find out how the user flows when the redesign has been done.

Fitur Search
Fitur Profil

PROTOTYPE

WIREFRAME

DESIGN SYSTEM

HIGH FIDELITY

UX Suggestion & UI Redesign
After analyzing user pain points and analyzing data about user problems and needs obtained from the research conducted, the following are the results of UX design and UI redesign:

TESTING
At this stage I tested 4 users to validate the ideas or solutions that I had done to make it easier for them or vice versa.

Task 1 : Do a book search
User Goal: Users can easily search books on the home page without switching pages
Results :
- the user has successfully completed the given task
- users say that the addition of a search feature on the home page is good, it makes it easier to find books. The home view that is made based on several categories is also quite interesting and good.
- the addition of the search feature gets an average score of 6 (SEQ), which means this idea has helped solve user problems and is good enough to implement.

Task 2 : Find the notification feature
User Goal: Users can see notification details easily
Results :
- the user successfully completes the given task easily
- the user said that changing the location of the notification icon to be at the top of the home made it easier to see existing notifications
- the user gives a score (SEQ) of 6 which means this idea is quite helpful in overcoming user problems and is good enough to implement.

Task 3 : View profile details
User Goal: Users can see profile details easily
Results :
- the user successfully completes the given task easily
- users say that the idea of ​​putting the profile menu in the bottom navigation makes it easier to find profiles
- users say that the profile detail view is more attractive and easy to understand than the application
- the user gives a score (SEQ) of 6 which means this idea is quite helpful in overcoming user problems and is good enough to implement.

Task 4 : View the display of the book on the home
User Goal: Users can see the title and author of the book easily without having to go to the book detail page
Results :
- users say that adding Title and Author to the book view is very helpful in finding books and authors
- the user gives a score (SEQ) of 5.7 which means this idea is quite helpful in overcoming user problems and is good enough to implement

CONCLUSION

  • The addition of a search feature on the home page makes it easier for users to search books
  • Adding an author to the appearance of the book is enough to help the user find out the title and author of the book
  • Changing the location of the notification icon and profile makes it easier for users to see notifications and profile page details
  • Reorganized content on home is quite interesting and tidier so it’s easy to understand
  • The redesign of the profile view is quite interesting and easier to understand

From the testing that I have done, I can conclude that the solution I offer has answered the problems experienced by the user based on the problems that the user stated in the interview before the redesign.
For the average SEQ value that the user gives is 5.9/6

Thank you for stopping by and wanting to read my writing. If you have input or questions, feel free to comment!

--

--