Button Text

Mount Aloysius College Website Redesign

Screenshot of Mount Aloysius College homepage in a mockup

Back in the early 2010s, KDG created a WordPress site for Mount Aloysius College (MAC), a small school in western PA. In the early spring of 2019, we were asked by MAC to redesign their site to make it more vibrant, user-friendly, and reflective of their current campus culture.

Most of the old site was custom-coded and had very little room for the MAC staff to update it. In addition, the navigational structure was confusing and the there were almost no opportunities for dynamic content.

For the redesign, KDG recommended sticking to WordPress, but using a mix of a theme builder and custom WP development to give the staff the right balance between flexibility and structure.

skills

Strategy, Web Design, UI/UX Design

Launch site
screenshot of MAC's old website homepage

MAC’s old site was outdated, unintuitive, and provided a poor mobile experience.

Competitive Analyses

Our process began with a competitive analysis: we compared institutions in the same geographical area as MAC, as well as other schools in with similar student demographics. In the research, we focused on: how our competitors looked, how they conveyed information, and how they interacted with different audiences.

A lot had changed across the web since MAC’s last redesign and we observed how each competitor adapted to those changes as well. As a team, we made a different lists for how MAC’s new website should compare.

How MAC's Website Should Look

  • Strive to be genuine in representation, but still show diversity through student voices
  • Use high-quality photos, a fresh color scheme, and more modern design styles
  • Update to a more scalable typography system
  • Re-structure navigation to align with conventional standards

How MAC's Website Should Convey Information

  • Create separate audience landing pages that speak to each group and identify their key concerns (prospective students, current students, alumni + friends, parents)
  • Use different visual elements (cards, tiles, accordions, etc) to organize content
  • Maintain a updated sitemap; nest pages accordingly
  • Push timely information out across the website (i.e. posts are tagged and added to relevant pages automatically)
  • Keep Google Analytics + Google Tag Manager installed (for internal use)

How MAC's Website Should Facilitate Interaction

  • Use clear calls-to-action
  • Make forms shorter and more easily accessible; add steps if necessary
  • Add quick links to get to pages with heavy traffic
  • Enable back-end functionality for the MAC team to easily add new pages, posts, and media that are automatically pushed to different areas of the site

User Research

To make the website as effective as possible, we knew we needed to understand our users. Using research from a micro-project (a series of winter session landing pages) started the previous fall, we had already identified the four key audiences we were targeting: prospective students, current students, alumni + friends, and parents.

We expanded our personas to encompass more of the website than the previous micro-project considered in its former interviews. We identified motivations, red routes, and pain points by asking ourselves, “What job is this user hiring MAC’s website to do?”

After the initial expansion of personas, half of our team created close to 25 unique user journeys.

Site-Mapping

While half of our team dove in deeper to create detailed user journeys, I led the other half of the team in the re-structuring of the navigation. MAC’s old site was very unintuitive and did not align with competitors.

While we didn’t want the new navigation to be the same as those other sites, we did want to follow certain conventions to make sure users knew where to find information; for instance, on the old site, a page for Faculty + Staff was grouped with other academic-related pages. We re-arranged pages, split up content, and added new areas to the site to align with Gen Z's expectations for a college site.

Using Balsamiq, we created a revised site-map, reviewing content and cutting or adding pages as necessary.

sitemap diagram of MAC's utility nav and main nav

The first page of MAC’s sitemap shows the utility nav and the top level of the main nav.

Wireframing

With the research completed and the sitemap approved, we began wireframing pages in Balsamiq. After wireframing approximately 25 pages, our project lead, CEO, and I headed out to Cresson, PA to present to different groups within the college, including admissions, registrar, residence life, marketing, and the new provost.

At this meeting, we were able to flesh out a few more details and get new perspectives about what mattered most to each group for their respective area of the site. The meeting was extremely informative and all wireframes were approved shortly after.

homepage masthead wireframe for MAC website
Initial wireframes for the homepage masthead.
wireframes for MAC website
After doing the homepage, we considered the academic pages...
wireframes for MAC website
as well as other top-level subpages...
wireframes for MAC website
and then got into a few more detailed areas such as a quiz page.

Designing

Designs for the site began shortly after our visit. Two members on our team took the lead on creating designs for each of the wireframed pages.

Exploring font styles and color palette variations, they utilized A/B testing to determine which elements resonated more with users in a targeted demographic. They worked together to identify common groupings of content in order to create design elements that could be applied throughout the site.

MAC's homepage website mastheadscreenshot of Mountie Spotlight section on MAC homepage

Repeatable design elements were a large focus in MAC's redesign.

Developing

With designs approved, we were able to move into WordPress. We worked together to split up pages being built with the theme builder as well as how to add the more complex custom functionality with custom page templates and code.

All content was provided by MAC. After two weeks of in-house testing, we provided two weeks of testing and support to MAC’s marketing staff in order to give them a feel for how to update various parts of the site.

The new site launched in December 2019! Since our launch, the MAC team has taken over updating the site on a daily basis to stay more in-tune with campus happenings.

full-page screenshot of MAC's new homepage

The homepage’s use of dynamic content to keeps the page updated with timely news and upcoming events.

full-page screenshot of MAC's student life page

The redesigned site has more opportunities to feature Mount Aloysius’s unique community.

Credits

  • KDG

    Claudia Miller
    Project Manager/Lead Designer

    Nicole Kutos
    UI/UX Designer

    Kalyn Kates
    UI/UX Designer

    Kelsey Kohrs
    UI/UX Designer

    Keri Lindenmuth
    Content Writer

Next Project:

Miscellaneous Projects