Section “My Books” for the Library tab
My role: Senior Product Designer.
Team: PM, QA, iOS Developer, Back-end, Analyst.
Tools: Figma, ProtoPie, Confluence, Jira, Tableau.
Year: 2024.
1. Summary
We have spruced up the UI of the Library section. Although there were no significant changes in metrics, the outcome was positive: nothing got worse. We also came up with a new entry point with a 40% conversion rate, which we plan to use for future experiments.
2. About the Project
In this project, we added a new feature to the "Library" section, improving navigation and setting up the potential for launching other experiments using this feature as an entry point.
3. Research and Analysis
To figure out the issues and needs of book segment users in EWA, we carried out a series of interviews with users together with the PM of the book team. To round up relevant respondents, we added a screen in the app inviting them to join Zoom sessions, shown only to the target segment. In the end, we conducted 10 interviews: I led three of them, and in the rest, I joined as a listener.
We uncovered many useful insights, one of which was about navigation in the "Library" section. We put together the following Job story: As a library user, I want to easily find the books I started reading, added to favorites, or downloaded, so I can quickly get back to them.
4. Problem
From the research and analysis of the User Journey Map, we found out that users find it hard to locate the books they started reading. Currently, such books are displayed on the "My Books" shelf as well as in the "Favorites," "Downloads," and "History" sections located at the bottom of the "Library" section. These sections often go unnoticed, leading to low usage.
5. Hypothesis
After looking into the current state and user behavior, we came up with a hypothesis: if we clear the shelves of read books and move the reading progress to a separate section, we can bump up the CR_to_book_start and make it easier for users to find books.
6. Design Process
I kicked off by creating a quick prototype to get my idea across and get it approved by the team. We removed the bottom sections and added a new "My Books" button, where users could quickly find read, favorite, and downloaded books, as well as the browsing history. Search was improved, and read books no longer stayed on the main "Library" page.
In the first iteration, I came up with a flashy interface that potentially addressed the identified problem. However, this version was not approved at the product meeting due to the significant development time required.
In the second iteration, I took out the "continue reading" feature and background blur effect, leaving only the tabs and book list. In this form, we approved the experiment.
7. Secondary Issues
While developing the “My Books” section, I came across numerous minor issues that needed to be fixed to improve the overall quality and functionality of the section.
7.1. No Support for Color Tokens
The "Library" section did not use color tokens from the design system, making it difficult to keep consistency between new and old sections.
7.2. Book Cover Thumbnails
Book covers got distorted when scaled, leading to partial hiding of their content. In the "Oxford Reading University" section, the covers had the eponymous label, which often didn't fit due to incorrect aspect ratios. I fixed the sizes and passed them on to development.
I also decided to remove shadows on the covers to make the interface cleaner and more modern, but this led to covers with dominant white color blending in with the background. To fix this, I reduced the contrast and turned them gray. Unfortunately, we didn't have the source files for all covers, which complicated the task.
I asked the back-end developer to write a script to pull out all images from production. When he did, the total weight of all cover images was over 1.5 GB. We optimized this volume by adjusting the color correction of images and saving them in webp format, reducing the size of about 4000 files to 68 MB, improving the overall performance of the application.
7.3. Solution
We tackled these issues before rolling out the experiment, which allowed us to get more accurate results. All changes were included in both the test and control groups.
8. A/B Test
To check the impact of the changes, we ran an A/B test:
- The control group (A) remained unchanged.
- The test group (B) received the new section, improved search, and moved read books to the “Read” category.
8.1 Tracked Metrics
Main metrics:
- CR_1min_read – expected to stay the same.
- CR_20min_read - expected to stay the same.
- Library_time - we want to monitor.
- CR_book_start - expected to rise.
Controlling metrics:
- APRU - expected to stay the same.
- Adoption metrics of the new section – CTR.
8.2 A/B Test Results
As expected, we didn’t see significant changes in book activity metrics and APRU. However, we recorded a high CTR, with 40% of users moving from the “Library” to “My Books”. We will use the new entry point for upcoming experiments.
View Metrics Tables
9. Conclusions
I’m really glad that we managed to significantly improve the navigation in our app. For a long time, I wanted to do this, as I considered it important for user convenience. However, our numerous experiments and studies were focused on developing and rolling out educational features, and such changes in navigation didn’t align with current priorities. Now that we were able to set aside time and resources, I’m sure users will appreciate these improvements and their experience will become much more pleasant.
During the A/B test, we ran into an issue that required us to restart it after a month. Analysts found improper user group distribution, which could have rendered the data unreliable. For example, one group might have had 100 users from India and 100 from the USA. Despite the delay in conducting the test, this gave me a chance to delve deeper into the A/B testing process and understand how it works.