Insanity.page - MrEnricc

Client

MrEnricc

Role

UX/UI Designer, Lead

Timeline

8 weeks, 2019

Tools

Figma, Illustrator, 3JS

Project Overview

Complete Solution

An academic Interaction Design project exploring the sensitive topic of mental illnesses through immersive web interactions and digital storytelling.

Insanity.page simulates a "brainwashing" experience by presenting different disorders through immersive web interactions. Built as a major Year-3 exam assignment, this project guided me through a full design process—from deep research to real-user validation—highlighting how digital storytelling can foster empathy and awareness.

This project challenged me to balance impactful storytelling with ethical responsibility, navigating content warnings, pacing, and tone to respect users' emotional safety while delivering a strong narrative impact.

The Challenge

Representing Mental Health

Creating an immersive experience about mental health conditions while maintaining ethical responsibility and user safety.

Ethical Storytelling

Balancing impactful narrative with sensitivity, ensuring accurate but non-stigmatizing representation of mental health conditions.

User Safety

Implementing trigger warnings, content pacing, and exit strategies to protect users' emotional well-being throughout the experience.

Building Empathy

Creating immersive interactions that foster genuine understanding without trivializing the lived experiences of individuals with mental health challenges.

The Solution

Immersive Digital Storytelling

Creating an empathy-building experience through carefully crafted interactions, ethical content design, and user-centered storytelling.

Why Insanity.page Works

By combining immersive web technologies with sensitive storytelling, Insanity.page creates an experience that's both impactful and responsible.

Interactive Storytelling
Scroll-based narratives with immersive animations
Content Warnings
Trigger warnings and exit strategies for user safety
95% Accessibility
WCAG-compliant design for all users
Evidence-Based
Grounded in clinical research and professional input

Design Process

From Research to Reality

A comprehensive design process that put users at the center of every decision, from initial research to final implementation.

1

Research & Discovery

I conducted extensive research into mental health conditions, including depression, anxiety, bipolar disorder, and schizophrenia, through academic papers, clinical studies, and first-person accounts. I interviewed 5 mental health professionals, including psychologists and counselors, to understand the lived experiences of individuals with these conditions and the ethical considerations around digital representation.

This research phase revealed critical insights: the importance of trigger warnings and content sensitivity, the need for accurate but non-stigmatizing language, and the power of immersive experiences to build empathy. I also analyzed existing mental health awareness campaigns to understand what worked and what could be improved, identifying opportunities for more interactive and emotionally resonant storytelling approaches.

2

Ideation & Wireframing

Building on my research insights, I developed multiple concept approaches for representing mental health conditions through interactive experiences. I created storyboards exploring different narrative structures: linear progression through symptoms, branching paths based on user choices, and immersive "day-in-the-life" simulations. Each concept was evaluated for emotional impact, educational value, and ethical appropriateness.

I created detailed low-fidelity wireframes mapping the user journey through each mental health condition, paying special attention to pacing, content warnings, and exit strategies. The wireframes tested different interaction patterns—scroll-based storytelling, click-to-reveal content, and immersive animations—to find the most effective way to convey the internal experience of mental health challenges while maintaining user agency and emotional safety.

3

Development & Visual Design

I translated wireframes into high-fidelity prototypes using Figma, developing a visual language that balanced aesthetic impact with emotional sensitivity. The design featured dark, immersive backgrounds, carefully timed animations, and typography that shifted to reflect different mental states. I implemented subtle micro-interactions to guide users through each narrative without overwhelming them.

The technical implementation used vanilla JavaScript and Three.js for 3D animations, creating scroll-triggered experiences that simulated different symptoms and experiences. I built custom interaction patterns including text distortion effects, color shifts, and parallax scrolling to create an immersive "brainwashing" effect while maintaining user control through persistent navigation and exit options.

4

Testing & Iteration

I conducted 12 user testing sessions with diverse participants, including individuals with lived mental health experiences (with proper consent and support protocols). Testing revealed critical insights: some animations moved too quickly causing discomfort, certain text needed clearer content warnings, and users wanted more control over pacing. I observed how different users navigated the experience and where they chose to exit.

Based on user feedback, I implemented several key improvements: slowed animation speeds by 30%, added more granular content warnings before each section, implemented a "pause/resume" control for all animations, and created clearer exit pathways. I also added an optional "impact mode" that reduced visual intensity for users who found the default experience too overwhelming, ensuring accessibility without compromising the core narrative impact.

Outcomes & Results

Impact & Reflections

The project received a perfect score (30/30) and sparked meaningful conversations about mental health representation in digital design.

30/30

Course Score

95%

Accessibility Score

12

User Tests

100%

Ethical Compliance

Impactful Design:

Crafting interactions that evoke genuine emotional responses taught me the power—and the responsibility—of digital media in shaping perception of sensitive topics. The project demonstrated how immersive web experiences can build empathy and awareness around mental health challenges.

Ethical Storytelling:

I learned to navigate content warnings, pacing, and tone to respect users' emotional safety while delivering a strong narrative impact. Working with mental health professionals ensured both accuracy and appropriateness in representing different conditions.

Cross-Disciplinary Collaboration:

Interviewing mental health professionals and advocates illuminated the importance of stakeholder input in validating both accuracy and appropriateness. Their insights were crucial in creating an experience that educates without stigmatizing.

Iterative Excellence:

Continuous user testing underscored that small tweaks (e.g., easing animation speed, clarifying copy) can dramatically improve both usability and emotional comfort. The final product achieved 95% accessibility compliance and received positive feedback for its sensitive approach to a difficult topic.

Design Gallery

Visual Journey

Explore the design evolution from research to final implementation of this immersive mental health experience.

Research & Discovery

Deep research into mental health conditions and ethical considerations

Wireframing & Concepts

Low-fidelity prototypes exploring interaction patterns

Final Implementation

High-fidelity design with immersive animations

Experience the Journey

Explore the interactive storytelling project firsthand and discover the intersection of mental health awareness and digital art.

Visit Insanity.page Read More