Visual Design for a Hotel Website: Haus
Haus, a new premier lodge in Glasgow's vibrant city centre, needed a digital presence to attract its niche audience of adventure travellers. This project involved designing a visually engaging, user-friendly website that reflects Haus's essence—adventure, sophistication, and exclusivity. The goal was to enhance online bookings, communicate the brand's unique value, and provide an intuitive user journey.
Problem Statement
Haus Hotel needed an online presence to attract adventure travellers and stand out in a competitive market. Key challenges included building a strong digital identity, offering a seamless experience for all age groups, showcasing premium amenities, and addressing pain points like poor connectivity, high cancellation fees, and limited gear storage.
Solution
Design Process
The design process for the Haus Hotel website was meticulously crafted to prioritize user needs while aligning with business goals. By adopting a systematic approach, the process flowed seamlessly from in-depth research and analysis to defining user-centric insights, generating creative solutions, and translating them into visually engaging and functional prototypes.
Discover
The research focused on understanding the problem space and identifying user needs. Through extensive research, user surveys, and competitor analysis, we gathered key insights about the financial literacy challenges faced by young adults. This foundational work set the stage for a user-centered solution, ensuring the design decisions were based on real-world pain points and preferences.
Target Demographics
The Haus Hotel website targets adventure travellers aged 35 to 47, mainly working professionals with stable careers. They seek unique, upscale accommodations that blend luxury with authenticity. This audience values seamless planning for activities like hiking and canoeing, as well as comfort and premium amenities. They prefer visually immersive booking platforms and desire easy access to adventure packages and personalized services.
Competitor Analysis
Define
Empathy Map
User Persona
User Persona
Mood Board
Creating mood boards helped consolidate ideas, color palettes, and atmospheres into a cohesive design vision. Incorporating greenery from the hotel's location added a lush, vibrant feel to align with the adventurous theme.
Prposed Features
Ideate & Design
Low Fidelity Screens
Low-fidelity wireframes provided the foundation for the website’s structure, focusing on layout and functionality. These simple sketches outlined key elements like navigation, room descriptions, and booking flows, ensuring the design addressed user needs while leaving room for flexibility and iteration during development.
Information Architecture and Task Flows
Mid Fidelity Screens
Mid-fidelity wireframes added more detail to the design, showcasing refined layouts, interaction flows, and placeholders for content. These wireframes emphasized usability, allowing for feedback on navigation and functionality before progressing to high-fidelity visuals and final adjustments for the user experience.
Design System
The style guide established the visual language for the project, detailing typography, colour palettes, and UI components like buttons and cards. With burnt red for energy, off-white for warmth, and grey tones for balance, the guide ensured consistency and aesthetic appeal across all screens.
Deliver
The Deliver stage brings together all the research and design efforts, showcasing how each phase contributes to creating a seamless and user-focused experience. Below are the final screens of the Haus Hotel website, reflecting its intuitive, adventure-centric design while leaving room for future enhancements to cater to evolving user needs.
Home Screen
The home screen provides a comprehensive overview of the property, showcasing amenities, adventure activities, and featured stays. Tailored recommendations help users explore options that best suit their preferences, creating an inviting first impression.
Onboarding and Signup Screens
The onboarding process offers seamless login options via Gmail, Apple, phone number, and Facebook, ensuring a secure and user-friendly experience. With OTP verification, users can log in securely and access past bookings effortlessly, enhancing convenience and personalisation for returning guests.
Search Bar
A dynamic search bar allows users to check room availability by customizing the number of guests and selecting dates. This feature simplifies the booking process, enabling users to find their ideal stay quickly and efficiently.
Room Booking Process
The room booking process features virtual tours with vivid images to give users a sense of their stay. A simple four-step process, complemented by a progress bar, ensures clarity and guides users seamlessly through booking completion.
Activity Booking
The adventure concierge simplifies activity booking by combining room and adventure reservations in one place. This all-in-one approach makes it convenient for guests to plan their stay and activities with ease and efficiency.