“Modern, on-brand, and easy-to-use.”

Oftentimes, when people want their website redesigned, they have the same broad asks.

They want a modern 2019 digital experience. They want it to elevate their brand. They want it to be easy to use for their users and their team. And, when Northwestern’s Bienen School of Music chose us as their digital partner, these are the website goals we heard.

“Our website was several years old when we started this process and needed a major overhaul in terms of accessibility, design, and organization,” said Katelyn Balling, Senior Communications Coordinator.

But a website can do more than “be modern,” “on brand,” and “easy to use.” If done right, a website can be an extension of the organization itself.It can speak to a range of audiences (faculty, staff, community members, alumni, and students). It can increase value for everyone—from funding research to providing resources. And it can also attract prospective students.

That last one is what this case study is about: How we built a website that helped Northwestern attract a top, international PhD Musicology student.

“The student was most emphatic in declaring his preference for Northwestern, saying that our splendid website was one of the most important reasons he was inclining towards Northwestern,” said a musicology professor to Balling, thanking her for her involvement.

This is how we did it.

Understanding why top-tier music students choose to attend the Bienen School of Music

Replacing the paper brochures handed out on college tours or sent in the mail, a school’s website is—in one facet—a marketing tool. It’s the single source of truth to the outside world: a place where prospective students around the world can research the school and start to make one of the biggest decisions of their life. And, with the right strategy, design, and user experience, a school’s website can be its most powerful marketing tool.

To attract prospective students to Bienen, our team did a deep dive on the different reasons why students choose to attend. We discovered six key differentiators that make Bienen a favorable choice amongst other music programs:

  1. State-of-the-art facilities
  2. A collaborative community
  3. Expert faculty
  4. Diverse programs
  5. Opportunistic location
  6. A strong reputation

The website was built to enhance the appeal of each of these key decision differentiators for prospective students. With intentional design and content strategy, we move prospective students down the customer journey from education to persuasion to conversion.

1. Showing off their state-of-the-art facilities

The Ryan Center for Musical Arts, Photo by Tom Rossiter

Home to classrooms, practice rooms, and performance venues, The Ryan Center for Musical Arts is soundproofed to make it possible for students to study and take tests without distraction. The performance venues are best-in-class for acoustic and sound design. They attract professional performers and give students a platform for their own performances. 

“Last year, I got to play in Galvin Recital Hall. It was a magical moment. It’s such a great opportunity to be able to play in a great hall. It prepares any musician to play in other big halls around the world.” — DMA Guitar Student

Mary B. Galvin Recital Hall, Photo by Tom Rossiter

Facilities are a huge investment for the school, in part because of the importance that students put on facilities and performance spaces when deciding where they’d like to attend. And thus, needed to be featured prominently on the new website. 

 

Digital strategy for facilities:

The website’s visual assets and site architecture makes it impossible for a student investigating Bienen to leave the site without being wow-ed by the facilities. 

On the homepage, The Ryan Center has prime real estate. Just under the concert and events list, there’s a dedicated slider section to show off different views and facts about it. With a call-to-action (CTA) button to “Learn more,” there’s a crosslink to the facilities page where interested users can learn more about the spaces the school has to offer. This approach serves a variety of audiences. For those who want a high-level summary, it provides facts and views about the building and for those who want to dive deeper, detailed information. 

 

Homepage slider section for the Ryan Center for the Musical Arts

 

In addition, on the about page, the building is heavily featured on landing and  the opening impression video. 

2. Emphasize their commitment to community

Map of buildings grouped closely together on campus
Arts Circle graphic,Source

Northwestern university is in a size sweet-spot with just over 20,000 students. It’s smaller than other Big Ten competitors, but bigger than other top-tier music schools. This gives Bienen the ability to create an intimate community for artists, while offering diverse programs (more on the latter in a bit). With intention, Northwestern University created Arts Circle, a clump of art-major buildings, including The Ryan Center for Musical Arts. The proximity encourages students across majors to collaborate, learn, and grow from each other. 

“What initially attracted me to the Bienen School of Music was the ability to be able to study in a conservatory-like environment but also being involved in a big university. I was really interested in having not only friends who were musicians but friends who were scientists and friends who were historians and learning from a diverse group of people across campus.” — Jazz Studies and Clarinet Performance Student

 

