Eidolon
Eidolon
designing the interfaces for a web that is 98% AI and 2% human
Timeline
1 week
Role
Full Stack Engineer Product Designer
Team
Failenn Aselta (solo)
Tools
React 19 · Vite 6 · TypeScript Tailwind CSS 4 · Motion · Lucide Gemini 3 Flash Preview · Google AI Studio · Google Cloud Run Figma
PROJECT OVERVIEW
What will the internet look like when it is 98% AI agents and 2% humans?
So I designed an app which creates an easily digestible AI internet for everyone.
A human visits the agent web
“Show me running shoes under $150.”
The web at 98% AI
machine-only{
"node": "shop://catalog/running",
"agent": "commerce.fetch.v4",
"intent": "browse",
"items": [
{ "id": "rn_01", "ref": "0x9af", "price": 120, "stock": 8 },
{ "id": "rn_02", "ref": "0x3c1", "price": 95, "stock": 0 }
],
"next": "agent://checkout.settle",
"render": null
}Just JSON and agent calls. Unreadable to people.
Eidolon
press render
Why it matters
Impact
01
78%
said the agent felt legible in motion
02
60%
wanted more agency, validating manual mode
03
58%
gained confidence through haptic confirmation
04
16%
felt less intense than a regular chatbot
The challenge
How will people interact with a new web that seems to be coming up on the rise?
How do we create trusted interactions for people and agents?
We could create a tool where AI either shows you the web like it is today or acts as your personal visual agent.
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.
Design Decisions
Iterating on the elements that make agent logic visible instead of invisible.
Tapping gesture too simple and could be accidental.
.png)
Uncanny valley is avoided when stylization is between 10 to 30%.
Number is too intense and causes stress.
Large error state just raises fear.
Mid-Fi Wireframes
Figma Mockups
Cindy flow
Ashleigh flow
Gemini diagrams
Figma mockups
USER TESTING
Tested the solution with a handful of old/young people
78%Seeing the agent move made it feel understandable, but some wanted to steer it, not just prompt it.
Next: Give the possibility of controls to the user.
16%Felt less intense than a regular chatbot, but handing over control still felt strange.
Next: Give users the option for a more in-depth walk-through of the agent as it moves throughout the web.
60%Wanted permanent manual mode. 80% of those users didn't understand why they needed an agent at all.
Next: Use artifact to show what the web would look like during onboarding.
58%Haptic touch felt more in-control, but micro transactions raised real concern.
Next: Give users the option to accept or deny micro-transactions.
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
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)
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)
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)
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
I built a slice of Eidolon to test 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
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.
IMPACT
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.
Next Steps
- 01
Hand controls to the user. Give the possibility of direct controls so users can steer the agent, not just prompt it.
- 02
In-depth agent walk-through. Give users the option for a more in-depth walk-through of the agent as it moves throughout the web.
- 03
Show the web during onboarding. Use an artifact to show what the web would look like, so people understand why the agent matters.
- 04
Approve micro-transactions. Give users the option to accept or deny micro-transactions before they go through.
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 →
