← All blocks

Selected work grid with discipline filters

portfolio · staggered-grid-filters · portfolio-work-grid

npx shadcn@latest add @plus-ui/portfolio-work-grid

Default content

{
  "eyebrow": "Selected work",
  "title": "Products we designed, shipped and stayed with",
  "description": "Eight engagements from the last three years. Each one started with a week on site and ended with a team that could keep going without us.",
  "allLabel": "All work",
  "filterLabel": "Filter by discipline",
  "labels": {
    "client": "Client",
    "year": "Year",
    "disciplines": "Disciplines",
    "outcome": "Outcome",
    "view": "View case study"
  },
  "projects": [
    {
      "title": "A checkout built around the delivery date",
      "client": "ostrelo",
      "year": "2026",
      "disciplines": [
        "Product design",
        "Research"
      ],
      "summary": "Redesigned checkout and the mobile app so shoppers see a firm delivery window before they pay.",
      "outcome": "+18% checkout conversion",
      "image": {
        "src": "https://images.unsplash.com/photo-1586953208448-b95a79798f07?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "A phone showing Ostrelo's redesigned shopping app"
      },
      "href": "#"
    },
    {
      "title": "An identity that scales to 214 components",
      "client": "pellora",
      "year": "2025",
      "disciplines": [
        "Brand identity",
        "Design systems"
      ],
      "summary": "New type, colour and illustration system for Pellora, documented as a library their four product teams share.",
      "outcome": "4 teams, one library",
      "image": {
        "src": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "Printed colour swatches from the Pellora identity studies"
      },
      "href": "#"
    },
    {
      "title": "Insurance claims in four taps",
      "client": "brindlebay",
      "year": "2025",
      "disciplines": [
        "Product design",
        "Research"
      ],
      "summary": "Rebuilt the claims flow with Brindlebay's adjusters so most claims are filed from a phone in under five minutes.",
      "outcome": "79% finish unaided",
      "image": {
        "src": "https://images.unsplash.com/photo-1586717791821-3f44a563fa4c?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "A claims flow wireframe sketched on a tablet"
      },
      "href": "#"
    },
    {
      "title": "A showroom for a timber house builder",
      "client": "mosswell",
      "year": "2024",
      "disciplines": [
        "Web",
        "Brand identity"
      ],
      "summary": "Editorial site and configurator for Mosswell's prefabricated timber homes, from first sketch to signed order.",
      "outcome": "3× enquiries per visit",
      "image": {
        "src": "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "A modern timber and glass house lit at dusk"
      },
      "href": "#"
    },
    {
      "title": "Wearable onboarding without a manual",
      "client": "zephlo",
      "year": "2024",
      "disciplines": [
        "Product design"
      ],
      "summary": "Pairing and first-week coaching for Zephlo's fitness watch, tested with 60 first-time owners.",
      "outcome": "−61% returns in week one",
      "image": {
        "src": "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "A white smartwatch with a round face on a pale surface"
      },
      "href": "#"
    },
    {
      "title": "Packaging and launch for a headphone line",
      "client": "talvik",
      "year": "2024",
      "disciplines": [
        "Brand identity",
        "Web"
      ],
      "summary": "Naming, packaging and the launch site for Talvik's first over-ear headphones, sold out in eleven days.",
      "outcome": "Sold out in 11 days",
      "image": {
        "src": "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "Black over-ear headphones on a saturated yellow backdrop"
      },
      "href": "#"
    },
    {
      "title": "A design system for a bank's 40 apps",
      "client": "quillon",
      "year": "2023",
      "disciplines": [
        "Design systems"
      ],
      "summary": "Tokens, components and governance for Quillon, adopted across forty internal and customer apps in a year.",
      "outcome": "40 apps migrated",
      "image": {
        "src": "https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "A monitor showing a UI component library"
      },
      "href": "#"
    },
    {
      "title": "A visitor guide for a new museum wing",
      "client": "umberly",
      "year": "2023",
      "disciplines": [
        "Web",
        "Research"
      ],
      "summary": "Wayfinding and an audio guide for Umberly's new pavilion, built for visitors who never install an app.",
      "outcome": "68% of visitors use it",
      "image": {
        "src": "https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1600&h=1200&q=80",
        "alt": "An angular white pavilion with a glass facade"
      },
      "href": "#"
    }
  ],
  "action": {
    "label": "Start a project with us",
    "href": "#",
    "variant": "primary"
  }
}