What's Cooking?

Inspiration

The word “timeless” refers to something that transcends trends and stays with evolution and food stands as a crucial element to the theme. The inspiration came from the daily struggle of figuring out “What should I eat today?” , especially when juggling a busy college schedule or sticking to a specific diet. As someone who loves exploring different cuisines, we wanted a space where people could easily discover ingredient recipes based on what they have, what cuisines they like, or what they’re curious to try and integrate into their food palette.

What it does

The app makes it easy for users to discover, share, and enjoy recipes from around the world. Users can search for dishes based on ingredients you have, explore recipes from specific cuisines, and aim to add filter results to match your dietary preferences like vegan or gluten-free. They can also post their own recipes with images and step-by-step instructions, and rate others’ creations. It’s a friendly, open space for food lovers to connect, cook, and get inspired to share their own versions of recipes.

How we built it

We used Figma to design the prototype of the app, focusing on a clean, intuitive layout that makes browsing and posting recipes easy. The design includes key screens like the home feed, search page, recipe details, post submission, and user profiles. We used components and auto-layout to ensure consistency and responsiveness across screens. Each element from buttons to image cards was designed to reflect a friendly and modern cooking community. The prototype helped us visualize user flow, test features like filters and search, and plan the development process effectively.

Challenges we ran into

1)While designing the prototype in Figma, we faced a few challenges: Maintaining Consistency: Ensuring a consistent design language (colors, fonts, button styles) across multiple screens required careful planning. Using Figma's components and styles helped streamline this process.

2)Responsive Design: Designing for different screen sizes and ensuring the layout adapted well on both mobile and desktop required creating multiple frames and adjusting the elements for different breakpoints.

3)Complex Interactions: Prototyping interactions like hover effects, modal windows, and dynamic content in Figma wasn’t always straightforward. We used Figma’s interactive components and transitions to make the prototype feel more realistic.

4)Collaborative Feedback: Gathering and implementing feedback from the team in real-time sometimes creates version conflicts. Figma's collaboration tools helped manage this, but we had to be careful with file organization.

5)Visualizing Data: Showing things like recipe ratings, reviews, and user interactions in a visually clean way was challenging. We iterated several times to find the right balance between functionality and clarity.

Despite these hurdles, Figma’s tools allowed us to iterate quickly and collaborate effectively, ultimately helping us create a smooth and engaging prototype.

Accomplishments that we're proud of

We successfully created our first working Figma prototype for the app, laying the foundation for our user interface and user experience. Despite being new to Figma, we took the initiative to explore its features, experiment with tools, and build a design we're proud of. We worked together effectively, learning how to collaborate in real-time on Figma and give each other constructive feedback. Throughout the process, we refined our design based on peer input and usability considerations, showing our growth and adaptability. For many of us, this was our first experience with design tools, and we embraced the challenge with curiosity and determination.

What we learned

We learned how to design and implement new features in figma. We gained a solid foundation in essential design concepts such as layout, alignment, spacing, visual hierarchy, and color theory to make our app both functional and visually appealing. We learned how to incorporate interactive elements like clickable buttons, hover effects, and page transitions, scrollable features, and connectivity between pages in Figma to simulate a real app experience. Working together on the same design file taught us how to communicate ideas clearly, divide tasks efficiently, and give constructive feedback. We started thinking more from the user’s perspective , focusing on intuitive navigation, accessibility, and ease of use in our interface. From auto-layouts to component creation and reusable styles, we explored several advanced features in Figma that boosted our productivity. We learned how to visually communicate our app's purpose, structure, and user flow in a way that tells a compelling story.

What's next for Food Is Fun

We are planning to add new features for the app to increase connectivity and improve user engagement. Incorporation of monthly challenges such as "Sweet Treats from Latin America" or "Spicy Street Foods of Asia" can get more people to hop in on the trends and participate more actively on the apps increasing user engagement and exploration. We are also planning to implement an AI tool that detects ingredients or recipes from images and translates or explains them in the user's preferred language. This would help in creating an inclusive environment encouraging people from all over the world to collaborate on the app. These challenges will create fun trends, build community interaction, and keep the app dynamic and fresh. We’ll also focus on improving social features, like following users, sharing recipes directly with friends, and personalized recipe recommendations to make the app even more engaging for everyone.

Built With

• figma