Digital strategy for community:

It can be hard to force a sense of community on campus. That’s because community doesn’t come from coercion — it comes from people feeling understood, supported, and empowered. In that way, a great digital experience is like a great campus: it gives people the information and sense of connection they need to succeed, and lets them take care of the rest.

Northwestern University's homepage
Northwestern University’s homepage

So, to mirror Northwestern’s strategy with Arts Circle, we built a website that felt connected to the greater University. The colors, fonts, and design doesn’t stray far from Northwestern University’s other sites, including their main website. A user coming from one to another shouldn’t feel dislodged. The Bienen design fits into the bigger brand, but with subtle design animations, visual assets, and site architecture, it also feels a little different—like a music school: professional, with a creative heart. 

3. Highlight the faculty

Conductor Victor Yampolski, Source

The strength of the faculty is often one of the biggest reasons students choose to attend a specific school over another: they need to be inspired by the person in their rehearsals and trust the conductor behind the podium. With more than 120 performers, composers, and scholars, Bienen’s faculty is recognized worldwide and oftentimes, is the biggest reason a student chooses to study there. 

“The best thing about Bienen in my eyes is easily the faculty and the students. I get pushback for ideas from my professors, who have so much experience with this repeteur. We workshop things and we try different things out. They give me endless support and endless encouragement and also work me really hard…That’s how improvement happens. That’s how I get better.”  — Masters Horn Student

And, for more advanced and specialized students, an individual professor might be the reason for choosing a school.

“I applied to because I wanted to study with Dr. James Giles. I played for him in a Master’s class, and I really liked his teaching. Dr. Giles suggested a few changes, in subtle things and that made the music entirely different. That’s one of the reasons that I chose Northwestern.” — Doctoral Pianist Candidate 

Dr. James Giles working with a student,Source

To showcase the depth and breadth of the faculty, we strategically placed them as a focal point throughout the experience.

 

Dean Toni-Marie Montgomery opening letter on About page

 

The about page opens with a letter from Dean Toni-Marie Montgomery: a first-person account about her passion for Bienen’s music education. Opening with a letter breaks barriers and connects to the emotions of the reader. The letter is linked to Montgomery’s bio, which will lead users to the hub of other faculty pages. If, instead of exploring the faculty, a user continues to scroll, there is a section of statistics highlighting programs, facilities, and—again—the faculty. With the call-to-action “Meet Our Faculty,” a user is prompted again to learn more about the faculty and is directed to the faculty page

The faculty page acts as both a source of informative and a functional tool: it gives users full control on how they can learn more. In the banner, there’s a headline and subheadline content block with an overview statement. This speaks directly to a user who is learning about Bienen for the first time and is unaware of the strength of their faculty. 

Below that section, the page is more functional—both for informed and uninformed users. The alphabet feature anchors down the list and allows students looking for a specific person to find their information, while the filter by area of study feature allows prospective students to get an overview look of the faculty within their future department. They can see who they would be working with everyday in the classroom. 

 

Filter by Area of Study, or select a letter from the alphabet

 

Finally, once a user has decided that they want to learn more about a specific faculty member, the individual faculty pages provide more in depth information. Each faculty page has a photo, title, bio, and contact information, and they each end with related content sections to news, ensembles, videos. The related section gives the user another way to continue their journey and learn more about the faculty member, department, or university as a whole. 

4. Showcase the diversity in programs

Northwestern Opera Theater production of “Beatrice et Benedict,” Source

Not only does Bienen offer 12 areas of study for their music students, but, because of the size of the University and the strength of the other academic departments, their students have the flexibility to pursue other passions. Rather than commit solely to a conservatory program, their music students can earn a dual degree or double major in a completely different college. 

“I was sure that I wanted to go into music, however, I wasn’t sure if I wanted to apply to a conservatory when I was a senior in high school because I wasn’t sure if I wanted to really make music my career. And so, I did a lot of talking with my parents and we decided that I should apply to schools that have a great music school within the university. Northwestern was the best decision for me.” — Classical Vocalist Student

 

Digital strategy for diversity in programs:

One of the first places a user’s eye lands when they hit a website is the top navigation. And so, the top navigation of Bienen’s website is organized by content based on user needs: Admission, Academics, Faculty, Concerts & Events, Davee Media Library, and About. 

