Holidaze

Brief

A local tourism agency in Bergen is launching a new website called Holidaze, where visitors can find hotels, B&Bs and guesthouses, and where accommodation owners receive enquiries. The project covers both the visitor side — search accommodation and make enquiries — and the admin side, where properties are added and enquiries managed.

Process

Design, prototyping, then development according to the design.

Design

Colours

The colours at the top are for the visitor side. I wanted to try colours I don’t usually see on booking websites.

• Purple is for every button and clickable link, so users learn that “purple is clickable”. I kept buttons and links to a minimum to guide users forward — towards booking — instead of clicking around.
• Blue is for the navigation bar, consistent across all visitor pages.
• Orange is for hotel-specific icons and prices, to give the site a happier feel.
• Dark grey is for smaller icons, such as max guests and the typeahead icon.

The admin side uses a lighter blue for navigation and details — blue reads as a more “technical” colour.

Icons are from Font Awesome: flat icons are easy to understand, and they fit the design well.

Prototype

I used Adobe XD to lay out the pages without detail first. Once every element had its place, I filled in colours, images, buttons, icons and text from the style tile.

Development

Built from scratch without CSS frameworks, to show my skills without shortcuts. The site is built in React, using Axios to fetch and post data and hooks for lifecycle.

I did use a few dependencies where they made sense: React Hook Form for form validation, google-maps-react to show each hotel’s location, and simple-react-lightbox for image modals. There is extra validation too — regex in JavaScript and sanitising in the PHP code. Filtering and search are handled with useEffect and Axios.