Griya Hipnoterapi Malang
Responsive Web

The Business Context & Problem Space

The Service & Audience

Griya Hipnoterapi Malang provides specialized hypnotherapy to address emotional, mental, and behavioral blocks. Their demographic is broad, covering adults, teenagers, and children as young as six. A critical business and ethical constraint is that treating minors strictly requires accompanying parental counseling.

The Friction Points

To convert visitors into clients, a healthcare website must project authority, empathy, and competence. The previous site failed this heuristic evaluation in three key areas:

Research & Information Architecture

Stakeholder Alignment & Content Audit

The original website’s content had remained largely static for five years, save for the reactive addition of COVID-19 online services. To align the site with current business realities, I conducted a content audit alongside the primary stakeholder.

Heuristic Evaluation & Findability

Due to the solo nature of the project, primary user research was substituted with a strict heuristic evaluation based on established UX laws.

Strategic Design & Constraints

Managing Business & Ethical Constraints

A critical business rule for the clinic is that therapy for minors (children as young as six) strictly requires parental counseling. In the previous design, this crucial policy was buried in text.

To prevent unqualified leads and ensure ethical compliance, I designed a distinct, high-contrast section specifically addressing parental involvement. By elevating this requirement visually within the user flow before the primary Call-To-Action (CTA), I ensured that parents were fully aware of their required participation prior to initiating a WhatsApp consultation.

UI Design & Technical Execution

Visual Identity & Trust Signals

To establish the clinical authority and psychological safety required for a hypnotherapy practice, I anchored the UI in the brand’s primary color: deep blue #17375E. Blue inherently communicates trust, stability, and calm. To prevent the interface from feeling too sterile, I utilized the brand’s secondary yellow #ECA844 sparingly for high-visibility accents and interactive elements, ensuring all contrast ratios met WCAG standards for readability.

Interaction Design & Micro-animations

To modernize the experience without overwhelming the user, I implemented strategic micro-animations.

Technical Architecture

To resolve the catastrophic 52/100 performance score of the legacy site, I discarded the use of heavy CMS platforms or JavaScript frameworks. I engineered the new platform using entirely vanilla HTML, CSS, and JavaScript. This lean architecture eliminated third-party bloat, render-blocking resources, and excessive JavaScript execution times.

Outcomes & Impact

The technical and structural overhaul yielded immediate, quantifiable improvements across all core web vitals, as measured by Google Lighthouse:

By systematically reducing cognitive load, clarifying the ethical constraints of minor therapy, and achieving near-perfect technical performance, the redesign removed the friction that previously blocked users from initiating WhatsApp consultations.