For prospective and current students wanting to learn more about the academic programs, they know exactly where to go: Academics. Then, on hover, the top navigation bar drops down into a chunky navigation menu, with quick links to the different areas of study—Brass, Composition & Music Technology, Jazz Studies, etc.—as well as a link to Degree and Dual Degree information pages. 

Top navigation "Academics" tab drop down bar, activated by hover
Top navigation view, on hover

Both the website’s information architecture and the academics landing page previews the variety of programs the school offers and gives students a way to easily explore programs that interest them. 

In a more subtle way, the design itself communicates the variety of programs. It gives the Bienen team an opportunity to visually showcase their diverse students, programs, and education options in the navigation without outright saying “we have diverse students, programs, and education options.”

5. Display their opportunistic location

Arts Circle on Lake Michigan, Photo by Tom Rossiter

Just 12 miles north of Downtown Chicago, Northwestern students have access to a big city (of 2.7 million people) and the comfort of being a part of a smaller community. Northwestern University is aware of the appeal—building The Ryan Center for Musical Arts to overlook the lake and showcase the city skyline in the windows of the performance hall. 

 

“The fact that Northwestern was very close to Chicago, really helped me decide to go to school here. Chicago gives me more opportunities to perform around the area and that really helps me to improve my piano playing and meet more people and interact with more audiences.”  — Doctoral Pianist Candidate

 

Digital strategy for location: 

For students unfamiliar with the area—or from another country entirely—it might be lost on truly how close Northwestern University is to downtown Chicago.

On the about page, the location is communicated twice, because of how important this relationship (of the city and the school) is to students who choose Northwestern. The video in the banner is an overview of the school, narrated by the Dean of the college. Montgomery talks about the campus and the fact that the building itself overlooks the lake and the cityscape. 

Located 12 miles north of downtown Chicago, a view of the skyline in the background taken from campus

 

And, just in case students don’t watch the video, immediately following, there’s also a call-out for the city of Chicago in the fact section. It’s the first in the set of facts on the page, and thus has prime real estate to showcase the school’s prime real estate.

 

Marc-André Hamelin performing at Northwestern University

In addition to the content on the about page, choice photography throughout the site nods to the city, including a key image in the homepage first impression carousel.

6. Further their reputation

Symphonic Wind Ensemble,Source

For being the most intangible prospective student requirement, it’s oftentimes the most important one: reputation. Best-in-class students want to attend best-in-class schools. As one of the oldest degree-granting music schools in the nation, Bienen has a reputation already, but needed a website to support it. 

 

Digital strategy for reputation:

Reputation is a hard thing to display with a website because, by definition, it’s how other people perceive you, not what you say about yourself. But beautiful design and strategic content can help instill confidence and let the experience speaks for itself. 

The design by the website was driven by three words: elegance, prestige, and effortless. While pushing design to modernize the look and feel, we leveraged University brand guidelines to ensure unity with Northwestern’s larger, established brand reputation. Immersive imagery showcases their beautiful space, vibrant student culture, and awe-inspiring concerts. The design creates cohesive digital experience for users with straightforward navigation, a simple color palette, and subtle, smooth transitions.

In addition to design, there are certain content assets that can help build credibility, too—and Bienen isn’t short of them. 

To communicate stability, success, and significance, we designed a history page. With the timeline feature, users can explore the University’s past accomplishments by decade or year. 

An old image of the Music Practice Building "Beehive" with the year 1915
History slider section for the 1900s

To ensure a strong reputation moving into the future, we highlighted key leadership figures in the school on the leadership page. Separated from the faculty page, the leadership page gives a quick overview of the Administration, Board Members, Program Coordinators, and Graduate Study professors. Each leader has their name, title, and—in a pop up—contact information and a bio. 

Finally, to broadcast, their national presence in the music education field, the international prizes page and subpages showcases that they don’t just win awards, they give them out to high-caliber performers all around the world. 

A functional tool for prospective students

In addition to acting as a “why-Bienen” brochure, a website redesign presented the opportunity to be a more functional tool for prospective students. After learning about why they should apply to Bienen, what action would they want to take?

After interviewing students, we discovered three key conversions, all depending on where the student was along their user journey:

  1. Understanding the admissions process
  2. Scheduling a tour
  3. Scheduling an audition / applying to the University

