Tag Archives: javascript

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.

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.

Undergraduate Admissions

Screenshot of Dartmouth Admissions home page

As Dartmouth’s Web Director, my responsibility is to manage and coordinate all development of Dartmouth’s digital environment. Admissions is an important property in that environment. When it came time for a redesign, I persuaded Admissions to work with my in-house group, Web Services, rather than outsource the project.

Having won Admissions as a client over external vendors, I was under pressure to deliver a service that would be comparable. However, because of my broader role at Dartmouth, I had to develop the site within the greater context of the Dartmouth web. The entire process required that I perform a careful balancing act of responding to requests while adhering to institutional standards and meeting user needs.

When it comes time for decision-making in the design process, I have found the best approach is to let users drive the process. User-centered design takes the decision making out of the hands of the designers and stakeholders, and instead allows user needs and preference direct decision-making.

We started the process with usability testing of a range of admissions sites at other institutions. We wanted to see how prospective students approach the process of finding a good match in very different contexts.

In observing about 5–6 high school students it became clear that the process of finding a good school was very similar to that of finding a good partner. Prospective students first determine whether they are right for the school by looking for data, such as average test scores of admitted students. If they pass the “fittedness” test, then they explore whether the school is right for them—the location, whether it offers a major in their field of interest, athletics and arts offerings. If the school passes the test, then they look to the application process.

As a result, our strategy was to provide prospective students and parents with data right up front. The current site has “Facts” front and center, complemented by images, videos, narrative, and stories that demonstrate that Dartmouth students are admitted for more than their ability to do well on standardized tests.

The information design supports the natural process flow, with the “Facts” and “Learn” sections providing ample opportunities for prospective students to determine whether they are right for Dartmouth, and whether Dartmouth right for them. The “Visit” section supports the next phase in the process, providing information and opportunities for both virtual and physical campus visits. And the “Apply” section is the final step in the process, with information and functionality to support prospectives who have decided to take the plunge and become applicants. In April, when decisions have been made and applicants have been notified, the architecture also supports admitted students with a “Class of 20XX” section. The site also has an “Answers” section that answers commonly asked questions.

Supporting these more practical needs is the “Perspectives” section. Here is where we attempt to communicate the richness of the study body through a variety of first-hand perspectives on the Dartmouth experience, through interviews, student blogs, live office hours, and more. This section aims to accomplish a challenging task: to provide authentic stories within the context of an official admissions website. We continually explore which means of communication is the most useful, impactful and, most importantly, credible to prospective students.

Screenshot of Dartmouth Experiences page

The visual design is modeled on a flexible, grid-based layout. I generally build flexible, or “liquid,” layouts, but this was the first time I did so on a grid, and the result provides the best of both worlds. The page elements harmonize, and yet they scale to accommodate different window widths and text sizes. And the line length cannot become too long since the layout is restricted to a generous but readable maximum width.

All of Dartmouth’s sites are built on the same codebase, so the Admissions site uses mostly the same code as, for example, Classics, Budget, and the Office of the President. This architecture allows for site-wide changes, such as the inclusion of an emergency banner on all sites in case of an emergency. It also allows a small team of web professionals to provide support to all Dartmouth departments and programs. On the down side, it limits design options.

For Undergraduate Admissions, I used the standard codebase with only one modification — the header area contains additional elements. I made extensive use of CSS3 properties, including color transparency, transition effects, and radius properties. Since not all browsers support CSS3, I coded these elements to degrade gracefully in browsers that do not provide CSS3 support. I also used JavaScript and the JQuery library to enhance the navigation experience, but users who visit the site without JavaScript have fully functional navigation.