Xenara AI
2025
Designing product experiences that make complex AI systems understandable.
Overview
Overview
As the platform evolved, the team faced a common challenge shared by many AI products the technology was powerful
As part of the product design team, I contributed across UX strategy, product storytelling, responsive design, visual systems, and implementation.
My work focused on helping users better understand the platform while creating scalable experiences for future growth.
Opportunity 1: Simplify AI Concepts
Establish a clear value proposition that explains Xenara’s role in the CX ecosystem.
Opportunity 2: Boost Engagement
Use animations, microinteractions, and 3D components to capture attention.
Problem area
The Challenge: Complex AI, Confusing UI
AI products often face a communication problem.
Xenara offered powerful AI capabilities, but users struggle to understand what the product does, why it matters, and how it fits into their workflow.
This challenge became especially visible when explaining Xenara's capabilities to customers, partners, and investors.
Product before redesign
Opportunity 1: Simplify AI Concepts
Establish a clear value proposition that explains Xenara’s role in the CX ecosystem.
Opportunity 2: Boost Engagement
Use animations, microinteractions, and 3D components to capture attention.
Design goals
What I aimed to achieve
Modernize the Visual Experience
Create a polished, interactive website that reflects innovation and trust.
Design decision 01
Show the Product in Action Early
To communicate value instantly, I placed an animated chatbot experience directly after the hero section. The animation demonstrates Xenara’s core AI features in context, allowing users to understand the product’s capabilities without relying on heavy explanations.
Design decision 02
Guide Users Through a Clear Product Story
I structured the website around a clear narrative that moves users from understanding what Xenara is to how it works and why it matters. Content was organized into intentional sections with clear hierarchy, helping users progressively build understanding without feeling overwhelmed by technical detail.
Design decision 03
Dual-Mode Interface
Translated the original design into light and dark modes, carefully adjusting colors, contrast, and hierarchy to maintain usability and brand consistency across both themes.
Version 01: Light Mode
Version 02: Dark Mode
Design decision 03
Dual-Mode Interface
Translated the original design into light and dark modes, carefully adjusting colors, contrast, and hierarchy to maintain usability and brand consistency across both themes.
Version 01: Light Mode
Version 02: Dark Mode
Retrospective
From Data to Dynamic Design
This project reinforced how a dual-mode interface combined with interactive storytelling and 3D components can make complex AI accessible, engaging, and visually memorable, aligning user experience closely with brand identity.
If revisiting the project today, I would validate storytelling assumptions earlier with user testing and explore more measurable onboarding metrics.
Light & Dark Mode
Impact
Interactive AI Storytelling
Chatbot and AI engine animations make automation intuitive.
Note: The Framer website functioned as a high-fidelity product and storytelling prototype used for internal alignment, sales, and investor communication. Long-term platform decisions later evolved based on budget and maintenance considerations.
