LUMA: Humanizing the Chat Experience.

Built from scratch, Luma’s landing site imagines a world where conversational AI understands not just language, but emotion. The page explores how subtle choices in tone, color, and microcopy can make technology feel less robotic and more empathetic. It’s a small experiment in designing connection through code.

Role: Concept, Design, Development | Tools: Figma, JavaScript | Timeline: 1 Week

PHASE 1: SETTING THE EMOTIONAL TONE

MOODBOARD

Keywords: calm, sincere, intuitive, futuristic, gentle.

Design Elements & Components

Luma’s visual language relied on subtle contrasts:

  • Typography: Sans-serif for clarity, paired with light italics to convey empathy.

  • Color palette: Blush neutrals and cool blues to balance warmth and logic.

  • Shapes: Rounded corners and smooth transitions for emotional softness.

  • Microinteractions: Hover effects that simulate “listening” or “breathing” animations.

Together, these elements made the design feel responsive and alive — mirroring how a human might react in conversation.

WIREFRAMES

View the wireframes in the appendices section of the Design Rationale document linked in the next section.

The layout followed a narrative structure — a single scroll experience:

  1. Hero Section: “An AI that sounds human.” (Luma’s core message)

  2. About Luma: What empathy means in AI.

  3. Features: Human tone, active listening, contextual memory.

  4. CTA: “Talk to Luma.” – a playful prompt that mimics real chatbot interaction.

Early sketches explored chatbot interface ideas, but I refined the design toward a storytelling landing page that could stand alone as a product teaser.

Design Rationale

View Document

To bring Luma to life, I created an interactive landing experience that highlights how empathy can be felt through motion, pacing, and microinteractions.

The final prototype demonstrates:

  • Responsive header animation simulating Luma’s attentiveness when a user hovers or types.

  • Smooth transitions between sections to evoke calm and continuity.

  • Conversational UI cues — gentle prompts and pauses to mimic natural dialogue rhythm.

The header and UI components are fully functional for demonstration but do not navigate to other pages — intentionally designed to focus on behavior and emotion rather than navigation flow.

Watch the walkthrough:

Next

Thrive