Precise Tale Poggio Alla Sala
Heuristic evaluation, competitor analysis, audit report, and redesign
Overview
I was tasked with improving the User Experience (UX) and User Interface (UI) of the Precise Poggio Alla Sala hotel website as an assignment from Oranje Studio in June 2024. The focus was on key areas, including the main navigation, home page, rooms page, and footer, to enhance usability, accessibility, and visual consistency to create a more seamless and engaging user experience.
Role: UX & UI Designer
Methodologies & Tools: I began by conducting a Heuristic Evaluation using Nielsen’s 10 Usability Heuristics. This enabled me to systematically assess the website’s strengths and weaknesses in areas such as user control, consistency, and error prevention. I also utilized Usability Metrics to quantify the usability issues, and I benchmarked competitor websites—namely those of Marriott, Hilton, and Waldorf Astoria—to identify best practices in the hospitality industry.
To further assess accessibility, I ran the website through WAVE and Google Lighthouse, which identified several critical errors, such as empty links, broken ARIA attributes, and contrast issues. Finally, I performed a card sorting exercise to enhance information accessibility by restructuring the site’s navigation and content organization.
1. Main Navigation 2. Home Page 3. Rooms Page 4. Footer 5. Results & Recommendations
Main Navigation
Key Improvements
Heuristic Evaluation: The navigation scored highly in areas like visibility, consistency, and user control, but there were several issues with error prevention and recognition rather than recall. For example, some links were broken, and certain important items, like "Spa & Wellness," disappeared when scrolling.
Card Sorting: I used card sorting to simplify the navigation structure, grouping related sections like Dining, Events, and Spa into intuitive categories.
Performance Improvements: Based on the WAVE and Google Lighthouse reports, I optimized navigation performance by fixing broken ARIA roles and improving accessibility features.
2. Home Page
Key Improvements
Before: The home page contained overlapping elements and inconsistent use of space, with margins that disrupted the flow of content. Additionally, key functions like the reservation box would disappear when scrolling.
After: I reorganized the layout to fix the reservation boxes and Call-to-Action (CTA) buttons at the top for consistency. I also ensured that the visual design aligned with industry conventions by maintaining visible sections for offers, dining, weddings, and events. This provided a cleaner, more intuitive layout.
3. Rooms Page
Key Improvements
Before: The rooms page lacked a clear hierarchy, with inconsistent spacing and navigation buttons that were difficult to read.
After: I redesigned the page to feature a gallery that highlighted the rooms, moved the facilities below the images for better visibility, and added a more prominent CTA button. This not only improved the visual appeal but also enhanced the page’s usability by creating a logical flow for users.
4. Footer
Key Improvements
Before: The footer was cluttered, with scattered links and unclear grouping of information.
After: I organized the footer into two distinct columns—one for contact information and one for useful links—creating more white space and improving readability. Social media links were centered for better visibility and a dedicated section for the newsletter subscription was added, which improved the overall hierarchy and accessibility of the footer.
5. Results & Recommendations
This case study highlights my systematic approach to solving UX challenges by applying proven methodologies and focusing on improving both functionality and aesthetic elements. By tackling issues with a user-centered mindset, I was able to create a more user-friendly, visually consistent, and accessible experience for the users of Precise Poggio Alla Sala’s website. Some of the most notable outcomes included:
Error Prevention: Fixing broken links and ensuring that all elements, like ARIA roles, were functioning correctly improved the accessibility and usability of the site.
Recognition Over Recall: By keeping all important elements visible and minimizing the need for users to remember where items were located, I reduced cognitive load.
Visual Hierarchy: Enhancing the overall design, particularly on the home and rooms pages, ensured that users could find information quickly and easily.
If more time were available, I would conduct further usability testing to gather real-time feedback on the changes and perform A/B testing to measure the performance of the new designs against the original layout. This would provide more data-driven insights into how the changes impacted user behaviour and satisfaction.