Project Details

Project Details

Manage party invites and share event information

Manage party invites and share event information

. solunar . studio . web . agency

Tàtàșé - African Recipes Sharing Community

Tàtàșé - African Recipes Sharing Community

The goal of this website is to help people cook better, waste less, and live more through a vibrant online food community.

The Brief

Build a food community platform from the ground up — recipe sharing, food discussions, a personal cookbook, and a gamified engagement system — centred on African cuisine, with room to grow into a global food community.

The Work

Solunar Studio led design, product strategy, and full-stack development for Tàtàșé using Framer for the frontend and Supabase for the backend, with AI-assisted development accelerating build speed without compromising on craft.

Product & Design

  • Defined the core feature set: recipes, discussions, profiles, cookbook, search, gamification

  • Built a custom design system — blush and coral palette, Recoleta and Be Vietnam Pro typography

  • Designed every user flow from onboarding through content creation and community engagement

Engineering

  • Full authentication system with password recovery and social login

  • Recipe and discussion CRUD with likes, comments, saves, and sharing

  • A real-time points and badge system (Pebble → Diamond) powered by custom Supabase database triggers

  • Row-level security across the entire database, with public/private profile controls

  • Search across recipes and discussions, paginated for scale

Content

  • 80+ original recipes written and seeded across Nigeria and 35+ African countries to give the platform real cultural depth from day one

The Outcome

Tàtàșé launched in soft beta with a fully functioning product — tested against a 130+ case test plan, documented end-to-end, and ready for its first wave of real users and contributing food creators.

Tools

Framer · Supabase · PostgreSQL · TypeScript

Solunar Studio — design and development for ideas that need a real foundation.

Project details

Client

Tàtàșé

Industry

Weddings & Events

Location

Lagos, Nigeria

End Date

Project details

Client

Tàtàșé

Industry

Weddings & Events

Location

Lagos, Nigeria

End Date

Our Process

01
Research & Analysis

This includes conducting user interviews and surveys, as well as analyzing usage data or in-app analytics to identify patterns and bottlenecks. Competitor offerings and industry trends are also reviewed to reveal best practices, feature gaps, and opportunities for differentiation.

02
Information Architecture

Insights from research inform the structure of the experience. Core user journeys are mapped out, key tasks are prioritized, and content is organized into clear sections and flows. The goal is to reduce cognitive load, make navigation intuitive, and ensure that users can quickly find and complete their most important actions.

03
Wireframing & Prototyping

The information architecture then translates into low-fidelity wireframes that explore different layout and interaction options. These wireframes evolve into interactive prototypes that simulate real tasks and scenarios.

04
Usability Testing

Usability testing involves observing real users as they attempt to complete key tasks using the prototypes. Their behaviors, questions, and mistakes reveal friction points and areas of confusion. Feedback from these sessions leads to improvements and a more seamless and intuitive experience.

05
Visual Design & Style Guide

Typography, color, spacing, iconography, and components are defined in a style guide or design system. This ensures consistency across screens and makes it easier for teams to extend and maintain the experience over time.

01
Research & Analysis

This includes conducting user interviews and surveys, as well as analyzing usage data or in-app analytics to identify patterns and bottlenecks. Competitor offerings and industry trends are also reviewed to reveal best practices, feature gaps, and opportunities for differentiation.

02
Information Architecture

Insights from research inform the structure of the experience. Core user journeys are mapped out, key tasks are prioritized, and content is organized into clear sections and flows. The goal is to reduce cognitive load, make navigation intuitive, and ensure that users can quickly find and complete their most important actions.

03
Wireframing & Prototyping

The information architecture then translates into low-fidelity wireframes that explore different layout and interaction options. These wireframes evolve into interactive prototypes that simulate real tasks and scenarios.

04
Usability Testing

Usability testing involves observing real users as they attempt to complete key tasks using the prototypes. Their behaviors, questions, and mistakes reveal friction points and areas of confusion. Feedback from these sessions leads to improvements and a more seamless and intuitive experience.

05
Visual Design & Style Guide

Typography, color, spacing, iconography, and components are defined in a style guide or design system. This ensures consistency across screens and makes it easier for teams to extend and maintain the experience over time.

Tools

Gallery

Ready to turn clicks into customers?

We are one call away to always serve you modern, unique and converting solutions.

Ready to turn clicks into customers?

We are one call away to always serve you modern, unique and converting solutions.

Ready to turn clicks into customers?

We are one call away to always serve you modern, unique and converting solutions.

Create a free website with Framer, the website builder loved by startups, designers and agencies.