$$ ProgressBar - DoNotEdit $$

• TO DO
• Organisms
• Deleted

UniversityTickets

Event Ticket Seat Selection

for Users with Colorblindness

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Summary

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.

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Highlights

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

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Problem

Users with colorblindness couldn’t identify which seats were available.

Standard Vision

Red/Green Colorblind

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 1

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.

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 2

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)

Protanopia (Red/Green)

Achromatopsia (Monochromic)

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 3

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Final Solution

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Aftermath & Retrospective

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Next Steps

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Continuation

</aside>