← All blocks
Case study header with outcome metrics
case-study · headline-cover-metric-strip · case-study-header-metrics
npx shadcn@latest add @plus-ui/case-study-header-metricsDefault 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"
}
}
}
}