Fermoy House: Charming Bed And Breakfast In The Blue Mountains

The owners of Fermoy House, a Bed and Breakfast guest house in the Blue Mountains of NSW have approached you to build them a website to help them run their business. Fermoy House provides overnight accommodation and breakfast to couples and has four guest bedrooms and a detached private cottage in a private part of the garden. Each bedroom, and the cottage, will accommodate a maximum of 2 guests only.

In order to create a point of differentiation from other local bed and breakfast houses, Fermoy House will allow guests to have up to 2 of their dogs stay in the attached kennels. The dog names are normally recorded so that Fermoy House can provide guests with a personalised dog collar for each dog.Breakfast is provided for all guests as part of their accommodation, and guests can choose from either a Continental or a cooked Irish breakfast. This information is normally recorded at the time of booking the accommodation.

Bookings are normally taken for up to 12 months in advance and guests who have stayed more than 5 times at Fermoy House receive a gift of wine and chocolates on arrival.

Prepare a detailed design for the website for Fermoy House. Your design document should include the following sections:
1. Design concept overview;
2. List of business and user requirements;
3. List of key assumptions;
4. Interface design for the website including the following sections:
a. Wireframes for each page of your website design;
b. The components used on each page are to be identified;
c. The use of colour, frames and sections in the design is to be shown and discussed;
d. All help and user assistance functions are to be shown;
e. All icons that are used are to be clearly identified;
f. All user task navigation is to be clearly identified;
5. A discussion section is to be included after the website design and this section must discuss:
a. The reasoning behind the design – Why did you design it like this How did the principles of design influence your design
b. How the use of colour in your design will help users;
c. How will a user navigate through the process of looking at the accommodation and
offers and then proceed to make a booking

About Fermoy House

The Fermoy House is a bed and breakfast guest house located in the Blue Mountains of NSW. The business provides overnight accommodation and breakfast to couples. Currently, the business has four guest bedrooms with a private garden which has a detached private garden for every bedroom. For each bedroom, a maximum of 2 guests are accommodated. To differentiate itself from other similar businesses, Fermoy house allows its guests to have up to of their own dogs to stay in the attached kennel. Each dog has a personalized dog collar with its name. The guests specifies the name of the dogs during the time of booking. The guest is also supposed to choose between continental breakfast and Irish breakfast during the time of booking.

Currently, the business does not have a website through which interested customers can access to get information about the guest house or make a booking thus there is need for a website which will help create an online presence for the business and provide a way for customers to make bookings very conveniently.

2 Design concept overview

The proposed website will help customers to access information about the guest house and make bookings using the same website thus the website should have quality and credible information and all functionalities that the user needs to achieve specific user goals. The design of the website is supposed to follow all the industry guidelines to make it usable by both new and existing users.

Apart from the good and aesthetically pleasing appearance or visuals the design should follow all the principles of a good website design to make sure any visitor can use the website to get any information they want or to achieve any goals through the various functionalities and features provided by the website. The design should be simple enough not to distract a visitor from the main purpose of the website. Simplicity will be achieved by using a lot of creativity to make the website aesthetically appealing to its visitors. To achieve this, a study of how most users think is important. Some of the key points on how user think are;

• Users appreciate credibility and quality- The most important thing in a page of a website is the quality and credibility of the content and that is why most users can compromise the content with the design of a page. This is can be proofed by many websites which do not have a good design or have a lot of advertisements but experience a lot of traffic because of their high quality content.
• Most users do not read but scan- To analyze a web page most users look for some anchors to guide them through the content of the web page.
• Most web users are impatient and desire instant gratification- This principle simply states that if a web user is not able to meet their expectation from a website, then the designer of the website has failed in designing the website. If the user is not able to get around the website, they easily switch to other alternative websites in search for a website that is has less cognitive load and easier navigation.
• Users don’t make optimal choices- Most web users don’t search for the quickest way to find their desired information nor do they scan a webpage sequentially. Most users choose the reasonable option thus the website should be optimized to help the users to achieve their goals.
• Users follow their intuition thus most users scan through the information in the web page instead of reading consciously.
• Users want control- When accessing a website through a web browser, most users desire to have control of their browser and to rely on presentation of data consistently throughout the site. For examples, most users do not want pop windows while using the website. If popups are necessary, then most users want the popups to behave in an expected fashion.

