SeniorTix

Role: UX/UI Designer

Duration: 2 Weeks

Description

SeniorTix a website for discovering the best senior citizen discounts on local and national events, outings, and activities. Whether you’re looking for discounted tickets to museums, theater shows, concerts, nature tours, or theme parks, SeniorTix curates exclusive deals for seniors to help make your leisure time more affordable and enjoyable.

Done with BiteSize Ux, SeniorTix is designed with seniors in mind, featuring a simple, clean layout, and clear, legible fonts, to ensure a smooth user experience for people of all tech levels.

Design Process & Deliverables

Research: User Tests, Competitive Analysis, Initial Research

Analysis: Card sorting, Site Map

Design: UI Design, Design Systems, UX Design

Finalization: User Testing, Iterations, High Fidelity Prototyping

Lets Talk Accessible Design

Accessible design is the practice of making digital experiences usable for everyone, regardless of their abilities, background, or circumstances. A common misconception is that usability and accessibility are the same thing when in reality, a bad user experience for the general public is usually worse for a disabled or impaired individual.

In this project, I focused on the needs of people with disabilities or impairments.

My Challenge

The goal for the project were

  • Improve the accessibility of SeniorTix.

  • Learn by Observing SeniorTix users to identify websites accessibility issues.

  • Create a Detailed Hi–Fidelity sketch of the redesign.

Accessibility Evaluation

Observation is a way to identify accessibility issues in a website or app. For this, we conducted user testing on two individuals with with varying underlying conditions to see how user friendly the site was for them.

Janice

71 years old

  • Motor disability, Shaky hands

  • Low vision

Accessibility Issues

Identified after watching Janice navigate SeniorTix.

  • Dropdown

    • The dropdown navigation was impossible to use due to Janice’s motor disability.

  • Font

    • The font was illegible due to Janice’s low vision.

  • Button size

    • The buttons are so small, that they are difficult for Janice to click.

Michael

68 years old

  • Red/Green color blind

  • Low vision

Accessibility Issues

Identified after watching Michael navigate SeniorTix.

  • Icons contrast

    • The icons are hard to differentiate, due to his color blindness

  • Font

    • The font was illegible due to Michael’s low vision.

  • Button contrast

    • The buttons impossible to see and click, due to his low vision.

Accessibility Evaluation continued

Hero Image

  • There is poor contrast between the image and the text overlay, making it difficult to read for both users.

Discount Legend

  • The color-coded icons on the cards can be hard to distinguish for color-blind users like Michael.

  • The clickable space for the checkboxes are too small.

Navigation Bar

  • Janice tried clicking the submenu but was unable to do so. Her hand tremors made the hovering on the navigation menu difficult for her.

Cards

  • Not enough of a target area for the CTA button and limited contrast for the label text.

Iteration

While observing our users, I identified several accessibility issues with the card components. I decided to tackle these first, as they affected both users. I sketched out 4 possible solutions to improve the design and accessibility of the cards, as they presented many challenges to both users.

Rapid Sketches

Detailed Sketch

Next, I chose the sketch that I thought would be best and started adding detail to it.

  • High-quality image with lower opacity to describe the activity

  • Use the number of % to delineate savings rather than using color.

  • The call to action is darker and larger.

High Fidelity Prototype

Navigation and Drop down menu

  • More contrast between background color and text.

  • Used Bold font to increase legibility.

  • Menu maintains initial hover, but submenu is accessed by clicking for easier use.

  • Padding for clickable areas has increased.

Deal Cards

  • Displays the discount to enhance clarity so users can immediately notice the amount.

  • Added linear gradient background over image to ensure high contrast.

  • The discount title is bolded and on a white background to ensure legibility.

  • Designed solid call to action buttons with high color contrast for immediate attention and an increased size.

Sort By and Filters

  • Increased the size of checkboxes and filter containers.

  • Clickable containers allow users with motor difficulties to click easily without precisely tapping the checkboxes.

  • Selected containers are highlighted to show strong visual contrast.

  • Categories are listed in alphabetical order for more ease.

Before

After

Conclusion

Final Thoughts

Working on this case study helped me truly understand the difference between Accessibility and Usability, by shedding light on the impact of vision and motor impairments on user interactions with digital products.

It has highlighted the crucial importance of empathy when designing for diverse user groups. What may appear intuitive or usable to one individual may present significant challenges for someone with different technical ability, specifically seniors or individuals with disabilities, two groups of people often forgotten about.

The insight gained from this case study has deepened my commitment to creating inclusive, accessible designs.