Design And Development Of The Lodging King Hotel Website

Webpage Design for The Lodging King

In respect to the increasing demand of online booking, shopping as well as a dominant usage of internet for all kinds of services, the hotel industry has also shifted onto an online platform with being in possession of a website for all kinds of services in specific terms. Similarly, the hotel sector has been chosen as the business sector for this particular discussion, where Lodging King is supposed to be a hotel, which has a specific website allowing the visitors to choose from a wide range of hotels across the region and select the one that suits their primary needs of booking a hotel room (Sasmito 2019). Hence, a website has been designed for the same purpose, where each of the following sections present on the document shall be meeting the basic needs of a hotel accommodation for all kinds of visitors tending to obtain a lodging.

As a reason, the following discussion has been documented to provide with a detailed design for all the webpages to be a primary component of the entire website along with the interfaces that have been designed. Each of the page has been described in detail to put forward a better understanding for the reader of this document. In addition to this, the document also highlights a prototype development along with testing as well as screenshots to ensure a clear view of the same (Wang and Hespanhol 2018). Lastly, the document provides with a brief recommendation based on the website design, as an intention to improve the webpages or interfaces for enhanced functionalities offered to the visitors of the website.

This section of the document shall be highlighting each of the webpages present on the designed prototype for The Lodging King. Each of the page along with their detailed description and designs used for developing the selected prototypes for each of the page. Hence, the following sections have been segmented into different sections for each of the page to discuss about the designs in detail and put forward a better understanding for the same (Rubab et al. 2018). The website prototype contains a specific navigation bar with all the primary pages, which are accessible on the particular website by every individual visitor to the website. This navigation bar also allows the visitors of the website to access every individual page as desired whenever required from the navigation bar.

 

Figure-1: Navigation bar

(Source- Created By Author)

The navigation bar main contains 4 pages, which are the prime component of the designed prototype website. These main pages of the entire website are Home, Book Room, About and Contact Us. Hence, each of the pages in an individual manner has been designed in detail for the visitors to obtain a detailed understanding of the services offered or functionalities carried out by each of the individual webpage on the entire website.

This section shall be discussing about the home page of this particular prototype website, which shall be the landing page for each of the visitor as soon as they enter the address of the website to navigate to the same (Bolton et al. 2021). Following this, they carry out their activities of going through a list of hotel rooms, based on their budget and meet their demands of accommodation in a functional manner.

Home Page

 

Figure-2: Home page

(Source- Created By Author)

The home page contains a logo of The Lodging King on the top-left section of the navigation bar. This is to look after the branding of the company, where the visitors to the website shall be able to get a view of the name for the website from the existent logo of The Lodging King (Hidayat et al. 2020). In addition to this, the links to the other webpages of the website is present on the top-right section of the home page. From here, the visitor can navigate to any other webpage of the website for a faster navigation between the webpages.

The home page contains a big banner image of a specific hotel, which is present with a welcome note to the visitors for having a better experience provisioned to them as soon as they navigate to the website to carry out their activity of accommodation hunting. In addition to this, scrolling down the webpage, the visitor is provided with a brief list of the hotels available on the webpage, where click on each of the hotel will navigate the visitor to a specific page of that particular hotel for further processing towards booking a hotel room.

 

Figure-3: Home page

(Source- Created By Author)

In addition to this, the page also has a footer section, which has quick links to all the pages on the website, along with the links to the social media of The Lodging Room. The footer section contains the link to their Facebook, YouTube and Instagram (Tiwari 2021). Hence, the visitors are able to navigate to their Facebook page, YouTube page as well as Instagram. This allows them with a faster navigation to the social media pages for a better interactional with the company in a social manner.

 

Figure-4: Footer

(Source- Created By Author)

This section shall be providing a detailed explanation of the ‘Book Room’ webpage present on the website prototype, where each of the individual details of the page shall be explained to put forward a better understanding to the readers of the document.

