UI designer for a mixologie app in ios and android
Budget: $150 – $250 CAD
Here the requirement please make a real offer i will not discuss with place holder offer.
Degree in Graphic Design, UI/UX Design, or related field. Equivalent experience may also be considered.
Experience:
Proven experience in designing user interfaces for mobile or web applications.
Strong portfolio showcasing similar projects, preferably with a focus on onboarding screens, interactive features, and modern design principles.
Technical Skills:
Proficiency in tools like Figma, Adobe XD, Sketch, or other design platforms.
Familiarity with prototyping tools for creating interactive mockups.
Basic understanding of front-end development (HTML/CSS) is a plus for design feasibility.
Design Knowledge:
Strong grasp of typography, layout, color theory, and visual hierarchy.
Experience designing for both iOS and Android platforms.
Soft Skills:
Strong communication and collaboration skills.
Ability to interpret client needs and transform them into functional designs. Here the requirement please make a real offer i will not discuss with place holder offer.
1. Onboarding & Welcome Screen
Layout:
Welcome Message: A warm greeting, such as "Welcome to your Virtual Mixologist!"
Action Buttons: “Start” button to begin the questionnaire and “Explore Drinks” to skip and browse the recipes.
Design: A clean, minimalist design with a background image wood bar or a subtle animation related to drinks always with the wood bar.
Branding: App logo placed at the top or center.
2. Interactive Questionnaire Screens (Taste Profile Setup)
Layout:
Progress Bar: Displayed at the top to indicate the completion percentage of the questionnaire.
Questions:
Each screen asks a single question like "How sweet do you prefer your drinks?" with a slider or multiple choice options.
Visual indicators for the flavor preferences, such as icons for sweet, sour, bitter, etc.
Design:
Large question text, with engaging visual representations (e.g., a slider for sweetness level, icons for flavor types).
Clear navigation buttons: "Next", "Previous", and "Skip" to move between questions.
Engaging transitions between questions with animations (e.g., smooth sliding or fade-in effects).
Option to tap for more info or help explaining the question.
3. Main Screen (Drink Suggestions)
Layout:
Top Bar: A clean header with the app name and a small profile icon for account settings or preferences.
Drink Categories: Horizontal scrollable carousel to filter drink suggestions by categories (e.g., Cocktails, Shooters, New Suggestions, Favorites).
Recommended Drinks:
Displayed in cards with drink images, names, and a brief description.
Each card will have a “Like” and “Dislike” button, with an option to save the drink to a favorites list.
Action Buttons: "Show Ingredients" for each drink, and "Why this drink?" for explanation from the ChatGPT integration.
Design:
Cards have rounded corners with large images of the drinks.
Clear, bold text for the drink name and a short flavor description.
Colorful drink images that stand out against a neutral or light background to ensure clarity.
Floating buttons or a sticky footer with options like "Refine Results," "Settings," and "Filter by Ingredients."
Subtle animations when users interact with the cards (e.g., slight bounce effect when tapping a drink).
4. Drink Details Page
Layout:
Title: Drink name at the top with large, high-quality images of the drink.
Ingredients: A list of ingredients with a "+" sign for each one to indicate user interactivity or show more details.
Preparation Instructions: Detailed step-by-step instructions for making the drink, with optional visual aids (e.g., icons of equipment like a shaker).
Radar Chart: A visual chart next to the recipe showing how well the drink matches the user’s preferences.
ChatGPT Explanation: A conversational box or modal that provides a personalized explanation of why this drink was recommended based on the user's taste profile.
User Feedback: Thumbs up/thumbs down or "Dislike this Ingredient?" buttons below the ingredients list.
Design:
Clean, readable layout with plenty of white space for easy digestion of content.
Large images of the drink, with subtle animation on interaction (e.g., zoom-in effect).
Radar chart with color-coded sections corresponding to flavor profiles (sweet, bitter, sour, etc.).
ChatGPT explanation in a bubble-style chat box, keeping the conversation light and fun.
Smooth transitions between sections as users scroll or tap for more details.
5. Feedback Screen (Dislike Ingredients & Recalculation)
Layout:
List of Ingredients: Users will see the ingredients from their recommended drinks.
Buttons for Dislike: Clear "Dislike" buttons for each ingredient, with an option to toggle or remove dislikes.
Action Button: "Update Preferences" or "Get New Recommendations" to recalibrate drink suggestions based on the feedback.
Design:
Ingredients listed in a clean, list-style format with checkboxes or toggles for disliked ingredients.
Bold “Dislike” buttons in a contrasting color to make them stand out.
Clear, large action button at the bottom to save preferences and refresh recommendations.
6. Chat Interface (ChatGPT Integration)
Layout:
Chat Bubble: Clean, conversational UI where the user can ask questions like "What can I make with rum and lime?" or "Why is this drink perfect for me?"
Response Section: ChatGPT’s answers will be displayed in bubbles, with a follow-up button for the user to ask more or refine the question.
Help Option: A small icon or button to access a help guide, explaining how the ChatGPT feature works.
Design:
Minimalist, with a friendly, modern look.
Round chat bubbles, differentiating between user and bot responses (different background colors for each).
A smooth scrollable interface where users can tap to ask questions or view more detailed responses.
Floating button for initiating a new conversation, placed at the bottom-right corner.
7. User Profile & Settings Screen
Layout:
Profile Picture: A circle for the user's profile picture at the top.
Personal Information: Displays user's name, taste profile summary, and the option to edit preferences.
Settings Options: Includes notifications, theme customization, and language selection.
Drink History: A section to view previously liked drinks and saved favorites.
Design:
Clean, organized, with large, clickable options for editing preferences.
Soft background colors with light contrasting text to maintain a calm, pleasant look.
Icons next to each option to visually represent the action (e.g., a bell for notifications).
8. Navigation & Bottom Bar
Layout:
Bottom Navigation Bar: Four main icons at the bottom: Home (for the drink recommendations), Profile (user settings), History (past favorites), and Chat (ChatGPT conversation).
Floating Action Button (FAB): A circular button for quick actions like adding a new favorite drink, starting a new quiz, or adjusting preferences.
Design:
Clean, minimal icons with labels.
The FAB is large and prominent, with a color that contrasts the background for easy access.
Degree in Graphic Design, UI/UX Design, or related field. Equivalent experience may also be considered.
Experience:
Proven experience in designing user interfaces for mobile or web applications.
Strong portfolio showcasing similar projects, preferably with a focus on onboarding screens, interactive features, and modern design principles.
Technical Skills:
Proficiency in tools like Figma, Adobe XD, Sketch, or other design platforms.
Familiarity with prototyping tools for creating interactive mockups.
Basic understanding of front-end development (HTML/CSS) is a plus for design feasibility.
Design Knowledge:
Strong grasp of typography, layout, color theory, and visual hierarchy.
Experience designing for both iOS and Android platforms.
Soft Skills:
Strong communication and collaboration skills.
Ability to interpret client needs and transform them into functional designs. Here the requirement please make a real offer i will not discuss with place holder offer.
1. Onboarding & Welcome Screen
Layout:
Welcome Message: A warm greeting, such as "Welcome to your Virtual Mixologist!"
Action Buttons: “Start” button to begin the questionnaire and “Explore Drinks” to skip and browse the recipes.
Design: A clean, minimalist design with a background image wood bar or a subtle animation related to drinks always with the wood bar.
Branding: App logo placed at the top or center.
2. Interactive Questionnaire Screens (Taste Profile Setup)
Layout:
Progress Bar: Displayed at the top to indicate the completion percentage of the questionnaire.
Questions:
Each screen asks a single question like "How sweet do you prefer your drinks?" with a slider or multiple choice options.
Visual indicators for the flavor preferences, such as icons for sweet, sour, bitter, etc.
Design:
Large question text, with engaging visual representations (e.g., a slider for sweetness level, icons for flavor types).
Clear navigation buttons: "Next", "Previous", and "Skip" to move between questions.
Engaging transitions between questions with animations (e.g., smooth sliding or fade-in effects).
Option to tap for more info or help explaining the question.
3. Main Screen (Drink Suggestions)
Layout:
Top Bar: A clean header with the app name and a small profile icon for account settings or preferences.
Drink Categories: Horizontal scrollable carousel to filter drink suggestions by categories (e.g., Cocktails, Shooters, New Suggestions, Favorites).
Recommended Drinks:
Displayed in cards with drink images, names, and a brief description.
Each card will have a “Like” and “Dislike” button, with an option to save the drink to a favorites list.
Action Buttons: "Show Ingredients" for each drink, and "Why this drink?" for explanation from the ChatGPT integration.
Design:
Cards have rounded corners with large images of the drinks.
Clear, bold text for the drink name and a short flavor description.
Colorful drink images that stand out against a neutral or light background to ensure clarity.
Floating buttons or a sticky footer with options like "Refine Results," "Settings," and "Filter by Ingredients."
Subtle animations when users interact with the cards (e.g., slight bounce effect when tapping a drink).
4. Drink Details Page
Layout:
Title: Drink name at the top with large, high-quality images of the drink.
Ingredients: A list of ingredients with a "+" sign for each one to indicate user interactivity or show more details.
Preparation Instructions: Detailed step-by-step instructions for making the drink, with optional visual aids (e.g., icons of equipment like a shaker).
Radar Chart: A visual chart next to the recipe showing how well the drink matches the user’s preferences.
ChatGPT Explanation: A conversational box or modal that provides a personalized explanation of why this drink was recommended based on the user's taste profile.
User Feedback: Thumbs up/thumbs down or "Dislike this Ingredient?" buttons below the ingredients list.
Design:
Clean, readable layout with plenty of white space for easy digestion of content.
Large images of the drink, with subtle animation on interaction (e.g., zoom-in effect).
Radar chart with color-coded sections corresponding to flavor profiles (sweet, bitter, sour, etc.).
ChatGPT explanation in a bubble-style chat box, keeping the conversation light and fun.
Smooth transitions between sections as users scroll or tap for more details.
5. Feedback Screen (Dislike Ingredients & Recalculation)
Layout:
List of Ingredients: Users will see the ingredients from their recommended drinks.
Buttons for Dislike: Clear "Dislike" buttons for each ingredient, with an option to toggle or remove dislikes.
Action Button: "Update Preferences" or "Get New Recommendations" to recalibrate drink suggestions based on the feedback.
Design:
Ingredients listed in a clean, list-style format with checkboxes or toggles for disliked ingredients.
Bold “Dislike” buttons in a contrasting color to make them stand out.
Clear, large action button at the bottom to save preferences and refresh recommendations.
6. Chat Interface (ChatGPT Integration)
Layout:
Chat Bubble: Clean, conversational UI where the user can ask questions like "What can I make with rum and lime?" or "Why is this drink perfect for me?"
Response Section: ChatGPT’s answers will be displayed in bubbles, with a follow-up button for the user to ask more or refine the question.
Help Option: A small icon or button to access a help guide, explaining how the ChatGPT feature works.
Design:
Minimalist, with a friendly, modern look.
Round chat bubbles, differentiating between user and bot responses (different background colors for each).
A smooth scrollable interface where users can tap to ask questions or view more detailed responses.
Floating button for initiating a new conversation, placed at the bottom-right corner.
7. User Profile & Settings Screen
Layout:
Profile Picture: A circle for the user's profile picture at the top.
Personal Information: Displays user's name, taste profile summary, and the option to edit preferences.
Settings Options: Includes notifications, theme customization, and language selection.
Drink History: A section to view previously liked drinks and saved favorites.
Design:
Clean, organized, with large, clickable options for editing preferences.
Soft background colors with light contrasting text to maintain a calm, pleasant look.
Icons next to each option to visually represent the action (e.g., a bell for notifications).
8. Navigation & Bottom Bar
Layout:
Bottom Navigation Bar: Four main icons at the bottom: Home (for the drink recommendations), Profile (user settings), History (past favorites), and Chat (ChatGPT conversation).
Floating Action Button (FAB): A circular button for quick actions like adding a new favorite drink, starting a new quiz, or adjusting preferences.
Design:
Clean, minimal icons with labels.
The FAB is large and prominent, with a color that contrasts the background for easy access.