Bluefin Georgetown
Enhancing User Experience and Accessibility Through Strategic Website Redesign
Project type: Website Revamp
Role: UX/UI Designer
Industry: Hospitality
Tools: Figma, Illustrator
Duration: May 2024
Overview
As a UX Designer, I played a key role in enhancing the Single Page Applications (SPAs) by redesigning the menu to be more user-friendly and accessible on both desktop and mobile platforms. Additionally, I conducted a thorough analysis of web accessibility, ensuring the color contrast met the WCAG standards for the Progressive Web Application (PWA).
Users encountered significant challenges navigating the menu. Accessing the menu from the home page involved an additional step, and once on the menu page, they had to scroll extensively to view the entire menu. Furthermore, locating specific categories required even more scrolling, which was especially difficult on mobile devices.
The original website's color scheme did not comply with WCAG standards, making it difficult for users to read the text. This impacted the overall usability and accessibility of the site.
Problems
Introduce a more user-friendly menu access feature directly from the home page, eliminating unnecessary steps. Additionally, optimize the menu layout to reduce scrolling by implementing collapsible sections or a more compact design for easier navigation, particularly on mobile devices.
Revise the website's color scheme to comply with WCAG standards, ensuring optimal contrast and readability of text for all users. This enhancement will significantly improve the website's usability and accessibility, enhancing the overall user experience.
Proposed Solutions
Design Impact
Enhanced Navigation: Tabbed Menus and Accordion Style Interface
The interface underwent a redesign to incorporate a tabbed navigation system, consolidating all menu options onto a single page. This enhancement significantly streamlined the user experience and improved accessibility and efficiency by enabling direct access to the menu from the homepage, eliminating the need for an extra step.
In order to optimize usability and sustain user engagement, an accordion-style menu was implemented for the mobile interface. This addition effectively eradicates excessive scrolling, thereby fostering a more intuitive and seamless navigation experience across various devices.
Enhanced Web Accessibility Through Color Scheme Redesign
After updating the color scheme, the web accessibility color contrast ratios improved significantly. Initially, only 60% of the elements met the WCAG 2.1 AA standards for color contrast. Post-redesign, 95% of the elements now comply with these standards.
For instance, the contrast ratio of the primary button text against its background improved from 1.94:1 to 12.58:1, ensuring better readability for users with visual impairments.
Next Steps for Further Improving Usability
Addressing Long-Term Development Needs
Once the site is updated and live, conduct thorough testing to ensure each updated component functions correctly. For example, check that the navigation, including menus and buttons, works properly and that the site is mobile responsive. This comprehensive testing will ensure a smooth and efficient user experience.
Plan to update the typography to ensure visual consistency across the website and to enhance accessibility. This includes standardizing font styles, sizes, and spacing to create a cohesive look.