VCO Website

May - June 2022

Project Overview

Vanderbilt Commodore Orchestra (VCO) is a student-run orchestra that attracts interest from non-music-major undergraduates, graduates, and faculty at the university. I set out to create a website that combines the interests of potential members and current members, making all VCO information easily accessible.

Context

My Role

UX Designer, Researcher, Product Designer

Final Product

Problem

The current website is not intuitive for both aspiring members and current members. It essentially serves as a hub for links that lead users out of the site, which is frustrating when they just want a source of all of VCO's information in one place.

Users looking for upcoming information had to keep up on social media sites, as the website was not regularly updated.

Auditions were also managed with countless Google forms, leading users to follow link after link to schedule an audition and get the information they needed.

For current members and their friends and family looking to view past concerts, the archives were organized in a list, making it difficult to navigate quickly to a concert of choice.

The User flow for incoming members with external sites/hosts highlighted in red

How might we create a space for current and potential VCO members to find the information they seek?

Initial Research

Competitive Analysis

Even though VCO is a student-led organization, I looked to professional and world renowned orchestras for inspiration. These are a few screenshots from notable orchestras: the Boston Symphony Orchestra, London Symphony Orchestra, and the New York Philharmonic. Other orchestras from Nashville, Philadelphia, San Diego, and San Francisco were reviewed, as well.

Of course, this research took form while listening to some of my favorite symphonies (sorry for the bias towards violin concertos).

Boston Symphony Orchestra

London Symphony Orchestra

New York Philharmonic

User Research

6 users were interviewed: 3 were members of VCO, 2 students at Vanderbilt not involved with VCO, and 1 non-Vanderbilt University student. These are some notable quotes from two board members from the organization, both of whom have dealt extensively with recruitment of new members and the troubles of using the old site.

Madie Yuen

VCO President, Member of 3 Years

“The current site is functional enough but visually unappealing”

Arthur Yu

VCO Social Chair, Member of 3 Years

“The site is just a portal for other links, nothing is centralized. I like the idea of putting videos directly on the website instead of linking to YouTube.”

Among all 6 users, common pain points were:

Forms

All of the organization's forms are separate, hard to find, and not updated or fully relevant.

Solution

A new VCO website that centralizes VCO's information, including past and upcoming events/performances, and also makes it easy for new members to get involved without needing to exit the site. Instead of navigating the user to social media to access audition links, users from social media should be directed to the site which houses all necessary information.

Goals

Prioritize potential VCO members and ease of joining
Provide a hub for all future events that is easily updated
All information should be easily accessed without needing to link elsewhere

New user flow that leads users to the website as a central source for all information rather than sending users to external sites.

A selection of wireframes sketched out to feature different components of the home and events pages. On the Home page, I chose to include links to the join and upcoming events page to prioritize both incoming members’ and existing members’ interests. Sketches were made on Procreate for each page of the website to fully flesh out ideas before implementing them on Adobe XD.

Low-Fidelity Wireframes were created in Adobe XD. Core features of both the Home and About pages were included before prototyping and conducting a usability study. Then, based on user feedback, three iterations were made before crafting high-fidelity mockups.

“Paper” Wireframes

Low Fidelity Wireframes

Mockups

Usability studies with the low-fidelity wireframes revealed a few important insights:

(3) Join Page

The audition form could be submitted before being fully filled out. Checks should be put in place to have users completely fill out the form before submission.

(2) Social Media

While the purpose of the site was to centralize all of VCO’s information, the links to social media still needed to be emphasized to allow users to be more connected and get real-time updates on the organization.

(1) About Page

The About page was excessively long and cluttered. Notably, multiple users paused on the FAQ section and mentioned that it was difficult to find and felt out of place.

After 3 iterations on the initial design, final mockups were created based on these insights.

The About page was split into 3 sections—About, Programs, and Members—for easier navigation and less scrolling through one long page. Links bring users to other pages on the site for quicker navigation.

Instagram and YouTube icons were also added to the footer for easy access to VCO’s main socials.

The FAQ was given its own page linked at the header after usability studies revealed that it was too cluttered under the About page.

The embedded audition and contact forms (not pictured) on the Join page require all fields to be filled out before submission.

All artwork featured in the hero images and the concert cards on the Upcoming Events page were designed by yours truly :)

Lessons

This was my first experience using Adobe XD rather than Figma to develop the wireframes and mockups for a project. I had a lot of fun seeing the similarities between the two, and I found that I actually prefer XD’s interface over Figma. The skills I learned during this project with XD are sure to carry over with me through my next endeavors.
This was the first project that forced me to be very intentional with my documentation and organization. I had multiple iterations of the site that I kept sharing for more user testing, and that required me to make it easy for somebody who isn’t familiar with XD or UX in general to figure out how to navigate the files and links I sent.
This project was very near and dear to my heart, as I am the visual designer for VCO, and I am surrounded by musicians who care just as much about this organization as I do. I was scared to reach out to my peers in the organization because I knew that they would be critical; they all have a specific vision of the orchestra that may not align with what I initially designed. After I took the leap, it turns out that their criticisms were the most helpful and impactful of all.

Next Steps

The current design for the Archives page relies on categorization of concerts by year. As VCO continues to grow and perform, this may get cluttered and difficult to keep updated (on the org’s end) and navigate (on the user’s end). Instead, a more complex navigation system could be implemented to allow users to search concerts by date, semester, key word (concert title or artists featured), or even orchestra member. Additionally, photo galleries for each concert could be either embedded into the site or linked out for users and members to download photos albums.
In this project, the Join page mainly featured an audition scheduling form and a general contact form. In the future, this page would be even more helpful if it also had options for conductor auditions, interest forms for users who are not ready to audition, and access to sign-up sheets for events. More user testing and iterations would be needed to confirm the priority of these additions.