Web Application | The Haukai Restaurant

Project Background

This project involved creating an interactive and responsive web application based on a project brief for a fictitious business, The Haukai Restaurant, by following the web development process of discovery, design, development and testing, deployment and evaluation as discussed below.

Discovery

From the project brief, stakeholders were identified from which personas were created. Accessibility issues for a persona were considered and primary goals for each persona of what they would want to achieve when using the web application were considered. Use cases for each persona's primary goal were also created.

Functional and non-functional requirements were identified by considering the client's goals and stakeholder requirements. These requirements were also categorised using the MoSCoW method of ‘Must have’, ‘Should have’, ‘Could have’, and ‘Will not have’ with reasons for the specified category.

A feasibility study was conducted to compare two different development options, including a web application builder (Squarespace) and a self-hosted content management system (WordPress), to make a recommendation to the client regarding which development option to choose.

Design

A site map was created with Microsoft Word. Figma was used to create wireframes for mobile displays of web pages together with corresponding wireframes for desktop displays. The design followed a mobile-first approach.

An interview and task-based usability test was prepared and carried out with a potential user to obtain additional information about the usability of my design by considering Jakob Nielson's 10 Usability Heuristics.

Design features were considered to ensure accessibility for users of the web application in line with W3C's Web Accessibility Principles.

Development

The web application was developed with a mobile-first approach and written with HTML5, CSS and JavaScript programming languages. It includes some Google tools, such as a Google form to request a reservation, a Google calendar and agenda to indicate opening hours and a Google map to show the restaurant's location.

Accessibility features implemented include semantic HTML elements, correct use of headings and the ‘alt’ attribute with HTML ‘image’ elements.

Usability features implemented include familiar social media icons, ensuring menu items, field labels and actions for buttons are visible on each page, and ensuring the design is uncluttered, minimalistic and aesthetic.

Search Engine Optimisation (SEO) was implemented for online marketing purposes by including meta tags on each HTML page and verifying site ownership with Google, thereby ensuring people can find the web application via Google.

Testing

Testing of code was carried out with Chrome DevTools throughout the development phase to ensure the web application was functional. W3C standards for HTML and CSS were implemented and tested with W3C's HTML Markup and CSS Validation Service.

The accessibility of the web application was tested and evaluated with AChecker's Web Accessibility Checker and WebAIM's WAVE tool to ensure accessibility guidelines were followed.

A mobile-friendly test was carried out for each web page with Google's Mobile-Friendly Test tool to ensure responsive design principles were implemented and the web application was mobile-ready. However, this tool has now been replaced with Google's Lighthouse tool.

Page loading times were optimised with Google's PageSpeed Insights tool to ensure the home page loads within 2 seconds on a 4G network for both mobile and desktop displays.

Deployment

The web application was uploaded to a GitHub repository and hosted with GitHub Pages for this project.

The authentication method of using a .htpasswd and .htaccess file for the staff information page could not be implemented on the GitHub server. However, it was tested to be functional when using Uniform server with the correct file path.

Evaluation

A staff information page was lastly added and accessible from the home page to include a staff roster and staff contact details. The information contained on this page was generated with mock data with the Mockaroo tool.

An interview and task-based usability test was prepared and carried out with a potential user for the staff information page to identify improvements that could be made to ensure a good user experience.

Also, recommendations were made to the client for entry-level web hosting options, SSL certificate authorities/providers and content delivery networks that were considered and compared.

Upon further evaluation, adjustments could be made to the design of the web application on larger screens to allow content boxes to be placed/stacked next to each other as opposed to being placed/stacked on top of each other. This will allow the web application to be more usable on these larger screens.