Music Playground
SVA x Music For Autism

About

A pro-bono service design project for a non-profit music organization. Aimed to enhance the user experience on the sign-up procedure and during the virtual concert.

My Role

User Interviewer
Designing lo-fi wireframe
Designing hi-fidelity prototype for people and donation pages
Analyzing previous IA and creating new IA
Conducting secondary research, and interview synthesis
Contribute to creating design system
Creating survey and interview questions
Ideating for a virtual musical instrument app

Duration

4 Months | Sep 2022 - Dec 2022

Team

Becky Hwang
Yuri Kim
Sunwoo Park
Fan Fang

Tools

Figma
Protopie

Client

Music For Autism

Guide

Marshall Sitten

Problem Statements

How might we enhance the virtual concert experience
more accessible and inclusive for families with member who is autistic?

Solution

Simplifying concert sign up process and creating an interactive music app
that connects to the virtual concert in real time.
We tried to improve to sign-up process happening on the website. Music For Autism is doing only virtual concerts currently, due to the pandemic. My team and I redesigned the entire website from the beginning and the user flow to enhance peoples' experiences using their website while signing up for the concert and to increase the number of participants.

To enhance the interactive concert experience, we created an interactive music instrument app linked to live concerts. The user can play with the virtual music instruments and easily join the concert activity time with the app. It aims to increase engagement and audience participation in the concert.

‍

Background

Our client reached out to us because their audiences are having trouble joining the streaming concert for children with autism on the website.
Music For Autism is a New York-based non-profit music organization for people with Autism. Previously, they used to have in-person sensory-friendly concerts. However, due to the pandemic, they currently only provide virtual musical concerts every two weeks via youtube streaming. Our client wanted to improve their virtual concert sign-up process and attract more people to join their concert. Hence, their website hasn't been updated for seven years, so they felt a necessity to improve their website for usability.
Observation
Understanding the current issue and user's needs.

1. Secondary Research, Current Website Problem Analysis

I analyzed the current website to identify the issues of the existing website. The website was created by non-design background volunteers almost a decade ago so our client couldn't provide us with the information on original IA and website features. My team and I recreated the original IA based on our analysis and specified the issues on the features that have to be solved.

2. Service Observation

For better understanding of the service, my teammates and I participated one virtual concerts as audiences. The concert was held an hour with the audiences from the US and oversea. We were able to join the concert via email. The concert program consists of concert time and percussion time (activity time with percussion instrument).

3. Current Website IA

Discover
After the service observation and analysis, I learned that most of the audience used the website only for signing up for the concerts and people participated less compared to the in-person show. To dig into the issues more deeply, we moved on to the interview process to listen to the real audiences.

User Survey
Stakeholder Interview

Gaining insights and empathy from the real user
A series of in-depth interviews and surveys were conducted on 24 people including the actual audience and stakeholders to identify further pain points, frustrations, needs, and desires with the service and the music activity for people on the autism spectrum to determine how we could improve the concert experience. I created the questions for the surveys and the interviews.
My team and I faced some challenges on the user interview stage. Due to the privacy issue, we couldn't do virtual interviews with the participants. In alternative method, we conducted an anonymous survey for the project. In addition, our clients shared 2019 and 2022 semi-annual surveys results so we continued the synthesis of two years of data; 102 survey results in total.  Also we found interviewees from the online autism community and forum. Stories are often not unique to one person and we saw a lot of common ground and pain points from the surveys and interviews.

Pain Points

Synthesizing pain points of the service
With the website analysis and interview synthesis, we found four issues of the website that can be solved; Information hierarchy, iterative function, sign-up, and layout.
  • Unclear indicator on landing page
  • Lack of information about concerts
  • Lack of connection from sign up to attending virtual concerts
  • Unnecessary menus and features
  • Iterative functions through out all menus that led users feel confused and lost while searching on website
  • No hierarchy in text
  • Dark background with white text
  • Un-unified image size
  • Overlapping images
Website feature pain points
One unique feature the previous website had was "Musical Zoo," a virtual music instrument tool page that people can play with. However, from the stakeholders' interviews and audience surveys, I learned that it was a feature that had issues of being forgotten and not very promoted to use.
Virtual concert paint points that can be improve
After attending a virtual concert, my team and I synthesized what we found during the concert and figured out how to solve these pain points:
  • Due to the platform characteristic, the virtual concert had less interaction between the audience and performers. Even the audience can't see how other audiences enjoy the concert.
  • Since it is a virtual concert, the audience does not have enough sensory input to adjust.
  • The instructions were not provided enough on the website and the concert itself for a new audience.

