Liuli Reading
The Bookstore
A bookstore designed
for a reading app with
only a few books
Time
June 2019
Type
Professional Work
Corporation
Laix
Responsibility
Interaction Design
Interaction Design
UI Design
When I started working with the team, Liuli Reading was 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. 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.
01 Process
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.
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 Liuli 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 Looks 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:
- make books look delicate
- show learning value
- use tutors to improve the credibility of the offering.
02 Design
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.
Demo
Step 2.
Show learning value
1. Sort by Level
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”.
2. Suggestions & Knowledge Gains
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
Tutor’s 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 Liuli 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.
03 Showcase
