← All blocks

Case study story with gallery and pull quote

case-study · narrative-rows-gallery-quote · case-study-body-gallery

npx shadcn@latest add @plus-ui/case-study-body-gallery

Default content

{
  "client": "ostrelo",
  "eyebrow": "Case study · Retail",
  "title": "Rebuilding Ostrelo's checkout around the question every shopper asks: when will it arrive?",
  "summary": "Ostrelo sells furniture to 1.2 million customers across Northern Europe. Over eleven weeks we redesigned checkout and the mobile app around delivery dates, then shipped it with their engineers.",
  "facts": [
    {
      "label": "Services",
      "value": "Research, product design, design system"
    },
    {
      "label": "Timeline",
      "value": "11 weeks, spring 2026"
    },
    {
      "label": "Team",
      "value": "4 from Halftone, 6 from Ostrelo"
    },
    {
      "label": "Platforms",
      "value": "Web, iOS, Android"
    }
  ],
  "metrics": [
    {
      "value": "+18%",
      "label": "checkout conversion",
      "detail": "first 90 days after launch"
    },
    {
      "value": "−42%",
      "label": "delivery questions to support",
      "detail": "per 1,000 orders"
    },
    {
      "value": "4.8",
      "label": "app store rating",
      "detail": "up from 3.9"
    },
    {
      "value": "11 wk",
      "label": "from kickoff to launch",
      "detail": "web and both apps together"
    }
  ],
  "cover": {
    "src": "https://images.unsplash.com/photo-1541462608143-67571c6738dd?auto=format&fit=crop&w=2400&h=1200&q=80",
    "alt": "Overhead view of a white studio desk with a monitor, phones showing checkout screens and drawing tools"
  },
  "sections": [
    {
      "label": "Challenge",
      "title": "A beautiful catalogue with a checkout people abandoned",
      "paragraphs": [
        "Ostrelo's product pages converted well, but four in ten shoppers who reached checkout left before paying. Session recordings showed the same loop: shoppers scrolled back and forth between basket and delivery options, trying to work out when a sofa would actually arrive.",
        "Delivery dates lived in three systems and were only shown after payment. Support answered 9,000 'where is my order' messages a month."
      ]
    },
    {
      "label": "Approach",
      "title": "Lead with the date, design everything else around it",
      "paragraphs": [
        "We spent the first week in Ostrelo's warehouse and support team, then put a paper prototype in front of shoppers by Thursday. The insight held up in every round: people decide on the delivery date first and the price second.",
        "The new checkout shows a firm delivery window on the basket, lets shoppers pick a two-hour slot before paying and carries the same date through email, app and the driver's route. We built it as 38 components in a shared library so web and both apps ship from one source."
      ]
    },
    {
      "label": "Result",
      "title": "Fewer questions, more orders, and a team that kept shipping",
      "paragraphs": [
        "Checkout conversion rose 18% in the first 90 days and delivery questions to support fell by 42%. Ostrelo's own team has since shipped returns and assembly booking on the same library, without us."
      ]
    }
  ],
  "gallery": [
    {
      "image": {
        "src": "https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&w=2000&h=1100&q=80",
        "alt": "Printed checkout wireframes pinned to the studio wall during week one"
      },
      "caption": "Week one: twelve versions of the basket, tested with shoppers on paper."
    },
    {
      "image": {
        "src": "https://images.unsplash.com/photo-1586953208448-b95a79798f07?auto=format&fit=crop&w=1200&h=1200&q=80",
        "alt": "A phone on a white surface showing the redesigned shopping app"
      },
      "caption": "The app basket shows a delivery window before anything else."
    },
    {
      "image": {
        "src": "https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=1200&h=1200&q=80",
        "alt": "A monitor showing the shared component library"
      },
      "caption": "38 components, one source for web, iOS and Android."
    },
    {
      "image": {
        "src": "https://images.unsplash.com/photo-1586717791821-3f44a563fa4c?auto=format&fit=crop&w=1200&h=1200&q=80",
        "alt": "A tablet with a delivery slot picker being sketched by stylus"
      },
      "caption": "Sketching the two-hour slot picker with the routing team."
    }
  ],
  "quote": {
    "text": "Halftone didn't hand us a redesign and leave. They sat with our drivers, our support team and our engineers, and what shipped is something we keep building on every week.",
    "author": {
      "name": "Inês Duarte",
      "role": "Head of Digital, Ostrelo",
      "avatar": {
        "src": "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&crop=faces&w=200&h=200&q=80",
        "alt": "Portrait of Inês Duarte"
      }
    }
  }
}