Appearance
Haven — Order overview
A real example of content blocking in action. Here's how we broke down the order overview page — block by block — before a single component was picked.
The page and its purpose
When a Haven customer places an order, they land on a page with a simple job: reassure them, keep them informed, and stay out of the way.
They're not browsing. They're checking. They want to know their order went through, when it's arriving, and whether anything needs their attention. If the page can't answer those questions quickly, they'll either panic or contact support.
What happens when teams skip this step: The page gets designed around what's easy to build — not what the customer needs to know. Important information gets buried. Redundant content fills space. States like delays or partial shipments get handled inconsistently because no one planned for them.
How we broke it down
Each block is color-coded by the job it does — not by where it lives on the page.
Red — Alert: something needs attention now
Green — Transaction: orders, purchases, what they paid
Blue — Progress: where things stand, what's coming
Purple — Activity: what changed, what happened
Yellow — Education: help them understand before they act
Gray — Control: settings, preferences, personalization
Notifications
What the customer is thinking
"Is there anything I need to know about my order?"
Job to be done
Stay on top of anything that needs attention
Why it matters
Missing an update creates anxiety and erodes trust
What we show
- Shipping alerts
- Delivery updates
- Action items
Order summary
What the customer is thinking
"What did I order and what did I pay?"
Job to be done
Get a quick snapshot of their purchase
Why it matters
They need confirmation before they can move on
What we show
- Items ordered
- Total paid
- Payment method
Delivery status
What the customer is thinking
"Where is my stuff?"
Job to be done
Track the order and know when to expect it
Why it matters
Delivery uncertainty is the number-one source of post-purchase anxiety
What we show
- Current status
- Estimated arrival
- Tracking timeline
Recent activity
What the customer is thinking
"What just changed?"
Job to be done
Understand what happened since they last checked
Why it matters
Keeping people informed reduces support contacts
What we show
- Status updates
- Shipping events
- Any changes to the order
Help
What the customer is thinking
"Something doesn't look right — what do I do?"
Job to be done
Get answers without contacting support
Why it matters
Easy access to help reduces frustration and builds confidence
What we show
- FAQs
- Return and exchange info
- Contact options
Preferences
What the customer is thinking
"Can I change my delivery or notification settings?"
Job to be done
Adjust things to work better for them
Why it matters
Giving people control makes the experience feel personal
What we show
- Notification preferences
- Saved addresses
- Communication settings
How it fits together
The blocks stack in order of urgency — most time-sensitive at the top, so a customer with an action item can't miss it, and one who just wants to track their package can skip straight there.
1NotificationsAlert
2Order summaryTransaction
3Delivery statusProgress
4Recent activityActivity
5HelpEducation
6PreferencesControl
What this makes possible
Faster design decisions
Structure is settled before anyone opens a design tool. No more "should this be here?" in the middle of a review.
Cleaner handoffs
Content, design, and development work from the same document — less translation, fewer surprises in build.
Edge cases planned for
States like delays, partial shipments, and cancellations are accounted for at the block level — not retrofitted after design.
Consistent content across states
The block structure travels across order states. Swap the content, keep the logic.
Try it yourself
Use the page assembler to build your own content blocks, or read the framework to understand the thinking behind it.