top of page
Revamping Dailyhunt's Product Vision
My Roles & Responsibilities
Research, UI Design, Testing, Prototyping
Updating the Design System
Co-ordinating with Developers and PMs
Pitching to Stakeholders
Context
One of the multiple design sprints
during my role at Dailyhunt
Team: Me, Sreekanth, Sachin (Product Designers) + Manager + PMs + Developers
Tools
Figma, Google Docs, Google Sheets
Context
โน๏ธ 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.
It is one of the top 10 consumer applications in India with 283 million MAU (as of June 2021)
๐ค A bit of back story....
Dailyhunt’s previous huge release was DH Social - where they aimed to make the news reading platform more community-based, introducing social elements like resharing, engagement bar, groups, and more.
however,
so
Dailyhunt’s vision shifted. The new goal was to Inform & Enrich its readers rather than entertainment.
DH social did not perform according to the intended metrics. There was a drop in Monthly Active Users as well as time spent on the app.
The Problem
How do we measure success?
Since it was a fast sprint we needed to have some metrics in mind in order to make sure the design was successful.
Increase and Stickiness in DAU/MAU.
Get people to come back to the app more often
Retention rate over CTR.
Focus on More Long Term Users
The focus for this particular sprint was the Detail Page.
The vision revamp was done in two main sprints - The Feed Card Design & The Detail Page Design.
1.
Feed Card Design
News feed cards on the home page that people scroll through
Old Design
New Design
.png)
2.
Detail Page Design
The news detail page that people land on to read the news story, after clicking on the feed card
Old Design
New Design
.png)
Revamping the Detail Page
1. Competitor Analysis
2. User Research
on top competitors + Dailyhunt app
3. Analyze research, competitors, literature & analytics to obtain insights
4. Convert RAW Insights to Design Mocks
5. Discuss Mocks & Finalize Variants + Conduct User Survey
6. Usability Testing
with Prototypes
Research
Insights from User Research
Author of an article is important
Profiles shown in likes carousel not useful - not needed
Priority of what people notice first:
Image > title > meta > description > publisher > comments > related
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"
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
Competitor Analaysis
Looked at competitors across the Indian, Chinese, Global, and Aggregator landscape.
Some interesting Data Points:
Overall
-
Comments Tab (30% click rate๐ฑ)
-
Related Stories
-
Swipe to the next story
-
Reply clicked
-
Repost
-
Profile in Like Carousel (0.0039% click rate ๐ค)
In the 3 dot menu in top bar
-
Share
-
Save
-
Show Less
-
Report (0.0009% click rate ๐ค)
After prioritizing according to the insights gathered, we decided on the order of elements:
๐ฐBUSINESS CONSTRAINT:
Need to show an ad in the first fold
๐ How can we incorporate ads without ruining the reading experience?
Multiple Iterations.
Stitching the final design together with the
Dailyhunt Design System
Using components already present - The Design System consisted of 2 subsystems with their components each:
-
Android
-
iOS
Creating new components and adding them to the Design System
Final Design
๐ฑFinal
Design
Old Design
New Design
Main Changes
Top Navigation Bar
Old Design
New Design
Quick Navigation to comments
Comments were the feature with the highest engagement and click rate (through data)
Save Story upfront
Experiment to see if people use the feature more. Research gathered that people wanted to save stories but didn’t know the option already existed on the app.
Comments Section
Old Design
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
Brought comments out, took out reposts
Reactions Carousel
Old Design
Showing profiles in the like carousel
Very few people clicked (through data) + users said it was not useful
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
Visually showing 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.
๐ค Keeping in mind dev and business constraints.
Old Design
New Design
Considerations
The New Design
SAVES 84 pixels extra in (Image+Title+Source & meta)
ADDS 137 pixels extra to Ad visibility
โ๐
For best and worst-case scenarios.
Scenario: Screen Sizes
Scenario: Title Cases
2 lines (8 words)
6 lines (22 words)
2 lines (8 words)
6 lines (22 words)
For all Languages.
Dailyhunt supports a total of 14 different local languages. So our design needed to work for all languages.
Scenario: Malayalam - the language with the longest words
2 lines (6 words)
6 lines (15 words)
2 lines (6 words)
6 lines (15 words)
For all Screen Sizes.
๐๐จ Usability Testing
Reaching out to our previous interviewees.
Observational Testing
Testing
Before Testing
After Testing - Live Screens
Android
iOS
๐ Result
MAU increased by 6.5%
Avg time spent increased from 5 minutes to 13 minutes
๐ญ Takeaways
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