Ratio'd
Translating complex analytics into interfaces creators can act on immediately
Ratio'd is a cross-platform analytics tool for content creators. It pulls data from Instagram, TikTok, YouTube, and Facebook into one place. But consolidating data isn't enough. A chart showing 563K views is interesting. Knowing why that video got 563K views, and how to replicate it, is valuable.
I designed the product from the ground up: design system, information architecture, and every feature from wireframe through interactive prototype. The core challenge was turning AI-generated analytics into direction, not just display.
A home base that surfaces insights, not just numbers
Winning Formula as scannable ingredient pills
Instead of a dense paragraph, the formula is broken into discrete pill components. The hero stat (420K avg views) anchors attention immediately. Each attribute is a recognizable chip creators can verify at a glance. Recognition over recall.
Latest post + Try This Next: specificity over vague labels
The retention spark-line communicates video health through shape alone. "2 retention drops detected" uses loss aversion framing to motivate deeper investigation. Try This Next replaces abstract labels like "Medium potential" with specific tactics and estimated view ranges, reducing the perceived effort of experimenting.
One data model. Three connected surfaces. One shared visual language.
Ratio'd's algorithm detects dozens of attributes in every video and correlates them with performance. The design system uses the same conversational insight lines, color-coded badges, and slide-out panels across every surface, so the interaction patterns are transferable.
The Playbook
Biggest Opportunity: one insight, maximum impact
Isolates the single highest-impact change as one plain-English sentence with concrete numbers. Reduces decision paralysis by answering "what should I change first?"
Winning Formula: structured reference for repeat visits
A table showing optimal attributes per category with impact, avg views, and confidence. Each row clickable → slide-out detail panel. Table format chosen intentionally because the Recipe is reference material. Tables support scanning across rows better than conversational lines.
The Post Details Page
Conversational insights over data tables
Each factor presented as a sentence with an impact badge: "Desk setup content with visible monitors outperforms your baseline by 16x." This matches how creators actually think, not in correlation coefficients, but in statements they can understand and repeat.
Attribute detail panel: depth without losing context
Aggregate stats → trend chart → platform breakdown → matching posts. The platform breakdown reveals that "+1588%" is driven almost entirely by YouTube (689K avg). Instagram: +412%. TikTok: no data.Absence of data is shown, not hidden, because it's meaningful information.
Analyze your video before posting, checked against your own winning formula
The algorithm generates a huge amount of feedback. It was all originally presented as equally-weighted text. The redesign imposed hierarchy. Scan first, read second.
Predicted retention curve: show where, explain why, suggest what
The retention curve shows creators exactly where in their video viewers are predicted to drop off, but the graph alone isn't enough. Each drop zone is paired with an AI-generated explanation of why viewers leave at that moment (e.g., "Weak Opening Hook: the initial hook about domain names wasn't compelling enough to retain viewers") and a concrete suggestion for what to change (e.g., "Start with a more specific, relatable problem or a bolder claim"). The goal was to make each drop-off point actionable, not just visible, so creators can fix problems before they publish, not after.
Content Checklist: how does this video compare to your best work?
The Content Checklist cross-references the uploaded video against the creator's historically top-performing content. Ratio'd already knows what attributes drive the best results for this specific creator. The Checklist surfaces whether the new video matches those patterns. Binary pass/fail marks let creators count mismatches in under a second and immediately see where this video diverges from what's worked before.
Suggestions organized by timeline
Signal bar icons replace text priority labels. Suggestions organized by video timeline to match the creator's editing mental model. Each collapsed card shows actionable feedback directly, no expanding needed to get value.
Where Ratio'd's brand personality comes through
Analytics tools have a retention problem. These features create daily and weekly reasons to come back, and they demanded a completely different design energy.
These were also my first contributions to a live codebase. I used Claude Code to build the animations for the posting streak and weekly recap, shipping directly to production. Designing and coding the same feature gave me full control over how the interactions felt, not just how they looked.
Posting Streak
A visual record of consistency inspired by GitHub's contribution graph. The intensity scale rewards cross-posting, reinforcing Ratio'd's core value prop through visual design:
Lowest possible streak threshold (any one platform counts). Designed for encouragement, not punishment.
Weekly Recap: Spotify Wrapped, every week
A shareable carousel celebrating the creator's week. This is where the brand gets loud: iridescent gradients, bold outlined display type, and sparkle iconography replace the clean analytical UI.
- Social-native visual language: Outlined display type and gradient backgrounds reference Instagram Stories and Spotify Wrapped, making slides feel native to the platforms creators live on
- Each slide works as a standalone screenshot: Data large enough to read at thumbnail size, branding present but not overpowering
- Platform-aware colour coding: Instagram purple-pink, TikTok cyan, YouTube red across all slides
- Share-first hierarchy: The Share button is the most prominent modal action
- 16:9 and 9:16 exports: The share target determines the format
Achievement Badges: motivation meets trust signals
Warm, hand-drawn illustration style contrasts with the precise analytics UI. Gold palette for streak badges, purple-pink for engagement milestones. For creators, they're motivational. For brands evaluating a profile, they're trust signals.One design element, two audiences.
