All work

Academic

Bandoneón Initiative

A cooking app for a social project that teaches culinary skills on the road, taken from its design system to a tested prototype.

Role
Lead designer
Duration
6 months
2022
Focus
UX/UI
Design systems
Case study
Skills & tools
Figma
Quantitative research
Prototyping
Design system

  1. Discover

    Briefing · Survey · Quantitative research

  2. Define

    Personas · SMART requirements · AI

  3. Develop

    Wireframes · Design system · Prototype

  4. Delivery

    Final UI · Usability test

Methodology: Double Diamond, British Design Council, 2005

01 discover

The project began with a direct briefing from the creator of the Bandoneón Initiative, a social project focused on itinerant culinary education for people in vulnerable situations. The mission was to transform this in-person work into an accessible, practical and engaging digital product.

To understand who the users would be, we conducted a quantitative survey with the target audience. The data revealed behaviors and preferences that challenged the initial assumptions.

  • 62%prefer recipes with short videos and subtitles
  • 64%want to learn more than the basics

The apps respondents used most were social networks, which pointed to the need for some interaction and dynamism. With this, it was clear that the content needed to be fast, visual and progressive.

02 define

Personas

With the research data, we built three personas that represented the distinct profiles identified. The challenge was to design for all of them without compromising the experience of any. They are:

  • Pedro, 20, streamer

    Wants basic kitchen autonomy and a healthier eating routine. Consumes everything via social media, has limited time and prefers quick, visual content.

  • Anna, 24, journalism student

    Intense routine. Needs to find recipes quickly, practical for everyday use, prepared on weekends. Wants complete descriptions, without interruptions.

  • Jackeline, 41, hotel manager

    Cooks for the family in large quantities, with a focus on health. Wants to involve the children in the process and avoid waste.

Requirements · SMART criteria

To consolidate the findings and avoid ambiguity in the development stage, the requirements were organized into four dimensions and evaluated against SMART criteria, making sure each product decision was Specific, Measurable, Achievable, Relevant and Time-bound.

  • Product goals

    • Teach culinary techniques and terms
    • Encourage healthy eating and waste reduction
    • Organize recipes and chef content
    • Stimulate culinary creativity

  • User’s needs

    • Learn to cook with progression
    • Practical recipes for everyday life
    • Follow a healthy diet
    • Have autonomy in the kitchen
    • Follow the initiative’s itinerary

  • Content

    • Recipes with text and illustrative images
    • Personalized user profile
    • Project presentation and updates
    • User feedback about their results

  • Functional specifications

    • Save recipes in personalized folders
    • Filter by difficulty (easy → difficult)
    • Mark ingredients to buy
    • Recipes with reader, sounds, timer and images

Information architecture

With the requirements defined, we mapped the complete structure of the app, from onboarding to the profile area, going through the recipe flows, filtering, shopping list and social interaction.

fig. 01 · Information architecture: complete structure of the Bandoneón app.

03 develop

With the architecture defined, the process began in low fidelity, drawing the critical flows on paper before any visual decision. This stage was essential to validate navigation without the aesthetic weight of the UI.

Wireframes

Paper wireframes: exploring the flows before any visual decision.

The wireframes covered the priority flows: account creation, home with the recipe of the day, navigation by categories, the individual recipe screen and the notifications area. The bottom tab navigation with 4 sections (Home, Recipes, News, Profile) was defined at this stage and kept until the final version.

Six paper wireframes: sign-up, home with the recipe of the day, notifications, recipe categories, and a recipe screen with ingredients and comments.

Design system

The design system was built in Figma from the Bandoneón Initiative’s visual identity: green and wine as primary colors, Nunito as the main typeface, and rounded shapes. Medium-stroke icons without fill; rounded cards and buttons; reusable components for recipes, categories, notifications and profile.

fig. 02 · Design system: palette, typography and components of the Bandoneón app.

04 delivery

With the design system established, the final screens were developed by applying each component decision and color token consistently. The result was a navigable prototype, tested with classmates, professors and the initiative’s creator himself.

Final UI

A recipe in step-by-step mode: ingredients, numbered steps with illustrations, a timer, the finished dish and comments.
Login, interest-based onboarding, notifications, news, home with the recipe of the day, categories and a category list.
The recipe with checkable ingredients, the profile, saved recipes in folders, liked recipes and the shopping list.

Usability test

The prototype was tested with classmates, professors and the creator of the Bandoneón Initiative. The most praised points:

  1. The step-by-step mode with a timer answers the preference for guided content found in the research
  2. Organization by categories with difficulty filters serves both beginners and those who want to go further
  3. Onboarding by interest personalizes the experience from the first visit

The creator of the initiative recognized in the product a faithful representation of the project’s mission.

05 outcome

  • End to endResearch → personas → AI → wireframes → UI → DS → prototype → test
  • Real clientBriefing and final validation with the founder of the Bandoneón Initiative
  • Scalable systemDesign system with typography, palette and components ready for the product to evolve

This was the project where I learned that UX begins long before Figma is opened. The quality of the final product was directly proportional to the quality of the questions asked at the beginning: in the research, in the briefing, in defining the requirements.

Each screen existed because there was a real need behind it.

Next projectBar Tabs System