Haus hotel

My Role

Discovery research and visual design from concept to completion.

Tools

About the Project

Haus is a boutique hotel opening in Glasgow’s city centre. It needs an online presence, via a website, to reach a wider target audience for promoting this new boutique hotel and its services with a distinct brand identity. The hotel business in Glasgow is very competitive and so HAUS are looking for a website to help generate business, increase brand recognition, and deliver strong marketing messages. 

The website is the first interaction of the customer with the brand and is crucial to the success of the new business. 


As a majorly visual design project, my task was to create a UI design system and design a website for Haus with implementation of the design system by considering the principles of good visual design.

The target audience

Before starting.....

Before starting the project, I ensured I fully perused the brief to fully understand what I was expected to do. Before any work could be carried out, knowing about boutique hotels (since I was to design a website for one) was vital as I was hearing about them for the first time.

A boutique hotel is small. It should not have more than 100 rooms, because it has to provide a personal touch to every guest. It is an independent hotel, or part of an “only-boutique” chain. It is usually located in the city centre or in a very accessible and trendy area. This information guided me on how boutique hotels offer their services and how personalised the look and feel should be.

The Research

Competitive research

Conducting a competitive research on other hotels helped to identify competitors’ strengths and weaknesses relative to their design. With the insight gained through the research on competitors, i could strategically design a solution with the aim of making a better and superior experience for users.

Although I analysed the website of several hotels (direct and indirect competitors), My major focus was on the direct competitors to Haus hotel. I regarded the direct competition as other boutique hotels that offer the same services that Haus is expected provide. I analysed 3 direct competitor websites for this which are Dakota hotel, Grasshopper Glasgow and CitizenM. 

Dakota hotel

The website has a good font hierarchy, it uses videos on the homepage as the first thing seen on the website which can be more engaging than motionless imagery. It also uses colour themes matching the pictures. The visual feel and tone is assertiveness, sophistication, glamorous and romantic.

The buttons have a nice visual and interactive feel as a gold accent surrounds it when in hover state. Unlike most of the hotel websites I visited, the navigation bar does not disappear when scrolling. An improvement opportunity is that the website should display more of what the hotel has to offer so that users of the website check exactly what they are looking for. 

Grasshoppers hotel

Although the website also has a good font hierarchy, the grey colour of the heading and body text makes the website dull as the texts is not very visible. The website uses very dull pictures that are  not engaging and are neither descriptive nor communicative. It has a formal and serious tone and also has a bad layout. Overall improvement opportunities I observed was that the layout should be overhauled to a more modern type, Constrain navigation bar to the top of the website, stylise the buttons, Improve colour palate and increase the visibility of brand colour, Provide more visualization of what the hotel has to offer and use more engaging photos and videos. 

CitizenM hotel

The website uses similar styles to airbnb which is a very popular homestay booking website. A lot of people have used airbnb so this website will feel familiar to them. The Home page images are creative and interesting although not very communicative but it has a lot of pictures across the website, the buttons looked simplistic and has a good hover state. The brand colour portrays a passionate and energetic personality that matches the website’s visual feel. It’s visual feel is a humorous, trendy and energetic tone. Major areas of improvement I observed was to constrain navigation bar to the top of the website when scrolling, and use of more communicative pictures as well as engaging videos.  

Making user personas

After carrying out a competitive research for Haus competitors which provided insight on improvement areas, I needed to better understand the users which are the target demography for the hotel to kick off the design. As stated in the brief, the target demography is: 

With this demography in mind, I created two personas from further secondary research to clarify the user’s motivations, frustrations, needs, and goals.

With this demography in mind, I created two personas to clarify the user’s motivations, frustrations, needs, and goals. The first persona Samantha Jacobs, is a tourist exploring the city of Glasgow while the second persona Ezra Okon, is a professional that came to Glasgow on a business trip. 

The two user personas are within the age bracket of 20-35.

A similarity between Samantha and Ezra is that they both love to travel and would like to make the most out of their time in Glasgow.

Design process

Considering the visual language

