Arts at Dartmouth

Screenshot from Arts at Dartmouth

The Arts at Dartmouth website is an effort to provide a consolidated view of arts-related activities and opportunities at Dartmouth. The site is aimed at prospective students who are interested in incorporating the arts into their college experience. But the site also serves current students and the Upper Valley community who are interested in participating in the current arts activities at the College.

Collaboration is a key component of a cross-disciplinary project such as Arts at Dartmouth. Five academic departments, the Hood Museum, and the Hopkins Center for the Arts comprise the primary stakeholders, along with Admissions and the Office of the Provost. I was project leader, and in order to move the project forward, we formed a working group to do the work of the site, a management team to help with decision-making, and had regular sessions with the stakeholder group to touch base and get feedback.

Another important tool in the development process was the project charter. With many differing interests among the stakeholders, the project charter served as our touchstone throughout the site development process. In particular, revisiting our defined goals, target audience, and measures of success helped keep us focused and avoid scope creep:

Goals and Themes

  • Demonstrate the value that Dartmouth places on the arts
  • Demonstrate the distinctiveness of the arts at Dartmouth
  • Demonstrate the influence and value of the arts on overall quality of life

Target Audience

  • Prospective students (and their parents and families)—accepted students in particular
  • Current students
  • Dartmouth and Upper Valley community

Measures of Success

  • Increase in matriculation of students who are highly talented in the arts
  • Increase in the number of arts majors/minors
  • Increase in the number of students enrolling in arts courses, especially those who enroll during their first year
  • Increase in student participation in/attendance at arts-related activities
  • Increase in overall attendance at arts-related activities

In the end, the biggest challenge to developing and maintaining the Arts site is content. Each of the stakeholder departments has its own website, and expecting them to engage in content development for an additional website was not realistic. We developed a minimal collection of static content—testimonials, photos, descriptive text, and videos—as part of the site development process. Then we embedded feeds from other sources—Flickr, YouTube, calendars and news—to provide an ongoing content source, giving a more dynamic and current feel to the site.

The architecture for this “portal to the arts” is fairly straightforward. Each department and center has its own page, with text and imagery designed to express its energy and focus. The overall visual design is colorful and vivid, based on a color palette derived from the site’s primary visual element—a segment of an oil painting created by a student in Studio Art. The layout is flexible, adapting gracefully to different window widths.

Screenshot from Arts at Dartmouth

The Arts at Dartmouth website is an ongoing project. We continue to add to the site, refine our approach, and measure progress toward our success metrics.

Dartmouth Now

Screenshot from Dartmouth Now

With the rapid growth of the digital environment, a difficult task facing many organizations is to consolidate information that is currently spread far and wide so that users do not have to jump from place to place to get a complete picture. Dartmouth Now is one such effort, sponsored by Dartmouth’s Office of Public Affairs.

Before Dartmouth Now, the Office of Public Affairs (OPA) had multiple vehicles for getting the word out about Dartmouth, both in print and online. While leading a College-wide initiative to reduce print publications, OPA took the opportunity to develop a consolidated digital publication for Dartmouth stories. Dartmouth Now is Dartmouth’s primary information destination for current activities and initiatives.

My role in Dartmouth Now was primarily strategic. As project manager, I worked with OPA and Web Services colleagues to develop a project charter and timeline for the website, and to keep the project moving.

But I also had the opportunity to work with code. One of the project requirements was a software platform that would support comments, tagging, easy updating, and an approval workflow. We decided to use WordPress as the development platform. This was Web Services’ first foray into using WordPress. I joined the team in tinkering with the templates and CSS to help accomplish the design and functionality.

In addition, Dartmouth Now offers email updates via MailChimp. I designed the email template using MailChimp’s RSS-to-Email feature. Updates are automatically generated from Dartmouth Now’s RSS feed and sent to subscribers daily or weekly, depending on their preference.

Screenshot of Dartmouth Now email update
The Dartmouth Now email update is delivered using MailChimp’s RSS-to-Email functionality.

Dartmouth Home

Screenshot of Dartmouth homepage

