Pratilipi Home page redesign — UI/UX Case Study!

📌In this case study I am going to articulate my process of redesigning Pratilipi’s home page and also I will share my process, design decision.

Disclaimer

This project was done as part of the 10K Designers capstone assignment. The problem statements were given by Pratilipi itself.

What is Pratilipi?

Pratilipi is India’s largest digital storytelling platform which brings readers, writers, and their stories together. It was founded in 2015 by a set of reading enthusiasts. Pratilipi is a UGC(user-generated content) platform, which means all the stories on Pratilipi are written by the users themselves. Pratilipi has users who have become writers and they write stories, episodic stories, novels, poems, etc. on the platform. Writers write the story in their choice of Indian languages. It supports 12 Indian languages.

Problem Statements🤯

1. Rethink a modular homepage structure that provides a better system to handle existing sections and also provides an elegant solution to handle new growth experiments on the home screen.
2. With the new homepage design, make a system that ensures that the user experience remains consistent throughout the page irrespective of the choice of language.
3. Culminating the above 2 points, give the UI a facelift. Create a better-looking home screen.

Research🌱

I was pretty much familiar with the product at this stage, as I did a lot of research to gain some perspective. I asked some of my friends (existing users as well as the ones who had never used pratilipi before) to use the app and these are the common pain points that they shared.

I interviewed 3 groups of users on phone calls, a total of 6 users, out of which

• 1 was a frequent user
• 2 were occasional users
• 3 were new users

According to users including me I have noted down some common pain points

1. Visual clutter makes it difficult to comprehend important information.
2. Lack of visual hierarchy results in overlooking important data.
3. while changing the content language the application language is changed automatically.

Before going to solve problem statement I want to show you current home screen of the pratilipi app.

But Why?

Because Without seeing the current home screen how do you relate with the problem statements?

As we all know, human responds to and process visual data better than any other type of data. The human brain processes visual content 60,000 times faster than text.

Till now we know what are the problems that the home screen is facing, right !!!

So according to the user's pain points and me also I did a user persona(occasional user).

User persona

Information Architecture

In my proposed solution, I have changed the user flow a little bit. Before going into my solution let me show you the current user flow and my redesigned user flow.

Process

I decided to divide the home screen section by section and iterated a lot to come to the final solution. I have not redesigned all sections of the home page as the home page handling a lot of section and it is not possible to redesign all the sections in two weeks.

Before going to the solution I’ll show you what is the problem on the current home page

📌 The First problem is that the home screen faces come with Pratilipi being a multi-language application. When you select a language to consume content on the app, the whole app language changes. Right now there is only one design that handles all the languages,

and that create problems like this:

Problems :

1. Choose Content language / choose application language is not a thing that the user regularly clicks. So keeping this option in the left corner of the home screen is not an essential feature.
2. Multiple clicks.
3. The same option is in three-place, 1st is on the onboarding screen, 2nd is on the home screen and 3rd is inside the profile settings.

Solutions :

• I Kept different option for choosing application language and content language because the user can read stories in their preferred language, so give them the liberty to choose the content language on their own, (it is not mandatory that if a person want to read some stories in Punjabi the app language is also in Punjabi )
• I removed this application/content language option from the home screen ( if a user wish to change they can change from their profile setting)

let me show you my iterations :

The top section of the Home Screen

While I was designing the screen I have checked all most all apps on my phone to know what exactly a top navigation section of a home screen needs.

I checked all social media app, health apps, e-commerce app, music apps.

what did I notice while taking inspiration?

• contains the features that users need to regularly click.
• Contains icons (not words or dropdown for select any option)
• contains application name/logo of the app (so that the user is familiar with the app what app they are using and for the new user it is helpful to keep them remember)
• The top section has contained as many as fewer and important options to click.

So after so many iterations( Can’t even remember the numbers), I prioritized the features that a read/writing application should have on the top section.

• Notification
• search

The followings are the problems of the first section of the home page that I have noted down.

Problem :

1. Two profile pictures in 1st section of the home screen are confusing (at first when I opened the app for the first time I thought one is for the profile but can’t understand 2nd one because I was unaware of the author can share posts on the app )
2. The coin looks like a sliding button.
3. On the home screen two scroll sections one for you and categories(Categories can be added any other place)
4. There are so many options to click at one place, and cluttered(content change, coin, search, for you, categories, profile, option for the post, User needs to look at so many things at a time)

Solution :

In my proposed solution, I kept only the essential features and kept them uncluttered.

• application name to make the user familiar with the app
• Notification and coin ( added the number of coins in that)
• I kept adding posts here because it makes readers and writers stay connected, readers like to see the story of the writer they followed.
• I removed the profile from this section because the profile is not the thing that user regularly check and two photos didn’t look good, added these to the bottom navigation section. Added notification here.
• I removed for you and categories to make the home screen a single scroll.

