Menu
winchesterlk
Web Designer/Developer
Year:
2023
Technology:
Wordpress, Photoshop
Categories:
Web Design, UI/UX Design
Time
1 Month
Project Overview
The primary objective of creating the WinchesterLK hotel website was to enhance the hotel’s online presence, streamline the booking process, and provide comprehensive information to potential guests. The target audience included tourists, business travelers, and event planners looking for accommodations in the Nuwaraeliya City.
My Role
Technology Used
As the UI/UX designer and developer, I was responsible for the entire project from conception to deployment.
- WordPress: For content management and website building.
- WordPress Plugins: For additional functionality such as booking systems and galleries.
- JavaScript, CSS, HTML5: For custom features and styling.
- Bootstrap: For responsive design.
Goal
- Improve the online booking rates by providing an easy-to-use booking system.
- Enhance the overall user experience with a modern and intuitive design.
- Provide comprehensive and detailed information about the hotel’s rooms, amenities, and services.
- Improve the website’s loading speed and performance.
Problem Statement
The hotel’s outdated website had confusing navigation, an unattractive design, and an inefficient, error-prone booking system. It lacked detailed information about offerings and local attractions, and had slow loading times and poor mobile responsiveness. These issues called for a complete redesign to improve user experience, streamline bookings, and enhance performance.
Design Process
User Research
User research revealed that users wanted a simple and fast booking process. They emphasized the need for clear and comprehensive information about rooms and amenities. Additionally, a responsive design that worked well on both desktops and mobile devices was critical to meet their needs.
Information Architecture
site map represents the hierarchical structure of a website, ensuring intuitive navigation and a user-friendly experience.
- Homepage: The central hub of the website, providing direct access to key sections.
- Book Now: A dedicated section for users to make reservations or bookings quickly.
- Contact Us: A page where users can find ways to reach out for inquiries or support.
- Rooms: This section organizes different room categories, including Single Room, Family Room, Suite, Deluxe Room, and Standard Room, providing detailed information for potential customers.
- About Us: A page dedicated to sharing the company or website’s story, mission, and values.
This structure ensures users can navigate seamlessly between key areas while maintaining a logical and efficient flow.
Added features
Online Booking
Users prioritized an efficient booking experience with intuitive navigation, quick access to features, and a simplified checkout. Clear instructions, minimal steps, and responsive design were essential for a seamless experience. They also valued personalized options and relevant recommendations to enhance their journey.
Comprehensive Information
Users prioritized an efficient booking experience with intuitive navigation, quick access, and a simplified checkout. They valued clear instructions, responsive design, personalized options, and detailed descriptions of rooms and amenities to make confident decisions.
Responsive Design
The website needed to function seamlessly on both desktops and mobile devices, ensuring a consistent and user-friendly experience across all devices.
User-Friendly Navigation:
Easy-to-use navigation was crucial for a positive user experience, allowing users to quickly find the information they needed without frustration.
UI Design System and Branding
Logo Design
This logo for Winchester Sri Lanka reflects elegance and luxury, capturing the essence of a premium hotel in Nuwara Eliya. The central “W” symbolizes quality, flanked by regal lions representing strength and hospitality. The crown adds grandeur, while the banner emphasizes the hotel’s distinguished identity and location.
Color Pallete
The 60-30-10 color rule ensures a balanced and visually appealing website design.
- Primary color (#E6E6E6 – 60%): Used for backgrounds and larger areas, creating a clean and neutral base.
- Secondary color (#53624F – 30%): Applied to navigation bars, sections, or highlights, adding depth and a natural, calming tone.
- Accent color (#313131 – 10%): Used sparingly for buttons, call-to-actions, and key elements, providing contrast and drawing attention effectively.
60 - 30 -10 Color Rule
No Data Found
Future Plans
To address user priorities, the focus will be on streamlining the booking process with intuitive navigation and a simplified checkout. Enhancements will include clear instructions, responsive design across all devices, and personalized options. Detailed descriptions of rooms, amenities, and services will be added to ensure users can make informed and confident decisions.
What have I Learned
Through this project, I learned the importance of user-centric design, seamless feature integration, performance optimization, and the need for ongoing maintenance to keep the website aligned with evolving user needs and trends.