In my time at Dartmouth I have been responsible for three homepage designs. For the most recent version, launched in August of 2006, I collaborated with colleagues in the Office of Public Affairs. We formed a working group called The HomeTeam, established oversight with senior leadership of the College, and embarked on six months of user research, followed by two months of informed design.

We decided early on that we did not want to “tell and sell” Dartmouth. Effectively representing Dartmouth online could not be achieved through static, official narrative. Instead we sought ways to “show” the Dartmouth Experience. We opted to use the site as a news source, highlighting the “now” of Dartmouth through stories, events, and features. While the Dartmouth homepage requires daily care and feeding, it serves an important role in representing the vibrancy of the College, both internally and to the world at large.

Another thing we recognized early on was that the success of the site depended on engaging the Dartmouth community in the design process. People at Dartmouth use the homepage as their portal to information, activities, and tools that are part of their work. If the homepage did not serve their needs, we would be introducing a frustration into their daily lives.

Screenshot of Customize Quicklinks page
The Dartmouth homepage allows users to create a custom set of QuickLinks on the home page, providing easy access to commonly used website and applications.

We spent a good deal of time talking to the community about their needs, checking in through Web Town Meetings to share design ideas and gather feedback, and posting our work and progress and requesting feedback through the HomeTeam website.

For the design, we used a flexible, three-column layout with a full-width photo at the top of the page, similar to a newspaper layout. The widescreen aspect of the photos can be challenging, but the College photographer has a wonderful eye for wide shots.

As of this writing, the design we launched in 2006 is still Dartmouth’s homepage. Five years is an eternity on the web, with its shifting design trends. While I expect a redesign within the next year or so, the current design still serves Dartmouth well, thanks in large part to the good work of its editors who keep the content and images fresh and interesting.

Access by Design

Access by Design book cover

My work as a web designer became more meaningful when I became involved with web accessibility. I found using design to address issues facing people with disabilities more rewarding than focusing on aesthetic concerns of flash and visual impact. And in learning more about universal design in other disciplines, I learned that accessibility and good design go hand in hand.

When I first became aware of web accessibility much of the attention  was in the form of guidelines and best practices. I was interested in integrating accessibility into design rather than considering it as an afterthought or as part of a validation process. All too often, accessibility is brought to the table at the end of the design cycle.

Usability through user-centered design was also gaining a foothold in the years leading up to Access by Design. Slowly but surely, design requirements for web sites and applications were being defined by user needs rather than the preferences of those making design (or business) decisions.

Access by Design integrates concerns for usability, accessibility, and universal design into a design methodology—universal usability. Human-computer interaction pioneer Ben Shneiderman defines universal usability as “enabling all citizens to succeed using communication and information technology in their tasks.” My goal in writing Access by Design was to provide practicing user experience professionals with a toolkit for achieving universal usability on the web.

As with Web Style Guide, the complete text and illustrations from Access by Design is online, along with additional resources to support further exploration and understanding.

New York Times article on web accessibility

Photo from office window with brick wall obstructing the view
The view from the window in my old office, obstructed by a free-standing brick wall

 

In the spring of 2002 I had an idea for an article. For several years I had inhabited an office in Berry Library at Dartmouth College. The office was nice—large window, high ceiling, new construction. But outside the window was a brick freestanding wall that obstructed my view. I tried not to let it rankle me, but every time I had a visitor she or he would make some comment like, “Nice view.” Thanks.

I heard through some source that the wall had to be that height—something to do with the golden ratio and classic proportions. But the reality is that every window on the first floor of the north facing side of the building looks out on brick instead of the beautiful New Hampshire landscape. And to top it off, the wall is purely aesthetic—it has no structural purpose.

At the time I was getting more involved in web accessibility. I found myself arguing against elements, such as Flash and dropdown menus, that were unnecessary and could potentially create barriers.

That’s when I finally found a purpose for the wall outside my window. I could use it as an illustration of how design decisions can result in unnecessary barriers. No one who visited my office ever praised the wall or saw its value despite the drawbacks. If I created a parallel using this unnecessary and obstructive wall, perhaps people would arrive at the same conclusion about barriers on the web.

