TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES

College of Computer Studies

S.Y. 2024-2025 I 1ST SEMESTER

“Optimizing Online Reservation Systems for

Japanese-Style Restaurant (Miyabi Kaizen):
Integrating Technology with Functional and
Aesthetic Design”

Members:
Arcilla, Psacci Zoe Nicola D.
Bontilao, Arwin
Castro, Rafaella Feroza P.
Gonzaga, Fernando
Lopez, Denise Nicole T.
Padua, Cristine Joy D.

Course’s Professor:
Ms. Khae Lee

1
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

I. INTRODUCTION

In recent years, the dining industry has experienced profound changes,

particularly in how customers engage with restaurants, driven largely by advancements in
technology and shifting consumer preferences. Japanese-style restaurants, renowned for
their rich culinary traditions and deep cultural significance, are increasingly adopting
online reservation systems to enhance customer experiences and streamline operations.
This research focuses on optimizing these systems by integrating technology with both
functional and aesthetic design elements that reflect the essence of Japanese cuisine.

A well-designed website acts as an extension of the dining experience,

creating a seamless connection between the physical and digital realms. Research highlights
the importance of integrating Japanese principles of design—such as simplicity, harmony,
and balance—into digital spaces (Horng & Hsu, 2020). For a restaurant like Miyabi
Kaizen, this could mean using clean layouts, subtle color palettes inspired by nature, and
traditional motifs. These elements work together to create a calming and inviting
atmosphere that resonates with customers even before they enter the restaurant.

Functionality, however, is just as important as appearance. An intuitive

interface, mobile compatibility, and fast load times are key features of an effective online
reservation system (Chou & Chuang, 2018). Features like real-time availability updates
and secure payment gateways add convenience while fostering trust. Additionally,
incorporating predictive technologies that analyze customer behavior can personalize the
booking experience, such as suggesting preferred time slots or dishes based on past
reservations (Chou & Chuang, 2018).

Enhancing the user experience further involves multimedia integration.

High-quality photos of meticulously plated dishes, virtual tours of the dining area, and
videos showcasing the preparation of Kaizen meals can captivate and inform potential
guests. These elements are not just decorative; they provide a sensory preview of the

2
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

restaurant’s offerings, making the website more engaging and memorable (Horng & Hsu,
2020). However, careful balance is needed to ensure the website remains user-friendly and
doesn’t overwhelm visitors with excessive information.

In conclusion, Miyabi Kaizen restaurant online reservation system combines

technology and tradition to provide an immersive extension of the dining experience. The
website not only satisfies user expectations but also captures the cultural essence of the
restaurant by blending Japanese aesthetics with functional features like seamless
navigation, multimedia integration, and personalized options. This all-encompassing
strategy guarantees that the online platform embodies hospitality ideals. By thoughtfully
blending technology with functional and aesthetic design, an online reservation system can
do more than manage bookings—it can convey the restaurant’s story, uphold its values,
and deepen connections with its guests.

II. TECHNOLOGY USED

The website development involved integrating various technologies to

ensure functionality, interactivity, and visual consistency. Using HTML, CSS, and
JavaScript, the structure, design, and interactivity were seamlessly combined to create a
responsive and engaging user interface. These technologies aligned with the study’s
thematic goals, resulting in a functional, visually appealing, and user-friendly website.

The researchers gave an explanation of technologies and tools utilized throughout the
study:

Research and Resource Gathering. The internet played a crucial role

during the initial stages of development, particularly for testing, resource collection, and
obtaining design inspiration. Online platforms and resources were consulted to refine the
website’s features and ensure compatibility across different devices and browsers.

3
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

Wireframing and Prototyping. The planning and design phase relied on

wireframing tools such as Figma, PowerPoint, and Canva to create prototypes and visualize
the website’s layout. Sample sketches were also drafted to conceptualize the user interface
(UI). These tools were selected for their ability to facilitate design iterations and provide a
clear structure for subsequent development.

Development Environment. The coding and development phase was

conducted using Visual Studio Code (VS Code), a versatile code editor suitable for projects
involving web development, scripting, and lightweight applications (Almeida, 2024) [1].

Programming Languages. The core structure of the website was built using
the following technologies:

1.1 HTML (HyperText Markup Language): HTML formed the

backbone of the website, defining its structural elements, such as menus,
informational content, and multimedia integration.

