Oberlin College

Oberlin College is a leading Liberal Arts College and Conservatory of Music in Oberlin, OH. During a period of change and transition, Oberlin undertook the task of redeveloping their network of Web properties to address the needs of the thriving institution and create a modern, vibrant public-facing representation of the two schools.

The Oberlin project, like all higher education websites, came with a set of complex needs from a variety of stakeholders. These include: marketing and outreach to prospective students and future community members; individual requirements from a variety of programs within the school; upholding the strong traditions of an institution with a rich history; establishing flexibility and creating a scalable framework for future growth; tying into existing marketing efforts and general brand guidelines.

Finding a balance with solutions that satisfy all parties was the challenge.

Responsibilities
EMSStrategy, User Experience & Design
J. Todd BennettIA, Strategy/Planning, User Research ( Work done by Todd while at DotMarketing, currently he is Managing Partner at decimal152 )
DotMarketingTechnology & CMS
view larger

The homepage establishes a bold posture. Oberlin greets site visitors with vibrant colors, a dynamic story-telling feature, simplified global navigation and a strong Institutional presence.

Along with timely updates and student features, the homepage introduces the main organization scheme that structures the site: sections for each school along with two sections for shared services.

view larger

Each major section is differentiated with color and a flexible start page allowing for significant variation between the two schools and the shared services.

view larger

Deep cross-linking is facilitated through the use of a dynamic expandable menu that can be accessed through the simple four-button global navigation.

The College of Arts & Sciences section is styled with a green accent color. The large green feature area is a flexible area that can feature rotating content as need be.

view larger

The Conservatory of Music section is styled with an orange accent color. The large orange feature area is a flexible area that can feature rotating content as need be.

view larger

As the user proceeds deeper into a section, the color scheme persists but becomes les prominent to allow content to take center stage.

view larger

The Events Calendar, along with other areas of the site outside of the four color-coded main sections, use a neutral palette that coordinates nicely with the colorful areas.

Alternate header schemes were conceived to facilitate a low-burden method for tying existing sites or special-case scenarios into the broader network.

Design Challenges

Create a unified institutional presence while allowing for variation between appropriate areas.

A design framework was established that provides a contextual understanding of the content and a hierarchical structure that varies the experience of using the site. Color coding of sections reinforces school (and site) organization, expresses difference between areas and unifies through consistent intensity. Color is a vehicle for expressing the vibrancy of the school. The boldness, and its acceptance, says a lot about the confidence of the school.

The story of Oberlin is best expressed through its students.

The homepage features an interactive component that tells the Oberlin story through the successes and experiences of current and former students. These stories are pulled from a growing pool of stories and change with each visit. Visitors can dig deeper and find out more about each story.

Establish a method of navigation that maximizes the ability to quickly move through the site without overwhelming the users.

The global navigation element at the top of all pages reduces visual clutter yet provides deep access into the two schools, the two shared campus sections (student life and campus activities), quick access to the admissions areas and links to the main college services. The header can be implemented in multiple formats, allowing for different uses based on the context and the ability to tie external sites into the new Oberlin scheme. Below this global header, there is a correpsonding internal structural system.