With these core actions in mind for prospective students, we built the website to take a user on a cohesive, frictionless journey and help them convert when they decided to do so themselves.

1. Understanding the admissions process

In the simplest categorization of user types, there are two: 1) Those who know most of the admissions process and just need a few questions answered to “do the thing” and 2) Those who know nothing and are just starting to figure out what the thing they need to do even is.

To accommodate both user groups, we built the admission user flow like a reverse funnel. We give a little information at the beginning—quick links, overviews, etc.—and then provide users with the ability to dive deeper once they find information that matters to them.

Top navigation

The top navigation is organized by user need, and for students looking for admissions information, it’s clear where they should go: Admissions. Then, on hover, the top navigation becomes a chunky drop down navigation. Organized by Undergraduate, Graduate (MM & DMA) and Graduate (PhD), there are links to specific tools and information pages about the admission process. For example, if a prospective student is looking for Financial Aid information, they can directly go to that page.

 

Bienen School of Music admission landing page

 

There is also an admission landing page, with links to more detailed pages. It acts as a jumping off point for a student who wants to know all things “Admissions.” The next step in the funnel—Overview pages—give Undergraduate and Graduate students important dates and an admissions checklist. 

And, because International applicants have a different, more complex process to go through for admissions, there is a separate international students landing page. It goes into detail about how to apply for both Undergraduate and Graduate students, as well as provides a link to Northwestern University’s greater international application process and policy. 

In terms of design, clear CTA buttons guide users throughout every flow, including Admissions. With the contrast in visual hierarchy, they draw the eyes of users and help them know where to go next. Prospective students can continue their journey and get pushed to convert: to schedule a tour, start an application, or dive into deeper touchpoints. 

2. Scheduling a tour

After speaking to stakeholders in the Bienen School of Music, we learned the importance of a school visit. With Northwestern’s beautiful campus and Bienen’s facilities, it’s a huge step in persuading top-tier students to apply for their school, and visiting in-person is a great way students can determine if it’s a good fit for them. The website needed an easy way for students to schedule a tour and also “serve” it to students who were looking at related content on the website.

Utility navigation: Visit Us, News, Directory, Contact, Donate
Utility navigation

For users already wanting to schedule a visit, we placed a “Visit Us” navigation item in the utility nav along with “News,” “Directory,” “Contact,” and “Donate.”

 

Plan a Visit to our Beautiful Campus. headline with Visit Us CTA button

 

For users who were performing other tasks on the website, we incorporated a CTA schedule a tour throughout the experience. Placing a CTA (call-to-action) button at the end of an experience is a huge opportunity to convert the user. It’s why Youtubers ask you to subscribe, why there’s candy in the checkout line, and why there’s a related item feed on Amazon. If you serve users content that they care about, that they choose to see, and then give them a clear, concise next step, the chances of conversion will increase. 

3. Scheduling an audition / applying to the University

College is an exciting thing, applying for college is not. Most high school students are in a stressful part of their user journey. Oftentimes juggling multiple applications, they’re overwhelmed, tired, and in a can-I-just-get-this-over-with mindset. 

With this in mind, we wanted to make the Admissions process as easy as possible for applicants to complete and (for the team at Bienen) complete right.

With a big CTA (call-to-action), we connect students who are looking for general admission information to Northwestern University to the main undergraduate admission page. But, for music students, we also built an admissions checklist, with boxes that students can physically “check-off” as they complete the process. The design itself also has strong visual hierarchy, making it easily skimmable for students looking for the information that fits their specific path—early decision, regular decision, and transfer.

 

Undergraduate Application Checklist with click-able boxes

 

Because of our choice to build flexible, reusable templates in the back-end of the system, similar checklist treatments exist on the Graduate and PhD application pages. The experience is seamless and helpful for any student filling out an application to the University and specifically, the Bienen School of Music.

 

A resource (and asset) for current students

In addition to serving prospective students in their admissions process, the school also has the responsibility to serve their current students. But, this can also be an opportunity. Prospective students will want to attend a school that prioritizes them well beyond their application, audition, and admission. One way that students can tell if a school prioritizes their students is by their website. 

