dailyhunt-banner.png
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
 
ℹ️ 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)
5b99741597b3c.png
🤔 A bit of back story....
A few DH Social Playstore screens
image 28.png
image 30.png
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,
DH social did not perform according to intended metrics.  There was a drop in Monthly Active Users as well as time spent on the app.
so
Dailyhunt’s vision shifted. The new goal was to Inform & Enrich its readers rather than entertainment.
 
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.
Group 74.png
Increase and Stickiness in DAU/MAU.
Get people to come back to the app more often 
Group 74.png
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
Group 12141889 (3).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
Group 12141890 (2).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
Insights from User Research
fluent_phone-vertical-scroll-20-regular.png
Too much scrolling to read full news 
Opportunities and suggestions :
  • News Summary
  • Highlight important Words
  • Top nav bar taking too much space
akar-icons_person-check.png
Author of an article is important
!.png
Users didn’t know you could horizontally swipe to see the next story
 Opportunity:
  • Re-educate if the user has never swiped
bi_x-1.png
People don’t repost 
"no use of reposting on the platform as friends use Whatsapp to share"
openmoji_eyes.png
Priority of what people notice first: 
Image > title > meta > description > publisher > comments > related
 
bi_bookmark.png
Users don't know that the save feature exists
Opportunities and suggestions :
  • Good to have 
  • Asked for an upfront save option
bi_x-1.png
Profiles shown in likes carousel not useful - not needed
ei_like.png
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
 
Competitor Analaysis
Looked at competitors across the Indian, Chinese, Global, and Aggregator landscape.
Screen Shot 2022-06-30 at 3.01.59 PM.png
Some interesting Data Points:
Overall
Most popular features
  • Comments Tab         (30% click rate😱)
  • Related Stories
  • Swipe to the next story
Least popular features
  • Reply clicked
  • Repost
  • Profile in Like Carousel     (0.0039% click rate 🤕)
In the 3 dot menu in top bar
Most popular features
  • Share
  • Save
  • Show Less
Least popular feature
  • Report                (0.0009% click rate 🤕)
After prioritizing according to the insights gathered, we decided on the order of elements:
1. Back | 3 dots | Save Story
2. Image
3. Title
4. Meta (Publisher)
5. Description : p0 ad :
6. Publisher Logo
7. Hashtags
8. Comments
9. Like
10. Related Stories
11. Like | Share | Comment | Repost
💰BUSINESS CONSTRAINT:
Need to show an ad in the first fold
👉 How can we incorporate ads without ruining the reading experience?
Multiple Iterations.
Screen Shot 2022-06-22 at 11.03 1.png
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
Old Design
English_16.x.x.jpg
New Design
Screen Shot 2022-07-31 at 4.52.02 PM.png
Screen Shot 2022-07-31 at 4.52.27 PM.png
Screen Shot 2022-07-31 at 4.52.36 PM.png
Screen Shot 2022-07-31 at 4.52.15 PM.png
Screen Shot 2022-07-31 at 4.52.02 PM.png
Main Changes
Top Navigation Bar
Old Design
Screen Shot 2022-07-31 at 3.53.14 PM.png
New Design
Screen Shot 2022-07-31 at 3.53.22 PM.png
ADDED
WHY
Quick Navigation to comments 

Comments was the feature with the highest engagement and click rate (through data)
ADDED
WHY
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
Screen Shot 2022-07-31 at 3.43.55 PM.png
REMOVED
WHY
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
Screen Shot 2022-07-31 at 3.44.09 PM.png
Reactions Carousel
Old Design
Screen Shot 2022-06-22 at 10.57 1.png
REMOVED
WHY
Showing profiles in the like carousel

Very few people clicked (through data) + users said it was not useful
REMOVED
WHY
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
Screen Shot 2022-06-22 at 10.57 2.png
ADDED
WHY
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
Group 3260.png
 
  1. The New Design saves - 84 pixels extra in         (Image+Title+Source & meta)                                                                                        
  2. The New Design adds - 137 pixels extra to Ad visibility
​🎉
For best and worst-case scenarios.
Scenario: Screen Sizes
Group 3261.png
worst case - 4.7 inch
average - 6 inch
best case - 6.5 inch
Scenario: Title Cases
Worst Case - 4.7 inch

2 lines (8 words)

6 lines (22 words)

Best Case - 6.5 inch

2 lines (8 words)

6 lines (22 words)

Group 3262.png
For all Languages.
Dailyhunt supports a total of 14 different local languages. So it was imperative that our design worked for all languages.
Scenario: Malayalam - the language with the longest words
Worst Case - 4.7 inch

2 lines (6 words)

6 lines (15 words)

Group 3263.png
Best Case - 6.5 inch

2 lines (6 words)

6 lines (15 words)

Group 3263.png
For all Screen Sizes.
Screen Shot 2022-06-22 at 11.10 1.png
👁‍🗨 Usability Testing
Reaching out to our previous interviewees.
Screen Shot 2022-06-22 at 11.56 1.png
Observational Testing
Screen Shot 2022-06-22 at 11.57 1.png
Group 3264.png
 
Before Testing
Galaxy Note9 Mockup-1.png
After Testing - Live Screens
Galaxy Note9 Mockup.png
Android
iPhone 13 Mockup.png
iOS
🏆 Result
Group 74.png
MAU increased by 6.5%
Group 74.png
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.

View previous

View next