Improved user engagement and retention rate with page number navigation
Perlego - An Online Subscription-Based Academic Book Library
Embedded Files
Summary
Perlego is a subscription-based (without free trial) online academic book library offering a vast collection of eBooks to users including graduate, undergraduate students, and individual learners.
Problem:
Perlego's users, particularly students, struggled to navigate directly to specific pages of academic books. The existing table of contents and scrolling proved inefficient for this task.
Solution:
To enhance the reading experience, we introduced a new page number navigation feature. This feature significantly improved user satisfaction, leading to a 17% adoption rate within a month and a 14.4% reduction in negative feedback during the summer holiday.
Role
Product Designer
Tools
Figma, Ballpark, Miro, Notion, MetabaseTeam
- Product Designer (Me)
- Product manager (Lina)
- Software Engineers (Luisa, Cecily, Bijan)
- Customer experience (Lucy)
click to jump to the section
Students' frustrations: lack of page navigation in Perlego
Students' frustrations: lack of page navigation in Perlego
Users, particularly students, struggled to navigate directly to specific pages of academic books. This was a major pain point, as many textbooks assign readings by page number.
Chapter navigations on the Perlego website and application
User feedback:
We received much feedback regarding navigation on the reader that indicates the existing navigation is not enough effective for this purpose.
User Research:
Through surveys and feedback, we discovered that 87% of users expected page numbers to be the primary navigation method. Existing navigation options, limited to within chapters, were insufficient for their needs.
Key metrics to measure success
Key metrics to measure success
Competitive analysis: Best practices in page navigation
Competitive analysis: Best practices in page navigation
To understand best practices in page navigation, we conducted a comprehensive analysis of competing products. The screenshots below illustrate how these platforms offer users the ability to navigate directly to specific pages.
Evaluate page navigation design options
Evaluate page navigation design options
To enhance page navigation on the Perlego app, I explored several design solutions, including adding a drop-down menu, integrating an icon button into the bottom navigation bar, and embedding an input field within the nav bar itself.
I then compared and evaluated these options, organizing a Design Critique session with the team to gather feedback and ensure a bias-free approach to decision-making.
Why I Chose the Bottom Navigation Bar for Input Placement:
Proximity to other navigation elements
Placing the input in the bottom navigation bar ensures it's closer to other key navigational elements, making it more intuitive for users to access.
Avoiding confusion with the search icon
Users might mistake the search icon for a content search within the book itself, rather than a navigation tool. Using input helped eliminate this confusion.
Preventing interface interruptions
The drop-down menu for input was disruptive, especially when combined with toast messages. It took up too much screen space, obstructing the book content and breaking the user's focus.
User testing: Optimise page navigation placement & interaction
User testing: Optimise page navigation placement & interaction
After deciding to use input on the bottom nav bar.
I wasn't sure where to show this feature.
There are two potential places.
On the reader inside the bottom nav bar
In the table of contents.
Should we use a button to trigger a keypad or an input?
To validate the usability and functionality of the app, I conducted unmoderated usability tests with real users. These sessions allowed me to observe how users naturally interacted with the app. Following the tests, I asked targeted follow-up questions to gather deeper insights.
Key insights I would need:
Should the navigation feature be placed within the Table of Contents, or directly on the Reader screen, near the content?Would a button or an input field be more intuitive for users to initiate navigation?
Input on the reader screen
Input on the reader screen
Research showed users expect to see the input in Reader alongside the content.
According to UX, the UI element of the input creates the perception of delivering input when contrasted to the button.
Placement: On Ereader
Interactive element: Input
Chapter navigation buttons
Chapter navigation buttons
At the same time, I presented it to the team during the Show & Tell meeting to compare the viability, tech limitations, and technical effort of solutions.
What I discovered during the meeting
I decided initially to remove the next & previous chapter chevron icon buttons at the bottom to add space for the input.
Then I explored different ways for the user to go to the next chapter. see below
So, I decided to keep the icon buttons because they allow for chapter navigation regardless of where the user is in the chapter.
Final design for iOS & Android
Final design for iOS & Android
Design guidance (handover & A11y)
Design guidance (handover & A11y)
Accessibility guidelines for the app
I created the handover, which includes design specs, component states and interactions, all-screen UI, and designs for dark mode, tablet, and landscape views. Furthermore, I established an A11y guideline to ensure that users of assistive tools will be able to use the app's new function.
Achieved a 17% adoption rate in the first month
Achieved a 17% adoption rate in the first month
Although the feature was released in the summer, we saw great results
Reduced user complaints (negative feedback) by 14.4%.
Achieved a 17% adoption rate after a month of release.
Received positive user feedback regarding the value of this functionality from our users.
Gather ongoing user feedback
Gather ongoing user feedback
What's next
We intend to conduct regular interviews and collect user input straight from the eReader via the feedback icon regarding this new functionality to be able to maintain and improve the feature even further.
Next
Page updated
Google Sites
Report abuse