So, to understand how a school’s website can help current students, we focused on one question: What will students want and need to grow as a student and a performer? The answer: 

  1. A single source for student resources
  2. A way to find and attend performances
  3. A platform to share their own performances with the world

With these three key student goals in mind, we built a website to serve current students and send a message to prospective students that once they attend Bienen, they’ll be a priority for all four years.

1. A single source for student resources

To put it lightly, music students are busy. Between auditions, rehearsals, and performances, they’re also a full-time student at a top-tier University. They need to meet both University and Bienen requirements for their majors. They need to study, take exams, and—hopefully after all of this—have a life. 

To help students manage their academic life, Bienen has a lot of resources for students—from advising to internship information. But, with a University at the scale of Northwestern, oftentimes the biggest challenge with resources is communicating that they have them. 

So, to help students find the resources that can help them navigate their four years at Bienen, we built a student resources page. Located in an audience-based navigation, it’s a landing page of resources organized by the most popular content needs: Advising, Academic Regulations, Performance & Recital Resources, Additional Opportunities, and Graduation. There’s also a “Quick Link” sidebar with other content that’s not specific to Bienen’s website. 

2. A way to find and attend performances

Just like reading can help writers with their craft, listening can help performers with their music. And, with Bienen having one of the best performance venues in the Chicagoland area, they attract top performers every year around the nation and the world. Students at Bienen have incredible opportunities to hear professional performers in their field, but only if they can find them. 

To help assist students (and other target audiences) find performances to attend, we  built a concert & events landing page. Bienen’s staff can choose which events to feature and which series to promote. Users can explore featured performances on this landing page or click on the CTA to the full calendar.

 

April 2019 view of the calendar

 

The concert & events calendar follows best-in-class calendar and event design. It gives the user the option to view events in a calendar or list view, the ability to filter by performance type, and the ability to search for specific events. Switching between the views is a seamless experience and, in the list view, the user can filter in a more specific way (by types of artist, style of music, and musical series). There’s also information about the ticket office on the page to help users plan their payment for events that aren’t free. The calendar makes it quick and easy to find, plan, and purchase tickets to Bienen shows. 

3. Share their performances with the world

By far, the biggest asset that Bienen School of Music has in terms of web content is the videos of performances. For almost every performance they host, Bienen professionally captures the performance and now, with The Davee Media Library, they have a modern, digital hub to archive and share performances with all of their audiences, including prospective and current students.

With filters and search functionality, it’s easy for users to explore and find other performances that they either attended (or had to miss) throughout the year. And, because students perform throughout their time at the Bienen, they can send their performance to friends and family, share them on social, and include in their music portfolio. One of the most exciting things for any artist is sharing their work with the world. Now, it couldn’t be easier. 

The result

So, with all of this strategy, designing, and developing, did we do a good job? Did we build something to help Northwestern Bienen School of Music attract students?

A few months after launch, we asked our partner on the project, Katelyn Balling, Senior Communications Coordinator, to give us feedback. Specifically, we asked what one of the biggest impacts she’d seen since the website launch. 

She answered:

“Several things to come to mind but I would say the positive feedback we’ve received from students, faculty, and prospective applicants has been most impactful and rewarding.

I recently received this note from one of our musicology professors regarding a prospective PhD applicant and his reaction to our website (I’ve redacted the names):

‘The student, an advanced Musicology student in Santiago, Chile, was one of the most intriguing of the applicants to our PhD program in Musicology, and was chosen by us to receive one of the two available slots to begin our program. He had already been admitted to several other PhD programs, and I was tasked with arranging a Skype conversation with him, to sound him out on his intentions and, if possible, persuade him to choose Northwestern.

The student was most emphatic in declaring his preference for Northwestern, saying that our splendid website was one of the most important reasons he was inclining towards Northwestern. According to his own testimony, the clarity, ease of navigation, and detailed descriptions and bibliographies for the professors, were all major factors in his decision to accept our offer of admission.

I know what an important role you yourself played in getting our Musicology website together. In addition to feeling incredibly grateful for this, in a general way, I also wanted to thank you for having helped to tip the scales in our favor when it came to recruiting such a brilliant student to our program!’” 

That’s music to our ears. 

Want to learn more about our work with Northwestern’s Bienen School of Music? Read our case study

Build a university website to improve your recruitment