The Observer Notre Dame

The Observer Notre Dame

The Observer is a Student-run, daily online newspaper serving Notre Dame & Saint Mary's

From Old To New

The University of Notre Dame’s student run newspaper, The Observer, gets a large amount of daily visitors. However, their old design did not meet the standards required by a site with that much traffic. They needed a better user experience, a more organized page layout, and an overall modern update to help meet the needs of all their current students and alumni. With the development resources on hand to replicate our design direction, Notre Dame approached us to create a series of templates that would help meet these goals.

Though only having to design templates cut down on some of the development hours, we had to make sure that the templates we created were legible, informative, and easy to scan. Having worked previously with the Chicago Sun Times, we had a good understanding of this audience, as well as a few new ideas that would allow us to build off of our foundation and create an even better user experience.

 

Site Goals

The goal of the design was to create a sleek responsive website that appealed to the current students, but kept the level of flashiness down to not alienate the older alumni. When building a news website, one of the more difficult issues during a news publication redesign is dealing with clutter. Since there are numerous sections, articles, ads, and links on a given page, there needs to be a clear distinction between sections. To handle this, we decided to use both colors and headings to differentiate categories. This led to a very clear organization and visual hierarchy. To add to this idea, we wanted to bulletproof the entire site so that all the text and images would not break the design, regardless of size or length.

In the end, we were able to transform The Observer into a professional looking news source with a face that lends credibility to its brand. We’re confident that this new site will hold up visually and structurally for years to come.

Launch Website

Observer Homepage Design

 

Interior Screens

  • Observer, Interior Screen 1
  • Observer, Interior Screen 2
  • Observer, Interior Screen 3
  • Observer, Interior Screen 4

Tablet Screens

  • Observer, Tablet Screen 1
  • Observer, Tablet Screen 2
  • Observer, Tablet Screen 3
  • Observer, Tablet Screen 4

Mobile Screen

Observer, Mobile Screens