Food Stall Website
This project is a dedicated food stall website designed for SUMO Japanese Food, an established vendor located at Nanyang Polytechnic known for its authentic and affordable Japanese cuisine.
Tools Used:
The Goal:
The primary goal of this project was to develop a digital platform for SUMO Japanese Food that streamlines the ordering process and increases accessibility for their customers (students). By digitizing the menu which features authentic Japanese the website aims to reduce waiting times and provide a modern, efficient way for customers to engage with the stall. Additionally, the project sought to strengthen the brand's identity by showcasing its decade long history and award winning specialties, ensuring that essential information such as operating hours and contact details are easily accessible to both new and regular customers.
Ideation:
My thinking began by identifying the core challenges faced by a popular campus stall, long queues during peak hours and a lack of a central platform for menu updates. I conceptualized a solution that would serve as a digital storefront, focusing on visuals and User Convenience. The goal was to translate the physical experience of visiting the stall such as seeing the signature into a digital format that encourages immediate action through an "Order Now" call-to-action. I prioritized a clean navigation structure (Home, Menu, Order, About) to ensure that busy students could find pricing and food details within seconds and found inspiration from pinrest to design the basics of the website.
Solution
The solution is a responsive web platform that digitizes the SUMO Japanese Food stall, streamlining the ordering process for the campus community. It integrates a visual digital menu with a dedicated ordering portal, allowing customers to browse authentic Japanese dishes and place orders efficiently. This digital storefront modernizes the business, providing a central hub for menu exploration, membership management, and essential operational details through these key features: 1 )Interactive Digital Menu: Categorizes a wide range of authentic dishes including Donburi, Ramen, Udon, and Bento sets for easy navigation. 2) Online Ordering System: Features a dedicated "Order Now" functionality to streamline the purchasing process and reduce physical queue times. 3) Detailed About Section: Highlights the stall owner’s story and the history of their award-winning Kaki Tamago to build brand trust. 4) Operational Dashboard: Provides essential contact information, location markers, and updated weekly operating hours for customer convenience.
Process
The Challenge:
The most significant challenge during development was ensuring the website remained fully responsive across various devices, from desktop monitors to mobile phones. Creating a layout that looked appetizing on a large screen while remaining functional on the mobile phone for students ordering on the go required extensive testing with CSS Media Queries and Flexbox. Additionally, I had to balance high resolution food imagery essential for showcasing the Kaki Tamago and Bento sets with fast loading speeds. Optimizing these assets was crucial to ensure that users connected to the slower school's Wi-Fi would not experience lag or frustration when trying to access the menu or order portal.
The Result
The final result is a professional, functional digital storefront that has successfully modernized the SUMO Japanese Food brand, making their menu and ordering system accessible to the entire campus 24/7. Through this project, I gained deep technical proficiency in Front End Development, particularly in structuring complex data like food menus using semantic HTML and styling them with advanced CSS techniques. I also learned the importance of User Experience (UX) Design, realizing that clear navigation and a prominent call to action are just as important as the code itself. Most importantly, I discovered how to manage a digital project from ideation to deployment, gaining valuable skills in asset optimization and brand storytelling that I can apply to future professional web builds.
