UX/UI |
Jun 2019
LIULISHUO READING
—
Liulishuo Reading’s product pages in AppStore
Background
Liulishuo Reading is currently the largest English reading app in China, with one million users choosing to read original news from foreign news platforms and journals such as the BBC and The Economist. When I started working with the team, our team planned to create a brand-new line of business – reading English books. I was responsible for the UX/UI design of this feature from 0 to 1.
Liulishuo Reading is currently the largest English reading app in China, with one million users choosing to read original news from foreign news platforms and journals such as the BBC and The Economist. When I started working with the team, our team planned to create a brand-new line of business – reading English books. I was responsible for the UX/UI design of this feature from 0 to 1.
TIME
Jun 2019
CORPORATION
Laix
WORK TYPE
Team work
ROLE
UX/UI designer
Books Reading
The purpose of our book reading is to give users one more choice to improve their English reading ability. Therefore, similar to news reading, we will provide teaching instructions and exercises in the book reading process. Users can choose books of interest to them from our bookstore.
The purpose of our book reading is to give users one more choice to improve their English reading ability. Therefore, similar to news reading, we will provide teaching instructions and exercises in the book reading process. Users can choose books of interest to them from our bookstore.
PROBLEMS OF BOOKSTORE
A empty bookstore
Unlike general book-reading apps, we can only provide a few
books, because of the lengthy production cycle of teaching instructions.
Therefore, the bookstore function of Liulishuo Reading encountered a difficulty
in the early stages of design. How can the bookstore avoid looking empty when
the number of books is low and the frequency of release of new ones is slow?
Make it look fuller?
In order to make the content of the bookstore look fuller, enlarging book cover images was the first idea I thought of, but once they were enlarged, images without texture would make people feel they were of low quality, and the problem of a small number of books still could not be concealed, so the sparse look of the bookstore is still embarrassing.
Change ideas
We have done a lot of work on content design, but we need to
spend more time on instructions and exercises for each book, rather than on
providing competitive products. Therefore, compared to other competitors and
regular reading apps, our books seem to be more expensive.
So, I changed my mind and tried to start from the
perspective of highlighting the value of each book.
I divided this into three steps:
I divided this into three steps:
- make books look delicate
-
show learning value
- use tutors to improve the credibility of the offering.
SOLUTIONS
Step 1. Make books look delicate
How do we make books look delicate in an app? According to my book design experience in the academy, I think that different bookbinding techniques and different paper stock will bring different quality feelings. This kind of tactile experience is difficult to bring to electronic reading. So, I tried to imitate the look of real books, and I found two aspects to start with: cover style and cover size ratio.
1. Cover style
I selected two common binding methods: paperback and hardcover. I also selected two common cover textures: polished and matte. Our books can be matched with these cover styles depending on their respective styles.
2. Cover size ratio
Whether walking into a bookstore or a library, we find that book displays always have a patchwork sense, because the size of each book will differ. Can we bring this feeling to the bookstore? In order to give the user a feeling of browsing in a real bookstore, I defined six different cover size ratios based on common cover sizes.
Bookstore Demo
Step 2. Show learning value
In addition to the production of the content, we will analyze the content of the books and derive the vocabulary level of the users who are suitable for reading the books. A vocabulary level test will be required before users browse the bookstore. Based on this, I believe that the display structure of the bookstore should be changed according to the user’s ability – classify the books by ability level, put the category that best suits the user’s ability at the top of the bookstore, and remind the user with the highlighted label: “these are the most suitable books for you”.
When opening the introduction page of the book, we will show the details of the user’s matching. Here, I simplify the recommendation level of this book to a face symbol. Users click on this symbol to see their vocabulary level and the difficulty of the book, as well as our recommendation.
Moreover, because the knowledge contained in each book is different, we summarize it as a “knowledge harvest” and show how much knowledge users can gain after reading this book.
Step 3.
Use tutors to improve the credibility of the offering
Tutors Note
A tutor is provided for each news product and book. Users can listen to the audio instructions recorded by the tutors during the reading process. Since Liulishuo Reading was launched, some of the tutors have gradually acquired their own fan groups, and these users will have greater interest and trust in the specific tutors. Based on this situation, I propose to let each of the book tutors personally write a recommendation for the books that they are responsible for. At the same time, I think this kind of manual recommendation can also convey the human touch.
Team information
Our teaching and research staff generally have a good professional background. Therefore, we show the professional information of each book production team member and give users confidence in the quality of the content. Additionally, this also prompts the tutors to be responsible for the quality of the content.
VISUAL of BOOK FUNCTION
Book Shelf & Bookstore
Reading in a book
