Hibi — Digital studio website

Technical Overview

Hibi is a digital product design and development studio. Its website brings together the team, services, projects, and notes in a continuous reading experience. The redesign starts with a simple goal: help visitors understand what the studio does, explore its work, and find a way to start a project. The editorial direction pairs a distinct visual identity with Spanish and English content, specific service offerings, and contact through WhatsApp or a form.

Problem Statement

The studio’s offering was spread across categories and pages that made it difficult to understand what clients could hire it for. The challenge was to give it a clear structure: explain each service and its scope, showcase completed work, and guide visitors toward contact.

Architecture

Built with Next.js 16, React 19, and TypeScript. Spanish and English routes and content use next-intl, with editorial content stored in typed project files. Tailwind CSS and Radix support the interface, while presized images keep page weight under control. The contact form uses a server action with Zod validation, Resend, and Supabase.

Key Features

• Studio introduction and project archive
• Services spanning identity, websites, online stores, management apps, marketing, and AI
• Expandable offerings that explain the scope of each service
• Notes on product decisions and project scope
• Spanish and English content and navigation
• Direct contact through WhatsApp and a validated form

Challenges

• Turning a broad offering into services that are easy to understand and explore
• Expressing the studio’s identity through a consistent editorial experience
• Reorganizing content while preserving routes and consistency across languages
• Balancing prominent imagery with site performance

Outcomes

Published at hibi.dev, bringing the studio, its services, and its work into one presentation. Notes and service details provide context for an initial project conversation.