Redesigning Reading Experience in Pratilipi iOS to Increase reading time
Context
Pratilipi is a UGC platform for publishing various forms of long form reading content, including single part stories, multi-part stories, poems, essays.
The first version of iOS app was launched with a focus on content discovery and navigation. Initially, the emphasis was on acquiring users organically, but soon after the launch, feedback started pouring in regarding the reading user experience.
We refer to our reading area module as 'Reader'.
The 'Reader' within the app is crucial due to the fact that users were spending a 80% of sessions time in reading.
Goal
Redesign the reading experience of our iOS app whose primary function is reading (multi-lingual, 12 languages), currently servicing 30K users daily but with the potential to accommodate the needs of 1Mn+ users in the future.
Increase the reading time per user.
Impact
9%
Increase in average reading time per non-premium user
13%
Reading time Increase for premium users
3.9%
Read Completion increased per series
1.2%
Read (Parts) increased per user
4.5%
Read Activation increased
My Contribution
I worked as a Solo Designer with 3 Engineers & 1 PM from Oct-Nov 2023. I contributed in Product thinking, User research, Data Analysis & Design.
Reading Experience Fundamentals
Safe Space
When designing for iOS devices with varying screen sizes, maintaining a consistent reading experience is crucial. This is achieved by utilizing safe areas, which define the space within a view unaffected by system features like navigation bars or tab bars. By respecting system-defined safe areas, margins, and guides, and employing layout modifiers for precise view placement, the interface can gracefully adapt to different contexts while displaying the content.
Formatting
Formatting in reading is crucial for clarity, emphasis, and navigation. It organizes text, highlights key points, and guides readers through the content. Proper formatting enhances the visual appeal and comprehension of the material, making it more engaging and accessible. We used headlines, bold text, underline text, paragraph guidelines for emphasis, incorporated image guideline.
Reduced contrast for Optimal Reading
Reduced contrast reduces eye strain and fatigue, promoting comfortable and prolonged reading sessions. It enhances readability by minimizing glare and distractions.
Reading Progress
Progress indicators are essential in reading to help users track their position and navigate through content effectively. They offer visual cues of progress & locate specific sections with ease. We used 'Paging' & 'Percentage' serve as design solutions for this purpose in two different modes.
Multilingual
Pratilipi provides content in 11 main regional Indian languages - Hindi, Bengali, Gujarati, Punjabi, Marathi, Odia, Kannada, Tamil, Telegu, Malayalam, Urdu & English. Creating a reading experience that cater to the unique needs of each linguistic community became important for us.
Reading Preferences
Preference Choice Screen
Setting reading preferences in an app is crucial for personalization, user experience, and engagement.
Reading Mode preference
Dark mode and light mode are necessary in online reading to accommodate user preferences. They provide a solution for users to customize their reading experience based on lighting conditions and personal comfort, enhancing readability and reducing eye strain.
Video
Page Changing preferences
User preferences for navigation style vary, necessitating options like 'swipe mode' and 'scroll mode'.
Swipe mode allows users to flip through pages akin to a physical book, while scroll mode provides continuous reading. These options cater to individual preferences, enhancing user experience and engagement with the content.
Scroll/Video
Swipe/Video
Font Size
Customizable font size options accommodate users with varying visual abilities, ensuring content is accessible and enhancing overall user experience by allowing individuals to adjust text to their comfort and readability preferences.
Video
Line Height
Giving line-height preferences in a reading app is important because it directly impacts readability and user comfort. Users have different preferences for line spacing based on factors like screen size, font choice, and personal comfort.
Video
User Education
New Reader Launch Education
User education is vital for adapting to new reading experiences, especially when transitioning from legacy designs. It helps users discover and familiarize themselves with new features necessary for optimal reading, ensuring a seamless and fulfilling user experience.
Video
Preference changing education
Swipe/Video
Scroll/Video
Education to move into next story
We introduced two new types of user education in two different reading mode to assist users to move them into next part of a story.
Scroll/Video
Swipe/Video
Others
Story Parts Navigation inside Reader
Navigation inside 'Reader' streamlines access to other parts of the story quickly easing user navigation.
Video
Loading State
Loading states between two parts served as points of delight. They reassure users, create smooth experiences during delays, and prevent interaction with incomplete screens, ensuring engagement.
Video
Locked content unlocking experience
'Unlocking an locked content' is important as it creates a sense of reward for the user, signaling to the user that they are unlocking something valuable and exclusive and serves as a visual indicator of progress. It adds an element of excitement to the unlocking process, enhancing the overall user experience and engagement.
Video
Crafting a reading experience with such vast impact has been truly humbling. Collaborating with our PM and Engineers, we defined the scope and implemented a sequential launch strategy. Continuously analyzing data, we gained valuable insights into its impact. Excitingly, we're introducing additional features aimed at enhancing the reading experience further. (More prototypes coming soon!)
©️COPYRight 2024