UCLA Chinese Music Ensemble
Increased club enrollment by 120% by developing a new club website and building an admin panel for future board members.
Timeline
Oct 2023 - Present
Platform
Website
Role
Product Designer
& Product Manager
Toolkit
Figma, Maze
Brief
BACKGROUND
The UCLA Chinese Music Ensemble was formed in 1998 and is one of UCLA’s largest cultural ensembles with traditional Chinese instruments. This organization serves as both a class and a club, which allows it to cater to a wide range of students.
TEAM
As the team's lead, I mentored and led Ivy Xiao and Wennan Liu, who are both current members of the ensemble and aspiring product designers. Aland Liu was our full-stack developer whom I constantly communicated with to ensure that our vision was realistic and could be brought to life!
PROBLEMS
1. Low organization participation because of COVID-19.
Organization attendance has been at an all-time low since COVID-19 first hit because in-person rehearsals were far too dangerous to conduct and music classes over video calls were far from ideal.
2. Current website is outdated and provides incorrect information.
The UCLA Herb Alpert School of Music’s official “Music of China” page, which reflects the classes the school offers, has super limited information and doesn’t inform students on how to join or what programs are available each quarter. The website is also inaccessible by UCLA Chinese Music Ensemble board members, so the website is constantly out of date.
GOALS
Encourage students to participate in the ensemble.
Build a website that prioritizes students joining the organization.
Build an admin dashboard for future board members.
Create an admin function that allows current and future Chinese Music Ensemble board members to change images and update programs on the website.
Ensure that students are properly informed of programs.
Inform students of existing classes and the instruments they’re able to learn in each of them.
Research
CONFIRMING PROBLEMS
Although I had my personal opinions about the existing website, my first course of action was to see what other people thought about it. My goal was to first validate that the website actually presented a problem space in the first place, then hear thoughts directly from the ensemble community about how the page could be improved. I advocated for getting insights from as diverse a range of voices as possible, since I knew that different students might have different expectations and reasons for using the UCLA Chinese Music Ensemble website. To validate our concerns for the organization’s low attendance and to figure out how we could benefit the student body, we sent out a survey to 30 current and alumni students of the UCLA Chinese Music Ensemble to figure out that the major concerns for joining the ensemble were.
AFFINITY MAPPING
Hearing from 30 of our current and past members gave us a lot of information to work with! Using the information we had from the interviews, we created an affinity map that allowed us to confirm our two initial problems: low attendance from COVID-19 being discouraging over Zoom and the UCLA HASOM (Herb Alpert School of Music) website was poorly informing students about the program.
TAKEAWAYS & WHAT WE'RE MISSING
We confirmed our two intial problems, but, we also picked up on two additional problems that we had not initially thought of:
1. UCLA's own course enrollment system was providing students incorrect times.
Because our ensemble was both a club and class, students were opting to get credit for the class and enrolling in the class as well, but UCLA’s enrollment system consistently, over the last six quarters, was providing students with the incorrect times. We would need to create a system that better informs students about both programs and the joining process.
2. Students didn't know what instruments were available to learn.
Since over 90% of the students in the organization, both past and present, have been non-music majors seeking to reconnect with their motherland’s culture through music, many are unfamiliar with the instruments of the Chinese orchestra. In our surveys, many expressed a desire for a catalog of the instruments available in the classes so they could plan accordingly. We would need to build a catalog of instruments and provide insight on its players and its history.
Process
USER FLOW
Based on these responses, we started creating a user flow that would meet our users needs. This would help us set the groundwork for what features to put on each of our pages. We decided that our features would include tabs titled:
Programs
that would illustrate our programs available, the class times they were available at, the course code for students to enroll, and a button that would take them to learn more about all the instruments offered in that class.
Instruments
that would tell students all the instruments that were available to learn.
Performances
that would allow outside viewers like parents, friends, and local community members to come and see the ensemble’s public performances to better facilitate the goal of the ensemble, “to promote learning, demonstration and performance of Chinese traditional music.”
About
that would showcase our ensemble’s history. In light of keeping this consistent with the students looking to join the ensemble to connect with their motherlands through music, we believed that an “About” page would be very fitting.
Join today
button in red that stands out in the header that. no matter which page they’re on, as one of the major goals was to have students more easily join the organization.
Home
that ties together three of our core features:
Programs, Joining, and Performances.
LO-FI WIREFRAMES
With our user flow mapped out, we began creating wireframes to reflect the needs expressed by our ensemble’s members.
MID-FI WIREFRAMES
The lo-fi designs were far from pretty, but we started touching them up in our mid-fi design stage to help ourselves get a better idea of our vision!
USABILITY TESTING & FEEDBACK IMPLEMENTATION
Although we didn’t fully include photos and complete text in our designs, to ensure that we were still on the right track, we held interviews with 3 separate board members and 5 ensemble members to confirm if our goals had been met—we ended up changing a couple visualizations in this step!
1. Create a clearer connection between programs and the instruments involved.
For an even clearer connection between the instruments and which classes offer them, one thing we fixed was to change the organization of information provided and include a “Learn about the instruments” button on the “Programs” page.
2. Keep the focus on the present.
We removed the “Past Performances” from the home page since this would only be interesting to people doing deep dives on our page, as we should prioritize upcoming events and new members. We also redesigned the “Upcoming Performances” so that each of the events has an image that pairs with it for continuity.
3. Build lasting connections between the organization and the community.
Board members also suggested adding a newsletter so that future board members can create a mailing list for events at and around school for students to stay connected with the organization.
4. Put an even greater emphasis on getting students to join and retaining members.
The “Join” tab was removed completely and replaced with “Programs” since the “Join today” was being added a tab on the header to emphasize joining the organization and as a result, the “How to join” section was removed from the section. With interviews from board members, we implemented a full week calendar with practice times and course schedules for returning members to better visualize the practice blocks. This would also allow new users to click on courses and add them directly to their Google Calendars.
Final Designs
HIGH-FI WIREFRAMES
HIGH-FIDELILTY "POINT-OF-VIEW" PROTOTYPES
1. POV: You're a student interested about learning more about the programs the ensemble has to offer.
2. POV: You're a student looking for the course times and instruments offered for each class.
3. POV: You're a community member learning about the organization and interested in watching a live performance.
DESIGN SYSTEM
Creating a style guide that could adapt to both "UCLA" and "Chinese Music Ensemble" proved to be a huge challenge. Because of UCLA's blue and yellow theme, we had originally looked to make our style guide follow and blue and yellow scheme, but our ensemble's costumes were red and yellow, which we thought was more suiting to build the website off of. When we tested blue and yellow on top of our red and yellow costumes, we realized how much the three primary colors clashed. We ultimately ended on a black and white page with red and yellow highlights to emphasize the ensemble's colors.
BUILDING FOR THE FUTURE
Although we had designed a website, we wanted to make sure that the future was accounted for. Because we didn’t want this to be a major thing on the website and only wanted to create this for board members to access, we added a button on the bottom that allowed admin users to log in which would bring them to a dashboard where they could update the website. Creating an interface that would show users how to add and remove images and programs would be very helpful.
Impact
RESULTS
NEXT STEPS
Begin user testing with next year’s board members to see how functional and intuitive the admin panel is. We believe that our main audience is important, but we cannot forget about the user experience of the people bringing the website to life with its images and its content.
CONCLUSION
This project has taught me a lot about building for user's needs! At first, we had not initially planned to create a admin panel, but after interviewing with alumni, we learned that there had been three completely different websites created for the ensemble that are now untouched because the website's creators had made the website uneditable to outsiders! We then realized how important it was for us to create a lasting system that could be used for future generations.
​
Growth in the organization has been amazing and there have been so many people joining the programs in the past three quarters. We've seen our ensemble grow 120% in size for all programs and have more than doubled our numbers. Outside organizations have been reaching out to do collaborations with the ensemble as its presence becomes more prevalent.
