Pine
The Project
Pine is a web application designed to simplify dining decisions by helping users find restaurants and discover recipes based on their preferences. Pine eliminates the frustration of meal planning, offering personalized recommendations for both dining out and cooking at home.
Year
2024
Tools
Roles
Lead Designer
Lead Developer
Project Manager
01. Problem & Persona
56.8% of post secondary students struggle with meal planning—whether it’s deciding where to eat or finding recipes that fit their dietary preferences and budget. Pine solves this by offering a streamlined web app that curates both restaurant suggestions and recipe recommendations based on user preferences.
The ideal user is a busy young professional or student who values convenience and health but Pine is made for anyone who's hungry.
Alex Zhang
Age: 21
Education: Nutrition Science
Hobbies: Cooking, Blogging
Occupation: Student and Blogger
Location: Austin, Texas
Alex Zhang is an energetic and health-conscious Gen Z food enthusiast who runs a part-time blog featuring healthy recipes and restaurant reviews. As a nutrition science major, Alex has a strong interest in the relationship between food and well-being. Despite being red/green colorblind, Alex has a vibrant personality and uses his unique perspective to create content that is accessible to all.
Must Do
- Use clear and contrasting colors in food presentation and app design.
- Ensure recipes and restaurant menus are easy to read and understand.
Must Never
- Overlook accessibility features in the app, especially for color vision deficiencies.
- Compromise on the nutrition of the dishes featured.
Technology
- Instagram and TikTok: 5 years used
- Notion: 3 years used
- Adobe Premiere Pro: 2 years used
Apps and Software
User Experiences / Goals
- Find Healthy Options: He prioritizes finding dishes that are both delicious and good for you.
- Accessibility: The apps he uses must cater to his colorblindness, allowing him to use them without difficulty.
- Social Sharing: He wants to be able to share his culinary discoveries with his audience easily.
- Community: He wants to interact with other food lovers.
Devices and Platforms
- Smartphone - iOS (his everyday device)
- Laptop - Windows (his workhorse)
Personality
References + Influences
- Gordon Ramsay: Admires his passion for culinary arts and dedication.
- Adam Ragusea: Influential YouTuber who advocates for accessibility and inclusivity while focusing on the science behind cooking.
Quote
"Food is not just about taste, it’s about the experience. An inclusive app helps everyone enjoy the beauty of food, regardless of dietary needs or physical challenges."
02. User Flow
After the ideal user was established, the flow was designed. The goal was to intuitively guide users through each phase in as few steps as possible.
03. Lo-fi Development
Low-fidelity wireframes were created in Figma, mapping out key interactions such as onboarding, personalized meal selection, and restaurant discovery.
04. Branding & Style Guide
Pine's branding is designed to be inclusive and inviting with a pine-tree mascot and earth-tone colors, while the Oswald and Poppins typefaces ensure readability with a bit of personality. A custom Lottie animation of the Pine mascot flipping a pancake adds personality and engagement to loading screens.
Logo & Animation
Fonts
Oswald – Heading
Poppins – Body
Colors
Charcoal
#2B3F47
rgb(43, 63, 71)
hsl(200, 25, 22)
Mint Cream
#EFFFF8
rgb(239, 255, 248)
hsl(150, 100, 97)
Mint Green
#C2EEE1
rgb(194, 238, 225)
hsl(164, 56, 85)
Myrtle Green
#46757C
rgb(70, 117, 124)
hsl(188, 27, 38)
05. Hi-fi Development
High-fidelity mockups were created to visualize the final product, showcasing the app’s user interface, interactive elements, and overall aesthetic. The design was refined through user testing to ensure a seamless experience.
06. User Testing
User testing was conducted to evaluate Pine’s navigation, clarity, and overall user experience. Participants completed task-based scenarios, revealing key areas for improvement, such as clearer ingredient labeling, enhanced discoverability of recipe steps, and improved button placement. Feedback led to refinements in UI elements, terminology, and layout adjustments to ensure a more intuitive and seamless experience.
Main Functionality
Pine offers two core functions:
Restaurant Finder – Users select a craving (Asian, Western, fast food, desserts, etc.), and Pine suggests nearby restaurants.
Recipe Finder – Users can browse recipes, view full ingredient lists, and follow step-by-step instructions.
Development & Integration
The app is powered by Spoonacular API for meal recommendations and Google Maps API for interactive restaurant listings. A custom-built database organizes dish data, and a graph component visualizes nutritional information in real-time.
Core Features
Personalized Quiz – Gathers user preferences for tailored recommendations.
Restaurant Map (WOW Feature) – Displays interactive restaurant cards using Google Maps API.
Recipe & Shopping List – Offers step-by-step instructions and an ingredient list.
Conclusion
Pine simplifies meal planning, ensuring users can quickly discover dining options or cook meals tailored to their needs. This project included a balance of UI/UX design, branding, and technical development, making it an accessible and friendly user-centric application.
07. Lessons Learned
Developing Pine highlighted the importance of user-centered design and iterative testing. User feedback emphasized the need for clear labeling, intuitive navigation, and accessibility considerations. Refining UI elements based on real-world interactions improved the overall experience, reinforcing the value of continuous testing and adaptation in product development.