UI and Accessibility Design for Reynolds Landing
Reynolds Landing House is a modern yet historically rooted retreat located in
the heart of Savannah's Historic District. Dating back to 1853, this beautifully
restored property blends timeless architecture with contemporary design, offering a luxurious stay just a block away from the scenic Forsyth Park. With its sleek, minimalist exterior and thoughtfully designed interiors, the home provides a tranquil escape while keeping guests within walking distance of the city's charming streets, fine dining, and cultural landmarks.
The spacious 1,800-square-foot residence comfortably accommodates up to eight
guests with three well-appointed bedrooms, two full bathrooms, and a half bath. Ideal for families, friend groups, or business travelers, the property features open-concept living areas, high-end furnishings, and modern amenities to ensure a comfortable stay. Whether you're exploring Savannah’s rich history or relaxing in the stylish ambiance of the house, Reynolds Landing House offers an unforgettable blend of past and present in one of Georgia’s most beloved cities.
Heuristic Evaluation
Accessibility audit based on WCAG 2.1 standards to identify potential barriers for users with disabilities.
Empathy Mapping
Design that minimizes frustration and enhances usability.
Cognitive Load Reduction
Simplified dense text areas by implementing improvements to the content hierarchy for better readability.
Challenge
Designing a single-page rental property website presented a unique challenge in balancing the homeowners' visual preferences with accessibility requirements. While they requested visually heavy elements such as a large image slider and two-column content formatting, it was crucial to ensure that the design remained inclusive for users with visual and motor impairments. Additionally, the wireframe would be handed off to a remote developer, making it essential to provide clear, actionable annotations that ensured compliance with universal design principles. The project required meticulous attention to detail, particularly in structuring content, ensuring keyboard navigation, and improving readability for all users.
Solution
To address the accessibility concerns, I implemented universal design principles and provided a comprehensive annotated wireframe that detailed specific recommendations for an inclusive user experience. The guidance focused on keyboard navigation, screen reader compatibility, contrast and text legibility, and mobile responsiveness. Key solutions included adding skip navigation links, ensuring all media had alternative text and transcripts, reformatting form fields for ease of use, and adjusting text elements to meet Web Content Accessibility Guidelines (WCAG 2.1) standards. Additionally, I provided recommendations for responsive design to ensure the layout adapts seamlessly across different screen sizes.
UX Research Implementation
To develop an effective and accessible design, I utilized the following UX research methodologies:
-
Heuristic Evaluation: Conducted an accessibility audit based on WCAG 2.1 standards to identify potential barriers for users with disabilities.
-
Competitive Analysis: Studied similar rental websites to understand best practices for both accessibility and user experience.
-
User Empathy Mapping: Considered the pain points of users with visual and motor impairments to create a design that minimizes frustration and enhances usability.
-
Mobile Usability Testing: Designed a mobile wireframe to ensure that accessibility principles were equally effective across different devices and screen sizes.
-
Cognitive Load Reduction: Simplified dense text areas by implementing "Read More" links and improving content hierarchy for better readability.
Wireframes and Annotations
The wireframe and annotations for this website serve as a blueprint to ensure a structured, accessible, and user-friendly design before development begins. The wireframe outlines the layout, navigation, and key content sections, providing a visual guide for how users will interact with the site. The accompanying annotations offer detailed, actionable guidance to ensure the website meets universal design and accessibility standards. These annotations specifically highlight keyboard navigation, screen reader compatibility, color contrast ratios, text scalability, and mobile responsiveness, making the site inclusive for users with visual, motor, and cognitive impairments. By clearly communicating these elements to developers, the wireframe and annotations help bridge the gap between design intent and functional execution, ensuring that the final product is both aesthetically appealing and fully accessible to all users. Check the full version of the image below HERE.
Result
By integrating accessibility best practices, the final wireframe ensures a seamless experience for all users, including those with disabilities. The site will be easier to navigate, with enhanced readability, keyboard-friendly interactions, and alternative text for media elements. These improvements not only create a more inclusive and compliant website but also enhance user satisfaction and engagement. The anticipated result is a rental property website that is not only visually appealing but also meets universal design standards, making it a welcoming space for every visitor.
To further enhance usability, a mobile app mockup was created, showcasing how the accessibility principles translate into a responsive and intuitive interface. The app design mirrors the website’s structure while optimizing the layout for mobile devices. Key features include clear navigation, touch-friendly buttons, optimized form fields for easy input, and scalable text elements that ensure readability on smaller screens. The app also integrates voice navigation and screen reader support, making it easier for users with visual impairments to book their stay. This mobile adaptation ensures that users can seamlessly interact with Reynolds Landing House from any device, reinforcing the commitment to an accessible and user-friendly experience.
