Kara Klefos
HomeAboutContact
Back to Projects

ReciFree

ReciFree is a recipe app designed for users with allergens, dietary needs and preferences. I focused on creating an experience that feels both approachable and empowering, shaped by real user feedback and competitive insights.

UX/UI Case Study | Responsive Web App

ReciFree Hero

The Problem - Managing food allergies & restrictions

  • Managing food allergies (affecting around 32 million Americans) presents a significant challenge in meal preparation, as existing recipe apps fail to consistently provide clear, easy-to-see allergen indicators. Users are often forced to manually check ingredients, leading to frustration and wasted time.

  • Users with dietary restrictions struggle to find reliable recipes due to cluttered interfaces, blog filler, and inconsistent, non-prominent allergen indicators.

The Goal

To create a responsive web app (mobile/desktop) that prioritizes safety, efficiency, and clarity, enabling users to:

  • Easily identify which recipes are free from specific allergens.

  • Save recipes and automatically generate an ingredient shopping list.

  • View personalized recipe recommendations with their allergies top of mind.

  • Have fun when searching for recipes through an inviting, trustworthy design.

The Solution

A responsive MVP web app focused on a clean, task-forward interface. The core innovation is the prominent 'Not Included' Indicator, which provides users with instant, verified assurance of safety by clearly displaying their excluded allergens with a strike-through icon.

Responsive Design Examples

Scroll to view more →

ReciFree Sign In
ReciFree Sign Up
ReciFree Onboarding

User Research & Synthesis

Methodology & Users

  • Who: Users with established dietary restrictions or food allergies actively seeking recipes that cater to their specific needs.

  • When/Where: Users browse for recipe inspiration at home (after work/before dinner) and utilize the app while grocery shopping (after work/weekends).

  • Why: Users will be able to effortlessly discover new recipes that meet their specific allergen and dietary restrictions, with clear indicators showing which recipes avoid particular allergens. Additionally, the app offers a convenient grocery shopping list feature.

Key Research Insights

  • Clutter vs. Clarity: All users cited a preference for clean, clear interfaces and felt that most current recipe sites are too cluttered and visually busy ("look the same").

  • Efficiency over Narrative: Every user expressed a desire to go straight to the recipe and ingredients and explicitly do not want to read the blogger's story behind the dish.

  • Search Behavior: While most users currently rely on broad searches (e.g., Google), they are actively seeking a more efficient, allergen-first filtering mechanism.

  • Core Feature Value: The most important features identified were appealing photos, a clean interface, easy recipe saving, and an integrated shopping list.

Fresh Bell Peppers

Design Hypothesis & Core Features

Hypothesis

With prominent allergen indicators, easy recipe saving, and personalized recommendations, users with dietary restrictions can efficiently plan and prepare healthy meals that meet their needs and reduce preparation anxiety.

Core MVP Features

  • Core Innovation: The 'Not Included' Indicator - The system begins with a clear, icon-driven onboarding process to capture the user's exact excluded ingredients. The core feature is the prominent, inverse indicator: instead of requiring the user to search for what is present, the recipe clearly displays icons with a strike-through for the user's specific allergens, providing instant, verified assurance of safety and drastically lowering cognitive load.

  • Allergen-First Filtering: Users can effortlessly select categories and filters aligning with their dietary preferences to ensure safe browsing.

  • Personalized Recommendations: Recipe suggestions are tailored based on the user's specific allergy profile.

  • Recipe Management: Users can save recipes to revisit and add necessary ingredients directly to a centralized, convenient grocery list.

  • Task-Forward UI: The design bypasses the common "blog feel" by pushing the recipe and ingredients to the immediate foreground of the user experience.

Prototypes

Scroll to view more →

ReciFree Login
ReciFree Sign Up
ReciFree Allergen Info
ReciFree Home
ReciFree Recipe
ReciFree Filter

User Flow

ReciFree User Flow

Wireframes

Scroll to view more →

Low Fidelity Home
Low Fidelity Cart
Mid Fidelity Home
Mid Fidelity Cart

Style Guide

COLORS

Red

Orange

Green

White

Black

LOGO

ReciFree Logo

ICONS & DIETARY ICONS

ReciFree Icons
ReciFree Dietary Icons

TYPOGRAPHY

Lexend Deca

ReciFree Tablet Mockup

Conclusion

ReciFree emerged from my own frustrations navigating the world of food allergies and the noticeable gap in recipe resources that truly prioritize allergen awareness. To ensure the app effectively addressed the needs of this community, I conducted user research to understand common pain points and identify crucial missing features in existing platforms. This insight directly informed the development of ReciFree's core functionalities, including prominent allergen indicators and personalized recommendations.

The app's fun and inviting logo and overall design were crafted by me to create a welcoming and trustworthy experience for users seeking safe and delicious recipes. Moving forward, I'm eager to explore features like enhanced personalization based on specific allergy profiles and community-driven recipe sharing to further enhance the app's value and create a supportive cooking experience for everyone.