SeniorTix is a Website that aggregates the best Senior Citizen discounts for nearby events and activities.
Project Type and Scope
I served as the lead designer for the redesign of the website. I provided the following:
- review and assessment of secondary research
- reviewing design and features for accessibility overall and specifically for target users
- prioritizing design changes based on user needs & ideating solutions
- redesigning the page components and overall design to better meet user needs
Original Site Seen on a Laptop
Project Overview
Users love the quality events and discounts, but don’t love using the site to find them. Many complaints were related to accessibility issues seeing details, being able to click on buttons or filters and issues with form fields.
In this case study, I’ll walk you through how I redesigned the website to address the most pressing accessibility issues and improve user experience with the site.
Learning About Users
SeniorTix provided information about several users who had performed testing on the site.
Michael, a 68 year old male has red/green color blindness and low vision. Janice, a 71 year old female has mobility and fine motor disabilities, specifically, shaky hands. She also has low vision.
I used this information to inform design decisions through the process.
Observing a User Interacting with SeniorTix Site
Video of User Interaction
SeniorTix provided video of Janice interacting with the site. What I saw was a user struggling to interact with buttons and filters to access the content that she wanted to see. Upon reviewing this footage, I developed ideas to adapt the site to support larger target ranges for clickable elements.
Viewing the Site Through a Modified Lens
Using an extension, I was able to view the original site as someone like Michael, who has red/green color blindness.
This helped me think about how to adjust design elements and enable users with color challenges to visually recognize key elements with ease.
Original Design Seen Through a Color Blindness Tool
User Interaction Review Takeaways
Review Color Palette & Fonts for Accessibility
I wanted to understand if the site color theme was optimized for users with low vision and color-blindness.
I ran the text and background colors through a contrast checker to look for issues with AA and AAA level standards. Additionally, I assessed the colors with a color-blindness tool to see how the site looked to those with red, green and blue color blindness.
I used Adobe's Color Accessibility tool to create a color-blind safe palette and see what it looked like with various levels of color-blindness.
I used Chrome's Color Picker Eyedropper plugin to grab color seen in various levels of color-blindness to use with a text contrast checker.
Accessibility Issue Identification
Original Design Noting Accessibility Issues
Opportunities to Improve Accessibility
Looking at the site, I noted the following accessibility issues:
1 - Menu action is too fast for users with mobility challenges
2 - Text is not readable against the background image
3 - Font size too small for low-vision
4 - Click zone is too small for those with mobility challenges
5 - Card color icons small and have same symbols for all
6 - Help text is unreadable - no field labels
7 - Text contrast is too low
8 - Footer & button color close in shade to discount color
2 - Text is not readable against the background image
3 - Font size too small for low-vision
4 - Click zone is too small for those with mobility challenges
5 - Card color icons small and have same symbols for all
6 - Help text is unreadable - no field labels
7 - Text contrast is too low
8 - Footer & button color close in shade to discount color
Sketching Solutions
Sketches of Alternative Layouts for Deal Cards, Form & Navigation
Given the mobility and visual challenges of target users, I worked on ideas that would help to make imagery and text stand out for all users.
Focusing on Low Vision & Fine Motor Impairments, I sketched alternatives to the existing event cards, form, filter results, navigation and page layout.
Card Redesign
How might we design the deal cards to be easy to read and interact with?
I rearranged the card contents to put text and cost-saving symbols at the top. I increased the size of the button to be more visible and easier to click on. For all content, I worked to create higher contrast ratios for greater visibility. Lastly, I used the cost-saving color as the background for the card so users could more easily see what level of discount each card offered if they didn’t see the symbol.
Original and Redesigned Deal Cards
Filter & Card Key Redesign
Original and Updated Design of Deal Key & Filter Sections
How might we make the filters more accessible for users with mobility challenges?
I increased the size of each filter option and the spacing between them to create a larger target area.
Increasing the symbol size and adding a unique symbol gives users multiple ways to distinguish the discount amount for each deal.
Form Redesign
How might we make the form more accessible for users with low sight?
1. Increased contrast of the description and help text to optimize readability.
2. Added labels for each input field to enable screen readers to identify input fields.
Original and Updated Form Design
Menu Adjustments
How might we make the menu more accessible for users with mobility challenges?
Original Menu Action
Updated Menu Action
The original menu drawer was triggered on hover and would close quickly, making it hard for a user to see the menu. For those with a mobility challenge, this would be very frustrating. I updated the menu drawer with a click trigger so it would stay open until clicked again outside of the menu to close it. This will allow users more time to see the selection options.
Hero Section Redesign
How might we make the Hero Section more readable?
Original Hero Section
Updated Hero Section
The original version had text over a picture which was hard to read. To make this more viewable for the target audience, I replaced the hero image with a solid background and added pictures as separate elements to allow text to be clearly visible.
Additionally, giving the navigation bar more contrast will make the site more user friendly to those with vision challenges.
What I Learned
This project helped me dig into the variety of aspects that relate to usability for users with visual and mobility challenges. I was please to find easy to use and free tools that could help me test me design choices. It was informative to see how users with visual and mobility challenges would experience my design.
Next Steps
To take this project further, I would like to build out a high fidelity prototype and test it with users who have visual impairments and mobility challenges.