Interactive Concert Desk Research

I began our research by looking into different areas of interactive tools and activities that promote the participant's engagement. The research goals were to have a deeper understanding of how to design an interactive environment for children with autism and how to create inclusive and interactive music tools that children can easily play with.

Key Insights from
research and interviews

  • Enhancing physical experience
  • Easy in-home music activity
  • Inclusive environment for diversity
  • Music and dance enhance social interaction
  • Play with others increased interest and engagement
  • Enough space to move around is needed

Revised IA

Our team wanted the new website to be more intuitive so the user could easily understand and use it. So for the new IA, my team and I unified the repetitive sub-menu and eliminated unnecessary or confusing functions. It makes it easy for users to navigate the website and find the information they want. We renamed each menu and function to reduce confusion.

Lo-Fi Wireframe

Virtual Concert Ideation

Enhancing musical zoo feature for virtual concert
We set our idea to enhance the musical zoo feature and combine it with the concert. The reason why we chose to develop it was; first, the musical zoo was an in-home friendly feature that people could easily try the musical instruments without purchasing them. Second, since it was a virtual musical instrument, there was a potential that could be integrated into the online concert for the audience's engagement. To kick off the design process for the virtual concert experience, we conducted a brainstorm to come up with initial ideas for our solution.
Initial Concept
  • Visualization of other participants’ live activities during the concert
  • Preview on previous concerts + concert guide
  • App supports to simulate percussion instrument
  • App that integrate existing musical zoo feature and the concert

User Persona

From the analysis and interview synthesis, my team and I learned that the parents are the most extensive website users who use the website. They sign up for the concert for their children, who will be the primary audience. We set our target user who will mainly use the website; Parent participants who join the concert for their children.

New Service Journey

Using the insights gained from research, and the interviews, we created service journey based on an user and the client's perspective.

Design system

Based on the competitors' analysis and user synthesis, my team and I created a new design system for the website. I led the creation of color usage and web and app layout system.

Final Prototype

Accessibility & User Centeredness: Minimizing concert sign-up stage
The final solution aims to help the user sign-up for the concert without any obstacles and make them participate more. By providing the user with an interactive music instrument app that connects to the concert, the user can have an increased feeling of engagement and togetherness. The app and the embedded streaming concert help the user to enjoy the music more easily at home.
Future audiences can easily sign-up for the upcoming concert on the landing page. It will directly connect to the concert information and sign-up page. When the user submits the email, the reminder for the concert will be set.
On the concert day, people can join the concert on the website. The set reminder button change to join now, which links to the embedded streaming concert. We embedded the live concert on the website because we wanted the audiences to have fewer stages for participation and let more audience join the concert without an external streaming link even though they forgot the link or missed signing up.
Increasing togetherness and user's engagement: Real-time interactive musical instrument app
The participants can join the activity time with the musical instrument app during the concert. When the user shakes the phone, the user's icon appears on the website, showing a number of the audiences joining the activity. Through an interactive instrument app, I wanted to enhance the feeling of togetherness and engagement at the concert.

Takeaways & Next Steps

We received very positive feedback from our client(Music For Autism) and the interviewees with a prototype. We delivered two versions of high-fidelity mock-ups (web and mobile) that can align with the design system. Efficiency was vital to deliver two types of designs in a short period. Furthermore, my teammates and I spent a reasonable amount of time and effort in the research phase of this project to understand our target users more carefully. During this research phase, there were many frustrating points where blocks hit us as we couldn't interview the audiences due to privacy issues. However, we continued the interviews and tested our prototype with the people we found outside of our client pool. The whole project process has taught me how to consider inclusivity for all in service and the value of time management and planning.
‍
Next Steps
Our team hoped to expand the service with more diverse programs since one of the feedback from the survey was a demand for more programs by age. Also, we plan to develop a musical app that also provides more music instrument choices.

Next case

03

Tramici

View more
View more
View more
View more
Tramici is an augmented reality (AR) travel tracking, and journal app that helps people to remember previous trips on a small scale with the AR map and the user's character.
iOS Development
AR Development
UX Research
UX Design
Let's Connect!

Sunwoo Park All rights reserved ©2023

spark218@sva.eduLinkedin