AI-Integrated Live Product — Designed & Developed
Role
Designer & Developer
Duration
2025
ASU Global Tech Experience
Tools
HTML, CSS, JavaScript,
OpenAI API, Cloudflare Workers
Live Project
This project proves I can build — not just design. A fully functional, deployed AI chatbot using real L'Oréal brand data from CeraVe, Garnier, and Lancôme. Users browse and select products, then receive personalized skincare and beauty routines generated through multi-turn conversation with the OpenAI API. End-to-end: concept, design, development, API integration, and deployment.
Problem
Skincare routines are deeply personal, but most product recommendation systems are static — they surface options based on filters but cannot have a conversation, cannot adapt to follow-up information, and cannot help users understand why specific products work together. The challenge was building something that felt like talking to a knowledgeable friend rather than querying a database.
The technical constraint was equally important: real brand data, not invented products. Every recommendation the chatbot makes is grounded in actual L'Oréal product lines, creating a product experience that could realistically exist within the brand's ecosystem.
Process
The design process started with the conversation flow — mapping out how a user moves from browsing products to receiving a routine recommendation to asking follow-up questions. The UX challenge was making the chatbot feel responsive and helpful without making users feel like they were filling out a form.
On the technical side: product search filtering required building a client-side search system against a structured product database. Multi-turn conversation memory required passing conversation history to the API on each request. Secure API key management required implementing a Cloudflare Worker as a proxy to keep credentials off the client. localStorage persistence ensures users don't lose their selections between sessions.
Evidence
The product is live and accessible. Features include: product browsing with search and filter, multi-turn AI conversation using OpenAI API, personalized routine generation based on selected products, follow-up conversation memory, localStorage persistence across sessions, and secure API key management via Cloudflare Worker.
Outcome
This project demonstrates something the other three case studies cannot: I can take a product from concept through deployment on my own. Every engineer I will ever work with needs to know that their designer understands what it takes to actually build something — the constraints, the tradeoffs, the debugging, the deployment.
That is what this project is. It is not a portfolio piece. It is a working product. Visit the live site and talk to it.
Honest Reflection
The current version is a strong proof of concept but has real limitations. The product database is static — a production version would need a live inventory connection. The AI responses are good but not grounded in dermatological expertise, which matters for a skincare application. A next version would introduce more rigorous prompt engineering, skin type intake, and potentially an ingredient compatibility check layer before making recommendations.
I know exactly what it would take to build that version. That's the point.