Joseph Loves Chill Music
By Joseph
The beginning
Flawed Mangoes
Holocene
Bon Iver
Joseph
Joseph
Joseph
Joseph
KORD
KORD
Making online concerts accessible to everyone using an inclusive design approach
Making online concerts accessible to everyone using an inclusive design approach
Making online concerts accessible to everyone using an inclusive design approach
Making online concerts accessible to everyone using an inclusive design approach
Year
Year
2024
2024
Role
Role
Product Designer
Product Designer
SKILLS
SKILLS
User Research
User Research
Accessibility Design
Accessibility Design
Usability Testing
Usability Testing
Prototyping
Prototyping
The Product
The Product
Music concerts are the pinnacle of the music experience for most music listeners or fans, this is where they get to connect with artists and get a live version of their favorite songs. When COVID-19 hit the world, it had a devastating impact on live music concerts, a lot of concerts were canceled all over the world due to COVID-19 and the need to practice social distancing.
During the total lock-down period, several artists attempted online concerts for the first time and were successful at it, this showed the future and need for online concerts. As much as this change was sudden and needed, disabled people who already face several barriers with physical concerts would have to go through this over again just as it is for most digital products, the consideration for people with disabilities has to start a rat race. Physical concerts have a lot of accessibility issues but online concerts mean those issues can be solved digitally and people with disabilities can enjoy their favorite artists performing their songs.
This is the goal of KORD, to make online concerts accessible to everyone using an inclusive design approach, KORD takes into consideration the experience of users from booking their tickets to post-concert meet and greet. With KORD, disabled people will seamlessly book and buy their tickets, attend the concert online, chat with other fans around the world, and have a meet and greet with the Artist after the concert.
Music concerts are the pinnacle of the music experience for most music listeners or fans, this is where they get to connect with artists and get a live version of their favorite songs. When COVID-19 hit the world, it had a devastating impact on live music concerts, a lot of concerts were canceled all over the world due to COVID-19 and the need to practice social distancing.
During the total lock-down period, several artists attempted online concerts for the first time and were successful at it, this showed the future and need for online concerts. As much as this change was sudden and needed, disabled people who already face several barriers with physical concerts would have to go through this over again just as it is for most digital products, the consideration for people with disabilities has to start a rat race. Physical concerts have a lot of accessibility issues but online concerts mean those issues can be solved digitally and people with disabilities can enjoy their favorite artists performing their songs.
This is the goal of KORD, to make online concerts accessible to everyone using an inclusive design approach, KORD takes into consideration the experience of users from booking their tickets to post-concert meet and greet. With KORD, disabled people will seamlessly book and buy their tickets, attend the concert online, chat with other fans around the world, and have a meet and greet with the Artist after the concert.
Music concerts are the pinnacle of the music experience for most music listeners or fans, this is where they get to connect with artists and get a live version of their favorite songs. When COVID-19 hit the world, it had a devastating impact on live music concerts, a lot of concerts were canceled all over the world due to COVID-19 and the need to practice social distancing.
During the total lock-down period, several artists attempted online concerts for the first time and were successful at it, this showed the future and need for online concerts. As much as this change was sudden and needed, disabled people who already face several barriers with physical concerts would have to go through this over again just as it is for most digital products, the consideration for people with disabilities has to start a rat race. Physical concerts have a lot of accessibility issues but online concerts mean those issues can be solved digitally and people with disabilities can enjoy their favorite artists performing their songs.
This is the goal of KORD, to make online concerts accessible to everyone using an inclusive design approach, KORD takes into consideration the experience of users from booking their tickets to post-concert meet and greet. With KORD, disabled people will seamlessly book and buy their tickets, attend the concert online, chat with other fans around the world, and have a meet and greet with the Artist after the concert.
User Requirements
User Requirements
Personas and Scenarios
Personas and Scenarios
The first step to this inclusive design was to balance user needs with users' goals by creating personas and scenarios to better understand the users. To create the personas the approach was to research disabled people online who have shared their experience with physical or online concerts and put together their needs and frustrations from their experience to create an informed persona who wants to attend online concerts on an inclusive platform.
The first step to this inclusive design was to balance user needs with users' goals by creating personas and scenarios to better understand the users. To create the personas the approach was to research disabled people online who have shared their experience with physical or online concerts and put together their needs and frustrations from their experience to create an informed persona who wants to attend online concerts on an inclusive platform.
The first step to this inclusive design was to balance user needs with users' goals by creating personas and scenarios to better understand the users. To create the personas the approach was to research disabled people online who have shared their experience with physical or online concerts and put together their needs and frustrations from their experience to create an informed persona who wants to attend online concerts on an inclusive platform.
Persona/Scenario 1 (Visual Impaired User)
Persona/Scenario 1 (Visual Impaired User)
This persona was inspired by a disabled lady who shares most of her life experiences as a blind person, what was particularly interesting about her is she is a music fan and likes to share her experience in concerts. One particular experience she shared that inspired the needs and frustrations of this persona was when she went to a Shawn Mendes concert (https://lifeofablindgirl.com/2019/04/14/shawn-mendes-vip-con cert-experience/).
Anita, the persona is a registered blind screen reader user who wants to book a concert ticket.
This persona was inspired by a disabled lady who shares most of her life experiences as a blind person, what was particularly interesting about her is she is a music fan and likes to share her experience in concerts. One particular experience she shared that inspired the needs and frustrations of this persona was when she went to a Shawn Mendes concert (https://lifeofablindgirl.com/2019/04/14/shawn-mendes-vip-con cert-experience/).
Anita, the persona is a registered blind screen reader user who wants to book a concert ticket.
This persona was inspired by a disabled lady who shares most of her life experiences as a blind person, what was particularly interesting about her is she is a music fan and likes to share her experience in concerts. One particular experience she shared that inspired the needs and frustrations of this persona was when she went to a Shawn Mendes concert (https://lifeofablindgirl.com/2019/04/14/shawn-mendes-vip-con cert-experience/).
Anita, the persona is a registered blind screen reader user who wants to book a concert ticket.
Persona/Scenario 2 (Hearing Impaired User)
Persona/Scenario 2 (Hearing Impaired User)
This persona was created using the experience of a hearing-impaired blogger called Deafie Blogger (https://deafieblogger.com/aboutme/). She shares most of her life experiences as a hearing-impaired person, which also includes her experience with music concerts and the issues she goes through. Studying her blog was important to understanding how a hearing-impaired person navigates physical concerts.
Danye, the persona is an individual who’s been deaf since birth and communicates with sign language. He wants to attend an online live concert on his phone.
This persona was created using the experience of a hearing-impaired blogger called Deafie Blogger (https://deafieblogger.com/aboutme/). She shares most of her life experiences as a hearing-impaired person, which also includes her experience with music concerts and the issues she goes through. Studying her blog was important to understanding how a hearing-impaired person navigates physical concerts.
Danye, the persona is an individual who’s been deaf since birth and communicates with sign language. He wants to attend an online live concert on his phone.
This persona was created using the experience of a hearing-impaired blogger called Deafie Blogger (https://deafieblogger.com/aboutme/). She shares most of her life experiences as a hearing-impaired person, which also includes her experience with music concerts and the issues she goes through. Studying her blog was important to understanding how a hearing-impaired person navigates physical concerts.
Danye, the persona is an individual who’s been deaf since birth and communicates with sign language. He wants to attend an online live concert on his phone.
Persona/Scenario 3 (Physical Impaired User)
Persona/Scenario 3 (Physical Impaired User)
This persona was inspired and informed by an article written by a physically impaired person with the topic “Can Virtual Gigs Make Live Music Accessible For All” (https://www.simplyemma.co.uk/blog/), where she talks about her experience with physical concerts and her expectations for online concerts.
Emma, the persona has limited mobility and uses a wheelchair to move around and mount her devices. She wants to attend a meet and greet with her favorite artist after attending the concert.
This persona was inspired and informed by an article written by a physically impaired person with the topic “Can Virtual Gigs Make Live Music Accessible For All” (https://www.simplyemma.co.uk/blog/), where she talks about her experience with physical concerts and her expectations for online concerts.
Emma, the persona has limited mobility and uses a wheelchair to move around and mount her devices. She wants to attend a meet and greet with her favorite artist after attending the concert.
This persona was inspired and informed by an article written by a physically impaired person with the topic “Can Virtual Gigs Make Live Music Accessible For All” (https://www.simplyemma.co.uk/blog/), where she talks about her experience with physical concerts and her expectations for online concerts.
Emma, the persona has limited mobility and uses a wheelchair to move around and mount her devices. She wants to attend a meet and greet with her favorite artist after attending the concert.
Persona/Scenario 4 (Cognitive Impaired User)
Persona/Scenario 4 (Cognitive Impaired User)
This persona was inspired and informed by the story of a student on Web Accessibility Initiative who shared his experience of using the web as a person with ADHD and dyslexia.
Samuel, the persona is an individual with dyslexia who wants to enjoy a seamless online concert experience.
This persona was inspired and informed by the story of a student on Web Accessibility Initiative who shared his experience of using the web as a person with ADHD and dyslexia.
Samuel, the persona is an individual with dyslexia who wants to enjoy a seamless online concert experience.
This persona was inspired and informed by the story of a student on Web Accessibility Initiative who shared his experience of using the web as a person with ADHD and dyslexia.
Samuel, the persona is an individual with dyslexia who wants to enjoy a seamless online concert experience.
Paper Prototype
Paper Prototype
After putting together the personas and scenarios, the next step was to sketch how the users would complete their scenarios which would become the key features.
Starting with booking a concert ticket, the sketch shows the user receiving a notification of an available concert, viewing details about the concert, and making payment by inputting card details which would lead to the user booking their concert ticket.
Moving on to watching the live concert after booking the ticket, this focused on the user whose goal is to watch the concert seamlessly. From this point several WCAG guidelines were put into consideration like Success Criterion 1.2.6 Sign Language for the hearing impaired user, who communicates through sign language, having a sign language interpreter was a major priority consideration. Also to make sure users can switch between portrait and landscape mode.
Lastly the meet and greet feature, the initial idea was to have an Instagram video call type feature but the sketches were updated due to the need for inclusion. The considerations for this feature included live captions during the call to help the hearing-impaired user receive information, a chat box feature to help the hearing-impaired user communicate with the artist, intuitive in-call navigation and layout for the screen reader user and dyslexic user, also easy tap gesture for the physically impaired user.
After putting together the personas and scenarios, the next step was to sketch how the users would complete their scenarios which would become the key features.
Starting with booking a concert ticket, the sketch shows the user receiving a notification of an available concert, viewing details about the concert, and making payment by inputting card details which would lead to the user booking their concert ticket.
Moving on to watching the live concert after booking the ticket, this focused on the user whose goal is to watch the concert seamlessly. From this point several WCAG guidelines were put into consideration like Success Criterion 1.2.6 Sign Language for the hearing impaired user, who communicates through sign language, having a sign language interpreter was a major priority consideration. Also to make sure users can switch between portrait and landscape mode.
Lastly the meet and greet feature, the initial idea was to have an Instagram video call type feature but the sketches were updated due to the need for inclusion. The considerations for this feature included live captions during the call to help the hearing-impaired user receive information, a chat box feature to help the hearing-impaired user communicate with the artist, intuitive in-call navigation and layout for the screen reader user and dyslexic user, also easy tap gesture for the physically impaired user.
After putting together the personas and scenarios, the next step was to sketch how the users would complete their scenarios which would become the key features.
Starting with booking a concert ticket, the sketch shows the user receiving a notification of an available concert, viewing details about the concert, and making payment by inputting card details which would lead to the user booking their concert ticket.
Moving on to watching the live concert after booking the ticket, this focused on the user whose goal is to watch the concert seamlessly. From this point several WCAG guidelines were put into consideration like Success Criterion 1.2.6 Sign Language for the hearing impaired user, who communicates through sign language, having a sign language interpreter was a major priority consideration. Also to make sure users can switch between portrait and landscape mode.
Lastly the meet and greet feature, the initial idea was to have an Instagram video call type feature but the sketches were updated due to the need for inclusion. The considerations for this feature included live captions during the call to help the hearing-impaired user receive information, a chat box feature to help the hearing-impaired user communicate with the artist, intuitive in-call navigation and layout for the screen reader user and dyslexic user, also easy tap gesture for the physically impaired user.
Before
After
High Fidelity Designs
High Fidelity Designs
Accessibility Considerations
Accessibility Considerations
Emma has a condition called Limb Girdle Muscular Dystrophy affecting her shoulder and hip muscles, limiting her mobility, which means she uses a wheelchair to move around and mount her devices.
Emma has a condition called Limb Girdle Muscular Dystrophy affecting her shoulder and hip muscles, limiting her mobility, which means she uses a wheelchair to move around and mount her devices.
Emma has a condition called Limb Girdle Muscular Dystrophy affecting her shoulder and hip muscles, limiting her mobility, which means she uses a wheelchair to move around and mount her devices.
Accessibility Considerations
Accessibility Considerations
Anita is a social media officer. Anita is registered blind due to a condition called Retinopathy of Prematurity (ROP). Anita relies on screen readers to announce the content on her mobile phone.
Anita is a social media officer. Anita is registered blind due to a condition called Retinopathy of Prematurity (ROP). Anita relies on screen readers to announce the content on her mobile phone.
Anita is a social media officer. Anita is registered blind due to a condition called Retinopathy of Prematurity (ROP). Anita relies on screen readers to announce the content on her mobile phone.
Accessibility Considerations
Accessibility Considerations
Danye has been deaf since birth as a result of severe bilateral sensorineural hearing loss. Due to the hearing loss occurring before he could speak, Danye never had speech development. Danye communicates through sign language.
Danye has been deaf since birth as a result of severe bilateral sensorineural hearing loss. Due to the hearing loss occurring before he could speak, Danye never had speech development. Danye communicates through sign language.
Danye has been deaf since birth as a result of severe bilateral sensorineural hearing loss. Due to the hearing loss occurring before he could speak, Danye never had speech development. Danye communicates through sign language.
Accessibility Considerations
Accessibility Considerations
Samuel has dyslexia which has influenced his learning and reading experiences throughout his life. Reading, writing, and spelling could be difficult for Samuel.
Samuel has dyslexia which has influenced his learning and reading experiences throughout his life. Reading, writing, and spelling could be difficult for Samuel.
Samuel has dyslexia which has influenced his learning and reading experiences throughout his life. Reading, writing, and spelling could be difficult for Samuel.
Usability Testing
Usability Testing
The aim was to assess KORD’s usability by determining whether users can complete key tasks easily and whether the features or design meet their expectations.
The participants were between ages 19 and 23, including 2 females and 3 males. All 5 participants were students. They were all familiar with online video streaming and had all been to physical concerts before.
A moderated usability study was conducted in person with participants using an iPhone provided to complete three tasks:
Task 1 - Book a concert ticket
Task 2 - Watch an online concert
Task 3 - Join a meet and greet with the artist
During the usability study, after every task participants were asked questions to gather qualitative data. After the moderated usability study, participants completed a System Usability Scale on a Google form to gather quantitative data.
The key insights after participants completed task 1:
Some participants wanted to see the concert ticket price on the Discover screen before they viewed more details.
The key insights after participants completed task 2:
Some participants felt while watching the concert, even though they knew it was live, there wasn’t any representation of it being live on screen.
Some participants felt the portrait mode concert view wasn’t immersive enough and would like to turn off the chat aspect during the concert.
The key insights after participants completed task 3:
During the meet and greet with the artists, some participants wanted to know how long they had on the call.
Some participants wanted icebreaker suggestions while in the queue to speak to the artist during the meet-and-greet.
The aim was to assess KORD’s usability by determining whether users can complete key tasks easily and whether the features or design meet their expectations.
The participants were between ages 19 and 23, including 2 females and 3 males. All 5 participants were students. They were all familiar with online video streaming and had all been to physical concerts before.
A moderated usability study was conducted in person with participants using an iPhone provided to complete three tasks:
Task 1 - Book a concert ticket
Task 2 - Watch an online concert
Task 3 - Join a meet and greet with the artist
During the usability study, after every task participants were asked questions to gather qualitative data. After the moderated usability study, participants completed a System Usability Scale on a Google form to gather quantitative data.
The key insights after participants completed task 1:
Some participants wanted to see the concert ticket price on the Discover screen before they viewed more details.
The key insights after participants completed task 2:
Some participants felt while watching the concert, even though they knew it was live, there wasn’t any representation of it being live on screen.
Some participants felt the portrait mode concert view wasn’t immersive enough and would like to turn off the chat aspect during the concert.
The key insights after participants completed task 3:
During the meet and greet with the artists, some participants wanted to know how long they had on the call.
Some participants wanted icebreaker suggestions while in the queue to speak to the artist during the meet-and-greet.
The aim was to assess KORD’s usability by determining whether users can complete key tasks easily and whether the features or design meet their expectations.
The participants were between ages 19 and 23, including 2 females and 3 males. All 5 participants were students. They were all familiar with online video streaming and had all been to physical concerts before.
A moderated usability study was conducted in person with participants using an iPhone provided to complete three tasks:
Task 1 - Book a concert ticket
Task 2 - Watch an online concert
Task 3 - Join a meet and greet with the artist
During the usability study, after every task participants were asked questions to gather qualitative data. After the moderated usability study, participants completed a System Usability Scale on a Google form to gather quantitative data.
The key insights after participants completed task 1:
Some participants wanted to see the concert ticket price on the Discover screen before they viewed more details.
The key insights after participants completed task 2:
Some participants felt while watching the concert, even though they knew it was live, there wasn’t any representation of it being live on screen.
Some participants felt the portrait mode concert view wasn’t immersive enough and would like to turn off the chat aspect during the concert.
The key insights after participants completed task 3:
During the meet and greet with the artists, some participants wanted to know how long they had on the call.
Some participants wanted icebreaker suggestions while in the queue to speak to the artist during the meet-and-greet.
Other Projects
Other Projects
Other Projects
Other Projects