The goal was to create a user-friendly, visually cohesive web app that allows users to effortlessly navigate between the three restaurants while maintaining each brand’s unique identity and an engaging user experience.
Branding – Designed logos, typography, and layouts for a cohesive identity.
UX/UI Design – Created wireframes and designed all pages for optimal usability.
Front-End Development – Coded the app using SVG images for scalability and responsiveness.
Animations – Brought the interface to life with GSAP-powered SVG animations using JavaScript.
The project started with in-depth research on existing restaurant applications, examining market trends, usability factors, and industry standards. This research phase provided key insights into how users interact with restaurant apps, helping shape the overall approach.
Next, the focus shifted to branding the Family of Eateries, ensuring a cohesive visual identity across its three distinct restaurants: Ceviche, 5 Vines, and Crispy. Each brand needed to maintain its individuality while fitting seamlessly into the larger ecosystem. This involved designing logos, defining typography, and establishing a consistent aesthetic.
With branding in place, the project moved into wireframing and user flow planning in Figma. This stage was crucial for mapping out the structure and navigation, ensuring a smooth and intuitive user experience. Wireframes acted as the blueprint for the UI design, where colors, layouts, and interactive elements were carefully refined to align with both branding and usability best practices.
Once the design was finalized, development began, using HTML, CSS, and JavaScript to build a functional prototype of the app. SVG images were implemented for scalability and crisp visuals, while GSAP animations added subtle motion to enhance engagement. While the final product was not fully operational, it successfully demonstrated the app’s design, navigation, and interactive elements as a proof of concept.
The Family of Eateries project resulted in a fully designed and interactive web app prototype, allowing users to explore three distinct restaurants—Ceviche, 5 Vines, and Crispy. Through a seamless interface, users can navigate restaurant details, browse menus, and access reservation options. This prototype showcases a cohesive branding system, intuitive UI/UX design, and engaging GSAP animations, all developed using HTML, CSS, and JavaScript.
