Final Report
The Global Palate Explorers
Aditi Allady
Yaswanth Reddy Ambati
Sai Madhavi Gujju
Overview of the Project:
The Global Palate Explorers project aims to create a vibrant online platform for cultural
exchange and culinary exploration. Focusing on fostering connections through food, our
goal is to provide a welcoming space where international students, food enthusiasts,
and home cooks alike can discover, share, and celebrate diverse culinary traditions
from around the world. The project scope encompasses a range of user tasks, including
searching for recipes, exploring curated collections, sharing personal recipes, and
contributing to the platform's growth.
The platform's key features include a comprehensive recipe repository, intuitive search
and filter options, and a user-friendly interface designed to streamline the recipe
discovery process. Users can navigate the platform easily, find recipes tailored to their
preferences, and engage with a vibrant community of fellow food enthusiasts.
Furthermore, users can contribute their recipes to the platform, allowing them to share
their culinary creations with others. The platform's committee will review each submitted
recipe to ensure quality and authenticity before being posted on the website for others
to enjoy.
While the project faces constraints in terms of time, resources, and managing a large
volume of recipe data in the database, given the diverse range of cuisines and recipes
that will be available on the platform, our team is committed to delivering a user-friendly
website that promotes cultural understanding, culinary creativity, and a sense of global
community.
Mid-Fi prototype enhancements and modification:
Feedback from the heuristic evaluation:
Problem 1 : Consistency
Users found the functionality of the tabs near the top of the page confusing.
Color Palette: The color palette didn't work well, which may have contributed to the
confusion regarding the tabs' functionality. Too much clipart didn’t match the website
design.
UI Element Size: The UI elements were reported to be too large, which could have
contributed to the prototype's cluttered appearance.
Actions Taken:
To address the feedback regarding the confusing functionality of the tabs near the top
of the page, several strategies were implemented to enhance clarity and usability. Firstly,
the tab labels were reviewed and refined to ensure they accurately represented the
content or function of each section. This involved choosing descriptive and intuitive
labels that conveyed what users could expect when clicking each tab. Additionally,
efforts were made to visually distinguish the tabs from each other and other navigation
elements on the page.
Color Palette: We refined the color palette to ensure better contrast and visual hierarchy.
Selected colors that complement each other and are visually appealing, making it easier
for users to distinguish between different elements on the page.
UI Element Size: Retained the original size of UI elements, as changing the size could
affect the overall layout and usability of the prototype.
Problem 2: Not much help with improper user behavior
Users are not prompted with an error message when they click on something
improperly. It should be clear to the user what they should do in the case of improper
behavior.
Actions Taken:
While the majority of user interactions on the website primarily involved navigation and
searching for recipes, additional support was recognized as needed, especially when
adding a new recipe.
To address this concern, the "Add Your Own" functionality was carefully reviewed and
modified to incorporate clear user instructions and feedback. For instance, dropdown
menus were implemented to select cuisine and ingredients, providing users with
predefined options and minimizing the possibility of input errors. Similarly, other fields in
the recipe submission form were designed to be straightforward and user-friendly,
guiding users through entering relevant information. Users are prompted to enter
numerical values for time-related fields, and the submit button remains inactive until all
required fields are properly filled out. This proactive approach helps prevent incomplete
or erroneous submissions, reducing the likelihood of improper user behavior and
streamlining the recipe submission process.
Problem 3: No documentation
There is no help or documentation, but since the user interface is quite self-explanatory,
it’s not that severe. A documentation logo (like a question mark or help) should pop up,
maybe in a navbar or home screen.
Actions Taken:
To address the lack of documentation and to let users know who we are, an "About"
page was added to the website, providing users with essential information about the
platform. In addition, links to the platform's social media profiles were incorporated into
the website's footer, allowing users to connect with the platform across various social
channels for updates, community engagement, and additional support.
Refined design of Mid-Fi prototype :
https://www.figma.com/file/ZMDpJBVOMuj2qG30dtzqep/HCI-TEAM1?type=design&no
de-id=413-48&mode=design&t=EDdvlX5FeiMRanMU-0
Hi-Fi Prototype Development:
GitHub Link: https://github.com/YaswanthReddy143/Global-Palate-Explores/tree/main
Prototype Features:
Home Page:
Our homepage serves as a central hub for users to discover recipes. It showcases
various categories like Meal Prep, Quick & Easy, and Add Your Own. Each category is
represented visually with images and accompanied by descriptive text. Clicking on any
category directs users to a curated list of recipes within that category.
Recipe Detail Page:
For users seeking detailed information about a particular recipe, we have dedicated
recipe detail pages. These pages provide a comprehensive view of each recipe,
including its name, cuisine, cooking time, total time, serving size, ingredients,
instructions, and serving suggestions. Users can easily follow along with the recipe,
aided by clear instructions and visuals.
Recipe List:
Our platform allows users to search for recipes using a convenient search bar. As they
type, the recipe list dynamically updates to display relevant results. Each recipe in the
list is presented with its name, description, and a link to view the full recipe details. This
feature enables users to quickly find recipes of interest.
Cuisine and Ingredients Pages:
To cater to diverse tastes and preferences, we offer specialized pages for exploring
recipes based on specific cuisines or ingredients. Users can dive into their favorite
cuisines or ingredients and discover a curated selection of recipes tailored to their
interests. Each recipe card provides essential details like name, image, and preparation
time for easy browsing.
Dropdown Menus:
To streamline the selection process, we provide convenient dropdown menus for
cuisines and ingredients. Users can effortlessly choose from a list of available options,
enhancing their browsing experience. These dropdown menus simplify the exploration
of recipes by offering a compact and intuitive selection interface.
Navigation:
To ensure smooth navigation, we have a comprehensive menu system. Users can easily
access different sections such as the homepage, about page, recipe lists, and the recipe
submission form. Additionally, quick links allow users to jump directly to specific recipe
categories like Meal Prep, Quick & Easy, or Add Your Own.
Recipe Submission Form:
Our platform offers a feature where users can contribute their own recipes. They simply
fill out a form with details like the recipe name, cuisine, main ingredients, total time, and
instructions. After submission, their recipe joins our collection for others to explore.
Challenges Faced and their Solutions:
Routing Setup:
Challenge: Routing setup using React Router requires careful configuration to ensure
each route directs to the correct component.
Solution: Each route in the App component is set up with the Route component from
react-router-dom, specifying the path and corresponding component to render.
Data Filtering:
Challenge: Filtering recipes based on categories, cuisines, or ingredients requires
efficient data manipulation.
Solution: Components like Cuisine and Ingredients filter recipes based on selected
categories. This is achieved by filtering the recipe data using JavaScript's filter method
and updating the component state accordingly.
Styling Integration:
Challenge: Integrating styles with React components while ensuring maintainability and
scalability.
Solution: CSS files are imported into respective components, ensuring encapsulation of
styles. CSS modules or preprocessors can also be used for better organization and
scoped styling.
Local Storage Integration:
Challenge: Storing and retrieving data from local storage for persistence across
sessions.
Solution: The AddYourRecipe component utilizes localStorage to store submitted
recipes locally, ensuring that they persist even if the page is refreshed. This is achieved
using React's "useEffect" hook to manage side effects.
Image Handling:
Challenge: Handling image assets and ensuring they are displayed correctly within
components.
Solution: Images are imported into components and rendered using the img tag with
appropriate src attributes. Paths to images are managed carefully to ensure they are
displayed correctly.
In the end, by tackling each challenge creatively and efficiently, we crafted a recipe
application that feels inviting and just plain delicious to use.
Reflection:
Global Palate Explorers Design and Features
The platform's comprehensive recipe repository and intuitive search functionality were
warmly received, providing users an accessible and enjoyable experience. Flexible
filtering options allow users to search by cuisine, ingredient, and other parameters,
enhancing exploration and discovery. The platform's community-oriented features, such
as sharing personal recipes and engaging with other users, also contributed to a vibrant
and inclusive atmosphere. The commitment to a user-friendly interface and
community-driven interaction proved instrumental in fostering connections and cultural
exchange.
Lessons That We Learned
The design process illuminated several important lessons. The inconsistency in tab
functionality highlighted the importance of maintaining a clear and intuitive design,
underscoring the need for thorough testing and iterative refinement. Similarly, the lack
of error handling for improper user behavior revealed the significance of providing clear
guidance and feedback to users. This experience reinforced the critical role of proactive
user support and led to user interface and interaction design adjustments. Furthermore,
the absence of documentation, though partially mitigated by the platform's simplicity,
demonstrated the need for additional user support features to enhance the overall user
experience.
Areas for Future Improvement On Our Platform
Looking ahead, several key areas for improvement emerged. A more refined user
interface, with reduced clutter and improved visual hierarchy, could significantly
enhance the platform's usability. Comprehensive error handling and clear guidance for
user interactions would help minimize confusion and improve user satisfaction.
Furthermore, expanding community features to integrate more user-generated content
and encourage engagement could strengthen the platform's sense of community.
Additional documentation, such as FAQs and tutorials, would provide users with
essential support and guidance, ensuring a seamless experience as they explore and
contribute to the platform.
Conclusion:
The Global Palate Explorers project has achieved its goal of creating a dynamic online
platform for culinary exploration and cultural exchange. With a robust recipe repository,
intuitive user interface, and community-driven features, the project allows connections
among food enthusiasts while promoting cross-cultural understanding. Although there
are areas for improvement, such as enhancing user guidance and refining the visual
design, the project's success underscores its potential for ongoing growth. By
prioritizing user feedback, iterative design, and active community engagement, the
platform is well-positioned to become a beloved resource for culinary enthusiasts
across the globe, encouraging further exploration and sharing of diverse culinary
traditions.