Reading streak, continue reading, Premium :

Let me show you the current home screen before explaining the problems that I have noted.

Problems :

1. The visuals are so cluttered.
2. Continue reading in two places.
3. Mentioning the reading streak doesn’t look good, it is like forcing users to read daily to get free coins, and every user doesn’t read daily.

Premium

If you check other application, in most premium cases, there are subscribe CTA or represent some premium offer in-home screen so that users would check for premium.

Problems :

1. Without seeing any content directly showing premium with a tag “ unlock all the series in just 150 INR ”.

It is a bad idea. (users generally ignore if something they need to buy because we love free content) and “2-month premium free on yearly subscription”, this is inside the premium. ( The user who has already made up his mind not to buy a premium subscription never clicks on this and never gets to know about this additional offer. It should be in front and the amount(INR 150) of premium should be inside, at least some users try once to see what is a premium feature is )

2. In premium, some cards are also present.

Cards are content. In one single section, there are three different actions to perform.

see all: to see premium details and buy a subscription

slide right: to see the premium contents

click on card: to read content

3. Cards are visually so cluttered.

A diamond in the left corner of the card, one diamond background of cards, times of reading in the right corner, so many hashtags, rating, reading time. Those are unnecessary things to represent and also in the premium section. The Premium section should be clean and highlighted.

Solution :

In the above picture, you can see, these sections have been replaced with the following sections providing a better context and personalization to the screen.

• Must read: presented some popular contents
• Premium card: I have separated premium cards and keep only relevant information related to premiums like CTA and offers. Because as humans we don’t remember paragraphs. Proper CTA and relevant offers help users to remember about the subscription.

Some of my iterations of the first section of the home screen.

Must Reads

In this section, stories which are popular and have a huge number of reads are present.

Problems :

1. Images are too small so that a larger story title gets clipped.
2. Rating and story parts used on the cover image, the images are already small, and using other kinds of stuff on it hides the story cover image.
3. Reading time is not relevant on the home page, that can be inside the story.
4. You can see the story titles, read count getting clipped in the current design. Also, for some South Indian languages, the character string length is way more than that in other languages, which breaks the UI. That causes text to overflow, or get clipped, thus providing a bad experience for the users in this language.

Solutions :

• With increased image size the larger story’s name can be read properly.
• Added writer’s name: as this is not only a reading application, the app contains features where writers can post their stories, readers can follow writers, readers and writers can chat privately. So keep the writer’s name here make the user know the writer better.
• Added rating and reads at one place: visually it looks better than previous and also removed min/hour reading time.
• Added add to library: Users generally save/add content to the reading list for reading purposes.

Most active author :

This is the section where the author’s profiles are present and readers can follow some active authors if they want.

Problems :

1. No need for story title: Below the author’s name some of his story titles are also there, in some cases which are getting clipped.
2. Follow 225 / follow 3.5k: confusing what is the number, whether it is stories they have published or the number of readers following them.
3. Boxes are very small in size: for some South Indian languages, the character string length is way more than that in other languages, which breaks the UI. That causes text to overflow, or get clipped, thus providing a bad experience for the users in this language.

Solutions :

• Increased the size of the box: So that larger characters are not getting clipped.
• Removed story title and added number of followers and number of stories: As the section heading, it is most active authors section, so it is more necessary things to keep rather than story title, because for new users for the first time on the app they don’t know what are the most reading stories of the author, so story title doesn’t matter to him. But the number of followers and number of stories can matter to check his profile and read stories and follow him.
• I removed the numbers from the following button and made a single follow button.
• I removed the rounded corner of Follow button: As the box corner has a less rounded corner, so I made follow button the same for better visual.

Reader’s Favourite

In this section, users add some stories as their collection list, and other users on the app can view that collection and also follow that collection.

Problems :

1. The user’s collection name and the number of people who have viewed this collection are getting clipped.
2. Story’s parts are not necessary here as this is the list of collection section.
3. Follow button is inside the User’s collection page: another user can’t directly follow from here.

Solution :

• I changed 1551 people who have viewed this collection to 1551 views: two things have the same meaning but the current one is taking more space.
• I added the number of stories in this collection: This is helpful for the user, as in the current screen number of stories is inside the user’s profile, the relevant information is hidden.
• I added Follow here so that users can directly follow this collection.
• Added story’s name, rating, and the number of reads on the image.

Newly Published

This is the section where newly published stories of the Pratilipi are displayed.

Problems :

