Cookidea App UI Design Project
Minarat Studio
Cookidea UI Design
Cookidea UI Design
Description
My Role
User Flow
App Architecture
Design System Foundations
Design for development
Waitlist Wireframe (UX first)
Ui Design
Hero
Cards
Our Foundation
Contribution CTA Ulule
Promise Checklist
Join to earn a badge
Waitlist UI – Final CTA (Join section)
Accordion
Footer
Responsive
View of the project
Project Outcome
Description
Cookidea is a French mobile app designed to help people cook better, every day. It’s built for those who struggle to find meal ideas, want to share their recipes, or simply need an easier way to plan what they eat.
My Role
I'm leading the product design from structure to visual system in collaboration with a developer.
Product thinking & UX architecture
Design system & visual identity
Responsive waitlist UI ( Desktop, iPad, mobile )
First user flows and layout logic for the core features
User Flow
Before jumping into UI, I mapped the key user flows to clarify how people would move through the app: from discovering recipes, to saving meals, to planning their week.
This helped:
Prioritize the most important interactions
Remove friction in navigation
Align design with real user needs, not just screens
Set a clear foundation for future development
Starter Modal
Login/Sign Up
Post a
App Architecture
I created a visual logic map (algogram) to define how the app responds to user actions, from exploring content to creating or planning meals.
This allowed me to:
Clarify the relationships between features
Identify edge cases early
Ensure smooth transitions between flows
Align the UI with user intent at every step
Design System Foundations
Before designing any screen, I set up a consistent design foundation built around:
1. Primitives (Base Color Palette)
I defined a full color scale using clean naming (
ColorName_100 → 900) to ensure consistent visual weight and flexibility across the UI.
Primitives view image
These primitives serve as the raw source for all usage-based tokens.
2. Tokens (Usage-Based Styling)
Each primitive is mapped to a specific use in the UI through clear, purpose-driven tokens.
Tokens view image
This naming strategy improves consistency, scalability, and design-to-dev handoff, making the system readable and easy to maintain across web and mobile.
3. System Rules (Spacing, Typography, Sizing)
Beyond colors, I also defined numerical rules for structure and layout:
Typography: styles for headings, body text, labels (size, weight, line-height)
Spacing scale: based on increments of 4px (ex, 8 / 12 / 16 / 24 / 32)
Margins & paddings: standard rules for button padding, section spacing, and card layout
Radius & shadows: soft edges and consistent elevation levels
Grid system: layout rules for mobile & desktop adaptability
These rules apply to both the mobile app and the web platform, ensuring visual and structural consistency across the entire product.
Design for development
All components were built using Figma auto-layouts and variable-based styling (colors, spacing, radii) to simplify future web integration and ensure consistency across breakpoints.
This also makes the handoff smoother for the developer I’m working with.
Waitlist Wireframe (UX first)
Before moving to UI, I designed a wireframe to focus on structure, messaging, and priorities.
One key design decision was to highlight the community aspect of the product right away.
During the wireframing phase, I chose to bring forward the most social features, such as recipe sharing, user contributions, and the gamified system, rather than focusing solely on the functional benefits.
This early framing helped:
Set the right tone for the product
Reinforce the value of participation
Make the waitlist more engaging and purpose-driven
It also made the transition to visual design more intentional and aligned with the app’s long-term vision.
Ui Design
Hero
In the hero section, I focused on visual direction and emotional tone.
To guide attention toward the central CTA, I placed custom SVG illustrations on both sides, creating a visual frame that draws the eye inward. This composition helps reduce distraction and leads the user naturally toward the action.
I also used a cozy, soft color palette consistent with Cookidea’s identity to create immediate emotional immersion. The goal was to make users feel welcomed, curious, and engaged from the very first glance.
Hero design
Cards
This 4-card block was designed to highlight the product's core value propositions in a quick, friendly, and structured format.
Strategic intent:
Social first: The first two cards emphasize community and recognition, immediately communicating that Cookidea isn’t just about recipes, but about people.
Practical second: The last two cards focus on real-life pain points: “What can I cook now?” and “How do I plan the week?”
This order creates an emotional hook before addressing utility, a deliberate choice made during the UX phase.
Visual design choices:
Each card has a clean, compact layout: short title, one-line description, and a custom SVG icon
The icons use the core brand colors (green & pink) for consistency
White space and balanced proportions make scanning effortless across devices
This section acts as a visual elevator pitch, allowing users to grasp what Cookidea offers and why it’s different instantly.
Card Section
Our Foundation
This section was designed to create a visual and emotional pause, a moment where the user stops scrolling and understands why Cookidea exists.
Design decisions:
Instead of adding visual noise, I opted for a simple, centered layout with ample white space. The soft pink header gives the section a warm, friendly tone, while still separating it clearly from the rest of the page.
Typography and layout were kept clean and neutral to let the message carry the weight. I structured the text into short, digestible blocks to keep it readable even on smaller screens.
I intentionally avoided adding icons or illustrations here. The goal was not to “sell” something visually, but to build trust through clarity and honesty.
This section shifts the tone from features to purpose, and the UI supports that shift without distraction.
Foundation
Contribution CTA Ulule
This section is intentionally short because the main goal of the waitlist page is still to collect emails.
That said, we also needed to introduce our Ulule campaign, which plays a key role in funding the product without relying on ads or external pressure.
Design approach
I kept the section lightweight and clean. A short headline, a one-paragraph explanation, and four cards with just a few words each. The idea was to spark curiosity, not to overwhelm.
Each card highlights one benefit of contributing
Early access to selected features
6 months of free premium access
An exclusive supporter badge (visible on the user profile)
A public thank-you by displaying their name in the app
The tone is soft, respectful, and user-first. The main CTA is styled in our accent color to stand out, but without being pushy.
This section serves as a quiet nudge. Interested users can click and explore the full details directly on our Ulule page, without feeling forced or distracted from the core experience.
Promise Checklist
This section provides a visual summary of the product’s key promises, written from the user’s perspective.
Why did I design it this way?
After presenting features, values, and contribution options, I wanted to close with a simple, trust-building recap.
Rather than listing features again, I reframed them as real, personal benefits in a checklist format.
Each line is short, specific, and action-oriented. The goal was to make users think:
“Yes, that’s exactly what I want when I cook.”
UI decisions
I used checkmarks to reinforce the feeling of completeness and commitment
Text is left-aligned for better readability, especially on desktop
No visuals or distractions, this section is meant to feel sincere, almost like a personal pledge
This block doesn't introduce anything new; it reinforces what matters. It's a quiet, confident way to close the page with clarity and alignment.
Join to earn a badge
Waitlist UI – Final CTA (Join section)
This block is the main conversion point of the page, but rather than just asking for an email, I designed it to highlight what the user gets by joining.
Design intention
The goal was to make users feel like they’re unlocking something valuable, not just signing up.
That’s why I placed a visual representation of the Founder badge on the right, not as decoration, but as a preview of the reward itself.
Content & UX choices
The left side focuses on the concrete benefits
A Founder badge reserved for early members
3 months of free Premium access after launch
A message of appreciation and inclusion, rather than urgency or pressure
The right side visually reinforces the feeling of privilege and recognition
UI decisions
Calm layout, split structure for balance
Soft colors and a rounded input field for accessibility
Highlighted CTA in the brand’s accent color
Focus on spacing and typography to maintain clarity
This section is not just a form; it’s a visual and emotional invitation to become part of the project from day one.
Accordion
To close the page, I added a short FAQ section, but not just for the sake of it.
UX rationale
I selected questions that speak to a wide audience, not just power users.
The idea was to address common doubts from everyday users:
“Do I need to know how to cook?”
“Is it free?”
“Can I use it without internet?”
These aren’t technical questions; they’re emotional blockers. Answering them early helps reduce hesitation and shows that we’re thinking about all types of users, not just tech-savvy ones.
UI decisions
I used an accordion component for compactness and readability
Each question is phrased in natural, direct language
The open/closed logic is clean, mobile-friendly, and easy to scan
This block may seem small, but it plays a key role in building trust, especially for users who don’t consider themselves “good at apps”.
Footer
At the very end of the page, I added a final call-to-action, this time in the footer, aligned to the right.
Why?
Because users tend to make decisions at the end of a journey.
That’s when they’ve read everything, seen the visuals, understood the value, and they’re ready to act.
Placing the CTA at this moment leverages the recency effect: what we see last tends to influence our final choice the most.
Design choices
Clean footer with no distractions
CTA aligned to the right to feel intentional, not passive
Color and shape are consistent with previous buttons
Subtle presence that supports, not pushes
This is not about insisting. It’s about showing up at the right moment when trust is built, and action feels natural.
Responsive
I designed dedicated versions for mobile, tablet, and desktop to ensure a consistent experience across all devices.
Both light mode and dark mode were created to support usage at any time of day, especially for evening cooking sessions.
View of the project
You can scroll through the page & press Z to change the view
Project Outcome
This phase provided the product with a strong foundation to build upon.
A complete, scalable design system ready to support the full app and web platform
A visual and UX identity that reflects the product’s tone: calm, community-driven, and respectful
A working waitlist that already collects users, builds interest, and communicates value
Clear product architecture and flows, which now guide the development phase
A real base of trust and positioning, even before the app exists
Cookidea now has not just a face, but a structure, a voice, and a direction.
Cookidea UI Design
Description
My Role
User Flow
App Architecture
Design System Foundations
Design for development
Waitlist Wireframe (UX first)
Ui Design
Hero
Cards
Our Foundation
Contribution CTA Ulule
Promise Checklist
Join to earn a badge
Waitlist UI – Final CTA (Join section)
Accordion
Footer
Responsive
View of the project
Project Outcome
Like this project
Posted Jun 28, 2025
Led product design for Cookidea app, enhancing user flow and design system.
Likes
1
Views
40
Timeline
Jun 1, 2025 - Ongoing
