Streaks
Turning campaign execution from manual overhead into a self-running creator behavior system.
Wishlink is a creator commerce platform. Brands run campaigns, creators share product links.
Streaks are time-bound campaigns where creators commit to sharing a set number of product links per period (daily, weekly, or monthly) for consecutive periods. Complete the streak, earn the reward. Miss a period, the streak ends.
The problem
Previously, streaks ran on Plotline, a third-party tool that worked for experimentation but had limitations across tracking, support, and scale. Manual campaign setup for every streak. No real-time tracking visibility for creators. Heavy support overhead for “did my link count?” questions. Couldn't scale to multiple concurrent campaigns. No creator self-diagnosis.
The brief
Replace Plotline with an in-house system that's reliable, scalable, and transparent. Then design and build the entire creator-facing experience.
My Role
Sole designer. I owned product design and system design, then built the full frontend using Cursor.
Team
1 PM, 1 Designer (me), Engineering team
Timeline
March 2026, v1
State-driven, not screen-driven.
The core design decision: treat this as a system, not a collection of screens. Every UI element (the card, the status tag, the CTA, the progress tracker) is derived from the intersection of four dimensions.
Lifecycle State
Where is this streak in time? Prelaunch, active, completed, missed. Each state changes everything the creator sees.
Reward Type
Money, credits, or pure challenge. The reward type shapes the card's headline, visual weight, and visual treatment.
Frequency
Daily, weekly, or monthly cadence. Frequency changes labels, counters, timer logic, and tracking section structure.
Progress
X of Y shared, time remaining, period index. Progress drives the tracker, status tags, and countdown behavior.
One card component handles every state. One tracking page adapts to any lifecycle. No new screens needed.
The streak moves through time.
A strict lifecycle with no ambiguity. Each state determines what the creator sees, what actions are available, and how progress is communicated.
State stability principle: Card state updates immediately when a creator completes their task, but card position in the listing only changes the next day. This prevents mid-session reshuffling and keeps the UI predictable while the creator is actively using it.
One card, every state.
The streak card is the primary surface. It appears in the listing and communicates everything the creator needs, from “starts in 4 days” to “payout processing.”
How the card communicates across time
Progress tracker
Day-by-day dots with completion states, connecting lines, and period counters that adapt to frequency.
Streak card header
The banner gradient, headline, construct subtitle, and status tag all resolve from a single state object. One layout handles every lifecycle and reward type combination.
Streaks lives inside Rewards.
Streaks and Rewards are two types of campaigns on Wishlink, so they share a single Rewards page with separate tabs. Both have their own entry point in the Wishlink Exclusive section on the home page, but they lead to the same destination. The listing uses pill-based filtering (All, Upcoming, Live, Past) with sticky positioning on scroll.
Information architecture
Home · Wishlink Exclusive
Rewards Page
Both entry points lead to the same page · Cards sorted by priority
Card movement logic
When a streak transitions from Live to Won/Missed, it stays in its current position for the rest of the day. Card state updates immediately, but card placement waits until the next day. This prevents mid-session reshuffling.
Home indicator priority cascade
Any streak is active & pending
Orange count badge · Opens Live filter
Any streak in prelaunch
Green dot · Opens Upcoming filter
Any streak won (unpaid)
Green dot · Opens Past filter
Any streak missed
Red dot · Opens Past filter
No active streaks
No indicator · Opens default tab
The transparency layer.
The Track Progress page lets creators see exactly what counted, what didn't, and why. Before this, “did my link count?” was the most common support ticket. Now creators can self-diagnose.
Page structure adapts to state
Small decisions, visible everywhere.
The interactions and edge cases across the system.
Day 1 Pulse
When a creator's streak starts and they haven't taken action yet, the first day indicator pulses. A visual prompt when no progress has been made yet.
Multi-Brand Logo System
Cards handle brand representation gracefully: single logo, overlapping logos, or overflow with “+N more” tooltip.
First-Visit Education
Rules sections auto-expand on a creator's first visit, then collapse on return. Tracked per streak so return visits stay clean.
Timer Logic
Non-final days show remaining days. On the last day of a period, the timer switches to hours and minutes, creating natural urgency.
Conditions Rotation
Multiple qualifying conditions rotate every 3 seconds with a fade animation. A counter shows progress. The callout arrow points to the Track Progress button.
Payout state progression
Designed and built.
I owned both the design and the frontend implementation.
I built the full frontend using Cursor. The behavioral complexity of this feature, dozens of state combinations, time-sensitive UI, priority-based sorting, made building alongside designing the right approach.
Component structure
Streaks Page
Listing, tabs, filters, priority sorting
420 lines
StreakCard
State-driven rendering for every lifecycle, reward type, and frequency
1,086 lines
StreakDayProgress
Day dots, connectors, pulse animation, completion states
315 lines
TrackProgress
Full tracking page, rules, periods, per-link transparency
1,318 lines
2,700+ lines of frontend code
One component, every combination
5 states × 3 reward types = 15 combinations from one component
Behavior that required building to get right
Countdown transitions: Timers switch from “3 days” to “10h 15m” on the final period day. Server time only, no device clock dependency.
Scroll-responsive elements: The filter pills and tabs get a shadow on scroll, creating visual separation without adding permanent weight.
Navigation state persistence: Scroll position, selected filter, and expanded sections persist through support and PDF flows. No state lost on navigation.
From manual execution to an operating system.
Streaks v1 replaces manual Plotline-based campaign execution with a self-contained, in-house system built for reliability, transparency, and scale.
Self-service tracking
Creators see exactly what counts and what doesn't. Link-level transparency replaces guesswork.
Concurrent campaigns
Multiple streaks run simultaneously without ops overhead. Each streak is independently configured and tracked.
Reduced support load
“Did my link count?” tickets drop as creators can self-diagnose through the tracking page.
Foundation laid
First-time experience, guided flows, and an admin interface are planned for the next iteration.
How we know if this worked.
Streaks v1 ships with analytics instrumentation baked in. Every card impression, CTA tap, and tracking page interaction is logged so we can measure adoption, diagnose friction, and inform v2 decisions with real data.
North Star Metrics
Streak completion rate
The percentage of creators who finish their streak (won) versus those who drop off (missed). The single most important signal for whether the system drives sustained behavior.
Support ticket reduction
Volume of “did my link count?” tickets before and after launch. The tracking page was built specifically to eliminate this category of queries.
Self-service tracking adoption
How often creators open Track Progress and interact with link-level details. High usage means the transparency layer is working.
Repeat participation
Creators who opt into a second streak after completing or missing their first. Measures whether the experience feels fair and worth repeating.
What we track
Card surface
- Card impressions per state and reward type
- CTA taps: Learn More, Track Progress, View Payout
- Conditions bar view and rotation engagement
- Brand tooltip opens on overflow cards
Tracking page
- Page visits per lifecycle state
- Section expand/collapse interactions
- Link-level item taps (copy wishlink, open post)
- Support entry and PDF document opens
Listing and navigation
- Home indicator taps by priority level
- Filter pill usage (All, Upcoming, Live, Past)
- Tab switches between Rewards and Streaks
Behavioral signals
- Day 1 pulse to first action conversion
- Time between streak going active and first share
- Period-over-period completion consistency
What comes next
The GA spec, first-time user experience (education pages, realisation flow, guided overlays), “How it works” content, and an admin interface for campaign management are all scoped for the next iteration. This v1 ships the complete creator-facing system with the instrumentation foundation to inform every one of those decisions.