Publish
About COMPANY-HERE
Problem
Outcome
Deliverables
✓ Lorem
✓ Ipsum
✓ Dolor
✓ Lunctum
✓ Vires
✓
✓
Tools Used
✦ Lorem
✦ Ipsum
✦ Lunctum
UniversityTickets
Event Ticket Seat Selection for Users with Colorblindness
Summary
UniversityTickets was a live-event ticketing platform for universities.
Colorblind users couldn't identify which seats were available. The solution involved designing in grayscale, using icons and seat numbers for clarity, and testing with colorblindness simulation software. The final design improved accessibility for all users.
Highlights
MY ROLE
UX Designer
TOOLS
TIMELINE
3 months (Jun 2019 – Oct 2019)
TEAM
Leo Vogel + 1 Developer
EMPLOYER
UniversityTickets
DELIVERABLES
CSS code
GOAL Update seat selection to support users with color blindness.
OUTCOME New UI built and deployed to 200+ schools
Users with colorblindness couldn’t identify which seats were available.
Standard Vision
Red/Green Colorblind
Vision Types and Testing Tools
There are 8 types of vision. It is not practical to test your products with a user of each vision type.
Vision Types
The solution is to use software to simulate how people with different types of vision see the world.
Sim Daltonism is a free Mac app that can simulate all vision types using an overlay on any area of the designer’s screen; included are keyboard shortcuts to quickly cycle through each type of vision.
Colorblindness Simulation
Sim Daltonism was used to test the solution with all types of colorblindness to check that seat selection was fully accessible to all users.
Below is what the seating chart looks like when viewed by users with different vision types.
Standard Vision
Deuteranopia (Red/Green)
/w=3840,quality=90,fit=scale-down)
Protanopia (Red/Green)
/w=3840,quality=90,fit=scale-down)
Achromatopsia (Monochromic)
/w=3840,quality=90,fit=scale-down)
Design in Grayscale
Ensure vision accessibility by designing in grayscale.
Grayscale limits color selection greatly.
Need clear distinction between the states and seat types.
Used icons and the seat number to make all seats understandable.
Final Solution
Updated (Standard Vision)
Previous (Red/Green Colorblind)
Updated (Red/Green Colorblind)
Takeaways
1. Design first in grayscale to ensure products are accessible for all users.
2. There are several types of color blindness.
3. Physical and digital tools exist to simulate colorblindness.
Variantor colorblindness simulation glasses ($450) are sold by Cambridge Research Systems. These only test for one type of colorblindness but could be useful as a tool to build empathy for users.
Next Steps
Better alignment could be achieved with a different application of icons.
Available seat color could be set to a client’s brand color.
More Projects
Projects
