L'Oréal AI Chatbot:
designing a personalized beauty experience
Conversational UX • AI Integration • API Design
project overview
L'Oréal offers an extensive range of beauty and skincare products, making it difficult for customers to quickly discover products that fit their individual needs. The objective was to design an AI-powered chatbot that could guide users through personalized beauty recommendations while maintaining L'Oréal's premium brand identity.
timeline
1 Week
tools
HTML • CSS • JavaScript • OpenAI API • Cloudflare Workers • GitHub Copilot
The starting point
The starter interface established the core layout and functionality, allowing me to focus on the user experience. My work centered on transforming the template into an engaging AI-powered consultation by refining the interface, implementing L'Oréal branding, and creating a conversational experience that guides users toward personalized product recommendations.
the problem
Browsing hundreds of beauty products can feel overwhelming. Users often don't know where to start or which products fit their needs. Rather than requiring users to search through product pages, the chatbot creates a conversational experience that provides tailored recommendations based on each user's questions.
-
Design a branded conversational experience that reflects L'Oréal's visual identity.
Help users discover products through personalized AI recommendations.
Create a chatbot that maintains conversational context throughout the interaction.
Keep responses focused on L'Oréal products and routines.
Securely connect the application to the OpenAI API using Cloudflare Workers.
-
Before thinking about the AI itself, I considered:
What information does a user need?
How should a beauty consultation feel?
What tone reflects L'Oréal's brand?
How can responses remain helpful without overwhelming the user?
information hierarchy
Category Selection
↓
Product Gallery
↓
Product Details (Modal)
↓
Selected Products
↓
AI Routine Generation
↓
Conversational AI Support
Product Gallery
Selected Products
Conversational AI Support
Category Selection
Product Details (Modal)
AI Routine Generation
technical implementation
Beyond the visual design, the chatbot required technical decisions that directly supported the user experience. OpenAI API integration enabled personalized, conversational product recommendations rather than static responses, creating an experience closer to a guided beauty consultation. Cloudflare Workers provided a secure layer between the interface and the API, protecting sensitive credentials while allowing users to interact with the chatbot seamlessly. Together, these implementations helped create an experience that was not only visually polished, but also personalized, responsive, and securely built.
openai integration
-
An API (Application Programming Interface) allows different software systems to communicate and share functionality. The OpenAI API specifically connects a website or application to OpenAI’s AI models, allowing developers to add features such as chatbots, personalized responses, content generation, and summarization without building the AI technology from scratch.
-
Integrating the OpenAI API transformed the experience from a static FAQ into an interactive conversation. Instead of requiring users to search through product pages or browse categories, the chatbot could understand natural language questions and provide personalized recommendations based on each user's needs. This created a faster, more intuitive way to discover products while making the interaction feel more conversational and engaging.
Cloudflare security
-
Cloudflare Workers security uses serverless code as a protected middle layer between a website and an external service. It can securely store private information (such as API keys) and prevent sensitive credentials from being exposed directly in the website’s code.
-
Security was an important consideration because the OpenAI API key should never be exposed to users in the browser. By routing requests through a Cloudflare Worker, sensitive credentials remained protected while still allowing the chatbot to deliver real-time responses. This approach follows industry best practices and creates a more secure and reliable application.
ux improvements
Personalized Recommendations
Instead of providing identical recommendations to every visitor, the chatbot adapted its responses based on previous questions and follow-up information. This created a more relevant experience that better reflected each user's skincare concerns and goals.
Context-Aware Conversations
Remembering previous messages reduced repetitive interactions and allowed conversations to progress naturally. This helped users feel understood while making recommendations more consistent throughout the consultation.
Focused Guidance
By limiting responses to L'Oréal products and beauty-related topics, the chatbot remained consistent with the brand's purpose. Keeping conversations focused reduced confusion and built trust by ensuring recommendations stayed relevant.
Before
after
This project changed the way I think about designing AI-powered experiences. One of my biggest takeaways was learning how literal AI can be and how much the quality of a system prompt influences the quality of the conversation. Through testing and iteration, I realized that even small changes to the prompt, such as instructing the chatbot to stay focused on L'Oréal products, ask thoughtful follow-up questions, and avoid unrelated topics, significantly improved the chatbot's tone, accuracy, and consistency. I also learned how APIs and well-crafted prompts work together to create more natural, context-aware conversations that feel personalized rather than generic.