Landing page for imaginary recipes app FlavorFusion.
Project Type
UX/UI
Landing Page
Prototype
Date & Duration
July 25
2,5 Days
Team
Solo Project
Tools
Figma & FigJam
AI Tools
(ChatGPT, Perplexity)
Project Brief
Design an enticing, user-focused landing page for FlavorFusion, a new recipe app that simplifies home cooking through a rich library of recipes, personalized recommendations, and smart grocery lists. The page should clearly communicate the app’s value proposition, spark user interest, and drive downloads.
Work individually to address this design challenge, leveraging AI tools to accelerate ideation and improve outcomes.
Discovery
As a first step in my research, I analyzed a range of landing pages designed to promote mobile apps, with a particular focus on those related to food and recipes.
I examined sites such as Too Good To Go, Kitchen Stories, and Mealime, studying both their visual design and structural layout. My goal was to identify common patterns and key differences in order to define an effective framework for my own landing page.
This analysis helped me determine which elements are essential, how information should be prioritized, and where specific content should be placed to create a clear and engaging user experience.
Structure
01
Hero Section
-
Prominent app name and tagline
-
Clear, immediate Download button
-
Strong visual to capture attention
02
Features & Screens
-
Key benefits and core functionalities
-
Supporting app screenshots or illustrations
-
Concise, user-focused copy explaining why the app is valuable
03
Social Proof
-
User reviews, ratings, or testimonials
-
Logos of press mentions or partner brands (if available)
04
CTA
-
Bold, highly visible prompt to download or sign up
-
Reinforced with persuasive microcopy (e.g., “Start cooking smarter today”)
01
Personalized Recipes
Receive recipe suggestions tailored to your taste preferences, cooking habits, and the ingredients you already have on hand.
02
Step-by-Step Guidance
Follow clear, image-rich instructions with integrated timers for a seamless cooking experience.
03
Smart Grocery List
Generate automatic shopping lists based on your chosen recipes, ensuring you never miss an ingredient.
04
Flexible Recipe Options
Easily adjust portion sizes and access detailed nutritional information and preparation notes.
05
Diverse Selection
Explore a wide variety of dishes from vegan to low-carb and beyond with fresh inspiration added regularly.
The app concept, including the key features to be highlighted on the landing page, was partially derived from the project brief and further expanded with the help of ChatGPT. This allowed me to generate potential content for the landing page efficiently.
AI tools were particularly valuable given the short timeframe, enabling me to quickly refine and translate content while maintaining quality.
Concept
Style Guide
This project focused on the use of AI to streamline the design process. When creating the style guide, I aimed to efficiently define a visual system that suits the theme of food. I iterated continuously, refining the design through a combination of ChatGPT assistance and my own expertise in color selection and typography scales.
Particularly for colors and fonts, the process involved a cycle of experimentation, testing, and prompt-based refinement until I was satisfied with the final choices.
Colors
Earthy & Sweet: A muted yet warm palette that feels natural, grounded, and modern.
Typography
Display: Kanit Modern, rounded, and clean; ideal for headings and attention-grabbing text.
Body: Manrope Modern, highly readable, and neutral; perfect for longer text and content blocks.
Icons & Elements
I wanted the icons to convey a natural, organic feel. To achieve this, I designed them by hand, giving them an organic, natural touch reminiscent of the shapes found in real ingredients.
Images
Creating visuals for the landing page was challenging, as I wanted realistic app mockups rather than simple placeholders. AI image generation often lacked the desired quality, so I sourced authentic food photography from Unsplash to match the color concept.
For the app mockups, AI attempts for mobile and tablet were unsatisfactory even after multiple tests. I ultimately built the mobile mockups myself using a Figma Community template, then leveraged ChatGPT to generate a tablet version based on those designs, which worked surprisingly well.
Prototype
01
AI for Content & Design
AI tools proved highly effective for generating text, developing concepts, and refining the style guide. However, all content should still be carefully reviewed and analyzed, as AI can and does make mistakes, nothing should be copied blindly.
02
AI Image Generation
In contrast, AI-based image creation was often unreliable and time-consuming; resources from the Figma Community ultimately provided more practical solutions.
03
Input-Dependent Results
Successful AI image generation worked best when existing reference images were provided.