Website Redesign

MacPhail Center for Music

A new website for a large non-profit music school.

 

Summary

MacPhail struggled to inform users about all their unique offerings. When users visited the site, they would be overwhelmed by all the options in the main navigation and wouldn’t know where to start. To solve for this my team built an entirely new website including a redesign of the main navigation, page layouts, and registration flows. The results were increased participation from stakeholders to add and update content on the site and decreased time across all teams to maintain the site, creating an improved experience for the users.

My Role

  • Lead designer in entire creative process: concept, mockups, user feedback, and implementation

  • Applied updated brand identity to Adobe XD wireframes

  • Translated designs into Wordpress

  • Worked cross functionally with contract design team, developer, and MacPhail marketing team

Users

Music education that is tailored to everyone

  • Prospective Students & Families

    • May be unfamiliar with MacPhail Center for Music

    • May be unsure about their personal goals related to music

    • May take music lessons somewhere else

    • May be unfamiliar with certain music terminology

  • Current Student & Families

    • Have some musical experience

    • Need to find important information such as upcoming dates and tuition cost

    • May be unfamiliar with MacPhail offerings besides their current lesson or class

  • Board of Directors

    • Want to stay connected to current events and up-to-date information related to MacPhail

    • Feel passionate about MacPhail’s mission and history

    • Are able to support students financially

Goals

With these challenges in mind, we aimed to achieve the following goals:

  • Improve site usability on both desktop and mobile screens

  • Drive awareness to all MacPhail’s unique offerings to increase attendance and enrollment

  • Simplify site navigation so all users can find the information they need

Design Solutions

Welcoming all users

Establishing a grid system on the homepage created a clean first impression

With so much going on at MacPhail, it is important that the homepage is a place where all types of content cohesively come together. We designed a grid that allows various sections of content to be changed and updated without affecting the rest of the page.

The homepage is also many user’s first impression of MacPhail. We took extra time picking out images and text that represent the MacPhail brand well and are appealing to all users.

Informing without overwhelming

Simplifying the main navigation created a smooth user experience

In order for the website to serve all MacPhail users, we made significant improvements to the organization of the main navigation menu.

Contents of navigation menu before website redesign

The sections of the navigation that we heavily re-evaluated were the For Youth and For Adults drop downs. These sections are supposed to inform prospective students and families about all the MacPhail offerings but instead they are overwhelmed with options.

To address this, we eliminated the options in the For Youth and For Adults drop down menus and instead created one page called “Music Lessons and Classes”.

Contents of navigation menu after website redesign

Creating an enjoyable browsing experience

Using a grid of images, the Music Lessons & Classes page allows users to easily browse the MacPhail offerings.

We titled this page Music Lessons and Classes because, according to our research, “Music Lessons Near Me” is a popular search term. This helps with our SEO and uses language that stands out to prospective students and families.

To further improve the browsing experience on the Music Lesson & Classes page, I designed filters that narrow down the users options.

Providing easy access to resources

A lot of the information that Current Students & Families are looking for on the website is different than that of Prospective Students & Families. For the convenience of these users we created a separate page called ‘Quick Student Links’ that gives them easy access to the resources they need.

Highlighting mission, impact, & history

When evaluating the original MacPhail site, we found it lacked the information and resources that the Board of Directors and Donors often look for. To address this, we designed an ‘About MacPhail' page that highlights MacPhail’s mission, impact, and extensive history.

Optimizing across all devices

Using Google Analytics, we found that over 50% of MacPhail users are on a mobile device. So, it was very important that the website be designed with all screen sizes in mind.

Results & Takeaways

Some key results from this project are:

  • Positive feedback on site look and usability from all user groups

  • Increased participation from stakeholders to add content to the site

  • Decreased time across all teams to update and maintain the site

Working on a small team gave me the opportunity to be involved in every step of the redesign process. It was an eye-opening experience that taught me a lot about designing for a wide range of users.