This webpage also contains the logo of The Lodging Room on the top-left section of the webpage, along with a navigation bar containing the links to all the webpages accessible to the visitors on the top-left section of the webpage. Following this, the main body of the webpage contains pictures of every hotel in collaboration to the website, along with a brief description and details of the price for an individual night basis (Alkhalfan et al. 2020). In addition to this, description of an individual hotel is also provided with a button as ‘Details’, which will allow the visitors to click on the button and view additional details of the hotel before choosing the hotel and booking a room for accommodation purposes.

 

Figure-5: Book Room page

(Source- Created By Author)

In addition to this, the page also has a footer section, which has quick links to all the pages on the website, along with the links to the social media of The Lodging Room. The footer section contains the link to their Facebook, YouTube and Instagram. Hence, the visitors are able to navigate to their Facebook page, YouTube page as well as Instagram (Huang and Zhang 2022). This allows them with a faster navigation to the social media pages for a better interactional with the company in a social manner.

Book Room Page

This section will be discussing about the necessary detailed explanation of the page named ‘About Us’, which is mainly to provide with a brief explanation of the functionalities and services offered to the visitors on this particular page. The page has similar features of an existent logo of The Lodging King present on the left side of the navigation bar along with the links to the other webpages present on the right side of the navigation bar (Gumulya and Harijadi 2021). Following this, the page provides with a brief introduction to the company, along with details of the history and information regarding the offered services and functionalities of the website.

 

Figure-6: About Us Page

(Source- Created By Author)

The footer section of the website is the same on every individual webpage that is a part of the prototype. This contains the links to various information present on the website along with the specific links to the social media pages of The Lodging King (Yongjian 2019). Hence, the about us webpage provides the visitors with the above-mentioned information for having a better understanding.

This section will be discussing about the detailed information present on the ‘Contact Us’ page that is present on this specific webpage (Affandy, Hussain and Mohd Nadzir 2020). This page provides with a detailed information regarding the contact details of the organization along with a specific form for the visitor to fill and contact The Lodging Company in case of any issues faced or any queries related to room bookings online.

 

Figure-7: Contact Us Page

(Source- Created By Author)

The page allows the visitors to fill in their names, email address as well as a textbox for the visitor to fill the same utilizing appropriate details of the concern, issue or query related to the offered services of the company. This is mainly to ensure that the visitors are provisioned with the capability of reaching out to the customer assistance of the company and communicate in an efficient manner (Satyal 2020). In addition to this, the header and the footer section of this specific webpage is same as the other webpages present on the prototype website, which is to allow the customers have an appropriate navigation across the website without any specific issues rising.

This section of the document shall be carrying out appropriate testing of the designed prototype utilizing appropriate measures along with a support provided by the screenshots taken from the designed prototype (Vishwakarma et al. 2020). This is to ensure that the designed prototype is appropriately working and meets all the primary demands of the clients looking for an online room booking service.

Prototyping refers to a specific procedure where the associated design of a particular product is efficiently implemented into a tangible manner. This prototype is specifically built with the help of multiple degrees in terms of fidelity that are mainly utilized for having a realization of the final design for the product or the website. Similarly, a website has been designed for The Lodging King, which is supposed to offer with an online booking service to the visitors and customers (Maguire and Isherwood 2018). The prototype to be tested in this particular section has mainly been designed with the help of HTML (Hyper-text Markup Language) as well as CSS (Cascading Style Sheet). The specific design of this particular prototype has been basically simplified with the help of awesome fonts, which again refers to a specific toolkit used for extracting different forms of fonts as well as icons helping to improve the user experience and design upon the specific website.

The header section is same on every individual webpage present on this designed prototype website, which will provide with a helping hand to the customers have an easier navigation across the website, which has been designed and provided to them. Firstly, the header contains the logo of The Lodging King, which is to help the customers identify the brand image and ensure that they have landed on the correct website they had aimed (Subiyakto et al. 2021). The logo is present on the top-left section of the header as visible from the following screen capture. The screenshot displays that the logo has been efficiently placed on each of the webpage throughout the website.

 