All the points mentioned above will be followed in while adhering to all the principles of a good website design to achieve a good website design

3 Business and user requirements

3.1 Business requirements

Business requirements are requirements that explain the purpose of the website for the business or organization in need of the website (Parker, 2007). For the Fermoy House proposed new website the following are the business requirements;

• The new website will help the business to have an online presence thus interested customers can access the website to get any information about the guest house from the website.
• By using search engine optimization, The Fermoy House website will help the business to get more customers as more people will open the website if it appears on top of search engine results if a user searches for guest houses using a search engine like google. By trying to get more traffic to the website, the business can have an increase in the number of customers making bookings as more people will be aware of the guest house. This will lead to increase profits.
• The new website will help the business by simplifying the process of booking for a room through the website. If users are able to make a booking easily by just accessing the website then the business will get more bookings as compared to other similar businesses with harder processes involved in booking for accommodation.
• The new website will help the business receive user feedback through the contact page. Customer feedback is very important to any business as it will help the business evaluate what it is doing right and thus find ways of improving on that. The feedback will also help the business to identify what it is doing wrong so as to find ways of correcting it to ensure maximum satisfaction to all its guests.
• The new website will help the business to know the number of customers it has through the list of registered users. It will also help the business to know the number of bookings made within a given timeline. With the list of customers and bookings, the business can undertake tasks like customer segmentation which involves identifying customers with the most number of booking and the time when most bookings are made.

User requirements are also referred to as user needs and describe what the user does or hopes to achieve while using the website. For the Fermoy House proposed new website the following are the user requirements;

• All users should be able to open the website though the link of the website or by searching using the name of the guest house using a search engine like Google or Bing. When the user does a search using the name of the guest house, the link to the guest house should among the top search results to make it easy for the user to open the website (McAshan, 2016).
• Users should be able to get information about the business when they open the landing page of the website. The landing page should be designed to have an aesthetically pleasing visual to draw the attention of the user and to make the user want to open the rest of the pages making up the website. The information in the landing page about the business should be organized strategically to make it easy for the user to read and understand.
• The proposed website should be easy to navigate for all users. The navigation menu should contain links to all the main pages making up the website and should appear on every page making up the website. This will help all users to navigate from one page to another to achieve different user goals supported by the website.
• The website should enable users to create an account with the business. A personal account will help the business to maintain its list of customers. This will be achieved by designing a registration page through which users will fill a form to create an account. The website should make all necessary validation to make sure the information provided by the user is in the correct format. For example the user’s email address should be in the correct format, the phone number should be digits only, all fields should be filled and the details of the customers should be stored securely to ensure malicious users do not access them. This can be done by doing all transmissions of data through a secure socket layer (SSL) and encrypting information. Upon successful registration, the user should be prompted by a message to confirm their registration through a link that has been sent to their email address. This will help validate the email provided by the users. The registration is successfully validated when the user opens the link sent to their email address (Woods, 2014).
• The website should provide registered users with a login page from where they can login to perform functions that can be achieved only by users who are logged in. The login should be successful only when the login credentials used are correct otherwise the page should display a message advising the user to enter the correct login credentials. In case the user has forgotten their login credentials, the page should provide the user with an option of recovering the password by showing a forgotten password link. This feature should be designed in such a way that only registered users can recover their forgotten passwords. This can be achieved by use the user’s email address which was provided by the user during registration.
• The website should have a page through which all visitors can see different offers the guest house. The offers should be formatted in a tabular style to make it easy for the users to distinguish the offers.
• The new website should provide users with a page through which users who are logged in can make a booking. Booking will be done by filling a form. The page should validate the details before the booking is successful.
• The website should provide users with a page through which users can contact the business. The contact page should have a contact form to make it easy for the visitor to contact the business in case the user want to raise an issue or give feedback to the business (Taeed, 2007).

To come up with the design of the Formey guest house website, the following key assumptions were made;

• All customers are supposed to register with Formey house before making a booking. After registration the customer can proceed to book using the booking page.
• If a registered user has made a booking, the payment is supposed to be done when the customer reports to the guest house during the start date.
• Details of the spouse accompanying the customer who has made a booking are not needed during the time of booking.
• All bookings should be done using the website. This will help the backend application to check availability of a room for the specified dates provided by the user to confirm whether there is a room available or not.

