Cookidea App UI Design Project

Aymen Rouabehi

Product Designer

Adobe Illustrator

FigJam

Figma

Mobile

Cookidea UI Design

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

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.

Like this project

Posted Jun 28, 2025

Led product design for Cookidea app, enhancing user flow and design system.

Likes

Views

Timeline

Jun 1, 2025 - Ongoing

Cookidea App UI Design Project

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

Join 50k+ companies and 1M+ independents