WoodSpring Suites: ADA Compliant Website Redesign
Client
WoodSpring Suites Extended Stay Hotels
Role
UX Designer
Timeframe
3 weeks
Tools
Figma
Web Accessibility Evaluation (WAVE) Tool
Google Analytics
Project Overview
A hospitality company, WoodSpring Suites Extended Stay Hotels, needed to make their website ADA compliant without rebranding.
A style guide needed to be delivered for implementation.
Business Goals
Increase the number of customers able to use their website
No additional lawsuits for not having an ADA Compliant company website
Original Website Evaluation
Before I could start creating an ADA Compliant style guide, I needed to evaluate the current state of the website. I used the WAVE tool to identify the number of contrast errors on the website currently.
According to the WAVE summary, there were 363 contrast errors on the Home page alone. This means that text or images of text do not have a contrast ratio of at least 4.5:1 which does not meet minimum WCAG guidelines for accessibility.
Original Website Style Guide Evaluation
With this information, I continued my current state evaluation of the website. I wanted to make a style guide for the current color palette, typography, and buttons. With so many contrast errors, the color palette needed to be adjusted along with the typography for better readability. The buttons needed button states to account for users who are unable to navigate through the website using a mouse. These were the 3 areas I knew would make the biggest and quickest impact when making the website ADA Compliant.
Guidelines
When I was ready to adjust the current style guide to create an accessible design, I had to follow the guidelines given to me for what I can and cannot change within the website:
Colors can be adjusted or removed to meet accessibility standards
Typefaces and text styles can be changed
Layout and content cannot be changed
ADA Compliant Style Guide
For the ADA Compliant style guide, my goal was to simplify the amount of colors, text styles, and buttons that were on the website while staying true to the brand.
For the ADA Compliant color palette, I had to adjust or completely remove some of the original colors to make it accessible:
Kept the primary teal color the same
Darkened the secondary green color
Darkened the orange brand color
Eliminated the original background colors and provided 2 new colors to meet accessibility standards
Changed the text colors to make them darker than the originals
Added accessible utility colors
For ADA Compliant typography, I had to make several changes:
Eliminated the original typefaces
Added one new typeface
New typeface is sans-serif and geometric for better readability between numbers and letters
Reduced the number of text sizes
Reduced the number or text weights
For ADA Compliant buttons, I made adjustments to the original buttons and added button states:
Primary button is the primary teal color
Secondary button text is the primary teal color and is outlined in the primary teal color with an additional .5px thickness
Eliminated the tertiary button
Created one text link color
Eliminated the green text link color in the footer and kept the white text link color for the footer only
Added hover, pressed, focused, and disabled states for the action buttons
Added a hover and disabled state for the text link buttons
Final Designs
Using the ADA compliant style guide I created, I redesigned 42 of the most highly trafficked web pages (via Google Analytics) on the site. To show the differences between the original web pages (non-compliant) and the new web pages (ADA compliant), I presented a few of them side by side.
Search Results Page
Checkout Page
Itinerary Page
Reservations Page
Conclusion
The adjustments I made to the brand color palette, typography, and button states resulted in $100 million in booked revenue for the 2022 calendar year.