top of page
Revamping Dailyhunt's News Detail Page to align with Product Vision shift
Product Strategy| Business Alignment | Multi Language Accessibility | Testing
🚀 Sprint-based revamp to improve the accessibility and news reading experience for local news consumers.
🎯Resulted in a 18 milion increase in Monthly Active Users
My Roles & Responsibilities
Research, UI Design, Testing, Prototyping
Updating the Design System
Co-ordinating with Developers and PMs
Pitching to Stakeholders
Team
Me, Sreekanth, Sachin (Product Designers)
+ Manager + PMs + Developers
Duration
2 weeks
Tools
Figma, Google Docs, Google Sheets
ℹ️ what is Dailyhunt?
Dailyhunt is an Indian content and news aggregator application that provides local language content in 14 Indian languages from multiple content providers
Vernacular literacy far exceeds English language literacy (74% vs 10%) in India. Being one of the early entrants in the regional content space in the country, Dailyhunt is one of the top 10 consumer applications in India with 283 million MAU (as of June 2021)
.png){kind=small}
👥 who are the users?
Accessed from 95% of the pin codes across India daily
Dailyhunt reaches across the length and breadth of India, split across 14 different languages, with Hindi, Tamil, English, Telugu & Malayalm being the top 5 languages (in order), so accessibility was a key consideration.
🧐 a little back story...
During early 2020, Dailyhunt introduced DH Social
where they aimed to bring the social networking aspect to the news app, introducing social elements like resharing, engagement bar, groups, and more.
The Problem
In this attempt to bring the social networking aspect to the news platform, DH Social had unintended negative consequences 🤕.
There was a huge decline in Monthly Active Users as well as total time spent on the app.
Our hypothesis was that the various social features and experiments were competing for focus. App reliability issues increased exponentially.
The Goal
So Dailyhunt’s vision shifted. The new goal was to focus on the news reading experience.
Inform & Enrich its readers rather than entertainment.
💪 design principles
Recapturing the news reading focus, decluttering the social elements
At a high level, we had specific goals to guide the revamp. We weren’t trying to revert to a simple past, but rather build a strong foundation that embraced a rapidly evolving business and a more diverse user base.
1. Look at all the features from scratch
2. Give users more focus over their time
3. Prioritize what is necessary for the customer’s ideal news reading experience.
🎯success metrics
How do we measure success for this new vision?
Since it was a fast sprint, we needed to have some metrics in mind to make sure the design was successful.
Retention rate over Click Through Rate (CTR).
Focus on More Long Term Users
Increase and Stickiness in Daily Active Users(DAU)/Monthly Active Users(MAU).
Get people to come back to app more often
👁 scope for this sprint
The News Detail Page was one of the two sprints in the new vision revamp
The focus of this case study is the News Detail Page Sprint
.png)
⏪ recap of previous sprint
Design decisions from the News Feed (1st Sprint) informed the Detail Page Sprint
Changed information architecture of info in feed card
The decision to remove UGC content from the feed, to improve the value of the content, because it was diluting the quality feed. 70% of readers choose to block UGC on their feed.
Font style and weight tested for various languages for best accessibility and reading experience.
🔨 now that we have the context set up, let's start the revamp
Constantly converged and diverged as a team throughout the process
1. Competitor Analysis (diverge)
2. User research on top competitors + dailyhunt (diverge)
3. Analyze research, competitors, literature & analytics to obtain insights (converge)
4. Convert RAW Insights to Design Mocks (diverge)
5. Discuss Mocks & Finalize Variants + Conduct User Survey (converge)
6. Usability Testing with Prototypes (diverge)
7. Incorporate testing feedback into final Designs and componentize(converge)
📊 quantitative analysis
Taking a look into Data to understand behavior patterns on the news detail page
Collaborated with our Data Analyst and PMs to analyze how readers were getting around and their behaviors. The comments feature was the most actively used feature along with external Share. However, in-app social sharing elements like reposting and visiting profiles had negligible action.
Overall
Most popular
-
Comments Tab (30% click rate😱)
-
Related Stories
-
Swipe to the next story
Least popular
-
Reply clicked
-
Repost
-
Profile in Like Carousel (0.0039% click rate 🤕)
Kabob Menu in Top Nav
Most popular
-
Share
-
Save
-
Show Less
Least popular
Report (0.0009%click rate 🤕)
🌐 competitor analysis
Looked at 14+ competitors across the Indian, Chinese, Global, and Aggregator landscape
I noted down patterns and observations of what I found useful, interesting, or unique. Some patterns focused on were Ad placements, navigation to view the next news story, comments and related stories.
🗣 qualitative research
Talking to users confirmed our hypothesis that social sharing wasn't of much value to them.
We interviewed 15 different people that use both Dailyhunt and its competitor applications to build on the competitor and data analysis, and these were some of the insights. We were able to validate our hypothesis that social sharing did not provide much value to our users. Additionally, we discovered that certain elements within our product caused confusion among our users, leading to a need for clarity and purpose.
Too much scrolling to read full news
Opportunities and suggestions :
-
News Summary
-
Highlight important Words
-
Top nav bar taking too much space
People don’t repost
"no use of reposting on the platform as friends use Whatsapp to share"
Profiles shown in likes carousel are not useful, not required
People confused by the impact of ‘liking’ a news story
People think it meant ‘show more of' when in reality liking didn't add to the algorithm. 1 user thought it would have an impact on what shows up on other people's feeds.
Users didn’t know you could horizontally swipe to see the next story
Opportunity:
Re-educate if the user has never swiped
Users don't know that the save feature exists
Opportunities and suggestions:
-
Good to have
-
Asked for an upfront save option
🧱 architecture
Used insights on key elements and pain points to construct the new layout of the news detail page
As we analyzed and prioritized elements to form the skeletal hierarchy of the detail page (or the 'fixed Frankenstein' as we called it :)) we also had to consider a key business requirement: placing an advertisement in the first fold of the detail page after a user lands on it. This presented us with the challenge of determining the optimal location within the architecture to implement the ad, without compromising the user's reading experience.
.png)
💰 business constraint
Need to incorporate an Ad into the first fold
How do we incorporate ads without compromising the reading experience?
Constraints
✋ developer constraints
Keeping in mind business constraints, and addressing developer feasibility to find the best possible solution
Addressed developer constraints within our design in order to meet the income requirements for placing ads on the first fold across multiple Android phone sizes and specifications. Some questions we asked ourselves, and addressed:
-
What is the average phone resolution for a DH user?
-
Is it currently possible for developers to place ads between lines instead of paragraphs for all languages?
-
Average number of lines in 1st paragraph across languages?
-
Is there any revenue difference between showing an ad as 20% vs 100% in 1st fold?
-
What are the problems with having (i ads) icons on the ad's image rather than outside the image? (which intern saves 20px space to show the ad)
🔄 iterations
Multiple iterations on various features
Individually iterated on the key elements: Top Navigation Bar, Header, Comments, Reactions and then came together to discuss.
Final Design
Putting the final design together
Old Design
New Design
1/3
Walkthrough of the main changes
Top Navigation Bar
Old Design
New Design
ADDED Quick Navigation to comments
Comments were the feature with the highest engagement and click rate (30% ref. quant insights)
ADDED Save Story upfront
Experiment to see if people use the feature more. Qualitative Research gathered that people wanted to save stories but didn’t know the option already existed on the app.
Comments Section
Old Design
Brought comments out, took out reposts
REMOVED The tabs under 'Discussions'
The reposts tab was barely clicked on, and comments had the highest click rate, eliminating the need for the repost tab.
New Design
Reactions Carousel
Old Design
REMOVED Showing profiles in the like carousel
Very few people clicked (through data) + users said it was not useful
REMOVED The like button & only kept the emotions
People were getting confused about the purpose of the like button, thinking it was adding to their algorithm
New Design
ADDED Visual representation of the aggregation of emotions
To give readers an idea of how different people are reacting to a news story and urge them to contribute as well.
🤝 pitching to stakeholders
The new design has a more optimized reading experience as well as MORE Ad visibility
Old Design
New Design
🎉
The New Design
SAVES 84 pixels extra in (Image+Title+Source & meta)
ADDS 137 pixels extra to Ad visibility
Making sure Ad in the first fold criteria is met for all screen size and title case scenarios to satisfy business needs
The Dailyhunt audience is primarily an Android user audience. With people using phones across all different sizes
1/2
Checking across various languages like Malayalam, the language with the longest words
2 lines (6 words)
6 lines (15 words)
2 lines (6 words)
6 lines (15 words)
👁🗨 usability testing our designs
Testing the New Detail Page
Reaching out to our previous interviewees.
Observational Testing
🤝 Takeaways from testing
-
Design validated
-
Most people were sharing through WhatsApp. Stakeholders wanted to highlight WhatsApp as what the audience related to most and to encourage more shares
-
People wanted to see related stories
-
Reduce font-weight of the title for better accessibility
Final Designs after testing
Android
iOS
👩🏻💻 handoff
Stitching the final design together with the Dailyhunt Design System
The Design System consisted of 3 subsystems with their components each:
Android, iOS, Mobile Web
Each of these is further divided into, light, dark, and Urdu (as the language is read from left to right)
ANDROID
IOS
WEB
URDU
A successful revamp
🏆 result
MAU increased by 6.5% (18 million)
Avg time spent increased from 5 minutes to 13 minutes
💭 takeaways
This revamp offered lots of growth in a fast-paced environment
Fast thinking and decision-making. Since it was a quick sprint, I was pushed to make quick decisions and learned how to make decisions based on the data available to me as well as intuition.
Power of diverging as a team and then coming together to share our thoughts. To save time, we divided the work and created our designs and iterations for each feature. We then came together to share our ideas. This opened up ideas that one or the other of us would've never come up with before.
Collaborating with multiple teams. I had to constantly coordinate between Developers and PMs for data asks and to make sure my design was feasible.
Balancing business and user needs. The revamp pushed me to brainstorm ways in which we could incorporate the business needs while not taking away from a smooth experience.
Pitching to Higher-up and Stakeholders. Learned to pitch my designs and decisions to stakeholders and show them the best and worst cases while incorporating business needs.
bottom of page