Frame 6961 (2).jpg
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) + Prajwal (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)
🤔 A bit of back story....
image 28.png
image 30.png
A few DH Social Playstore screens
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 design we needed to have some metrics in mind in order to make sure the design was successful.
Group 74.png
Stickiness in DAU/MAU.
Get the user to come back to the app more often in a month
Group 74.png
Retention rate over CTR.
Focus on More Long Term Users
Main Focus
The main focus during the revamp was two sprints - The focus for this sprint was the Detail Page Design
Feed Card Design
News feed cards on the home page that people scroll through
old
revamped
Group 12141889 (2).png
Detail Page Design
The news detail page that people land on to read the news story, after clicking on the feed card
old
revamped
Group 12141890 (1).png
➡️  Detail Page Design
Group 3256.png
Process Followed:
Insights from User Research
Group 3257.png
 
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
In the 3 dot menu in top bar
Group 3258.png
After prioritizing according to the insights gathered, we decided on the order of elements:
  1. Back / 3 dots / save story
  2. Image
  3. Title -> meta (publisher)
  4. Description: p0 ad
  5. Publisher logo
  6. Follow
  7. Hashtags
  8. Comments
  9. Like
  10. Related
  11. like / share / comment / repost
 BUSINESS CONSTRAINT: Need to show ad in the first fold
How can we show 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
English_16.x.x.jpg
revamped
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
 
Main Changes
Group 3259.png
Top Navigation Bar
Comments Section
Reaction Carousel
🤝 Keeping in mind dev and business constraints.
16.x.x Implementation
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.
Screen Sizes
Group 3261.png
Title Cases
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.
Case scenario for Malayalam - the language with the longest 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
After Testing - Live Screens
Android
iOS
iPhone 13 Mockup.png
Galaxy Note9 Mockup-1.png
Galaxy Note9 Mockup.png
🏆 Result
Group 74.png
MAU increased by x.xx%
Group 74.png
Avg time spent increased from x minutes to x 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