1.2 CSS (Cascading Style Sheets): CSS was utilized to enhance the
website’s visual appearance by adding styling, formatting, and color schemes
consistent with the Japanese theme. This ensured a cohesive and aesthetically
pleasing design.

1.3 JavaScript: JavaScript introduced interactivity to the website,

enabling dynamic functionalities such as menu navigation, dropdown menus,
calendars, prompt messages, fillable forms, and the integration of background
music. This language was pivotal in making the website user-friendly and engaging.

4
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

III. SIGNIFICANCE OF THE STUDY

This study lies on the potential to enhance the reservation system experience for
restaurants. By integrating technology with functional and aesthetic design . This study
aims to optimize the reservation system leading to benefits such as improving customer
experiences, increased efficiency and enhancing brand image. Overall, this research will
significantly impact the success of restaurants by providing more efficient customer-
centric and an online approach to online reservations.

The researchers believe that the result of this study will benefit the following:

Restaurant Owners. By implementing a reservation system, restaurant

owners can improve their operational efficiency, enhance their customers' experience and
ultimately boost their business.

Customers. Reservation systems contribute to a more positive and

seamless customer experience, fostering loyalty and satisfaction.

Restaurant Investors. A well-implemented reservation system can

significantly enhance a restaurant's operations and, consequently, its profitability. By
investing in a robust reservation system, restaurant investors can significantly improve
their return on investment and investors can capitalize on these benefits.

Restaurant Employees. Reservation System can significantly improve the

work environment for the employees, that can lead to increased efficiency, reduced stress,
and higher job satisfaction.

Future researchers. It can serve as a mediator in helping them find a

reliable source if they are looking for related studies.
5
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

IV. SCOPE AND LIMITATION

This research focuses on designing and optimizing a fully functional

restaurant reservation system inspired by Japanese aesthetics, emphasizing simplicity,
elegance, and balance. The system aims to provide a user-friendly interface featuring an
intuitive design with multimedia integration like dish images and virtual dining tour that
highlights essential information and showcases a refined aesthetic. These features are
intended to enhance the customer experience by offering a seamless and visually appealing
platform for managing reservations.

This research has limitations that constrain its functionality. It is designed

exclusively for desktop and laptop use, lacking mobile or tablet compatibility, which may
inconvenience users on smaller devices. Additionally, the absence of multilingual support
restricts accessibility for non-native speakers, and advanced cybersecurity measures, such
as data encryption, are not implemented due to technical and resource constraints. Despite
these limitations, the system aims to meet its primary goal of delivering an efficient and
aesthetically pleasing reservation process.

6
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

REFERENCES:

● Chou, Y., & Chuang, H. H. (2018). A predictive investigation of first-time customer

retention in online reservation services. Service Business, 12(4), 685–699.
https://doi.org/10.1007/s11628-018-0371-z
● Horng, J., & Hsu, H. (2020). A holistic aesthetic experience model: Creating a harmonious
dining environment to increase customers’ perceived pleasure. Journal of Hospitality and
Tourism Management, 45, 520–534. https://doi.org/10.1016/j.jhtm.2020.10.006
● Jun, L. W., Iqbal, J., & Subaramaniam, K. (2023). Mobile-application easybook – Online
restaurant reservation system. AIP Conference Proceedings.
https://doi.org/10.1063/5.0140502
● Almeida, J. (2024). Visual Studio vs Visual Studio Code: What’s the Key Difference?
DistantJob - Remote Recruitment Agency
● Noriega. (2024, November 22). HTML, CSS, and JavaScript: Your Guide to Learning
Fundamental Front End Languages | UT Austin Boot Camps. UT Austin Boot Camps.
https://techbootcamps.utexas.edu/blog/html-css-javascript/#:~:text=Like%20we%20%20
mentioned%20%20 earlier%2C%20%20 HTML,a%20form%20for%20a%20contest.

7
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

V. SCREEN SHOTS (WEB PAGES)

1. Home Page

The greeting, “Welcome to Miyabi Kaizen” immediately introduces the

restaurant’s name and theme. It features an elegant hero image of a sushi platter to highlight
the restaurant’s emphasis on Japanese culinary art and premium ingredients. As it
communicates the brand’s identity and values, such as authenticity, seasonal flavors, and
luxury, through the caption.

Moreover, it reinforces the Miyabi Kaizen brand by incorporating sophisticated

