Home / Responsive Website Launch: St. John’s University Rolls Out New Drupal Site

Responsive Website Launch: St. John’s University Rolls Out New Drupal Site

Cross-posted with permission from OHO Interactive

photo 1

Launching a national advertising campaign that invests your valuable budget dollars in television, radio, print, outdoor, and online media is a great way to drive traffic and give a push toward reaching your business goals. But if you’re driving to a poor web experience, you’re wasting your money. Luckily, the digital media team at St. John’s University understood this and initiated a site overhaul as the first step in their digital rebranding effort.

In redesigning their higher education website, St. John’s sought to address a number of issues that were creating complexities in the day-to-day site administration and in the user experience for prospective and current students, as well as the larger University community:

  • The site was relying on an eight year-old content management tool that offered a cumbersome and time consuming process for site management
  • A confusing information architecture made navigating the website difficult and provided a poor user experience in which site visitors couldn’t find the information they were seeking
  • The site was not addressing the needs of site visitors using mobile devices as it was built for viewing only on desktops

St. John's University Website Before Redesign

photo 2

OHO worked with the digital team to address each of these priorities for the higher ed site redesign.

User Experience Design

St. John’s digital team knew their website’s information architecture needed a complete overhaul. Together, we focused on creating a structure that would make sense to internal and external higher education audiences, allowing them to easily find the information they needed. Using analytics data, we created new wireframes and a prototype that ensures the user experience of the new site is vastly improved and offers a clear and intuitive navigation.

Responsive Design

With the massive growth of users accessing higher ed websites using tablets and mobile devices, it was important to create a site that provides an optimized mobile experience. The new site has a responsive design that includes breakpoints for desktop, horizontal and vertical tablet screens, and mobile.

Content Management System Development

The digital team at St. John’s wanted a new content management system that would be easy-to-use and would streamline the process of posting new content. OHO built the new website in Drupal7, which offers a better security model for permissioning and revision tracking than their previous CMS. “St. John’s had the existing content management tool for over eight years and was in need of this overhaul,” said Luci Geraci, director of digital communications. “It’s a huge leap for the University that will allow it to better serve its audiences.”

In addition to improving the site administration experience, OHO also worked with St. John’s to facilitate a move to Acquia for hosting. Prior to the move, the site was being hosted internally on servers that were at capacity. The move to Acquia meant faster, more secure, and more reliable hosting services.

The Results

With the launch of the new website, St. John’s was confident that people visiting their site as a result of the national advertising campaign would find a great digital experience both on desktop and mobile. Improving the overall user experience plays a key factor in increasing key performance indicators such as time spent on site, pages viewed, and most importantly, conversions.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.