Eidolon
Eidolon
created a visual AI agent to help users trust automation
Interactive Figma prototype
View Figma PrototypeTimeline
1 week
Role
Full Stack Engineer Product Designer
Team
Failenn Aselta
Tools
React 19 · Vite 6 · TypeScript Tailwind CSS 4 · Motion · Lucide Gemini 3 Flash Preview · Google AI Studio · Google Cloud Run Figma
PROJECT OVERVIEW
Design an app which creates an easily digestible AI internet for everyone.
What happens when the internet is no longer human-navigated, but optimized for machine-to-machine interaction? The future internet will likely be a hybrid space, allowing individuals to choose how much control they delegate and how much they retain. Eidolon uses AI as a visual tool to not only showcase its actions, but to make it an easier place for those who fear its new shape.
The Problems
Our Goals
The challenge
Most people worry about what the internet will look like when it becomes 98% AI and 2% human. How do we design it without causing confusion?
THE RESEARCH
80% of U.S. adults are concerned about the future of AI.
Participant
Cindy
75 Years Old
Retiree
Portrait generated with Gemini
Frustrations
- Can't keep up with AI, the landscape changes too fast.
- Craves stability; won't hand control to automated systems.
Participant
Ashleigh
22 Years Old
Tech Enthusiast
Portrait generated with Gemini
Frustrations
- Fears hallucination on high-stakes tasks, the black box kills trust.
- Loves AI speed but exhausted by double-checking everything it does.
How Might We
Improve trust in AI and decrease cognitive load?
By developing agents that showcase their interactions visually and clean up interfaces to make the web simpler.
CASE STUDIES
Three themes emerged from studying how existing AI tools build user confidence.
I audited ChatGPT, Claude, Google, Apple Pay, Robinhood, and Perplexity to understand where they succeed at communicating AI intent. These became the design principles Eidolon is built around.
Trust
- Claude: Thinking mode surfaces reasoning so users see how decisions are reached.
- Google: Gemini's animated icon signals when the model is actively working.
Confirmation
- Apple Pay: Biometric gate before every transaction creates an explicit authorization moment.
- Robinhood: Order review screen forces a pause before any trade is finalized.
Simplicity
- ChatGPT: Single input field normalizes AI for non-technical users.
- Perplexity: Surfaces sources inline so users trust the answer without digging.
Images pulled from Claude, ChatGPT, Gemini, Apple Checkout and Google
IDEATION
01
Trust Through Transparency
2D Negotiation Canvas + Data Provenance HUD
02
Cognitive Load Reduction
Palace Layout + Noise Filtration
03
Environment Sanitation
Safety Guardrails + Node PRUNE-ing
04
Human Authority & Safety
Manual Override + Haptic Authorization
Low-Fi Wireframes
Early Drawings
Iteration 1
Selected for description
Overhead feedback so user constantly understands the scenario.
Iteration 2
Half selected for opening text
No overhead, visual actions only. Condensed sign-in page with 2 buttons.
Iteration 3
Multiple sign-in entries. Character selection appears first before setup.
Mid-Fi Wireframes
Figma Mockups
Cindy flow
Ashleigh flow
Gemini diagrams
Figma mockups
Character Creation
Anthropomorphic Trust
1
2
.png)
3
.png)
Generated with Gemini
Non-gendered
Allows agent to engage in non-biased action.
Gold Skin
Leads to feelings of trust and wisdom.
Illustration
Uncanny valley is avoided when stylization is between 10–30%.
.png)
Napkin.ai diagram
USER TESTING
Testing the solution
I shared the prototype with a group of people and asked them a series of questions to understand their reaction after using a new type of AI.
78%
Seeing the agent move made it feel understandable, but some wanted to steer it, not just prompt it.
How do we make AI agents as immersive as a video game?
16%
Felt less intense than a regular chatbot, but handing over control still felt strange.
How do we give users more perceived control?
60%
Wanted permanent manual mode. 80% of those users didn't understand why they needed an agent at all.
How does onboarding set the right expectation?
58%
Haptic touch felt more in-control, but micro transactions raised real concern.
Where's the line between controlled spending and automation?
Some thinkable quotes
“I feel like I am in the Scott Pilgrim world, the agent should be customizable.”
“I don’t want to buy bitcoin.”
“What happens if it gets it wrong? I need to know I can undo it. I’m not handing over my accounts to something I can’t override.”
THE SOLUTION
Color and type tuned for neurological calm
Green reduces cortisol
Green tones correlate with lower stress and help the brain reset between hard tasks. (APA, 2023)
Montserrat for warmth & legibility
Rounded forms feel approachable while staying clean and readable. 14% higher advice-following when typography reads as optimistic and clear. (Google, 2023)
No pure white
Pure white causes halation for 50% of people with astigmatism. Off-white reduces eye fatigue and keeps users comfortable longer. (WCAG)
A game HUD, not a dashboard — narrative over data
Information as story: 22x more memorable
Narrative beats raw data for recall, so the agent explains its reasoning as a story rather than a log. (Bruner, 1986)
Persistent profile for spatial anchoring
A constant user anchor keeps orientation as flows get deeper. Gamified environments improve knowledge retention. (MIT Media Lab)
Low-color background reduces cognitive load
Muted backgrounds reduce extrinsic cognitive load so reasoning stands out. (NNg)
Ambient intelligence minimizes screen dependency
Surface only what is needed, when it is needed. Micro-cost shielding protects attention as a resource. (MIT Media Lab)
Multi-sensory confirmation — a signature the AI can't forge
Haptic + sound + visual = faster, stickier decisions
The brain merges multi-sensory information for faster decisions and stronger recall on critical actions. (Neuroscience, 2022)
A gesture only humans can make
High-stakes actions require a human swipe. The agent cannot execute them autonomously, preserving human authority. (APA, 2023)
Green tint + purple for meaningful contrast
Green stays calm; purple signals consequence without panic. Color choice informed by symbolic cognitive associations. (Google Design)
Human and AI solving problems together — trust through shared agency
AI shows confusion, users forgive more
Visible uncertainty increases forgiveness when the system fails. Seeing an agent's inner state builds more trust than a clean facade. (Robot Transparency, 2017)
User control, users respect AI more
Real agency builds long-term trust. Users who steer the AI rather than just receive from it report higher satisfaction. (MIT Media Lab)
Active participation reduces bias
When users interact rather than just receive, they project less bias onto the system and accept its outputs more critically. (ABX Lab, MIT)
Figma mockups
FINAL PRODUCT
React 19 · Vite 6 · Tailwind CSS 4 · Motion · Gemini 3 Flash Preview · Google Cloud Run
ENGINEERING
A slice of Eidolon was built out to play around with current AI image-generation capabilities. The internet isn't ready for a new face, but AI is.
Deploy
Google Cloud Run
hosts static build
Client
Browser / React 19
Vite define → API key at build
AI
Gemini 3 Flash
Google AI Studio
Sprint decision — API key injected at build time, not proxied. Production would route through a serverless edge function.
Frontend
React 19
Single Page Application
Vite 6
Build tool
TypeScript
Type-safe code
Styling & Animation
Tailwind CSS 4
Utility-first styling
Motion
Character transitions & UI effects
Lucide React
Interface icons
AI Integration
Gemini 3 Flash Preview
@google/genai SDK
Dynamic AI Logic
Dialogue & state transitions, Idle, Walking, Talking
Infrastructure
Google Cloud Run
Hosts the static build output
Google AI Studio
Built and deployed from AI Studio
IMPACT
80%
said the agent felt legible in motion
60%
wanted more agency, validating manual mode
58%
gained confidence through haptic confirmation
Next Version
- 01
Customizable character. Full skin, style, and personality options so the agent feels like yours.
- 02
Longer setup with diagrams. A visual onboarding that explains why this kind of app matters, not just what it does.
- 03
Override system beyond haptics. A visible, always-accessible layer so users can halt or redirect the agent at any point.
- 04
All spending requires a response. Every transaction waits for an explicit user confirmation before it goes through.
- 05
Future: make it a video game. A full game loop with quests, rewards, and progression could make AI-assisted living genuinely fun.
WHAT I LEARNED
- 1
The ethical frame must come first
Understanding what pitfalls a user runs into and what they fear and like gives designers a better chance to give people comfort in times of new software.
- 2
Transparency is the product
Users distrusted the invisibility of the agent’s reasoning, not the AI itself. Making logic visible removed that distrust.
- 3
One week is enough to validate a reaction
While I was able to quickly mock up a new idea, real testing to ensure a user feels comfortable in a space requires more time to integrate feedback.
CONSIDERATIONS
Trust Through Transparency
78%
said seeing the agent move made them understand AI intent. Visible reasoning builds trust faster than any copy.
Cognitive Load Reduction
16%
found it less intense than a regular chatbot. Palace layout and noise filtration reduce fatigue for all user types.
Environment Sanitation
60%
wanted permanent manual mode, signaling the need for clear environment control. Guardrails and deep clean protocols reduce digital anxiety.
Human Authority & Safety
58%
said haptic touch gave them more perceived control. Multi-sensory confirmation keeps users connected, not automated out.
Ethical considerations
AI raises real concerns around surveillance capitalism, algorithmic manipulation, and concentrated data power. Rather than treating AI as neutral, this project introduces a dual-agent framework where a personal AI advocates for the user by making algorithmic influence visible and limiting unnecessary data exchange. Trust must be constructed through transparency and user autonomy, not convenience alone.
Tradeoff made
Gemini Flash was chosen for sub-2-second responses and zero infrastructure overhead within a 1-week sprint. The cost: every agent interaction routes through Google's servers, a real tension for a trust-focused product. A production version would proxy through a serverless edge function or run an on-device quantized model.
SPRITESHEET
Made with Gemini
BIBLIOGRAPHY
Links
- Brennan-Marquez, Kiel, and Stephen Maher. "Micro-Costs." Georgetown Law Journal. May 2025. PDF.
- Liao, Yan, et al. "The Influence of Interface Layout and Color on the User Experience of Older Adults." International Journal of Environmental Research and Public Health 19, no. 15 (2022): 9251. Link.
- Nass, Clifford, Jonathan Steuer, and Ellen R. Tauber. "Computers are Social Actors." CHI '94: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. Link.
- Schroeter, Ronald, et al. "Agent vs. Avatar: Comparing Embodied Conversational Agents Concerning Characteristics of the Uncanny Valley." ResearchGate. 2020. Link.
- Song, Hyunjin, and Norbert Schwarz. "If It's Hard to Read, It's Hard to Do: Processing Fluency Affects Effort Prediction and Motivation." Psychological Science (2008). PDF.
- Wortham, Robert H. "Robot Transparency: Improving Understanding of Intelligent Behaviour for Designers and Users." ResearchGate. 2017. Link.
- Anthropic. "Model Context Protocol." Anthropic News. 2024. Link.
- APA. "Stress in America 2025." American Psychological Association. 2025. Link.
- Gartner. "Gartner Predicts Search Engine Volume Will Drop 25% by 2026." Gartner Press Release. February 19, 2024. Link.
- Google Design. "Gradients: Designing the Visual Language of Gemini AI." Google Design. 2024. Link.
- MIT Media Lab. "Ambient Intelligence Research Group." MIT Media Lab. Link.
- Pew Research Center. "Growing Public Concern About the Role of Artificial Intelligence in Daily Life." Pew Research. August 28, 2023. Link.
- Stanford Institute for Human-Centered AI. "Demographic Stereotypes in Text-to-Image Generation." Stanford HAI. 2024. Link.
- Apple. "Human Interface Guidelines: Materials (Liquid Glass)." Apple Developer. Link.
- Nielsen Norman Group. "Aesthetic-Usability Effect." NN/g. Link.
- Nielsen Norman Group. "Designing UX for Seniors." NN/g. Link.
- Bruner, Jerome. Actual Minds, Possible Worlds. Harvard University Press, 1986. Narrative framing improves information recall by 72% vs. raw data presentation.
- Edelman. "2024 Edelman AI Trust Report." Edelman. 2024. Link. 67% of global respondents cite AI-generated misinformation as a top societal threat requiring active content sanitation.
more in product-design
view all →
