Salu-Salo is a project I created that aims to serve as a comprehensive platform that connects Filipinos, both within the Philippines and abroad, to their rich culinary heritage and cultural roots. The website is designed to be a go-to resource for individuals seeking authentic Filipino recipes, cooking techniques, and food traditions, with the ultimate goal of fostering a sense of cultural connection and preserving the flavors and traditions of Philippine's culinary heritage.
• Research
• Ideation
• Design
• Prototype test
• Re-design
• Conclusion
• Recommendations
Due to history, migration, and socio-economic events, the Filipino identity has warped over the decades. This has resulted in a cultural disconnect and diaspora of Filipinos, especially those who grew up in different countries. This is supplemented with the fact that Filipino culture itself is not exactly identifiable as years of colonization and the emergence of the internet has blended most young Filipino's identity with other cultures and influences. The cultural disconnect presents challenges for most young Filipinos, as they navigate their life with issues of identity, belonging, and community. Thus, there is a need to create a space where all Filipinos, regardless whether or not they are from the mainland, to connect with each other and the nuanced culture of the Philippines.
UX/ UI Designer and
Graphic Designer
The solution I proposed is the way to most people's heart, food. Specifically, I wanted to create a recipe site that archives Filipino recipes, educate people on the history of Filipino food, and build a sense of community through the rich flavors of Filipino food.
In preparation for the project, I engaged in several crucial steps to ensure a comprehensive understanding of the application's design and subject matter. This involved identifying key stakeholders, defining the scope of the application, and conducting an extensive review of relevant literature. During this process, I delved into multiple research papers that explored the physical and mental effects of acne vulgaris and acne rosacea. Additionally, I examined the current circumstances surrounding the reluctance of Filipinos to seek dermatological appointments, as well as the prevalence of self-diagnosis and self-treatment practices for acne. This investigation also encompassed evaluating the effectiveness of existing interventions available to Filipinos. The objective of studying related projects and the subject matter was to identify the gaps and unmet needs that the proposed "Second Skin" application could address for its primary stakeholders.
• Filipinos aged 15-35
• Part of the ""Subtle Asian Traits" community
• Ethnically Filipino with diverse cultural experiences
• Active participants in the "Subtle Asian Traits"
• Strong need to identify with Filipino culture
• Proficient in social media platforms
• Often shares stories and looks for communities on online platforms
• Craves for content that they can relate to culturally
• Wants to learn Filipino recipes
• Are majors "foodies"" and consume food content
Short-term goal:
Give primary stakeholders convenient access to Filipino recipes and encourage Filipinos to cook and learn Filipino food.
Mid-term goal:
Educate primary stakeholders to learn about Filipino history through food.
Ultimate goal:
To foster an active online Filipino community dedicated to cooking and culture.
Fresh flavors and diverse dishes are waiting for you! Salu-Salo's prototype can be accessed through Figma. Follow the button to explore Salu-Salo's features and pages. Be sure to explore all interactions and pages available in the file.
The ideation of Salu-Salo involves the conceptualization and planning of an online platform that aims to connect Filipinos to their rich culinary culture. The goal is for the site would serve as a hub for sharing, discovering, and preserving traditional Filipino recipes, as well as promoting a sense of cultural identity and community among Filipinos, both within the Philippines and in the diaspora. In designing the site, consideration should be given to its user's tastes and experiences. Therefore, I studied my main stakeholders and reviewed basic UX interfaces to conceptualize the website.
For the stakeholers, the most important feature for this application are the recipe pages. I already knew that a sorting system of recipes through categories such as main dishes, desserts, etc. was needed. Other features and the visuals themselves were derived from user interviews and studies of my primary stakeholders, which were members of the Facebook group, "Subtle Asian Traits (A group dedicated to the celebration of Asian cultures and humor).
After initial idea sketches were made I was tasked to create mid-fi prototypes for the website. This was done to get a more accurate gist of what the website's UI will look like. Using Figma' shape, frame, and text tools, I was able to create sample components and layout the UI of the different pages and navigation menus for the application. Moreover, navigation menus and certain buttons were given interactions to simulate user flow. The wireframe was then sent to users to get feedback to improve the high-fidelity prototype.
The design style direction of Salu-Salo is all about the warm feeling you get when you eat food with your Filipino family. Thus, it was appropriate that I used Filipino graphic design elements like ornamental text and design concepts centered around appetite like warm colors. It was also important for me to create an interface that was visually interesting to look at yet fit with today's design standards. Moreover, I wanted the site to embrace aesthetics of Filipino education. Therefore, I chose a hybrid of Filipino restaurant graphic design and Filipino museum graphic design.
A style guide was created to pitch the visuals and components I wanted the website to portray. For a educational site, I needed to ensure that the visual language would be digestible and pleasing to the stakeholders. My goal for this guide was to create an interface that envokes a feeling of warmth but also keeps it professional enough to educate.
Following the style guide created during pre-production, the required components are created in Figma to create a high-fidelity prototype. This prototype is available to access here.
In conclusion, designing a recipe site for Filipino recipes presents an exciting opportunity to connect Filipinos of all ages and locations to their culture through the joy of food. The site should aim to celebrate the impactful culinary heritage of the Philippines while providing an engaging experience. It is also significant that this site brings people together much like food.
To enhance the UX design of the recipe site, next iterations of this project should focus on the following:
• Extensive user testing: The project had minimal testing, focusing on the features and visuals that interviewed users wanted to see. Thus, future iterations of this project should have users test the navigation of the site as well as interactions.
• Fully-functioning prototype: A fully coded prototype that users can test and simulate their natural/ weekly actions would give more substantial and accurate data of what the website needs.
• App version: An app version of the site and it's functionality would also be helpful for users and create a new design system for the application. It also gives a chance to collect data about how stakeholders use a recipe application to cook and learn.
• Meal-plan integration: An extra feature the site could have is a way to build meal-plans or integrate with meal-planning applications for specific diets.
By incorporating these recommendations, the UX design of Salu-Salo can create a delightful and immersive experience for all Filipinos, fostering a deeper connection to Filipino culture and community through food.
The following are UX/UI design case studies and visual designs I have developed over the years. Check them out below to see related projects.