I used HTML/CSS and Javascript to design and host a website for Measureless, Cornell University’s only Christian coed a cappella group.
Winter break was the perfect time to complete a project I’ve been putting off for a year — creating a website for Measureless, my a cappella group. After holding our first set of Zoom auditions, I realized that having a website would allow potential members to get a better sense of who Measureless is and what we stand for before the online audition.
User Research: Needs and Wants
Our current method of showcasing who we are is through Facebook, but not everyone uses Facebook, and our information is scattered on the one platform we semi-actively use. We needed an accessible, organized home base.
It only took a text to briefly discuss with the e-board what kind of content we wanted to showcase on our site. There were three main questions we needed to answer.
Who is Measureless? What do we do? And most importantly, why?
But what about our target audience? What would a prospective Measureless member want to know? So I interviewed four of our newest members to get their input. Here’s what they were looking for:
1. Strong community
“I was looking for an acapella group that has a strong sense of community and a close knit bond. The most important thing is probably making sure the group is having fun and having a good time together through a shared passion.”
2. Audition and rehearsal logistics
““I want to know about what the audition will be like in general, especially if strong sight reading skills will be a major requirement, and how that will be generally tested.”
3. Goals and music style
“Some things I would want to know before auditioning is a general summary of the goals of the group, as well as possibly a past performance.”
Planning
I mapped out information architecture of our website, taking into consideration our goals as an a cappella group and the wants of our target audience.
The About page would serve to address the “who are we and why do we do what we do” question. The Audition page, of course, would let prospective members know everything necessary to audition. The Members page would allow us to give visitors a glimpse into our personalities and what we’re like. Although Measureless would not be performing publicly any time soon due to the pandemic, I included a Contact page in hopes that event organizers would want to contact us post-pandemic.
Coding and Styling the Site
Branding
Measureless doesn’t have an official “brand” — just a simple logo. But, we have historically tended to gravitate towards variations on the color blue and darker tones, so I knew immediately to give blue a gentle presence on the site. Since our logo was simple yet bold, I wanted the rest of the site to match that feeling.
Personality
Our audience wanted to get a sense of what singing with Measureless would be like, so I included a fun facts for each of the members to make it personal. Measureless takes their practices seriously, but they also love letting their weird, fun sides to shine too. I also decided to include some photos of our performances on every page, so visitors could get a glimpse into what our concerts looked like.
Photo Gallery?
I debated whether or not we needed a photo gallery or a place to put videos of our performances. In the ended, I decided against it — the entire website was it’s own photo gallery of sorts, where every page would give the visitor another look at Measureless singing and having fun together.
Usability
I used JS to implement a nav that would move with the rest of the page as the user scrolls. Although we don’t have long paragraphs or a huge gallery of photos, I decided that this small detail would be more efficient, since it allows users to easily click to a new page without having to scroll all the way back up. Plus, it was a good opportunity to review some of my JS know-how.
Every clickable link is also either underline or glows gold when hovered over, giving the user a visual cue that they can interact with that element. Lastly, I included a subtle fade-in effect so that the transitions between pages would be less jarring.
Final Steps
Some fun facts are still missing, and we have yet to buy an official domain name. We also only recently received information for when we are allowed to hold auditions, so there are a few updates needed. Lastly, my JS has a small bug, so I will have to do some tweaking.
Takeaways
Measureless seemed to like the site a lot after I showed it to them. :) However, I think it would have been helpful to have done more user testing towards the beginning of the process and ensure that the navigation and layout, while simple, was intuitive.
Being both the designer and the client was an unusual experience. I had a sense of what was needed for the site, having been the auditionee before and now, a member. But I think this experience highlighted the importance of communicating and doing user testing with the client. If I didn’t know anything about college a cappella and attempted to build a website from my own limited knowledge of what the group needed, this could have been a very different experience for both parties.
I love Measureless and I loved creating this for them. Come audition for us! ;)
Hello friend — thanks for reading! Follow me if you’re interested in keeping up with my design projects. :) Drop a comment, leave a suggestion or some feedback, or say hello below!