Griya Hipnoterapi Malang
UX Revamp

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:

• Cognitive Overload Complex psychological services were explained through endless paragraphs. For users already dealing with mental or emotional distress, this high cognitive load caused immediate drop-offs.

• Performance & Technical Debt Unoptimized image galleries bloated the site's load time, resulting in a failing PageSpeed score of 52/100. In a mobile-first market, this delay directly destroyed lead generation.

• Lack of Trust Signals The static, unengaging interface failed to guide the user naturally toward the primary conversion metric: initiating a WhatsApp consultation.

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.

• Content Pruning We aggressively eliminated outdated paragraphs and redundant information that diluted the core value proposition.

• Cognitive Easing (Chunking) Heavy, text-dense explanations of psychological services were transformed into scannable bullet points and visual components. This was crucial for a target audience that may be experiencing cognitive fatigue or emotional distress upon arrival.

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.

• Progressive Disclosure To solve the issue of long, overwhelming lists and extensive photo albums, I implemented progressive disclosure mechanisms. Users are now presented with high-level summaries first, allowing them to expand sections only if they seek deeper information.

• Search Integration I introduced a dedicated search bar for long service lists, drastically reducing the interaction cost for users looking for specific therapies (e.g., phobia treatment vs. child counseling).

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.

• Decluttering via Morphing CTA Rather than placing repetitive "Contact Us" buttons in every section, I engineered a single, context-aware CTA button. As the user navigates different sections of the site, the button morphs to match the relevant context, keeping the interface impeccably clean while ensuring the WhatsApp conversion path is always accessible.

• Entrance Animations Lightweight reveal animations were applied to page elements to guide the user's eye down the page, establishing a deliberate reading rhythm.

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:

• Performance Surged from a failing 52 to a near-perfect 99/100. The lightweight tech stack ensured the site loaded instantly, eliminating drop-offs caused by slow rendering.
• Accessibility Achieved a perfect 100/100 (up from 92), ensuring visually or cognitively impaired users could navigate the high-contrast, screen-reader-friendly interface.
• SEO & Best Practices Secured a 100/100 in SEO and 92/100 in Best Practices, drastically improving the clinic's local discoverability in Singosari and the broader Malang area.

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.

Gallery