L'OREAL CHATBOT
Figma | Adobe Illustrator
ROLE
UX/UI designer | Vibecoder
TOOLS
OpenAI API | GitHub | Figma
TYPE
Chatbot concept
TIMELINE
1 Week
Over View
The L'Oréal AI Chatbot is a conversational web application that helps users discover products, build skincare routines, and receive beauty recommendations through AI. The goal was to create an experience that feels like speaking with a knowledgeable beauty advisor while maintaining L'Oréal's premium brand identity.
This project combines UX design, frontend development, AI integration, and secure API architecture into a single end-to-end product.
The Challenge
Users often have questions about beauty products but don't know where to start. My goal was to create an AI assistant that provides personalized guidance while staying true to L'Oréal's premium brand identity.
Brand and UX
I first studied L'Oréal's branding and designed a clean conversational interface using the company's logo, colors, and typography. My focus was creating an experience that felt trustworthy, premium, and easy to use.
First Iteration
AI Integration
I connected the interface to the OpenAI API using JavaScript and created a system prompt that keeps the chatbot focused on L'Oréal products, routines, and beauty-related topics. I also implemented conversation history to make interactions feel more natural.
To protect the API key, I deployed a Cloudflare Worker that securely handles requests between the chatbot and OpenAI. This allowed me to follow industry best practices instead of exposing credentials in the frontend.
Takeaways
The biggest challenge was combining UX design, AI, and frontend development into one seamless experience. I learned how important prompt engineering and API security are when building AI-powered products.
This project strengthened my skills in conversational UX, JavaScript, API integration, and secure deployment. More importantly, it showed me how thoughtful design and AI can work together to create personalized, brand-focused user experiences.
© Celine Ho
END OF INTERFACE / SIGNAL OPEN
Email
hoceline4@gmail.com
LinkedIn
linkedin.com/in/celine-ho-ux/
instagram.com/celery_sticks7/
