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.
The process used was hugely split into two - Research, and Visual Design.
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.
Based on the research insights uncovered pertaining to the target audience, two (2) personas were created to represent the vast majority.
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.
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.
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.
This phase comprised the mood board, sketches, flows & navigation, design library, hi-res mockups, and prototyping.
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.
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.
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.
.png)
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.
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.
For placement of elements, griding and spacing, all spaces were in multiples of 8. This makes for consistency over the web.
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;
There were changes I made while translating the sketches to hi-fi mockups;
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.
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;
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.
Haus website is a luxurious website that would effectively cater for the needs of business travellers.
" This is luxurious in every sense..."
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.
-p-800%201-min%20(1).png)