Relasi Consulting: Mental Health Platform Profile Site

Overview

Relasi Consulting is an Indonesian mental health platform that connects people with professional counselors. The brief was simple on the surface: a profile website. But the product carries a sensitive responsibility: visitors arrive looking for help, and the interface itself had to feel calm, credible, and safe.

Role

I handled the project end to end on the design-to-code axis: translating the brand into a UI system in Figma, then implementing the production site with Next.js and Tailwind CSS.

Design direction

• Calm over clever. Generous whitespace, soft color temperature, and restrained motion. The site should never compete with the visitor’s state of mind.
• Trust signals first. Counselor credentials, clear service explanations, and a transparent registration path were promoted above decorative content.
• Content flexibility. Copy and program listings are managed by the team through Cockpit as a lightweight headless CMS, so no deployment is needed to update content.

Implementation highlights

• Component-driven build in Next.js with a small, documented set of primitives styled with Tailwind CSS.
• Responsive layouts verified across common device classes, with performance budgets kept modest so the site stays fast on Indonesian mobile networks.
• The registration flow was broken into digestible steps to lower friction for users who may already feel anxious about reaching out.

Outcome

The shipped site gives Relasi a professional, dependable home on the web: a profile that explains the services, introduces the counselors, and funnels visitors into registration. A non-technical team can maintain all of it through the CMS.