Product Architecture & User Journey
The Streaks feature was a strategic initiative commissioned by leadership to drive weekly habit formation and increase TSL. Bypassing traditional discovery, my role was to translate executive goals into robust UI logic, clear state architecture, and a seamless user experience.
Strategic UX Requirements: Audio remained the hero experience. The gamification layer had to be understood at a glance (under 5 seconds), clearly communicate progress and rewards, avoid cognitive overload, operate seamlessly across all content formats (live radio, podcasts, music, and sport) with zero playback friction, and be architected as a scalable system capable of expanding into future engagement features (such as show or station leaderboards).
Competitor Benchmark: Evaluated streak mechanics in leading habit-forming platforms (Duolingo, Strava) to establish familiar mental models for weekly progress visualisations, badge milestones, and tiered competition bonus entries.
Refining the Listening Mechanics: While initial concepts explored variable monthly metrics, cross-functional collaboration between design, product, and engineering led us to land on a simple, universal 120-minute, 3 entry weekly threshold. This balanced backend data feasibility with achievable user targets that felt meaningful without causing fatigue.
Frictionless Logic & State Architecture: Mapped the end-to-end user journey around an automatic, zero-barrier system. Listening minutes accumulated automatically across any content type regardless of active feature engagement. The system only paused if a user explicitly chose to opt out via manual controls, ensuring maximum initial adoption while preserving user agency.
Iterative Exploration & Product Evolution
The business logic for Streaks evolved dynamically throughout the design phase. To accommodate shifting reward structures, technical constraints, and bonus entry mechanics, I used rapid UI prototyping to translate complex backend rules into intuitive, low-friction user experiences.
Progress Visualisation: Explored multiple progress models (from horizontal bars to circular rings) and layout variations to determine the clearest way to structure key metrics.
Designing for 24-Hour Update Cycles: To resolve user confusion and anxiety caused by 24-hour backend processing delays, I introduced a top-of-hub Daily Listening Minutes tracker. This gave users clear daily visibility toward their 120-minute weekly target, reassuring them that their listening time was successfully recorded even without real-time syncing.
Dynamic State Architecture & Multi-Platform Adaptation: Designed flexible UI component frameworks across light and dark modes for both mobile and web player environments, ensuring clear state communication across active listening, bonus entry tiers, rollover completion, and collapsed opted-out modes.
Information Architecture & Copy Refinement: Iterated on visual hierarchy and microcopy (e.g., testing 'Weekly Streak' vs. 'Bonus Entry' and 'Entries Earned') to reduce cognitive load and achieve under-5-second comprehension.
Cross-Platform Scaling: Web Player Adaptation
To ensure total feature parity across the LiSTNR ecosystem, I scaled the Streaks framework for the desktop web player. This involved translating compact mobile component patterns into responsive desktop layouts, designing a persistent side menu widget layout, and validating component accessibility across both light and dark UI themes.
Responsive Layout Architecture: Retained the vertically stacked component hierarchy from mobile to establish strong visual consistency across platforms, simplifying user recognition while creating a flexible pattern that scales cleanly across responsive desktop breakpoints.
Side Navigation Widget Optimisation: Adapted the mobile widget for the desktop side menu - reorganising elements into a two-line stacked layout to take advantage of available space while adding descriptive text labels to improve clarity.
Theme & Accessibility Compliance: Adapted colour variables, progress bar contrast, and typographic hierarchy across both dark and light modes to maintain WCAG accessibility standards across all display environments.
Key Takeaways
Translating Business Directives into UX: Proven capacity to translate top-down business goals into a friction-free, automatic opt-in experience that balances product objectives with user agency.
Turning Backend Constraints into Clear UX: Resolved technical sync delays by designing transparent daily tracking metrics, demonstrating how proactive visual communication preserves trust during processing lags.
Cross-Platform Scalability: Building a modular component framework ensured feature parity across mobile and web player environments, setting up a foundation ready to absorb future engagement features like leaderboards.
Future Opportunities
For Phase 2, I would expand the gamification layer beyond weekly resets by introducing:
Live Syncing & Real-Time Feedback: Upgrading backend data streams to enable live playback progress updates, removing the daily sync lag entirely.
Milestone Badges & Rewards: Creating permanent achievement badges to reward long-term user consistency and unlock tiered competition entries.
Show & Station Leaderboards: Integrating localised leaderboards into the modular component architecture to foster community engagement across top podcasts and radio shows.
Proactive Engagement Triggers: Evaluating personalised push notifications to notify users before weekly entry cutoffs
