Case study · 02
StayAfrika
Design system, host dashboard, white-label microsite layer, and the automated-message editor for a Nigerian travel-stack platform.
- Role
- Frontend engineering · design system · platform UI
- Vertical
- Travel / Hospitality
- Geography
- Nigeria
- Year
- 2025—
A travel-stack platform combining stays, local experiences, trip essentials, and home-finding into one product for the African market. The engagement runs across four parallel workstreams — each with its own surface and audience, but drawing from one shared foundation.
Workstreams
Design system
Translated the existing Figma library into a typed, themeable component layer the product team can move against without re-deriving spacing, colour, or typography release after release. Tokens are the single source of truth; every surface inherits.
Host dashboard
An operator-facing surface hosts use to manage listings, bookings, and guest communication. The work focused on dense, ledger-grade tables, predictable empty states, and making page-to-page navigation feel calm under fast clicking.
White-label microsite
A tenant-aware microsite layer that lets partner organisations operate the platform under their own brand at their own subdomain. Subdomain routing at the edge, brand theming inherited from a per-tenant record, and a scoped sign-up path so each partner's guests and bookings stay together.
Automated-message editor
The template editor hosts use to script welcome notes, check-in instructions, and post-stay messages. The interesting part: rendering placeholder chips — guest name, listing name, dates — inline inside a free-form text field that still feels like prose. The chip-overlay model went through several iterations before settling.
Stack
- Next.js
- TypeScript
- Tailwind
- Redux Toolkit
- Tiptap
Closing
Ongoing. The throughline across all four surfaces is the same: design and engineering moving in lockstep, with the dashboard, microsite, and consumer product all drawing from one token sheet.
Have something to ship?