Carolyn Swanhall
Learning Experience Designer

SeniorTix

SeniorTix homepage (Current State)

SeniorTix homepage (Current State)


Challenge

Improve the accessibility of SeniorTix, a website that provides senior citizens with discounts on events, outings, and other activities, during a 2-hour workshop hosted by BitesizeUX.



Discovery
Users: Michael (68) and Janice (71)

Users: Michael (68) and Janice (71)

User Testing

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.

Accessibility issues identified during Michael's simulation

Accessibility issues identified during Michael's simulation

Michael, 68 years old

While watching Michael navigate the SeniorTix website, the following accessibility issues were observed:

  1. 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.
  2. 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.
  3. 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.
  4. Michael attempted to click the checkboxes in the filter menu but was unable to see when the box was selected/not selected.
  5. Michael could see the outline of the text form fields in the newsletter sign up, but could not see the text.

Accessibility issues identified during Janice's simulation

Accessibility issues identified during Janice's simulation

Janice, 71 years old

While watching Janice navigate the SeniorTix website, the following accessibility issues were observed:

  1. 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.
  2. 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.
  3. Janice could not see the text of the filters or the checkmarks and it took several attempts to select a filter.
  4. Janice was unable to see the text or accurately click within the text form fields of the newsletter sign up. 



Iteration
Four sketches in 4 minutes

Four sketches in 4 minutes

Card Redesign

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.

Future State of SeniorTix website (designed in Figma)

Future State of SeniorTix website (designed in Figma)

Wireframe

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

Reflection

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.

Next Steps

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