I needed to think about the visual language and tone that would guide the design of Haus website.  A good visual design provides a good first impression and shows a  unique brand presence that could make the website stand out from competitors so i wanted to make sure it matched the demography. I wanted the visual language of Haus to symbolise a fusion of Sincerity and sophistication, something unique. A friendly and welcoming feeling without compromising it’s charm and attractiveness.

In my ideation, elegance was the major personality trait I wanted the website to portray. From research on the users, I also wanted it to have a simplistic and unique trait.

I set the tone to be informal and friendly so users will feel welcome and comfortable. The website was also required to feel upbeat and contemporary as it is to appeal to an active and modern demography.

For the typography, i wanted something that reflected charm and elegance without making it illegible and so I decided to use Neoplanta serif font family for the headings. For legibility reasons, I used a sans serif font - metropolis font family for the body as it is easier to read large block of texts in san serif fonts than serif fonts. 

After considering the visual language and typography, I decided to create mood boards based on the tone of voice and visual language that would inspire my colour and website imagery choices. 

Creating  moodboards

Creating mood boards allowed me to collect thoughts, ideas, colour schemes and moods in one place and define a coherent design concept for the project. I see mood boards as a way to establish the visual direction of a project before any actual design is started. After several iterations on my mood boards, I came up with this final design. 

Since the target demography for the hotel is professionals and tourists of  20- 35 age bracket, I found myself drawn to pictures that closely depicted these users in a relaxation or work settings. The pictures were mostly in a modernistic nature that exerted elegance. This feel naturally matched the tone of voice I had created earlier. I decided to use these style of pictures for the website imagery as well as I was greatly inspired by my generated mood board. 

Style tile

My generated mood board led me nicely into my style tile, of which my final iteration of it is shown below.

I was also able to pick out a colour which was evident from my mood board. For the colour, I knew I wanted something associated with charm and uniqueness so purple was very fitting as my primary colour. This colour is also very bright and saturated so it feels upbeat. Purple is a colour that rarely appears in nature, and when it does, it appears in small amounts which could signify it’s uniqueness. I selected teal as my secondary colour and as commonly seen at swimming pools, It evokes  comfort and relaxation which was also in line with the tone of voice. 

Creating a design system for Haus

I progressed to creating a design system for Haus based off my mood board and style tile. This is the set of standards I used to manage the design at scale by reducing redundancy while creating a shared language and visual consistency across the different screens of the website.

This design system includes colours, typography, buttons, forms and switches, iconography, Haus logo, the website imagery, grids, spacing and card components. Collating these elements in one place helped my design to be structured, consistent, clear and easier to iterate. Below are the various elements of the design system.

Colour and visuals

Typography

Buttons, input, switch & shadows

Grid and spacing

Components cards

Initial sketches

Sketching what the website will look like was the next thing on the table for me. I started off with several iterations of paper sketches to spark up my ideation for the structure of the the user interface and what elements will be present on different screens. These are some initial sketches :

Making low fidelity wireframes from sketches

I proceeded to the low fidelity wireframes after finalizing my sketches. I changed some elements that i had present in the sketches like omitting some redundant pages that was present in the navigation bar and making the features easier to understand for clarity in the prototype.

I wanted the user flow to be straightforward and so i put the booking option in the navigation bar at the top of every page. I also placed a card for an engaging video that will play immediately the website is opened. I wanted the website to be simplistic and not cluttered so I properly spaced out elements and let pictures do most of the descriptions. 

 

Home page

Room page

Facilities

Specials page

Location page

Room selection page

About page

Room booking page

Add-on selection page

The user flow

After designing the low fidelity wireframes and prototyping them, I conducted user testing although limited, to evaluate the structure of the website and test he user flow.  This is an illustration of  a typical user flow to book a room in the Haus website .

I was able to getsome  insights from this test which led to a few adjustments to the structure and user interface (I will further discuss some of these modifications). Below is the finalised (after modifications) page transitions to book a room in the Haus website: 

Design modifications 

From the process of creating low fidelity prototypes to transforming them into high fidelity screens, there were some changes to the design after carrying out user testing on the UI and re-evaluating the structure. 

Home page (before)

Home page (after)

Room page (before)

Room page (after)

