Project Scope/Client's Problem

Task: To design and develop an intuitive hotel web user interface as a team using HTML, CSS and JavaScript

My Role & Solution

Created: Facilities and Services pages, and Facility booking forms

My Work Process

Planning:
Firstly, we decided on a Luxury Vintage Hotel Website.

My team and I found some competitors to our hotel and did an analysis to find out what features made it good and what could be better to make our website comparable to theirs. We identified Marina Bay Sands and the Shangri-La Resort as prime competitors. We noted that they used sophisticated and consistent colour schemes, and sufficient whitespaces to display a modern and classy look.

We proceeded to conduct a survey to see what users expect from our website, considering our vintage theme. With their responses, we created a color palette for our website to have a consistent feel.
Next, we needed to choose a suitable name that represented our core values of vintage and luxury. After much research, we decided on the name "Le Timeless Trésor". The name is a mix of english and french, with trésor translating to treasure. We chose this name as we wanted the memories that our guests make at our resort to be a timeless treasure for them. Then, we designed our logo on Adobe Photoshop, using a treasure box and a clock which are literal meanings of our resort name.

With our structure settled, I could do my pen and paper prototype to envision what I would like my final website to look like. I included Gestalt principles, Nielsen 10 heuristic principles, to ensure that my websites were minimalistic and easy to navigate.

Coding:
We created a Git respository and added each other as contributors so that we could all collaborate on the same file. I coded the website on Atom. I also added comments and used descriptive class & ID names so it's easy to understand my codes.
I also added media to make my webpages responsive to the different screen sizes, while remaining the same feel.

Outcome & Results Achieved

Finally, with our own complete webpages, we linked up our webpages and did some final checking to make sure our website felt consistent throughout. Feel free to check out our website with the link down below.

Website Link