Haus Hotel

HAUS is a new hotel(s) opening in Glasgow’s City Centre. HAUS needs an online presence, via a website, to reach a wider target audience for promoting this new hotel and its services. HAUS is looking for a website to help generate business, increase brand recognition, and deliver strong marketing messages.

As a digital design project mainly focused on UI design, I conducted a thorough research on the target audience, then I applied User Interface design principles to create effective visual design solutions. By considering brand personality, typography fundamentals, colour styles, layout techniques, iconography, and images, prototyping and interactivity. Due to time constraints, this project was only peer-reviewed.

Client

Haus

Type

Digital Design

Year

2024

Process

The process used was hugely split into two - Research, and Visual Design.

Research & Insights

The Haus brand targets Business Travellers within the age range of, but not limited to , 30 - 65 years. Demographics of business travellers can vary based on factors such as industry, job role, company size, and the nature of the business. They mostly come from around the UK & EU. They need privacy, space, security, confidentiality, comfort, and connectivity. They are busy people, so they are very time conscious. Sometimes, they travel in groups. They are also interested in technology and gadgets, networking, health & wellness, global cuisines, business new & trends, and travel rewards.

Audience research insights

Based on the research insights uncovered pertaining to the target audience, two (2) personas were created to represent the vast majority.

Persona 1
Persona 2

From the research made, and insights drawn, I came to the conclusion that the best type of hotel that resonates with business travellers is Luxury - chain. This hotel type was chosen because it resonates well with the preferences of business travellers in terms of the following features; business services, high security, flexibility, spacious rooms, and in-room technology.

Competitive Review

The UIs, brand personality & colours, and tone of voice of close competitors, Glasgow Grosvenor Hotel, and Dakota Hotels, were reviewed for strengths and weaknesses as at the time of doing this project.

Competitive review 1
Competitive review 2

Branding of Haus

Insights deduced from the review partially informed the design direction of the project. The branding of Haus consisted of imagery, typefaces, colours, brand personality, and tone of voice.
Using a good combination of Serif and San-serif typefaces, the hotel would clearly communicate a good fuse of traditionality, modernity and class.
Combination of shades of White, Gold, Brown, and Grey (in compliance with WCAG) would communicate the hotel’s brand personality of sophistication and sincerity.

Branding of Haus

Visual Design

This phase comprised the mood board, sketches, flows & navigation, design library, hi-res mockups, and prototyping.

Mood board

At the tail end of my research, I browsed through the internet in search of visual inspirations to guide the development of the user interface for the Haus brand. It was quite a smooth research owing to the abundance of similar brands in existence. The research informed most of the final outcome of the project.
Nero, tan, copper, and white form a luxurious palette as seen in these upscale hotels. Nero adds elegance, tan brings warmth, copper adds opulence, and white introduces a timeless and pristine touch. Together, they create a refined ambiance synonymous with high-end hotel aesthetics.
Luxury hotel websites often utilize sharp outlined icons and buttons with crisp edges to convey a sense of precision and sophistication. The clean and precise design elements imply attention to detail and a commitment to quality, reflecting the high standards associated with luxury.

Mood board and colours of the Haus brand
Sketches

Using paper and pen/pencil has always been the best way for me to brainstorm ideas. I used these to come up with what I envisaged the website to look like structurally. These mainly included the landing page, the onboarding and booking flows and the menus.

Sketches - Landing page
Sketches - Onboarding, Booking, Menus
Flows & Navigation

The research insights and initial sketches informed the structure of the information architecture (IA). The usability of the IA was then analyzed using task and user flows.

From the research conducted, business travellers are quite busy people. Armed with this information, I made the sketches and flows as easy/fast as possible to hasten up the process for the target audience, and this informed the layout and placement of elements on the website.

Hi-Fi Mockups

Prior to moving fully to Hi-fi mockups, I created a style tile to guide the visual direction of the mockups. It included common visual assets like colors, fonts, images, and interface elements.

Style tile for the mockups

For placement of elements, griding and spacing, all spaces were in multiples of 8. This makes for consistency over the web.

Grid & Spacing for the mockups

Next step was to translate the sketches into hi-fi mockups making sure to follow the IA. There were, however, few changes to the content and structure during the translation.

Some decisive features on the landing page were;

  • Header - Having a contact link on the first header of a hotel website ensures immediate access for visitors seeking assistance or information. Similarly, including an accessibility setting demonstrates a commitment to inclusivity, making the site more user-friendly for individuals with diverse needs. Also, a search functionality and a CTA button makes the website more navigable. An attractive hero image gives off a visual clue.
  • Room booking - Staying at a hotel is the most basic feature any business traveller would want at most points in time, adding a fast way to check availability of room would save them the time of browsing through the website.
Hi-fi mockup - Landing page

There were changes I made while translating the sketches to hi-fi mockups;

  • After coming up with written content for 'About' section, it looked more like a welcome message than an About section. So, I had to take off “About” title.
  • I felt it would be better if a few very important nav-items be listed out instead of hiding them in the menu overlay.

Hi-fi Mockup - Landing page continued

Along the line, “Executive membership” came off as top-tier membership, which means having other levels of membership. But, Haus, for now, does not have such. She treats all signed up customers equally. So I came up with another term for membership - Fans for Haus.

Highlighting the basic facilities on the Haus website's landing page ensures a quick, transparent overview for potential guests, offering immediate insight into the convenience and comfort they can expect during their stay.

Integrating a social proof section on the Haus website's landing page enhances credibility and trust, providing potential guests with authentic testimonials that validate the exceptional experiences of past visitors, ultimately influencing their decision to choose Haus for a luxurious stay. Strategically placed at the end part of the page after customers must have got a summative idea of what Haus has to offer.

The footer has all links needed navigate the website, contact Haus, and even sign up for newsletter is they so desire. A “Book Now” CTA has been strategically placed at the footer just in case the customer is now convinced to go for Haus. A ”Scroll to top” button for easy navigation through the website.

Hi-fi Mockup - Landing page continued

Along the line, I decided to change the headings from Libre Baskerville to Didot LT Roman because Didot LT Roman leans towards a more formal and high-contrast style.
I picked Plus Jakarta Sans over Figtree because the former is a little more stylish, this would create a balance to the formal nature of the newly chosen heading font.

Some decisive features on the onboarding page were;

  • A hero image on the sign up page gives new customers a sense of what they will enjoy in the membership package.
  • On same page, new customers are able to Join Haus membership just in case they landed on this page in error.
Hi-fi Mockup - Onboarding page

For the booking flow, an indicator bar showing each stage of booking process reinforces the usability of the website. And a summary of your choices so far. A summarized information of the “items” you are about to pay for is placed side-by-side the guest information. As a good interface design practice, I added error-handling overlay to help curb navigation mistakes.

Hi-fi Mockup - Booking page

Outcome

Prototype

Haus Website Prototype link

Takeaways

Impact:

Haus website is a luxurious website that would effectively cater for the needs of business travellers.

One quote from peer feedback
" This is luxurious in every sense..."
What I learned:

I learnt that a holistic approach to each of the design phases is the best bet for a stellar outcome. And, ultimately, there is always room to do better.

Next Steps

  1. Conduct usability studies to validate whether the pain points users experienced have been effectively addressed.
  2. Conduct more user research to determine new areas of need.
  3. Add more features and flexibility backed by research.

Other projects

Want to create something awesome? Click to drop me an
e-mail. 👇

☝️ Up