top of page
Revamping Dailyhunt's News Detail Page to align with Product Vision shift
๐ 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
.png)
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
Introduction
Dailyhunt is an Indian content and news aggregator application that provides local language content in 14 different languages from multiple content providers
Vernacular literacy far exceeds English language literacy (74% vs 10%) in India. It is one of the top 10 consumer applications in India with 283 million MAU (as of June 2021)
โน๏ธ what is Dailyhunt?
๐ฅ 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.
Overview
๐ง 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.
Disparate features and experiments competed for focus. App reliability and performance 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.
- The Problem
- The Goal
๐ช design principles
At a high level, we had specific goals to guide the revamp.
The theme was recapturing the news reading focus and decluttering the social elements. 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
Research
- Quantitative
๐ quantitative analysis
Took 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 ๐ค)
Top Nav Kabob Menu
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 further confirmed our hypothesis that in-app social sharing wasn't of much value to them.
We interviewed 12 different people that use both Dailyhunt and its competitor applications to build on the competitor and data analysis.
Insights
We discovered that certain elements of our product were causing confusion among users, highlighting a need for greater clarity and purpose. Specifically, readers were confused and frustrated with features such as the repost function, which lacked clear motivation for use. Here are some of the insights we gathered on specific elements:
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 means ‘show more of.’
1 user thought will have an impact on other people’s feed
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
Synthesis
- Architecture
๐งฑ architecture - piecing together the fixed 'frankenstein'
Used insights on key elements and pain points to construct a new layout + identified the optimal Ad placement to align with our business goals.
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 after a user lands on it.
.png)
๐ฐ business constraint
Need to incorporate an Ad into the first fold
How do we incorporate ads without compromising the reading experience?
- Business constraint
โ developer constraint
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)
First Iteration
First Iteration
๐ iterations
Multiple sub iterations on various elements
Individually iterated on the key elements: Top Navigation Bar, Header, Comments, and Reactions and then came together to discuss.
Putting the 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
Across all screen size and title case scenarios to satisfy business needs
As the Dailyhunt audience is primarily an Android user base with people using phones across all different sizes.
1/2
And across various languages like Malayalam, the language with the longest words
Since Dailyhunt is used in 14 different languages, it was imperative that we checked our design worked for all different languages.
2 lines (6 words)
6 lines (15 words)
2 lines (6 words)
6 lines (15 words)
Final Design
Final Design
๐๐จ usability testing our designs
Once we had approval from stakeholders regarding the business requirements, it was on to 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
๐ result
A successful revamp
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