The idea had traction. I wrote a rough draft and pitched it to an editor at the New York Times who had given Web Style Guide a favorable review. She connected me with the editor of the New Economy column and I was off to the races. The article, New Economy; Eye-popping graphics can spice up Web sites, but they also create barriers, was published in paper and online on June 10, 2002.

This article is one of my proudest accomplishments. The writing came together nicely and went out to a broad readership. I was able to raise awareness of the barriers facing people with disabilities at a time when web accessibility concerns were not well or widely understood.

Web Style Guide

Web Style Guide book cover

The first version of Web Style Guide was a web site called the Yale C/AIM Web Style Guide, posted in 1993, just as the world outside computing and academia began to notice the new medium and the Internet in general. The early web was sorely lacking in aesthetics but exploding with potential. Web Style Guide provided much-needed guidance on structure and design based on several decades’ worth of experience with print, hypermedia, and multimedia design and authoring.

In 1997 my co-author, Patrick Lynch, and I updated the Web Style Guide site to reflect the maturing design trends and changes in web technology. This was a time of significant progress in visual design and interface sophistication, but at the cost of standardization and accessibility.

In 1999 we produced the first print edition of Web Style Guide. The web site had gained a significant following as more and more organizations turned to the web as their primary means of communication. People with little or no background in design were assigned the responsibility for web site development, and they looked to Web Style Guide for calm, reassuring, and practical guidance.

Since its inception as a web site in 1993 and into its third edition, Web Style Guide has presented solid design advice based on classic design principles.  In the second edition we focused on solid design practices, acknowledging the growing attention to web standards and accessibility. In the third edition we were able to move away from issues like cross-platform compatibility and adaptation for people with disabilities, and instead provide solid planning, design, and editorial guidance for a more stable, accessible, and sustainable web site.

Web Style Guide is a classic. It has been translated into more than eight languages, and is commonly used as a course text for web design classes. Despite the availability of a book version of the guide, we deliberately chose to continue to make the web site materials freely available.

Screenshot of Web Style Guide page

“A style guide for the interface with real long-run value, showing us deep principles of design rather than simply fashion and technology.”
—Edward R. Tufte

“An Elements of Style for Webmasters.”
—J. D. Biersdorfer, New York Times, Circuits Section

“At last a book on the design of web sites with the viewer in mind. Non-technical, yet informative and lively: it delights as it informs.”
—Donald A. Norman, The Nielsen Norman Group

Hopkins Center for the Arts

Hopkins Center for the Arts home page

The Hopkins Center provides an environment for learning about, creating, and experiencing the arts for both the Dartmouth and Upper Valley communities. For their latest redesign, the Hop worked with in-house web support to build a dynamic website that would both promote their programs and serve as a resource for prospective and current Dartmouth students.

The Hop had been working with an external vendor and using a content management system. They had the necessary experience and staffing to commit to maintaining a dynamic website. And since their design and functional requirements included elements such as a calendar and RSS feeds, we decided to use WordPress as the development platform. We normally do not offer WordPress because of the support implications. However, due to the unique business needs of the Hop, we felt a dynamic authoring environment was necessary to meet their needs. We beefed up our in-house expertise and hired an external WordPress consultant to help with the more complex functionality, such as the calendar.

We worked closely with the Hop to develop the information architecture for the site. Our goal was to provide easy and intuitive access to program information, which is necessary for a center for the arts. We also sought to highlight the educational opportunities for Dartmouth students through workshops, exhibitions, and academic programs.

When it came time to work on the visual design, I was fortunate to have access to the graphics developed by the Hop creative team as part of their print campaign. The Hop season brochure provided excellent source materials that allowed me to create a compelling visual design that captured the tone and energy of their printed pieces. In particular, I was able to include a treatment for silhouetted images.

Screenshot of Khmer Arts Ensemble page with silhouette

I used CSS3 transparency effects to maximize the impact of the bold background graphic. In addition, I created a design for the Hop’s YouTube channel utilizing many of the same elements.

Screenshot of the Hop's YouTube channel

The Hop staff was quick to learn the WordPress interface. Once we developed the framework, design, and functionality, the Hop set to work filling out the content, adding text, photos, and videos. WordPress has proven to be a good fit, and they continue to provide site visitors with fresh and compelling content.

Follow

Get every new post delivered to your Inbox.