1. This section has the same design structure and problems are the same as the must-read section has.
2. Images are too small so that a larger story title gets clipped.
3. Rating and story parts used on the cover image, the images are already small, and using other kinds of stuff on it hides the story cover image.
4. Reading time is not relevant as it might demotivate the users to read by seeing longer reading time.
5. The story titles, read count getting clipped in the current design: for some South Indian languages, the character string length is way more than that in other languages, which breaks the UI. That causes text to overflow, or get clipped, thus providing a bad experience for the users in this language.

Solution :

• I changed the Structure of the section and story title description as it is a newly published section.
• Removed parts, reading time: every story has some parts and that is already inside the story, so keeping this here is no meaning, users can see from inside the story.
• Removed rating and added type of story and number of reads: story type is more informative.
• Added Author’s name: The user should know the author’s name.

Dialy Series

In the daily series section, the newly published part of stories is there on daily basis. Users can see upcoming parts for the next day also.

Problems :

1. Section description is not required. From the section heading and weekly schedule, it can be understood that every day some new part of the story is coming.
2. To see other days user needs to slide left.
3. Cluttered UI
4. The new part arrived and parts are highlighted more.

Solution :

• Removed section description: From the section heading it is clearly understood.
• Added all 7 days: no need to slide to see other days.
• I changed the structure of the section: we can see more stories in a horizontal slide than a vertical slide, and it will save space and also visually goes with other sections too.
• Added only relevant information like the new part which will be arrived, and times of reading.
• Removed rating, as per this section those are the relevant information for users.

Bottom navigation Section

This is the section where including home other options are available and users can directly navigate to that section from here.

I have made a few changes in this section, I’ll explain why I did this.

Before that let me show you the previous and my redesigned bottom navigation.

• I have changed the Library icon and place too: In my proposed solution in the home screen I have given an option to add to the library from the home screen itself and that goes with this icon.
• Added genre icon (Changed categories to the genre): because as it is a read/write application, the genre will suit more than categories. Also, I removed categories from the home screen, made the home screen into a single scroll.
• Added updates in the top navigation section near the coin.
• Removed view more section and added it to search result screen.

When I have been interviewing some of my friends, I got to know that some regional authors, whose books they read usually, are also in pratilipi and they post their stories on this platform also. And the users like to read their content.

So for the content users might have to search for the author first and then they’ll be able to read the author’s contents.

As a designer it is our job to show users the things that they want to see, don’t make them search by themselves.

For that reason, I have added some new sections to the home page

So that I have added some sections to the home screen as per the user interview.

• More of what you like
• Best of Sulagna Mohanty(author’s name)
• Sipra(anonymous name), you might like these genres

Search :

In the current search screen, the search page is having features for current search and trending search only.

According to user Persona

The current design has no proper searching: some users remember some authors by their names, and they like to read their contents. But the current design system has no preference in the search list for the author.

➡️ In my proposed solution, I have changed the user flow. Before explaining my solution let me show you the current user flow and my redesigned user flow

So I have redesigned the search page also. Let me show you the current search page and redesigned one.

Problems :

1. The search bar doesn’t suggest anything to search.
2. There is no preference for the author’s search.

Solutions :

In my proposed solution, I have made some changes

• I have added suggestions for search, top genre, and Browse all(view more section) so that users will get some context about what to search.
• The search result page is visually better than the current one.
• By adding the top genre here will help users to know about the top genres.

Why did I add the view more section to the search result page?

View more is currently present in the bottom navbar. current view more section has some competition ad, podcast, newly published, blogs are present. These sections are also available on the home screen. As the home screen handles a lot of sections, users might miss these things that’s why I have added all the view more things to the search result page to remind users of these events.

Last but not least is my final screen.

I did a lot of things behind the scenes, I did a lot of things that didn’t hit the headlines.

Behind The scene

My deep gratitude to Ankit Pandole, Vishant Kumar, and Aishavrya Gupta for giving their valuable feedback and mentorship. And special thanks to Abhinav Chhikara for creating a such great community. I am lucky to have a chance to communicate with these amazing mentos of 10kdesigners.

That’s all folks! 🎯

Hope you enjoyed reading the case study. Like it? If yes, don’t forget to clap for my work 👏.

Reflection and Key Takeaways

This project was a golden opportunity for me to work with the real problem statement and work with the designers of the company directly.

Learning

• I understood the common UI and UX paradigms that exist.
• I worked on a lot of iterations to arrive at the right solution. During this process, I realized that every simple design carries a lot behind the scenes.
• I worked on my Visual Design skills and understood how much visual hierarchy plays a vital role in the design system.
• And of course, most important taking feedback, before taking feedback everyone of us think whatever we did is right.

I’m currently looking for job opportunities as a Product Designer. If you’re hiring, I’d love to have a conversation with you. I will be happy to connect on LinkedIn and Twitter 😊

Know the Author

Sipra Das — A developer turned digital Product Designer based in India, working towards making products with great user experience. Currently part of the 10K Designers.