Groove
>Spring 2023>INF385C: Accessible UX
>Role: UX Research, Accessibility, Design System, Interaction Annotations and Prototyping
>Team: Elizabeth Le, Prachi Modi, Riya Gupta, Saahari Kumar
>Tools: Figma, FigJam, Canva, WCAG
Groove is an online ticket purchasing platform and wearable device designed to allow people with cognitive and motor disabilities enjoy the concert-going experience.
Context
On popular ticketing platforms, accessibility information usually only goes so far as to inform users about accessible seating. Wearables like Apple watches and Fitbits offer some biometric monitoring to alert users like the status of heart rate, blood oxygen, or wrist temperature, but rarely are integrated with the venue/show itself. Users with disabilities frequently encounter barriers and/or obstacles to attending shows at concert venues.
Solution
Our two product designs—a ticketing website and a wearable device—aim to ensure that the experience of going to a show is accessible from the moment of purchasing a ticket to physically being at the venue.
Full project documentation can be found here.
Generative Research
During ideation, each member of the team was responsible for exploring the pain points that people with disabilities face while trying to find and purchase concert tickets.
This research was translated into a user journey map, pictured to the right. Through our research, we discovered that many people are faced with difficulty purchasing tickets online or through the phone before tickets are sold out. In order to ensure proper accessibility accomodations (ex. handicapped seating, ASL interpretators, etc.) it is easier to call a venue, but there are typically long holding times. Groove intends to streamline the online purchasing process to give people with disabilities the best chance at acquiring tickets while ensuring accessibility needs are met. Additionally, we researched the barriers that people face once at the venue. Through our research, we determined that many people with disabilites have trouble navigating the venue, or feel they are unable to attend concerts althogether because they may not be supported by the venue/staff. Groove ensures that users with disabilities are supported throughout the concert-going experience, from ticket purchase to the day of the event. This is done through a few key features, outlined below.
The features of the Groove include:
User Personas
![]()
![]()
![]()
Using our user journey map and user flows, one of the team members developed three distinct user personas. These personas considered that each user would have different accessibility needs and pain points according to their specific type of disability. We wanted to design based on multiple personas that represented our target audience, so we could account for the different experiences a user would have depending on what disability they require accomodations for.
This research was translated into a user journey map, pictured to the right. Through our research, we discovered that many people are faced with difficulty purchasing tickets online or through the phone before tickets are sold out. In order to ensure proper accessibility accomodations (ex. handicapped seating, ASL interpretators, etc.) it is easier to call a venue, but there are typically long holding times. Groove intends to streamline the online purchasing process to give people with disabilities the best chance at acquiring tickets while ensuring accessibility needs are met. Additionally, we researched the barriers that people face once at the venue. Through our research, we determined that many people with disabilites have trouble navigating the venue, or feel they are unable to attend concerts althogether because they may not be supported by the venue/staff. Groove ensures that users with disabilities are supported throughout the concert-going experience, from ticket purchase to the day of the event. This is done through a few key features, outlined below.
The features of the Groove include:
- Compatibility with screen readers and people with vision impairments – the ticketing system meets WCAG 2.1 AA requirements, which provides adequate color contrast, screen reader compatibility, button interactions, and more.
- Detailed venue map – a more detailed view of venue maps, including the locations of designated rest areas for people prone to seizures, or those with diabilities that cause overstimulation or exhaustion
- Companion Pass - Presents the option to purchase a companion pass when requesting accomodations for people who require an additional person to help them
- Accessbile Ticket Confirmation – Asks to user to confirm they need accomodations for a disability when purchasing a handicapped ticket or requesting a companion pass.
- GPS enabled wearable – a wearable will allow the user to access a map of the venue, which can navigate them to rest areas or other accessible routes to handicap areas.
- Flashing Light Warnings – the wearable would be coordinated with the light booth, and if there was going to be a series of flashing lights, the wearer would receive a warning and a countdown to when the lights would begin flashing so they may prepare accordingly.
- Panic Button - if a person needs help getting out of a crowded area, a panic button could be used to notify a staff member, and the wearable would light up for everyone in proximity so a staff member could retrieve them and take them to a safe location.
User Personas
Using our user journey map and user flows, one of the team members developed three distinct user personas. These personas considered that each user would have different accessibility needs and pain points according to their specific type of disability. We wanted to design based on multiple personas that represented our target audience, so we could account for the different experiences a user would have depending on what disability they require accomodations for.
After understanding the pain points, personas, and user needs, I was tasked with developing an accessible design system and interaction components.
︎︎︎User Journey Map
︎︎︎User Flow for Ticketing System
︎︎︎User Flow for Wearable
Design System + Prototyping
To start, I looked at existing ticketing websites and their UI/UX design. Generally, the sites were clean, simple designs that required a small color scheme and a small array of buttons and type choices. From this, I developed a color scheme that conformed to WCAG AA accessibility guidelines to ensure ample contrast for visually impaired users. This color scheme would be utilized throughout the entire website and wearable experience. Secondly, I chose a popular font family that would not cause too many issues for dyslexic or otherwise visually impaired users.
From this, I began developing interaction components like buttons and menus for the website experience. I documented these interactions as seen on the right, so that we could note that this system would be accessible by both keyboard and mouse.
From this, I began developing interaction components like buttons and menus for the website experience. I documented these interactions as seen on the right, so that we could note that this system would be accessible by both keyboard and mouse.
Design System︎︎︎
︎︎︎Button/Menu Interactions
Final Prototype + Annotations
To build the final prototype, we focused on the completion of core tasks for each experience, the wearable and the ticketing site.
After developing the design system and interactive components, other team members developed a prototype for the ticketing website and mockup screens for the wearable. The main functions included in the ticketing prototype were as follows:
1. Searching an artist
2. Finding an accessible seating chart with labelled ADA accessible routes
3. Purchasing a ticket, with an option for a voice assistant
For the watch mockups, we wanted to showcase the following functions:
1. Calling for help due to potential onset of seizure or panic attack
2. Receiving directions to get to a rest area
3. Flashing light warnings
1. Searching an artist
2. Finding an accessible seating chart with labelled ADA accessible routes
3. Purchasing a ticket, with an option for a voice assistant
For the watch mockups, we wanted to showcase the following functions:
1. Calling for help due to potential onset of seizure or panic attack
2. Receiving directions to get to a rest area
3. Flashing light warnings