WeChef: AI Recipe App, Landing Page & Design System (UI/UX)
Juan Fernando Ramirez
This is the story of how WeChef went from a logo to a complete, live AI product, designed for real users, built on real research, and ready for a real market.
Project → WeChef — AI Recipe Web App + Landing Page.
The brief → A startup with a working technology, a logo, and screen ideas in text, but no structure, no hierarchy, and no user experience to hold it together.
My role → UI/UX Design · Creative Direction · UX Research · Information Architecture · Content Strategy · Design System.
Deliverables → Web App Mobile+Desktop (4 core screens) · Landing Page (full conversion design) · Instagram Content System · Style Guide + Component Library.
Status → Live — wechef.ai
WeChef turns Instagram food posts into structured recipes with AI. Mobile app UI designed in Figma.
AI recipe app interface with recipe cards over a kitchen scene.
A complete look at WeChef — an AI-powered recipe web app designed for real users and real-world use.
From discovery and recipe exploration to personalized cooking experiences, every interaction was designed to make AI feel useful, approachable, and effortless.
AI Product Design · UX/UI Design · Web App · Food Tech
WeChef design process: from idea to research, wireframes, UI design and animation. Each phase informed the next.
UX design process diagram for an AI recipe app, from idea to presentation.
A complete look at WeChef — an AI-powered recipe web app designed for real users and real-world use.
From discovery and recipe exploration to personalized cooking experiences, every interaction was designed to make AI feel useful, approachable, and effortless.
AI Product Design · UX/UI Design · Web App · Food Tech
Six design targets for WeChef: extraction speed, readability, accessibility while cooking, grocery utility, saved collections and discoverability.
Radar chart comparing WeChef's UX design targets against the previous experience.
Four problems, four design decisions, one coherent product: extract, format, save and discover.
WeChef solution roadmap in four steps for an AI recipe extraction app.
Designed for real kitchens: a clear hierarchy and a social recipe feed that stays readable at a glance.
Couple in a kitchen browsing recipes in the WeChef app.
Recipe app UX redesign from a wall of text to a scannable recipe screen. Wireframes and final UI designed in Figma, with ingredients, instructions and quick actions in one place.
Main Screens Defined From Research
Discovering recipes should feel as natural as browsing for inspiration.
The WeChef Explore experience was designed around visual discovery, clear content hierarchy, and an interface that makes finding the right recipe fast and intuitive.
AI Recipe App · Mobile UI/UX · Food App Design
Discovering recipes should feel as natural as browsing for inspiration.
The WeChef Explore experience was designed around visual discovery, clear content hierarchy, and an interface that makes finding the right recipe fast and intuitive.
AI Recipe App · Mobile UI/UX · Food App Design
Saved recipes and a grocery checklist in dark mode. UX built for retention, so users come back every time they cook.
Mobile app screens for saved recipes and a grocery list.
Designed for the kitchen counter.
A significant portion of users follow recipes on a tablet — propped up near the stove, hands busy, eyes scanning ingredients and steps.
The Explore screen was designed with that moment in mind.
A larger canvas for discovery,
built for the way people actually cook.
The Explore experience adapts naturally to larger screens while keeping the same visual language and interaction principles.
Responsive product design for discovering recipes, exploring food inspiration, and navigating an AI-powered cooking experience.
Designed to give recipes more room to breathe.
The tablet experience uses the additional screen space to create a more comfortable cooking interface while preserving the clarity and hierarchy of the mobile experience.
Responsive UX/UI · Recipe App · Product Design
The product experience starts before the user enters the app.
The WeChef landing page was designed to communicate the value of AI-powered cooking quickly, build trust, explain the product clearly, and guide visitors toward conversion.
Landing Page Design · Conversion UX · AI Product · Web Design
WeChef landing page design: every section has one conversion job, from the first headline to the final CTA.
Landing page concept for an AI recipe product with a dark plate visual.
A closer look at the complete WeChef landing page.
From the hero section to product features and conversion points, the page was structured to tell a clear product story while maintaining a strong visual identity throughout the experience.
Web Design · Landing Page · Conversion Design · AI Startup
Landing page structure for an AI product: hero, social proof, core feature demo, how it works and a single CTA.
A product landing page should feel intentional on every screen.
The WeChef website was designed responsively to preserve hierarchy, storytelling, interactions, and conversion across desktop, tablet, and mobile experiences.
Responsive Web Design · UI/UX · Landing Page Design
The mobile experience keeps the same product story in a smaller, more focused canvas.
Content hierarchy, spacing, navigation, and conversion moments were redesigned to make the WeChef experience feel native to mobile rather than simply scaled down.
Mobile Web Design · Responsive UX · AI Product Design
WeChef design system built in Figma: component library, Plus Jakarta Sans typography, color system and light/dark modes.
Design system overview with components, typography, color palette and dark mode.
Instagram post templates and a style guide that keep the WeChef brand consistent beyond the app.
A visual showcase of WeChef’s Instagram content — designed to bring the brand’s identity to life across social media.
From recipe-focused posts to branded visual compositions, each piece was crafted to create a consistent, engaging, and recognizable presence on Instagram while making food content feel fresh and approachable.
Social Media Design · Instagram Design · Content Design · Visual Identity · Brand Design
A product is only as scalable as its design foundation.
Results: an estimated 40% lower cognitive load and 3x retention potential, based on UX benchmarks. Full product delivered from scratch.
Impact metrics for the WeChef AI project with a five-star client testimonial.
WeChef is live at wechef.ai: web app, landing page and design system, built from a logo and an idea.
WeChef app on a cutting board with fresh ingredients, showing the live AI product.
UI/UX Design · Creative Direction · AI Products · Web Apps · Landing Pages
Work with founders and teams who have a vision and need someone to take it all the way through — research, UX, UI, content, and handoff.
Like this project
Posted Sep 24, 2026
End-to-end UX/UI design for WeChef, an AI recipe web app: research, information architecture, responsive product UI, design system and conversion landing page.
Likes
1
Views
1
Clients
WeChef