The two most prominent changes in the design is home page structure and general layout of most pages. For the home page, I wanted the video to be an enveloping experience and so i pushed everything below the fold. There is an animated arrow that directs the user to scroll down to the rest of the website. I also removed the booking section which was directly below the video in the previous video. I found it to be redundant as the user can always access booking button from the navigation bar. From user testing, I was able to realise that the navigation bar was illegible because the contrast was not much so I made the navigation bar to have white text for this page so it will be more legible.

For the overall layout and alignment (using the room page as illustration), I noticed that in the low fidelity wireframe, the cards were not aligned like it was a zigzag flow. I modified the layout so it will have a seamless flow when scrolling. 

The high fidelity prototype

This was the most exciting part for me because this is when the project comes to life. After several iterations and modifications, I was able to arrive at final looks for the user interface. The screens here depict the final iteration of the Haus website: 

The home page

The home page is what greets the user as they visit Haus website. As this is the first point of interaction, I designed it to be an immersive video that sells the elegance and class of Haus. Users can start the primary user flow without scrolling down on this page. 

I made sure that the navigation bar will still be visible to the user so they can go right into the booking process if they wish to. If they want to explore further, they can simply click on the moving arrow at the bottom of the page that draws the user attention to more that is available on the home page.

The booking process

Booking a room can be done on any of the major pages from the navigation bar. The booking process was designed to use the UX pattern of "breadcrumbs" to ensure that users can always retrace their steps and return to any point of the process. Upon successfully completing payment, the user is given a feedback to inform that the room has been  booked successfully. 

Rooms 

The room pages inform users on the different room options available at Haus hotel. Selecting a specific room option provides more information on the room appearance, size and ammenities. Users can also directly book the room from here. 

Facilities 

Facilities page informs users on the several facilities that are available to guests staying at Haus hotel. 

Specials 

The hotel has special packages for guests which can be viewed on this page. Users can browse through customised arrangements if they wish to book for stay at the hotel.

Location

As the location is a selling factor for Haus, there is a separate page that advertises the beauty of where the hotel is situated. Users can use an interactive map on this page to see the specific location and surrounding places.

The journey of Prototyping

Although prototyping and connecting each screen was challenging as it looked like a spiderweb, I was able to connect each screen for the intended user flow. The typical user flow as illustrated earlier, lets the user start the booking process right from the home page upon entering the website. This way the user can directly book a room if they do not browse through the webpages. I also ensured that all other pages maintain the booking button on the navigation bar which is fixed even when scrolling so that they can always decide to book whenever they want to or simply navigate to another page.

The main pages that can be accessed on the navigation bar are Home, Rooms, Facilities, Specials, Location and Booking. These pages also have subpages under them. That is, visiting the rooms page shows you other pages containing individual rooms information and the specials page shows you other pages to individual special packages the hotel offers. 

However, so as to not get lost in navigation, I made use of breadcrumbs UX pattern to ensure that users can always return to where they started. The booking process also has breadcrumbs throughout this process so that the user can always go back to the beginning of the booking process to adjust any details.

Takeaway

Reflecting on the project...

The whole process of working on this project was interesting. It was a really enjoyable task and I learnt new things as well. Before now, I have majorly worked on research and the user experience of projects. As a predominantly visual design project, I was able to learn more abut user interface design, colour psychology and building my own design system which I have not had the opportunity to create before.

I also learnt how to create mood boards and use it to inform the design. I was able to pick a colour for the website based on the mood board and actually think about the visual language and personality of the website. It was also exciting to think more about the importance of using the right pictures for the website’s imagery. Pictures can provide alot of description about something if used properly, It minimalizes the use of words and they are can be more communicative than words if used properly and still they are visually pleasing.

The fact that this project was a concept website with the brief allowing creative freedom, really enabled me to ideate and explore my own design choices and direction as I saw fit. It was truly an exciting challenge overall. 

What could be better?

I believe there is always room for improvement in any project which is the reason why mobile applications and websites get updates and upgrades.

Rounding off here on the design, there are areas that worked well and areas that could be better.

I believe the welcome video, the navigation from page to page, location page providing way to locate the hotel and things to do in Glasgow, the website layout and imagery all works well.

However the following could be improved on:

Other projects