School of Music
Website Redesign & Class Integration
Imagine updating 12 site pages whenever something changes—then answering confused questions from students anyway because no one can find those pages. This was the reality for Bloomingdale School of Music’s website, and one they wanted to leave behind—fast.
Working as UX lead for this project, I gave Bloomingdale a robust architecture and front-end experience that helped its varied user bases find what they needed—all on top of a consolidated back-end experience to decrease time spent updating the site.
Principal Designer, responsible for:
Bloomingdale’s site has three main conversion objectives: Registering students for classes, gathering RSVPs for events, and soliciting donations from its supporters. Creative was brought on to lead the non-profit from branding all the way through the launch of their new site.
I came onto the project after brand guidelines were finalized and lead the entire project from architecture through pre-launch.
Particular challenges included:
(1) an existing class management system that could not be integrated into the site,
(2) wildly different events with different conversion types, and
(3) a miniature database of information that needed to be preserved for its SEO value yet was useless to the site’s users.
In other words: a great project.
“The Site's So Big No One Can't Find Anything”
One big challenge for all non-profit websites is creating a content structure that makes sense of all the information they contain—while also not upsetting too much institution’s internal usage of the site. The more content a website has, the more challenging this problem becomes.
When choosing between the client and the user, however, the user wins. So I focused on Bloomingdale’s three main user groups to create a structure that cleanly separated donor, class, and event information while preserving older content that was essential to their existing SEO.
“We're Tired Of Changing The Same Thing Three Times”
A huge struggle for Bloomingdale’s staff was that their site was static: Class and event information had to be uploaded on every single page—and each class had different pages for fall, spring, winter, and one for different times! On top of this, the actual registration information had to be completed on a third-party website, which meant class information had to be updated there too!
No. We weren’t going to do that anymore. Bloomingdale would have one page per class—and only one.
I pulled together Creative’s development and SEO team to collaborate on a back-end data architecture and make clear relationships between classes and their attributes.
I ensured the right data was being captured on each page, provided solutions for duplicate URLs, and streamlined the complex qualitative data relationships so that a clean back-end UI could be made. I also advocated for solutions that required a little more work, but gave intuitive data entry fields for the user.
“We Handle So Many Class Questions That Are Answered On the Site”
The back-end of Bloomingdale’s classes wasn’t the only part of the site that needed to be re-structured; the front-end did as well. I knew that there had to be a clear and consistent path, beginning at the home page, that lead parents and prospective students to the classes they were interested in.
I created a mega-menu for classes to assist users who knew exactly where they wanted to go. Those who were still unsure could go to their demographic first, then find a list of classes and their prices, which allows them to open several classes to compare directly.
Each page is rich with information about the class experience at Bloomingdale, so curious visitors convert to curious students.
“All Our Events Are Free! Except the Ones That Aren't.”
One of the biggest challenges of Bloomingdale’s site—and indeed, of any site build with a client—was that the client often needed to be re-centered around the user’s experience, rather than their own.
There is no better example of this than the events area of the site—and the slight shock Creative’s team got about halfway through the project.
When we started working with Bloomingdale, their team insisted that they only had free concerts, and only a simple email registration was necessary. We wireframed and planned for this.
However, as our time went on, Bloomingdale started referencing an upcoming event called Notes From 108th, a benefit event with multiple sponsorship levels. When I investigated, I found out that this, too, was a concert!
The Bloomingdale team never thought to tell us about their large fundraisers. To them, the fundraisers and the regular concerts were wholly different things. But to a user looking for information on the site, they would be the same. And we needed to pivot fast to account for that—and for the fact that these events vary widely in the information they have available.
In the life of a business, complex events not being optimized may not be a big deal. But fundraising and donations are, quite literally, what keeps non-profits like Bloomingdale running. Because of this, events like the ones they described should be optimized for conversion just as much as any other part of the site.
After discussing time constraints with my project manager, I decided to wireframe an additional page for their large fundraisers.
The late break in the project meant that we weren’t able to fully actualize on the page with fully dynamic content and a more robust events section of the site. However, I was able to build out a set of Elementor templates they could and reuse to make their own page layouts — or work with Creative to make one for them. And the wireframe remains as a guide, for them now, to get the most they can out of these events.
Setting My Team Up For Sucess
Unfortunately, my time at Creative came to an end before I could see this project through to launch. I completed all of the planning and front-end design-build; only finalizing the back-end build and getting content into place remains.
I left a detailed design system spreadsheet (similar to Deployed Resources‘) for my team to execute responsive styling, as well as comprehensive usage notes for the dev team to implement the back-end interface.