Haus Hotel
Haus Hotel
Embedded Files
HAUS Boutique Hotel Glasgow: Your Gateway to Luxury, Comfort, and Style in the Heart of the City - Explore Exclusive Accommodations, Premier Services, and the Best of Glasgow's Vibrant Culture
My Role
My Role
Solo UX/UI Designer
Timeline
Timeline
8 weeks
Tools
Tools
Figma, Figjam, Adobe Photoshop
The Project
The Project
Project Overview
Project Overview
HAUS is a new boutique hotel opening in Glasgow’s city centre. HAUS needs an online presence, via a website, to reach a wider target audience for promoting this new boutique hotel and its services.
The hotel business in Glasgow is very competitive. There are approximately 85 hotels in Glasgow city centre. HAUS are looking for a website to help generate business, increase brand recognition, and deliver strong marketing messages.
In such a competitive and saturated market, HAUS needs to stand out from the crowd and offer something different to its customers, but first it needs to encourage those customers to book. When visitors enter a website, it takes only a few seconds for them to create a first impression and that first impression, in most cases, is based on what they see – the UI.
A website is the first interaction of the customer with the brand and so is crucial to the success of this new business – people are likely to engage with a company they can trust, and the website is the steppingstone towards building that relationship.
Haus
Haus
Haus is within walking distance of both, Glasgow Central Train Station and Queen Street Station and a short bus journey away from Glasgow Airport making it easily accessible to all aspects that Glasgow has to offer, as well as neighbouring cities such as the capital, Edinburgh.
Target Demographic
Target Demographic
Young professionals and tourists aged 20-35, both male and female, form the core demographic for HAUS Boutique Hotel Glasgow. This group, often avid travelers, seeks not just a place to stay but an experience that resonates with their dynamic lifestyles. They are typically on the lookout for stylish, comfortable accommodations that offer a blend of modern amenities, cultural immersion, and a sense of community.
For these individuals, travel is as much about exploring new destinations as it is about finding unique, memorable lodging that enhances their journey. They appreciate hotels that provide not just a room, but an experience - be it through exclusive services, aesthetic design, or local cultural insights.
HAUS, with its contemporary design, state-of-the-art facilities, and prime location in the heart of Glasgow, caters precisely to these needs. It's more than a hotel; it's a hub where culture, comfort, and convenience converge, offering these young professionals and tourists a unique way to experience the city. Whether they're in Glasgow for business or leisure, HAUS aims to be a home away from home, a place where they can relax, recharge, and feel connected to the local vibe.
Project Goals
Project Goals
Design a visually appealing and distinctive UI that sets HAUS apart in Glasgow's competitive hotel market.
Ensure the UI reflects HAUS's brand identity and the vibrant culture of Glasgow.
Focus on user-friendly navigation and intuitive layout for an optimal user experience.
Select effective typography, color styles, and incorporate relevant imagery and iconography.
Create a functional, interactive prototype of the website using industry-standard tools.
Highlight HAUS's accessibility to transport hubs and attractions, building trust and encouraging bookings.
How will the Project Goals be met?
How will the Project Goals be met?
To achieve the project goals, the website will prioritize:
Designing a Visually Appealing UI: Utilize market research and collaborate with designers to create a unique, trend-setting visual style that captures HAUS's essence.
Reflecting HAUS's Brand Identity: Align the UI design closely with HAUS's brand guidelines, incorporating key brand elements like logos and color schemes.
Focusing on User-Friendly Navigation: Implement a clear, intuitive structure and UX principles to enhance ease of navigation and user experience.
Effective Typography and Imagery: Select readable, appealing typography and resonant imagery to showcase the hotel’s facilities and local culture.
Creating an Interactive Prototype: Use tools like Figma for prototyping and user testing to refine the website's design and functionality.
Highlighting Accessibility and Encouraging Bookings: Integrate location maps and straightforward booking CTAs to emphasize convenience and ease of booking.
Competitive Analysis
Competitive Analysis
Conducting extensive competitive research on other hotels was critical in determining the strengths and shortcomings of rivals' designs. This study, which was notably focused on HAUS Hotel's direct rivals, gave vital insights which enabled the strategic development of a superior user experience in our design solution. While the research included a number of hotels, both direct and indirect rivals, the major focus was on direct competitors — other boutique hotels which offer similar services to HAUS.
To successfully drive our design concept, we conducted an in-depth holistic assessment of three important direct competitors: Boutique 50, Kimpton Blythswood Square, and Malmaison.
Boutique 50
Boutique 50
Colour Palette
Colour Palette
The primary palette consists of white, gold, and green. While the green-on-white combination boasts a strong contrast ratio of 5.98:1, adhering to accessibility guidelines, the gold-on-white contrast is comparatively weaker at 1.81:1. For optimum accessibility, reconsidering the gold shade to improve readability could be beneficial.
Navigation
While the design is intuitive, the absence of a fixed menu bar might pose a slight inconvenience for users, as they would need to scroll back up for navigation.
Image Gallery
Image Gallery
A thoughtfully curated scrollable gallery invites users into a visual journey, allowing an immersive exploration of the hotel's ambiance and offerings.
Personal Touch
The subtle, personalized message anchored at the website's footer is a testament to the brand's commitment to building genuine connections.
Typography
Montserrat graces the website, lending it a contemporary and avant-garde character. This modern typeface not only elevates the content but also aligns seamlessly with the brand's personality.
Design Elements
A recurring design motif is the patterned border, seamlessly integrating the brand's three-color theme; it is both functional and artistic. It punctuates content sections while bestowing a unique identity upon the site.
Use of Whitespace
The design makes effective use of whitespace. The use of center-aligned text on large white backdrops highlights the material and improves readability.
Overall Tone and Brand Persona
The website manifests a modern sophistication, harmoniously blending formality with genuine warmth. The tone is distinctly formal-modern, establishing an aura of trust and sincerity.
Design & Colour Palette
Design & Colour Palette
The website boasts a sleek design, anchored by a pristine white canvas. This minimalist approach allows for the green and black color accents to shine, with an impressive WCAG contrast ratio of 5.98:1 and 21:1 respectively. The black navigation bar, while functional and distinct, leans towards the conventional side. However, within the hotel's brand context, it exudes sophistication, perfectly mirroring the hotel's luxurious ambiance.
Typography
Arial, a universally appealing font, dominates the typography. Its clean lines resonate with the hotel's brand ethos of modern elegance. The typeface choice ensures legibility, contributing to an intuitive user journey.
User Experience
The image upon landing, while visually appealing, has overlaid text that might challenge readability for some users. Strategic use of whitespace emphasizes the 'Check Availability' feature, a pivotal call-to-action, ensuring a streamlined user pathway towards conversion.
Visual Engagement
The website harnesses the power of imagery to its advantage. High-definition photos not only offer potential guests a vivid preview of the hotel's offerings but also elevate the site's aesthetic quotient. Such a visual narrative can deeply engage users, making them invested in the brand story.
Interactivity
Interactivity
A noteworthy inclusion is the video tour – an immersive tool allowing users to virtually traverse the hotel's premises. This feature provides an enriched pre-booking experience, positioning the hotel as a forward-thinking brand in tune with evolving user preferences.
Kimpton Blythswood
Kimpton Blythswood
Target Demographic
Analysing the design elements and content tone, the website appears to cater primarily to an upscale middle-class demographic. They are likely individuals with an appreciation for fine aesthetics and unique hotel experiences.
Malmaison
Malmaison
Target Demographic
The website manifests a modern sophistication, harmoniously blending formality with genuine warmth. The tone is distinctly formal-modern, establishing an aura of trust and sincerity.
Colour Palette
Colour Palette
The site presents a harmonious blend of deep pinks, contrasting whites, and muted greys. The pink-on-white palette is particularly eye-catching with a commendable WCAG contrast ratio of 5.91:1. This choice, while vibrant, conveys sophistication without being too ostentatious.
Typography
Malmaison Glasgow’s choice of bold, uppercase lettering for key headings exudes confidence and contemporary flair. This style aligns seamlessly with the hotel's image as a stylish and avant-garde destination.
Tone & Brand Personality
The site's content radiates a casual yet spirited tone, reflecting the hotel's dynamic ambiance and youthful energy. This vibe is a refreshing departure from traditional luxury hotel branding, making it especially appealing to a younger demographic.
Navigation & User Journey
Several thoughtful design elements contribute to a seamless browsing experience. The ever-present menu accompanying users as they scroll ensures that essential navigation tools are always within reach. A concise hotel summary, expandable with a 'Read More' option, offers visitors a tailored browsing experience, free from excessive visual overload. Bullet-pointed highlights further ease information consumption.
Visual Engagement
The site's visual charm is heightened by a mix of static visuals & an interactive location map, which doesn't just serve as a navigation aid but also adds to the website's contemporary vibe.
Social Integration
Social Integration
The easily accessible social media links beckon users to experience more of the hotel's offerings and ambiance. This feature amplifies the brand's online footprint, connecting users to a richer brand narrative.
Creating User Personas
Creating User Personas
Following a thorough competitive analysis for Haus, which highlighted areas for enhancement, it became essential to delve deeper into understanding the user base, the primary demographic for the hotel, to initiate the design process. As outlined in the project brief, the key demographic includes:
Individuals aged 20-35.
Both male and female genders.
Professionals and/or tourists with a passion for travel.
Based on this demographic profile, I developed two user personas using additional secondary research. These personas help in comprehending the users' drives, challenges, requirements, and objectives.
With the target demographic in mind, two personas were developed to encapsulate the motivations, frustrations, needs, and goals of typical users. The first persona, Emily Robertson, represents a young professional and frequent traveler who seeks both comfort and functionality in her stays. The second persona, Alex Johnson, embodies a creative and culturally attuned freelance travel photographer on the lookout for unique and immersive experiences in Glasgow.
Both personas fall within the age range of 20-35 and share a common passion for travel, each aiming to maximize their experiences while in Glasgow.
Design Process
Design Process
Haus' Brand Personality
Haus' Brand Personality
In conceptualizing the design for the Haus website, I prioritized a strong visual language and tone. Recognizing the significance of a powerful first impression and a distinct brand identity, I aimed for a design that would differentiate the site from its competitors. The aesthetic goal for Haus was to seamlessly blend elements of safety and sophistication, ensuring a high-quality interface that felt both inviting and premium, maintaining its inherent allure and charm.
In the process of crafting the design for the Haus website, I was deeply inspired by distinct personality traits and desired tonal elements to carve out a robust visual language. The foundation of the design exudes elegance, and an undeniable sophistication. It was crucial to ensure visitors immediately associate the brand with safety, while also recognizing its upscale, premium essence. The design's tone seamlessly combines charming allure, an inviting warmth, friendliness, and utmost competence.
For the typography, the selection of 'Lucinda Bright' for the headings was deliberate, aimed at reflecting the brand's inherent elegance and sophisticated persona. For the body content, 'Typography' was chosen, striking a perfect balance of readability and design harmony with the overarching aesthetic.
Creating a Moodboard
Creating a Moodboard
Creating a mood board was a pivotal step in gathering creative insights, color palettes, and the general ambiance into a singular vision, aiding in the crafting of a unified design strategy for the project. I view mood boards as an essential tool in setting a project's aesthetic trajectory before delving into concrete design work. Through multiple refinements of my mood board, I arrived at this definitive compilation.
Targeting professionals and tourists between the ages of 20 to 35, I gravitated towards imagery that captures the essence of relaxation and professional settings. The selections are steeped in a contemporary aesthetic that radiates sophistication, aligning seamlessly with the project’s previously established tone. This resonance has guided my choice to incorporate this particular style of imagery into the website’s visual elements, all inspired by the meticulously curated mood board.
Page updated
Google Sites
Report abuse