Category Archives: Projects

Innovating and disrupting, all in a day’s work

Recently I had the pleasure of speaking at the HighEdWeb New England regional conference. What a great bunch of people! I really enjoyed the energy and positivity of the sessions and the side conversations. This is a group undaunted by the challenge of bring order, quality, and new ideas to the fairly conservative yet chaotic medium of college and university websites.

Bringing order to chaos has been my main focus for the last five or so years as a web strategist, first at Dartmouth College and more recently at Harvard University. I spoke about my work on the Harvard Web Publishing Initiative at HighEdWebNE, and it was a great opportunity for me to get my head around some of the more innovative aspects of the project, and some of the challenges.

I started on HWPI in June of last year, as Web Strategy Project Lead. Personally, I love a challenge, and I can’t think of many things more challenging than setting up a centralized governance model, suite of services, and software platform for web publishing in an environment as large and decentralized as Harvard University. The project is ambitious and forward-looking, with strong backing from institutional leadership.

Our approach to HWPI has been enterprising on many fronts:

  • Learning by doing. Rather than engage in an extended discovery phase to learn the requirements for the project, we started with a pilot phase. We redesigned the websites of 10 academic and administrative departments, identifying the requirements for the platform and best practices for service delivery, and setting standards for user experience and design.
  • Guided by strategy. To avoid “lift and drop” redesigns we started each project with a project charter, asking departments to step back and define goals, target audience, and success metrics. We also identified and assigned ongoing departmental resources, particularly for content.
  • Focus on user experience. A consistent user interface improves user experience because visitors can learn the interface once, and then apply what they know to other Harvard sites. We designed common navigation and wayfinding systems for academic and administrative departments.
  • Commitment to quality. HWPI is about quality, and not just on the surface. We hired a digital content strategist to help departments craft their content to best accomplish their goals.
  • Software for higher ed. HWPI is using OpenScholar, a Harvard built Drupal-based open source software platform designed to help faculty communicate about scholarly endeavors. With origins in higher education and developers on the HWPI team, OpenScholar is expanding to include functionality needed for university communications.
  • Responsive and accessible. Early on we realized that a great visual design that works well in different contexts and devices would be an enticement to use the platform. We partnered with Happy Cog to develop accessible and responsive templates for the platform.

By the end of March we were through the pilot phase, successfully launching the 10 pilot sites. But it wasn’t always an easy process, for the team or the clients.

One of my lessons learned about our approach inspired the topic for my HighEdWebNE presentation: that innovative ideas need an innovation process.

An accidental innovator

When I started work on HWPI I thought it was interesting and challenging, but innovative? Not really. I had been working many years at Dartmouth on a similar service and platform. I expected this project to be much the same, only bigger!

As time passed I realized the project was not only innovative but also disruptive because it asks people to change their values. Rather than valuing customization it asks customers to value other factors, like a shared platform with central support, a common look-and-feel, structured content, and opportunities for content aggregation and sharing. I wish I had recognized the disruptive nature of the project earlier because I would have sought ways to adapt our process.

In my HighEdWebNE presentation I shared several books that are important for people involved in innovation projects: The Innovator’s Dilemma, to help recognize a disruptive innovation project, Diffusion of Innovations, to learn how to get innovations adopted, and Change by Design, for a “design thinking” methodology to support innovation projects.

Innovation and disruption may seem all in a day’s work for people working in technology. We don’t generally wake up in the morning and think, “Well, off to innovate!” But the customers we rely on—to adopt and enjoy the fruits of our labors—have a very different perspective. To them, we are asking a lot. We are asking them to change their values.

If you find yourself working on a product that your customers think of as new, first of all, recognize the project as a disruptive innovation. Then, form a small team to work exclusively on the project, surround the team with customers who want and value the features and capabilities of the product, and use an iterative approach of brainstorming, designing, and prototyping to produce a successful outcome.

Presentations slides from Slideshare

Slides from Innovative Ideas Need An Innovation Process, posted by highedwebne on Slideshare:

Web Emergency Plan

Screenshot of Dartmouth Emergency Information homepage

In light of events affecting campuses in past years, including Hurricane Katrina and the tragedy at Virginia Tech, many colleges and universities have developed protocols for managing emergency situations. The web is a key component in emergency management as a tool for notification, instruction, and communication. As a masterful worrier and contingency planner, I was only too happy to lead the project to develop a plan for using the web in an emergency.

Dartmouth’s Web Emergency Plan has several components, including:

  • An emergency banner that displays over most official College websites
  • An emergency website that displays current status information, and that would be used extensively during an emergency
  • An off-site emergency website that would be activated if Dartmouth was offline
  • An alternate homepage layout for use in the wake of an emergency

In designing these elements, we focused on ease of activation, flexibility, and lightweight design. In an emergency we knew we would need to act quickly and flexibly, as we could not predict in advance what would be needed. We would also receive a good deal of web traffic and needed to minimize demands on our infrastructure.

The campus has done a number of tests and trial runs and our protocols have executed according to plan. It’s a solid and robust plan—just what a worrier needs. While I hope its use remains purely in test mode, the Web Emergency Plan could make an enormous difference should Dartmouth ever need to put it into effect.

Dartmouth Hitchcock Medical Center

Screenshot of DHMC Quality Reports page

I have consulted on a number of projects for the Dartmouth Hitchcock Medical Center, or DHMC. These projects have been great learning experiences for me. Unlike many organizations, DHMC is committed to user-centered design. I was given support for user research, both with resources and timelines. And most importantly, when it came time to make design decisions, user research was the guide.

The most interesting and challenging project that I did for DHMC was the design and usability for their Quality Reports feature. Quality Reports offers comparative data on how DMHC measures up across a variety of diseases, procedures, and cost comparisons. In 2003, DHMC was just beginning to plan for a rollout of this new and innovative feature. They wanted to provide the information in the best, most useful format possible. That’s where I came in—and where user-centered design played a key role.

The team at DHMC had several different elements in mind for presenting the reports: checkmarks indicating how DHMC was measuring against their quality goals; the data itself, and the comparison data; and explanations of the measures, so that readers would understand the significance of, for example, “aspirin at arrival.”

Screenshot of Quality Reports detail page

I developed several different functional mock-ups of the reports, each one combining the elements in different ways. I then did user testing to determine which approach resonated best with DHMC patients, looking for things like:

  • Did people react to the information/visual density of the interface?
  • Did they read the narrative text?
  • Did they like having the comparative data?
  • Did they like the checkmarks?

The most impactful thing we learned was that the scorecard approach, with only checkmarks, was too simplistic. Testing participants preferred access to the data and comprehensive descriptive information. Also, in examining quality reports, participants wanted to learn more generally about the conditions measured.

The interface for Quality Reports is a scorecard of sorts, but with data rather than checkmarks. Each measure includes a brief description, and is linked to a more complete description and data graph. Also, patients can access health information about conditions from the Quality Reports pages.

As of this writing, the designs I created for DHMC, including the home page, are still in use.

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.

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.