Enhancing virtual concert experience for audience with autism
Client
Music for Autism
Duration
9.2022 - 1.2023
Team
Becky Hwang, Fan Fang, Sunwoo Park, Yuri Kim
Advisor
Sue Booker (Music for Autism), Marshall Sitten
Role
User Research, Website Branding, UI/UX Design
My Contribution
Led weekly meetings with the client to discuss progress.
Conducted secondary research, user surveys, and 6 interviews to gather insights and feedback.
Revamp the website design, and adopt responsive web design.
Led the ideation phase of the project.
Synthesized research findings into viable design ideas.
Crafted hi-fi prototype to illustrate the proposed design solution.
Finalize and polish deliverables for client.
INTRODUCTION
Service Background
Through free, interactive concerts designed especially for people with autism and their families, Music for Autism (M4A) improves the quality of life and increases public awareness.
Since COVID, all concerts have been taken online. M4A now puts on two virtual concerts a month on YouTube Live.
The concert includes additional activities such as conducting time (learning conducting patterns and conducting with the artists) and percussion time (where the audience will look and find the household item to make noise with artists) in an effort to replicate the experience of attending a live performance.
Although everyone is welcome at an M4A music concert, children with autism and their families make up the majority of the audience.
PROJECT PROCESS
DISCOVER
M4A’s primary concern is the decline in concert signup rates
We start the discovery process by listening to our client’s concerns.
“We have fewer people signing up since we moved online”
“As a program manager, I have to help troubleshoot via email which takes up a lot of my time“
— Laura, the National Program Manager for M4A
Then we initiated our first round of user research by synthesizing their 2 annual surveys from 2019 and 2022 and we conducted 1 survey sent out after their virtual concert that focused on questions about website usability and asked about the overall experience with other potential problem spaces. We have 124 responses in total.
Key insights from the surveys
Usability issue of M4A website is preventing audiences from joining the concert
→
35 people attend concert in average
38.5% user think sign up concert is difficult
84% people use M4A Website to sign up concert
The preferences of audiences for in-person versus online performances vary greatly.
Most audiences use M4A official website to sign up for concerts, and 38.5% found it difficult to do so.
Those who want to gain social experience by attending a concert would prefer to do so in person.
People who don't like to stick out in crowds, especially those of an older demographic, enjoy attending virtual concerts.
Our client prefers to maintain their service hybrid, where they will begin opening up in-person concerts in a few cities while keeping virtual concerts going for safety reasons. There are more audiences who prefer in-person concerts. People who prefer virtual concerts also had a strong reason.
Problem Space
We divided the project's scope into two parts after the initial round of research.
The user experience could be immediately improved if the website usability problem was resolved. We also recognized the value of looking into ways to improve the virtual concert experience for audiences with various needs.
Therefore, we made the decision to handle these two problem areas separately.
#2 EXPLORE
How might we enhance the virtual concert experience?
#1 OPTIMIZE
How might we streamline the signup experience for the concert?
#1 OPTIMIZE
How might we streamline the signup experience for the concert?
03 DEFINE - Streamline Signup Flow
User Research
We conducted Six usability tests and two interviews with program managers. Through observations of real users, we were able to further understand what’s wrong with their sign-up flow
USABILITY TEST
INTERVIEW WITH STAKEHOLDERS
M4A is a non-profit organization that runs with the help of volunteers. We want to learn more about how we can make their work easier. Sample questions we asked were:
Sample Question #1:
What kind of troubleshooting requests do you get the most out of?
Sample Question #2:
When preparing a concert for an audience with special needs, what factors do you take into account?
Sample Question #3:
Do you communicate with artists about their experiences? Can you share a bit about that?
Tasks
Sign up for one concert
Donate 5 dollars
Find the artist bio for the next concert
Participant
2 never gone to a concert before but am interested in
4 have been to at least one concert
Facilitator
Observe and record as participants narrate their actions and thoughts
We recruit different type of user to help us understand more about the flow.
Pain points
Information Architecture lacks clarity
Customers will have a difficult time navigating a website that has an excessively complex hierarchy and navigation titles that are not descriptive enough.
Layout arrangement not structured
The use of large text bloc with few images make it hard to read
Signifier erroneous
Many buttons appear to be static images, making it difficult for customers to determine what is and isn't clickable.
Lack of responsive design
During the interview, both managers said that many customers sign up on their phones and that the lack of responsive design makes it difficult to use (buttons, images, and navigation links are cut off).
04 Develop - Streamline Signup Flow
Redesign the website
We chose to redesign the website first since it serves as the primary touchpoint for signing up. We started with the original information architecture and highlighted the pain points on the site.
Goal:
A simple, 4-step integrated process. It starts by clicking on a concert, signing up, setting a reminder, and then enjoying the virtual concert.
Target User:
Family member/ Caregiver who join the concert with kids on the autism spectrum.
Revamp the site structure
We mapped the original information architecture and highlighted the pain points. Then we created the new IA based on our findings.
It was difficult to make progress toward optimizing the pain points, so I proposed that we each create our own iteration of a new IA based on the pain points, then compare and rationalize our design choices to arrive at the most reasonable one.
Wireframe
Then we proceed to wireframing based on all the insights, information and our goal.
Visual System Development
We designed the visual identity of the service around its defining characteristic—its friendliness—to attract the target audience.
Final design
We moved the concert schedule on the landing page to increase user accessibility (5 clicks versus 2 clicks to sign up for the concert), as the majority of users visit the website to view the concert schedule or sign up for tickets.
Users will also be able to see the organization's slogan and information about upcoming concerts, which will help them understand Music for Autism's mission and activities.
#1 Concise presentation of information
New & Old concert sign-up page comparison
During the weekly meeting, I proposed adding a FAQ session for the stakeholder. We learned from our interviews with the program manager that many of the questions they've been asked are very similar. We added the concert information section as the stakeholder is quickly on board.
Concert info page
#2 More legible layout
From previous research, we learned that the use of large blocks of text rendered the website difficult to read. We added a photo that corresponds to each paragraph. And redesigned the layout in accordance with the user's reading habits.
History Page
Review Page
#3 Responsive design
We designed the mobile version as well to make the service more accessible.
About Concert Page
Other screens
#2 EXPLORE
How might we enhance the virtual concert experience?
03 Define - Virtual Interactive Concert Experience
Research
Market research:
Research on products and services that offer a sensory music experience. including interactive concerts, music toys, and virtual instruments.
Observation:
Attend two virtual concerts to observe the audience.
Interviews:
1 Concert Host, 3 Families with a child on the autism spectrum, 1 adult on the autism spectrum (I’m the interviewer for 4 of them)
We found that most concerts and activities are solely for young children and require professional instruction.
We participated in M4A’s November virtual concert. and analyzed past in-person concert recordings to learn what works and what doesn't in these settings.
Artists are surrounded by audiences during an in person concert, and with the help of volunteers (in yellow shirts), the concert was able to keep order and allow the kids to enjoy music in their own way.
We also noticed that most parents sit in the back row, watching their children and listening to music.
We discovered that people were more active in the chat at the start of the concert; people mostly enjoy the show quietly, with parents making up the majority of the chat.
In offline and online concerts, the roles of parents are entirely distinct.
Interview
We interviewed one concert host/manager, three parents with kids on the spectrum, and one individual on the spectrum to get input from different perspectives.
Goal of Interview:
What is parent’s role while children are enjoying music?
What improves children as well as parent’s musical experience?
Learn what M4A could do to help with enhancing the experience.
Interview highlight - Host
Parents need to feel safe and confident that their children will be accepted.
Artists can be more proactive interact with audiences.
Having the option of seeing other participants could potentially enhance the experience.
“parents be able to sort of like exhale, because the parents are always really tense with the kids out”
“We are presenting a safe space for the parents, and a space where their kids are accepted for who they are.”
“The musicians are also being told to be more interactive because I'm seeing more questions from them to the audience”
“It's almost magical to see kids open up participating with strangers”
Interview highlight - Family & Individual
Children often mimic or learn from the actions of those around them, making parents a great Demo resource.
Children are more interested in participating in activities that involve physical play than in merely watching videos.
The visuals have a significant impact on the overall enjoyment.
The autism spectrum is not linear; it is multi-dimensional. Thus pretending to speak for the entire community is neither feasible nor appropriate.
“It's clearly better when you're(parent) deeply involved with your kids so that they can maybe learn from you. ”
“My son is mostly invested in doing physical things like maybe drumming play with things like shakers.”
“Ever since he (son) started watching some of these YouTubes he also is strongly drawn to the visuals.”
“No one person can speak for the entire autism community because it is such a diverse community.”
“The autism spectrum isn't a spectrum of high functioning and low functioning. It's a spectrum of people with like different kinds of difficulties”
Our goal is to improve children's and their parents' time together at concerts by introducing artist-led and parent-facilitated activities.
The Customer Journey and Persona
Based on all the insight and our goal. We created a persona and followed them on their current and expected customer journeys.
SOLUTION
A mobile app that emulates percussion instruments paired with a website widget that displays the real-time actions of other audience.
DEVELOP - Virtual Interactive Concert Experience
Design
We want to create a design solution that directly addresses a customer pain point and can be implemented by Music Autism. When evaluating our ideas, we constantly refer back to the relationship between pain points, value proposition, and features.
Main Feature
#1 Visualization of other participants' live activities
This integrated bar allows you to see the number of participants without intruding on their personal space, while still maintaining a sense of togetherness. The app allows the audience to choose any pattern they prefer, and the patterns generated represent each unique individual.
#2 Use the percussion instrument to make noise with the artist instruction
Each family has its own situation, and it's possible that one child or one parent will be the one shaking the instrument while the rest of the family members listen and dance.
#3 Integrated musical zoo in the live concert page
The original website used to have a “music zoo” feature that allowed users to try out different instruments. and when integrated within the live concert page, the artist can encourage the audience to try out the same instrument they are using, making the overall experience more interactive and engaging.
Development requirement
Requirement
To implement these digital services, there are some necessary steps that need to be taken. Developing digital services requires a significant amount of time and money, with an estimated cost of $10,000 for the creation of a website and application, plus an additional $2,000 for web maintenance.
However, M4A has recruited developers who share the same mission and are willing to volunteer their time to improve the service, which will help to reduce the financial burden.
Risk
The most important risk is the feasibility of the development. We sought feedback from a full-stack developer regarding the feasibility of the percussion app connected to the interactive concert website, and we got the advice that there would be technical difficulties in terms of hosting a server and using a third-party service.
Future opportunity
We believe there are more ways in which Music for Autism can fulfill its mission.
One idea for future development is to create a tangible interface that allows children to participate in virtual concerts in a fun and engaging way, beyond just a digital screen.
Another idea is to offer a wider range of programs for different age groups and abilities as the organization grows. We have seen a demand for diverse programs for teenagers, adults, and those with high sensory needs.
REFLECT
Detail is important to me
Paying attention to the small details can really make a difference in the overall quality and effectiveness of a design. In this project, I took on the role of finalizing the design, ensuring that all elements were cohesive and consistent. This included reviewing and adjusting spacing, typography, and other details to create a polished deliverable for our client.
Every project is different
Every project is unique and requires a different approach. While it's important to have a general structure in place, it's also necessary to be flexible and adapt to changes as they come up. In our project, we used a parallel process to tackle two problem spaces for the client, we were able solve the problems faced by our clients now and propose solutions to optimize their services in the future