Figure-8: Logo

(Source- Created By Author)

Following this, the header will also allow the customers and visitors to effectively navigate throughout the website with the help of clicking on the page names present on the top-right section of the header, which is same on all the webpages of the website prototype (Suryadevara and Ali 2020). By clicking on any one page on the header, the user will be directed to that specific page in an easier manner allowing them to communicate with the prototype without hindrance.

 

Figure-9: Webpages

(Source- Created By Author)

Each of the webpage is different based on the body section of the website, where the body section will be providing with a detailed information based on the motive of the specific webpage. For instance, the home page contains the information regarding the types of hotels collaborated with the company, where the customer can book a hotel room (Yu 2019). Similarly, the Contact Us page allows the customer to fill a definite form and mention all the primary details regarding the query for the individual customer.

 

Figure-10: Home Page

(Source- Created By Author)

 

Figure-11: Book a Room Page

(Source- Created By Author) 

 

Figure-12: About Us Page

(Source- Created By Author)

 

Figure-13: Contact Us Page

(Source- Created By Author)

Each of the body section for every individual webpage, which is a primary component of the designed prototype, has been shown in the above sections with appropriate screen captures (Islam 2018). This has mainly done to provide with the testing screenshots and ensure that the demands of the clients are met in appropriate terms allowing them to obtain specific details regarding the information or services offered by every individual webpage on the designed prototype website.

The footer section for each of the page is same, where the links to various pages on the website has been provided. In addition to this, link to specific social media pages for The Lodging King has also been provisioned. This will allow the users to directly navigate to the social media pages on clicking on the icons. On taking the cursor to any of the icons for the social media present on the footer section, the icon lights up signifying that the link is properly working without any significant issues. This is evident from the following screenshot.

 

Figure-14: Social Media links

(Source- Created By Author)

The contact us page present on the website prototype demands the customer to enter their name, email address as well as a detailed explanation of the query to be forward in a definite text box provided. However, the fields present on the form correctly identifies if no data has been inputted and the user tries to click on the submit button (Sasmito and Nishom 2020). This notifies the user to fill the mandatory fields to make a successful entry. This is effectively visible from the following screen capture in specific terms. In addition to this, the reset button also works efficiently clearing each of the field present on the form allowing the respective user to make a fresh entry and then click on the submit button.

 

Figure-15: Form submission

(Source- Created By Author) 

Hence, each of the sections in this testing format has been efficiently carried out and supported with efficient screenshots, which will ensure that the specific functionality is efficiently functioning (Rahmadi, Khairil and Supardi 2021). Also, does not face any issue in providing the user with the outcomes as expected in significant terms.

Conclusion: 

The Lodging King is an online platform, which promises the customers to book hotel rooms online, without having to face the hassle of moving over to the premise and placing their queries regarding the pricing and facilities. Hence, the above discussion has mainly focused upon a website prototype that has been designed to fulfil the demands of the customers to access the same and book online hotel rooms. The discussion has provided with necessary details of the design and webpages. Additionally, prototype development along with the testing as well as screenshots has been provided in specific sections. Each of the testing process has been explained and supported with screenshots.  

The following recommendations have been made based on the website prototype to make necessary improvements in the final product.

• On clicking any of the webpage from the navigation bar, the specific webpage shall be highlighted to let the customer know regarding the webpage they are currently on.
• Logo of the website present on the header section should be clear and bigger in size.
• The footer section shall be decreased in size to allow more space for the details present on the body of each webpage.

References: 

Affandy, H.B., Hussain, A. and Mohd Nadzir, M., 2020. Designing a public university website that integrates web usability and web aesthetics: A model validation. International Journal of Advanced Science and Technology, 29(6), pp.334-339.

