Personalized meal planning system incorporating ChatGPT
AI Design ・ Prompting Engineering
Overview
The AI-Powered Meal Planner project highlights my design process from initial concept to iterative improvement. Starting with a simple text box for dietary preferences, I identified user challenges and evolved the interface to include selection options and a custom text box for special needs. This approach improved user guidance and ensured practical AI-generated meal plans.
This project demonstrates my commitment to user-centric design, leveraging AI to create a more dynamic and personalized meal planning experience.
Timeline
Completed in 3 weeks (2024.05)
Role
UX/UI Designer
AI Engineer
Tool
ChatGPT
Context
Addressing limitations of existing planners and
Deepening AI knowledge
From my previous project—a planning assistance app—I discovered that existing meal planners often rely on pre-existing recipes, which limits selection and personalization.
As a designer, I also wanted to deepen my understanding of artificial intelligence and its capabilities, and to explore how I could incorporate AI into my products.
Design Process:
My AI Journey: Beginning with ChatGPT
To begin, I started by asking ChatGPT to guide me and help write the code necessary for my project. Through this process, I learned how to build my system step-by-step, leveraging the capabilities of AI to streamline development.
While using ChatGPT 4.0, I encountered some bugs in the code. To resolve these issues, I sought out resources such as YouTube tutorials, Velo documentation, and advice from friends.
Understanding how AI is integrated into the website
Optimizing prompting to achieve better results from AI
To guide ChatGPT to yield better results, a couple prompt engineering techniques were implemented:
Use system message to adopt to a persona
include details in query
provide examples
Design iteration 1
Simple text box for users to input their dietary preferences
#1 Allows users the flexibility to comprehensively articulate their specific needs and preferences.
#2 The format of text box leverages users' familiarity with text prompts, clearly indicating that this is an AI-powered meal planner.
Key Issues Identified through User Testing
#1 Entering all information in a plain text box is challenging
Meal planning involves various parameters such as goals, dietary preferences, and allergies. It was challenging for users to enter all this information at once in a plain text box.
Key Issues Identified through User Testing
#2 AI's responses were overly creative and impractical
The AI's responses tended to be overly creative and sometimes impractical. For example, if a user expressed a love for chocolate, the program might suggest incorporating chocolate into every meal, which is not realistic.



Design iteration 2
Improved User Interaction and Practicality
To address these problems, I added basic selection options while keeping a custom text box at the end for special needs.
This approach solved the issues identified in the first prototype:
#1
Enhanced User Guidance: Using selection options to guide users reduces the cognitive load, making it easier and more comfortable for them to start.
#2
Practical Constraints: This method ensures the AI's output remains within practical constraints, providing more realistic and useful meal plans.
Next Step