The process of designing different interfaces of the pages making up the website is a systematic process which involves reviewing both the business and user requirements to come up with the specifications of the design. The specifications are then used to come up with wireframes which are then used to design the final interface of every page making up the website. The following are the pages making up the website;

• Home page
• Login page
• Registration page
• Offers page
• Booking page
• Contact us page

Accommodation and Breakfast

The home page is the landing page of the website and is the first page that the user sees when they open the website. This page creates the first impression about the website to all users. The structure of the home page is shown in the wireframe below;

The home page is made up of three sections;

• Header section
• Content section
• Footer section

The header sections is at the top of the home page. It consists of a logo and the navigation menu of the website.

The content section contains a banner and information about the guest house. The banner is in form of an image.

The footer section is the bottom most section of the page and consists of the copyright information about the business.

To illustrate the design of the home page from the wireframe shown in figure 1 above a prototype of the design has been designed to show different components making up the home page, use of colors and use of other elements and functions.

The home page is the landing page of the website and is supposed to be aesthetically pleasing to the user. From the figure above the home page is divided into three sections as shown in the wireframe in figure 1. The first section which is the header has a black background. TO make text visible, an orange has been chosen to design the logo and the font used for the navigation menu. The navigation menu consists of links to all the other pages making up the website.

The next section is the content section which has a white background. The section has an image banner and information about the guest house. All the titles have a font color of orange while the rest of the text has a black font color.

The footer section at the bottom of the page has a black background. The text in the footer section is orange in color to make it visible over the black background color of the footer section. Use of black background color for the header, white for the content section and black for the footer section helps structure into sections thus making it easy for the user to scan through the page.

5.2 Login page

The login page is used to login by users who have already registered. Just like the home page, the login page is made up of three sections;

• Header section
• Login form section
• Footer section

The header sections consists of the logo and the navigation menu while the login form section consists of a banner and the login form. The footer has the copyright information. To illustrate the design of the login page the following prototype has been designed.

Figure 4 above shows the components making up the login page. The header is similar to the header making up the home page and has a black background. The login form section has a banner which is an image mimicking The Fermoy House. The login form consists of three components; username text field, password text field and the login button. To login the user enters his or her username and password and presses the login button. The details are verified and the user gets a message of whether the login was successful or not. If the login was not successful, the user is prompted to enter the correct login details or recover the password through a link. This information is displayed as a pop up.

Pet-Friendly Environment

The footer section is similar to that of the home page as described in section 4.1 above.

5.3 Registration page

The registration page is used by new users to create an account with the guest house. The page is made up of three sections;

• Header section
• Registration form section
• Footer section

The following wireframe shows the structure of the page.

The header section and the footer section is similar to that of the home page. The registration form section consists of the registration form. The figure below shows a conceptual prototype of the registration page.

The registration form consists of seven text fields and the register button. The user is supposed to enter all the details as per the information provided inside the text field. After filling the form, the user is supposed to press the register button to save and complete the registration. Validation is done to make sure all details are correct.

5.4 Offers page

The offers page consists of information about different accommodation offers provided by the guest house. The page is structured into three sections;

• Header section
• Content section
• Footer section

The wireframe below shows the structure of the offers page;

The header and footer section are similar to the header and footer of the home page. The content section consists of a banner and a table with all the offers provided by the guest house. The figure below shows the conceptual design of the offers page;

The content section consists of a banner which is an image mimicking The Formey Guest house and a table with all the offers. The information is structured in a tabular form to make it for the user to compare different offers. The colors are used for the different sections of the page are as shown in figure 8 above.

5.5 Booking page

Booking page is used to make a booking by users who have logged in to their account. THe page is made up of three sections;

• Header section
• Booking form section
• Footer section

The wireframe below shows the structure of the booking page.

The header and footer section resemble those of the home page. The booking form section consists of a form with seven elements. The form is made up of four text fields, two radio buttons and the book button. The figure below shows the conceptual design of the booking page.

The booking form section is divided into three sub sections to make the booking process easier and understandable for the user. To make the sub sections a fieldset element has been used with a legend aligned on the left of the fieldset to act as the title.

