Hackdate — Card Type UI Cleanup
Card Type UI — The Problem
Stacklist supports multiple capsule types—Link, Image, Doc, PDF, and Video—but the current UI renders them identically, creating friction because users cannot distinguish content types at a glance. Solving this matters for setting expectations before interaction, making stacks feel richer, differentiating Stacklist from plain bookmarking tools, and visually reinforcing the capsule paradigm.
Card Type UI — Design Direction
Card type UI design direction outlines a system of type badges for cards—covering Link, Image, Doc, PDF, and Video—with specific icon and color pairings for each. Five visual treatment options are explored, with the recommended approach combining an icon and subtle color tint to enable quick differentiation without overwhelming card content.
Card Type UI — Work Division
Martina handles adding card type detection logic based on MIME type and content metadata, updating the card data model and API response across two hours. Kyle designs and builds the `<CardTypeBadge>` visual component with per-type color tokens, integrates it into the card UI across views, and both collaborate in a final hour for QA and shipping.
Card Type UI — Definition of Done
Card Type UI completion criteria require five visually distinct card types with badges/icons working across grid view, list view, mobile, and embedded stacks, while ensuring correct detection for new capsule types (image, doc, PDF, video) without affecting existing link cards or causing layout issues. Bonus goals include hover tooltips showing type names, filtering stacks by card type, and displaying the type in the card detail/sidebar view.
More from Martina Zrnec
25 public stacks · Technology
10 cards
12 cards
Explore more in Technology →