Alkhalfan, A.S., Altheeb, Z.W., Alshamsi, N.A., Alothman, H.W., Almarashdeh, I., Alshabanah, M., Alrajhi, D. and Alsmadi, M., 2020. Designing and Developing of E-Commerce Website for Unused New Goods Shopping. Designing and Developing of E-Commerce Website for Unused New Goods Shopping”, International Journal of Scientific Research in Science and Technology (IJSRST), 7(2), pp.215-225.

Bolton, R.N., Gustafsson, A., Tarasi, C.O. and Witell, L., 2021. Designing satisfying service encounters: website versus store touchpoints. Journal of the Academy of Marketing Science, pp.1-23.

Gumulya, D. and Harijadi, K., 2021. Designing Website Application as An Academic and Non-Academic Assistive Tool for Students with Slow Learner. Jurnal Desain Indonesia., 3(2), pp.17-37.

Hidayat, Y.W., Abdillah, L., Prayuda, I., Kusumo, A.J., Pranata, D.U. and Syarriansyah, M., 2020. Designing Palembang’s Typical Culinary Information Systems Based on Website and Social Media. Sistemasi: Jurnal Sistem Informasi.

Huang, X. and Zhang, Y., 2022. Designing a Teaching Website for Early Warning Technology Support Specialty Based on Information Architecture. Journal of Contemporary Educational Research, 6(1), pp.7-11.

Islam, M., 2018. Software Testing & Website Testing of Quality Assurence Daffodil Software Limited.

Maguire, M. and Isherwood, P., 2018, July. A comparison of user testing and heuristic evaluation methods for identifying website usability problems. In International Conference of Design, User Experience, and Usability (pp. 429-438). Springer, Cham.

Rahmadi, T., Khairil, K. and Supardi, R., 2021. Website Security Analysis Using Penetration Testing Method. GATOTKACA Journal (Teknik Sipil, Informatika, Mesin dan Arsitektur), 2(2), pp.147-152.

Rubab, N., Shoukat, S., Shaheen, M. and Sandhu, K.Y., 2018. The Impact of Website Designing Factors on Online Purchase Intention: Evidence from Fashion Brands. IUP Journal of Marketing Management, 17(1).

Sasmito, G.W. and Nishom, M., 2020, November. Testing the Population Administration Website Application Using the Black Box Testing Boundary Value Analysis Method. In 2020 IEEE Conference on Open Systems (ICOS) (pp. 48-52). IEEE.

Sasmito, G.W., 2019. Implementation of Prototyping Method on Website Development of Land use Mapping.

Satyal, A., 2020. Designing and Developing a Website with ReactJS: Progressive Web Application.

Subiyakto, A., Rahmi, Y., Kumaladewi, N., Huda, M.Q., Hasanati, N. and Haryanto, T., 2021, April. Investigating quality of institutional repository website design using usability testing framework. In AIP Conference Proceedings (Vol. 2331, No. 1, p. 060016). AIP Publishing LLC.

Suryadevara, S. and Ali, S., 2020, June. Preperformance Testing of A Website. In CS & IT Conference Proceedings (Vol. 10, No. 7). CS & IT Conference Proceedings.

Tiwari, S., 2021. Designing a Personal Website for Identity Building and Career Growth for PhD Students. TechTrends, pp.1-5.

Vishwakarma, A.R., Lohar, A.A., Desai, B.S. and Mate, P., 2020. Crowdsourcing platform for website testing.

Wang, N. and Hespanhol, L., 2018, November. Developing an Intuitive Website for Prototyping Creative Media Facade Content. In Proceedings of the 4th Media Architecture Biennale Conference (pp. 165-170).

Yongjian, Z., 2019, August. Website Log Statistical Testing and Analysis. In 2019 International Conference on Smart Grid and Electrical Automation (ICSGEA) (pp. 591-594). IEEE.

Yu, J., 2019, March. Exploration on Web Testing of Website. In Journal of Physics: Conference Series (Vol. 1176, No. 2, p. 022042). IOP Publishing.