TL; DR
Timeline:
Design & development Jul - Oct 2024
Launched Oct 7 2024
Team:
1 Designer, 1 PM, 3 Engineers (FE, BE, DS)
Context
Goals for V1
Prove that a TG for a news product exists within the Grapevine App
Design the product stage-by-stage, that is easy to develop and test.
Experience should feel native to Grapevine app, let users have more control over the form factor and language.
Make it a habit-forming user experience with simple rewards for retention, implement user acquisition loops.
Discovery & Research 🧪
Interviewed 14 Grapevine users - PMs, founders, engineers, designers.
Key pain points with existing news apps (Inshorts, Google News, Twitter):
"Too much noise and spam"
"Tired of being tricked by clickbait headlines"
"No control over tonality, need simpler English"
"InShorts doesn't feel polished enough"
Studied UX of Artifact, Substack, Inshorts, AI Optimized content apps. Acquired Testflight beta access to Particle News.
Substack best suited for a weekend read, not daily.
Particle News offered one too many features.
Very impressed by Perplexity summary cards.
InShots' form factor allows them to charge a lot per ad impression.
Product Scope ⚙️
Roadmap for Design 🎨
A vertically scrollable stack of news cards, within a tab called "News" within Grapevine app, each summarizing one key news piece.
Single screen user onboarding & walkthrough
Ability to toggle language between language styles:
5 Bullets (Heading + bullets)
Explain Like I'm 5 (Extra simplified)
Five W’s (Who, What, When, Where, & Why)
Gist (One paragraph)
Gen-Z (Adds a dash of fun)
Streak system to retain users & add competition.
Share & Invite mechanics
Customizing topics, Admin controls, Viewing history & more
Success Metrics 🎯
Avg daily opens: >3 per user
Swipes per session: >5
Swipes per session: >10
DAU uplift: +12% among cohort
MAU uplift: +15% among cohort
News tab to become 3rd most visited page in app
Design 🎨
Less is more: Simplest form factor, clean typography, no distractions, generous white space and soft transitions.
Keep it fun: Introduce coloured cards, keep the tone light when communicating with users
Designing for Growth: Introduce a soft gate - each user gets 3 invites to bring others in, to create urgency, drive word-of-mouth, and kept the quality of the early cohort high.
↪ 3.1 - Onboarding to Home
↪ 3.2 - Card design
↪ 3.3 - Reading streak
↪ 3.4 - Requesting an Invite Code
↪ 3.5 - Sharing an Invite
4. Outcomes & Takeaways 🏁



