design, minimalist typography, and a logo that reflects the cultural essence of Japanese
cuisine. It includes a clear call-to-action button, “Book a Table,” strategically placed to
encourage visitors to take immediate action, such as making a reservation. Thus, this
feature ensures that the front desk directly contributes to business goals such as guest
bookings.
Additionally, it provides a visual starting point for users to explore other sections,
such as the menu, reservation system, and contact information, through a navigation bar

8
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER
that encourages users to seamlessly navigate the website to learn more about the restaurant.

2. Menu Page

We implemented accessible tabs on the menu webpage to hide parts or categories of

the menu that don’t need to be immediately visible. These hidden sections become
accessible only when the preferred category is clicked. JavaScript was used to create these
accessible tags and elements, utilizing the `aria-labelledby` attribute to enhance category
selection functionality, while CSS was utilized to give the accessible tabs and dish cards an
interactive design.

9
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

3. About Us

The “About Us” section is designed to help potential customers understand who your
restaurant is, what it stands for, and what makes it special. It builds trust by providing transparent
insight into the restaurant's values and mission, and the people behind it. This section helps
customers get a sense of what kind of experience they can expect by sharing our commitment to
quality. It also highlights what sets our restaurant apart from others, such as unique culinary
approach or commitment to sustainability. Ultimately, the “About Us” section is meant to build a
personal connection with your guests, inviting them to stop by, make a reservation, and come back
for future dining experiences.

10
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

4. Contact Us

One of the most important components of a website is the "Contact Us" page, which
serves a number of purposes that improve user experience and encourage interaction
between website users and the owner or company. This page shows the different ways to
allow the customer to get in touch with our business, through phone number, Gmail,
Twitter, and Facebook page that will give users a direct line of communication for any
questions, concerns, or comments.

11
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

5. Reservation Page

The reservation section is designed to make booking services simple and

convenient for customers . It features a form where users can input details such as the type
of service, date, time, and any additional requirements. After submitting the form, a
confirmation message is displayed to inform users that their reservation has been
successfully processed. The layout is intuitive, with clear instructions to ensure a seamless
booking experience.

This page was built using HTML for the structure, such as creating input fields
and buttons. CSS was applied to enhance the visual appeal and make the page look
organized and professional. JavaScript was implemented to validate user inputs, ensuring
12
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER
all required information is provided before the reservation is submitted.

6. Log-in Page

The login page allows customers to securely access their accounts. It includes
fields for entering a username and password, along with additional options like a “Sign Up”
button for new users to create an account and a “Forgot Password” link for account
recovery.

The design of the login page prioritizes simplicity and user-friendliness. The
interface is straightforward, making it easy for users to navigate and find what they need.
HTML was used to create the structure, CSS was used for styling, and JavaScript added
13
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER
functionality, such as verifying login credentials and displaying error messages if the input
is incorrect. This ensures a secure and efficient login process for users.

CONTRIBUTIONS:

1. Arcilla - introduction (body), home wireframe, content, code slideshow for home and
signature dishes
2. Bontilao - wireframe, technology used, ppt maker, about us code
3. Castro - title, rrl, scope and limitation, code for menu
4. Gonzaga - menu content, significance of the study, help to code for menu, contact us code
5. Lopez - intro, rrl, content, finalization the docs, code reservation, log in and revised
design for website
6. Padua - conclusion, rrl, home wireframe, content, code slideshow for home and signature
dishes

14
 TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
College of Computer Studies
S.Y. 2024-2025 I 1ST SEMESTER

VI. REFLECTION:

Building a restaurant reservation website using HTML, CSS, and JavaScript was a
fulfilling learning experience that greatly improved my web development skills. Working with my
team through Live Share allowed us to collaborate seamlessly, share code in real time, and solve
errors together, which improved the efficiency of our project. The wireframes we created from
scratch helped us visualize the layout and flow of the website, ensuring we stayed focused on
creating a user-friendly design. I was able to apply my knowledge of HTML and CSS to create the
structure and style of the website, while JavaScript allowed us to implement dynamic features such
as reservation forms and interactive slideshows.

This project highlighted the importance of teamwork as we had to rely on each person's
capabilities and skills to successfully complete the project. It also gave me a better understanding
of the practical application of web development concepts, including how to design an interactive
and responsive website. We also encountered and solved various challenges with JavaScript
functionality, such as ensuring that form submissions worked correctly, and slideshows ran
smoothly. This experience motivated me to continue learning and honing my skills, and I am
excited to apply the knowledge I gained to future web development projects.

15