SeniorTix homepage (Current State)
I observed as two users, Michael and Janice, navigated through the SeniorTix homepage. Michael has deuteranopia (red-green color blindness), while Janice has hand tremors. Both users also have low vision. These deficiencies were simulated to help better identify accessibility issues experienced by both users.
Michael, 68 years old
While watching Michael navigate the SeniorTix website, the following accessibility issues were observed:
- Michael's low vision and color blindness made it difficult for him to see the text overlays on the hero image and individual cards on the SeniorTix website.
- Michael could not see the text on the card buttons and the faint outline made it difficult to discern what the box element was for.
- Michael zoomed in on the discount legend, but had difficulty seeing the text and was unable to differentiate between the green, yellow, and red icons.
- Michael attempted to click the checkboxes in the filter menu but was unable to see when the box was selected/not selected.
- Michael could see the outline of the text form fields in the newsletter sign up, but could not see the text.
Janice, 71 years old
While watching Janice navigate the SeniorTix website, the following accessibility issues were observed:
- Janice attempted to click within the submenu items but was unable to due to her hand tremors and the hover function of the navigation menu.
- Janice was unable see the white text overlay on the card components and the text on the card buttons, and was unable to click on the available button targets.
- Janice could not see the text of the filters or the checkmarks and it took several attempts to select a filter.
- Janice was unable to see the text or accurately click within the text form fields of the newsletter sign up.
Once the accessibility issues had been identified, I focused my initial redesign on the card component within SeniorTix since this component is a key element of the website experience and both users highlighted issues with color contrast, readability, and usability of the cards themselves.
I began by rapid sketching four possible solutions to improve the design and accessibility of the card component.
These sketches maintained the key elements of the existing card component (text, image, button, discount), while:
- addressing potential color contrast issues by moving the title of each card to a white background instead of as an image overlay;
- improving readability by increasing the size and placement of the card text; and
- enhancing discoverability by highlighting the discount for each item more effectively.
Using an existing Figma file, I had 30 minutes to design the future state of the SeniorTix website starting with the new card design which incorporated several elements from my initial sketches. Additional accessibility issues that were addressed, included:
Color: Increasing the value of the SeniorTix brand green for better color contrast on buttons
Typography: Increasing font sizes throughout and replacing all Roboto Light font with Roboto Regular or Medium
Navigation Bar: Updating top navigation with a white background and increasing the sizing and spacing of the links and logo
Filters: Removing the discount filter and changing the event category filters from checkboxes to buttons with larger and more recognizable click targets/states
Microcopy: Updating the hero, button, and CTA text to be more clear, concise, and engaging
What I Learned
This rapid redesign process highlighted the necessity of companies to test their websites with a diverse group of users, especially those with visual, developmental, and/or fine motor impairments. With a wide range of plug-ins, simulators, and other resources available, it is easier than ever for accessibility issues to be addressed during the early stages of a design project.
This process was also a great opportunity to practice rapid sketching and wireframing, which made me focus on the key accessibility issues that needed to be addressed rather than spending time focusing on the overall look and feel of the SeniorTix website.
Based on my previous observations, next steps for the SeniorTix redesign would be:
- test the existing card design to determine if the design is flexible enough to accommodate a wide variety of text/images
- address additional accessibility issues within the main navigation and submenus to increase the fonts and click targets, while removing the current hover states
- create a working prototype with additional views of each card component
- conduct usability tests with the potential future state to assess how the redesign has addressed the previous accessibility issues and determine if filtering by discount/other options would meet user needs