Notes from an Oakland designer

hnu-redesign-654

Case Study: Redesigning a University’s Web Presence

In July of 2010 I was hired to be the first Web Manager for Holy Names University’s small marketing department, where my role would complete a trio alongside a Graphic Designer (mainly print) and reporting to the Director of Marketing and PR. While I’ve primarily worked for small agencies (as well as on a freelance basis) designing for a wide range of clients, I do have some experience working as an in-house graphic designer. In fact, it was how I started my career.

HNU is an Oakland institution, originally founded in 1868 on the shores of Lake Merritt, where the Kaiser building now stands, by six young and determined Canadian nuns. Their mission focuses on issues we all can embrace: educating women (and men since the 1970s), embracing diversity, and striving for social justice.

I was very excited to bring my skills and design sense to take the University’s web marketing to the next level, to better reflect the energy and passion of its students. Their site was a few years old and built using tables and bloated, deprecated code, and there was much to be done. While time and resources didn’t permit a complete from-the-ground-up rebuild of the site, I was able to accomplish quite a lot to improve the site’s look and performance over the course of two years.

The redesign

The site I inherited struck me as busy, and rather dated and corporate feeling; it lacked the compelling emotional draw of a thriving university with its commitment to diversity and social responsibility. I was faced with certain limitations: the table structure meant I was stuck with an 850 pixel wide site, so I worked around that, incorporating a turning page graphic from the logo into the background as a decorative element.

The website’s color palette was updated to reinforce the school’s brand, giving it a brighter, cleaner modern look, and a wider slideshow was created using photos of the campus and its students to add human warmth and to communicate the strengths of the school that differentiate it from its competition. Navigation was simplified to provide users with a less confusing experience.

Styles for the design of sidebar banners were created to help catch the eye and drive traffic into the site coordinated with efforts by the print designer to unify the brand. More screenshots can be seen on my portfolio page for my HNU work.

Blogs

The University’s news blog was hosted by Google at Blogger, and had a dated look that used the same background and color palette as the old website. By moving it to from its blogspot.com address to be hosted at hnu.edu/news using WordPress, I relocated valuable content to the HNU domain, insuring that current news would be added to the website frequently, where visitors expect to find it. This move had the added benefit of boosting SEO, and providing more control over the look of the blog’s theme.

WordPress blogs were also added so that key departments could manage their own online news and information, such as the Library’s Hawk Squawk newsletter, and in addition, I created the award-winning Preserving Historical HNU blog at the request of the school’s President, where I wrote about my discoveries about the history of HNU as I delved into the photo archives of the school dating back to the 1860s.

Digital marketing

The university partnered with MoGo Marketing to start a new digital ad campaign using retargeting to increase traffic to the site and awareness about the school’s monthly info nights. HNU’s graphic designer and I collaborated to create several ads targeting different majors, and I placed tracking pixels on the site and prepared R.S.V.P. landing pages in the Admissions Department’s Blackbaud site for each separate campaign.

Under the hood

The site was built in static HTML using style sheets: there was no content management system whatsoever, although Adobe’s Contribute was used by a few staff members to keep their department’s pages current. A full scrub was performed to tighten up code by replacing deprecated code with modern standards based code, to remove bugs—mostly remnants of old javascript no longer used on the site—and to simplify the updating of the site by replacing Dreamweaver Library items with includes.

These Library items were used for repeated sidebar menus and for the main header and navigation bar, so each time a small edit was needed in one of the menus, the entire site would need to be checked out to make the modification before uploading the entire site once again. It was extremely tedious and time-consuming. Switching to use include files meant that an update to the menu was a simple update of a single HTML file, that would be pulled for use on each page.

News feeds were used to keep the home page fresh, saving time previously spent hand-coding updates. Page titles and meta data were updated for consistency and accuracy, and to improve organic search results. A footer reiterating main navigation was added to make it easier for users to move around the site.

Measurable results

Holy Name University’s redesigned website, the Preserving Historical HNU blog and the digital ad campaign each won a Horizon Interactive award. Moreover, the targeted digital ad campaign resulted in an increase of R.S.V.P. page visits by up to 400%, and more importantly, a more than doubling of attendance to the info nights.

Thought not obviously visible to the average user, the efforts to update and streamline the site’s code decreased page load time, and made for a more SEO-friendly and easily updated site. In a one-year period following the  launch of the redesign, the site saw an overall increase of visits of 32.38%, with pageviews increasing 33.64%.

 Check out my portfolio page for my HNU work to see more examples of screenshots of the site.

  • Roy West

    It’s really interesting to read how a dramatic and effective redesign in the real world actually works. Nice work, Deirdre!

    • http://deirdrespencer.com/ Deirdre Spencer

      Thanks! Goes to show that despite the constraints of working within a table-based, older site structure, a lot can be accomplished to improve user experience and increase web traffic. 

  • Pingback: High Performance Web Sites by Steve Souders, O'Reilly Media