Sky.co
Rethinking Mental Health Support Through Emotion-Aware Design
AI for Mental Health
Emotive AI
Interface Design
Conversational AI Design
Contents
Contents
Team
Rio Ysabelle Mabbayad
Research, UX Design, Prototyping
Research, Coding & Implementation
Course
Interface Design II @ HfG Schwäbisch Gmünd
Semesters 4 & 6
Instructor
Markus Turber
As design students, Jonas Weinberg and I explored how AI could extend mental health care by supporting what makes therapy effective—while addressing what often gets in the way. Sky is a speculative prototype of an emotionally aware system that listens, adapts, and stays ever present through various streams of data.
Inspired by CBT and affective computing, we focused on how AI can enhance consistency, memory, and access—addressing challenges like forgetfulness, bias, and limited availability. I led the conversational and visual design, creating a minimal, emotionally responsive interface to support therapists where possible, and offer care where none is available.
Team
Rio Ysabelle Mabbayad
Research, UX Design, Prototyping
Research, Coding & Implementation
Course
Interface Design II @ HfG Schwäbisch Gmünd
Semesters 4 & 6
Instructor
Markus Turber
Jonas Weinberg and I designed Sky, a speculative AI prototype inspired by CBT and affective computing. It listens, adapts, and stays present through multiple data streams, with a minimal, emotionally responsive interface to support therapists and offer care where none is available.
The Current State of Therapy
Despite its importance, therapy today is often inaccessible, inconsistent, and unable to meet people where they are. The current system faces long-standing barriers that leave many without timely or effective support.
Bias
Therapist provider background, implicit bias, and subjective impressions — leading to uneven care.
Cost
Flat rates, insurance incompatibilities, and time off of work make therapy financially inaccessible for many.
Time Constraints
Traditional care models rely on infrequent 45-minute sessions, leaving gaps between when support is needed.
The Current State of Therapy
Despite its importance, therapy today is often inaccessible, inconsistent, and unable to meet people where they are. The current system faces long-standing barriers that leave many without timely or effective support.
Bias
Therapist provider background, implicit bias, and subjective impressions — leading to uneven care.
Cost
Flat rates, insurance incompatibilities, and time off of work make therapy financially inaccessible for many.
Time Constraints
Traditional care models rely on infrequent 45-minute sessions, leaving gaps between when support is needed.
Question Zero
What does care look like when it isn’t bound by time, cost, or bias?
Research
Digitalization 2.0
To shape Sky’s foundation, we studied peer-reviewed literature on the integration of AI into Cognitive Behavioral Therapy—focusing on clinical outcomes, patient engagement, and therapeutic efficacy. These sources revealed both the promise and the ethical complexities of automating care.
Beyond the clinical lens, we explored broader shifts in human-computer interaction—particularly the emergence of Digitalization 2.0, a new era defined by agentic, emotionally intelligent systems. Not only that, but we looked into the future of affective computing combined with this. This phase moves past static dashboards and chatbots into ambient, proactive AI that can interpret mood, respond with care, and adapt in real time
Our research positioned Sky not just as a tool, but as a co-regulative partner—one capable of sensing, reflecting, and supporting the user in deeply personal ways.
Research
Digitalization 2.0
We reviewed peer-reviewed studies on AI in Cognitive Behavioral Therapy, focusing on clinical outcomes, patient engagement, and the ethical complexities of automating care.
We explored Digitalization 2.0—agentic, emotionally intelligent systems—and the future of affective computing.
Our research positioned Sky as more than a tool—it’s a co-regulative partner that senses, reflects, and supports users in deeply personal ways.
Design
Using Lovable for Rapid Prototyping
With the AI renaissance, design workflows are evolving rapidly. Teams are moving beyond the traditional five-stage process, integrating AI tools at every stage of the product lifecycle.
To accelerate the path from concept to interface, we used Lovable as a rapid prototyping environment—a visual sandbox for exploring early design directions. This allowed us to validate tone, pacing, and interaction models in just a few days.
UML Over User Flows: Mapping AI-Driven Complexity
Traditional user flows fall short in systems where AI is a co-agent, not just a responder. I used UML diagrams to map logic paths that include therapist interventions, emergency escalations, and API handoffs—particularly in critical care moments. This format allowed me to clearly communicate edge cases, backend logic, and system states across human and AI decision nodes.
We Asked: What If Design Could Listen?
In early brainstorming, we kept circling one question:
How do we make design feel more human—less like an app, more like a presence?
The answer, unexpectedly, was Rudolf Steiner. His color theory—rooted in emotional and physiological resonance—became our starting point. We explored how hue, rhythm, and form could mirror inner states without relying on text or metrics.
This led to the creation of animated orbs—soft, breathing shapes that shift gently based on emotion, context, and energy. These weren’t decorative; they were emotional signals. Each pulse, gradient, and motion posed a question: Could an interface comfort without words? Could a system show empathy through design alone? Sky’s visual language emerged not from grids and wireframes, but from an attempt to translate feeling into form.
Design
Using Lovable for Rapid Prototyping
With the AI renaissance, design workflows are evolving rapidly. Teams are moving beyond the traditional five-stage process, integrating AI tools at every stage of the product lifecycle.
To accelerate the path from concept to interface, we used Lovable as a rapid prototyping environment—a visual sandbox for exploring early design directions. This allowed us to validate tone, pacing, and interaction models in just a few days.
UML Over User Flows: Mapping AI-Driven Complexity
Traditional user flows don’t capture systems where AI is a co-agent.
We used UML diagrams to map therapist interventions, emergency escalations, and API handoffs—covering edge cases, backend logic, and system states across human and AI decision nodes.
We Asked: What If Design Could Listen?
We began with one question: how can design feel less like an app and more like a presence?
Inspired by Rudolf Steiner’s color theory, we used hue, rhythm, and form to mirror inner states—leading to animated orbs that shift with emotion, context, and energy.
More than decoration, they’re emotional signals, shaping Sky’s visual language as empathy expressed through design alone.
Dev Hand-off
From Screens to Systems
The first coded prototype of Sky was grounded in the conversational chat designs I developed in parallel—early explorations into how a check-in could feel gentle, private, and emotionally aware. These visual experiments with ambient blobs, subtle gradients, and text-first interfaces laid the foundation for how Sky could guide a user through voice or chat with sensitivity.
Meanwhile, my partner translated the core concepts of this conversational AI into a working prototype, implementing real-time emotion mode switching, microphone permissions, and LLM-integrated pathways using a locally hosted tech stack. Our collaboration allowed design and development to evolve side by side, with visual tone and technical feasibility reinforcing one another.
Dev Hand-off
From Screens to Systems
Sky’s first coded prototype was built on my conversational chat designs—early explorations of gentle, private, and emotionally aware check-ins using ambient orbs, soft gradients, and text-first interfaces.
My partner translated these concepts into a build with real-time emotion mode switching, microphone permissions, and LLM-integrated pathways.
Design & Development, in Tandem
Before any code was written for the subpages, we explored how users might move between mental states and interface modes—whether reflecting, reaching out, or absent — and Sky initiates an action. Early sketches mapped how the user would navigate through the app, going from the main chat with Sky to their individual insights.
While Jonas implemented Sky’s core logic—voice/text switching, emotion mode detection, and LLM integration—I focused on making sure every layout was dev-ready and resilient. That meant precise auto layout work, scalable spacing, and a system flexible enough to translate into HTML/CSS without breaking visual intent.
I built with implementation in mind from day one, ensuring the designs worked not just in Figma, but wherever they were deployed. The result was a seamless collaboration—screens that could breathe emotionally, and code that could carry it forward.
Design & Development, in Tandem
Before coding the subpages, we mapped how users move between mental states and interface modes—whether reflecting, reaching out, or absent—and how Sky would respond. Early sketches showed navigation from the main chat to personalized insights.
While Jonas built Sky’s core logic—voice/text switching, emotion detection, and LLM integration—I ensured every layout was dev-ready with precise auto layout, scalable spacing, and a flexible system for HTML/CSS.
Designing for AI Interaction
Always present, always transparent.
Sky’s chat system was built to feel emotionally aware and context-sensitive. I designed memory logic to let the AI hold onto key emotional cues across sessions—supporting continuity without overstepping privacy.
Tone and pacing were intentional: messages validated feelings first, responded gently, and adapted based on urgency or mood. Visuals like blob color and breathing patterns worked alongside text to reinforce emotional state. The result was a system that felt more like a companion than a chatbot.
Designing for AI Interaction
Always present, always transparent.
Sky’s chat system was designed to be emotionally aware and context-sensitive, with memory logic to retain key emotional cues across sessions while respecting privacy. Tone and pacing validated feelings first, adapting to urgency or mood, while visuals like blob color and breathing patterns reinforced emotional state—making Sky feel more like a companion than a chatbot.
Result
Prototyping a New Standard for Digital, Accessible Therapy
Sky brings together emotional design, ethical AI, and accessible UX into one unified system. Through rapid prototyping and iterative collaboration, we explored how digital therapy could move beyond static forms—toward something more responsive, contextual, and human.
Result
Prototyping a New Standard for Digital, Accessible Therapy
Sky brings together emotional design, ethical AI, and accessible UX into one unified system. Through rapid prototyping and iterative collaboration, we explored how digital therapy could move beyond static forms—toward something more responsive, contextual, and human.
2025 Rio Mabbayad ©