5.6 Contact us page

The contact us page is used by users to drop a quick message to the guest house. The page is made up of three sections;

• Header section
• Contact form section
• Footer section

The wireframe below shows the structure of the contact us page.

The header and footer section resemble those of the home page. The contact form section consists of a contact form which has 4 text fields and on button. The figure below shows the conceptual design of the contact us page.

Booking Information

The form is validated to make sure all details are filled correctly. The email should be in the correct format otherwise the message is not sent. After filling the form with the correct details the user presses the send button to send the message.

The design of the Formey guest house was achieved by following all the principles of good website design. These principles are;

• Navigation- A good website should have good navigation to ensure the user can navigate through all pages making the website in a systematic way. The website has been designed with a good navigation menu which is found on the header section of every page making up the website (Friedman, 2008).
• Grid based layouts- A good website should have its content arranged into sections. The website has adapted a grid based layout to make the design of each page balanced and better looking.
• F Pattern design- Most users read scan computer screens in an F pattern where by text is read from left to right (Laja, 2017). The website has adapted this principle by displaying information from left to right.
• Load time- A good website should be able to load fast. The website has been designed to load faster by optimizing images used in some of the pages and using JavaScript for form validation.
• Mobile Friendly- A good website should be cross platform thus it can be viewed either using computers or mobile devices. This principle emphasizes on responsiveness. The website has been designed to be responsive thus it can be viewed on any device.
• Purpose- A well designed website should aim to meet the goals of the user or purpose for visiting that website. The Formey guest house website has been designed to help the user achieve all the user goals supported by the website.
• Typefaces- The website has used Sans Serif which is very easy to read online.

For the Formey guest house website, three colors have been used; white, black and orange. The three colors have been used interchangeably according to the background of the section of a page. For example every page has a header and a footer. These two sections have a black background color thus to make text visible and appealing orange color has been used for the font. For the content section which is the section between the header and the footer, white has been used as the background color. To make text visible in this section the color of the font is black and orange is used for the headings to make the information appealing and easy to read for the user.

6.3 Navigation

A good website should have a good navigation. The proposed website embraces this principle and has a good navigation which can be used by the user to navigate through all the pages. The following sitemap shows the navigation of the website.

6.3.1 The booking process

For a user to book a room, the user has to have an account by registering. Registration is done by opening the registration page using the register link in the navigation menu. The user fills the form with all the details and an account is created. To validate the registration, the user is supposed to open the email provided during registration and open the link sent to that email. After validation the user can now login to their account.

Login is done by opening the login page. The user enters their username and password and the details are verified. After successful login, the user can open the booking page. To book a room, the user is supposed to fill the booking form in the booking page. The user fills the start date and the end date. The names of the dogs is optional and the user can choose to fill it or not. The user then chooses the type of breakfast and presses the book button. The system will check for availability and update the user with results of the booking. If the booking is successful the user gets a success message otherwise the user is supposed to select another date.

Conclusion

The Formey guest house has been designed by first studying most common user behaviors and the existing website design principles. The final design as shown in the sections above is a good design emphasizing on simplicity to achieve user goals.

8 References

Friedman, V. (2008, January 1). 10 Principles Of Good Website Design. Retrieved December 26, 2017, from https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/

Laja, P. (2017, May 26).  8 Effective Web Design Principles You Should Know. Retrieved December 26, 2017, from https://conversionxl.com/blog/universal-web-design-principles/

McAshan, T. (2016, November). 10 Principles of Good Web Design. Retrieved December 26, 2017, from https://www.glidedesign.com/10-principles-of-good-web-design/

Parker, J. (2012, February 18). Business, User, and System Requirements. Retrieved December 26, 2017, from https://enfocussolutions.com/business-user-and-system-requirements/

Taeed, C. (2007, December 17). Design 9 Essential Principles for Good Web Design. Retrieved December 26, 2017, from https://design.tutsplus.com/tutorials/9-essential-principles-for-good-web-design--psd-56

Woods, S. (2014, March 4). 10 Top Principles of Effective Web Design. Retrieved December 26, 2017, from https://shortiedesigns.com/2014/03/10-top-principles-effective-web-design.