Putting Lipstick on a Pig

Closeup photo of a pig, Courtsey of Brent Moore, Flickr.com
Courtesy of Brent Moore, Flickr.com

I recently took a trip that involved multiple hotel stays. One of the hotels reminded me of a certain type of internet experience. The hotel described itself as a luxury hotel, and indeed it had the amenities of luxury—the plush white robes waiting in the closet, the thick towels, the Gilchrist & Soames toiletries. However, only one burner of the kitchen stove was functional, the television played only snow, and the pillows were without pillowcases. And the fundamental structure of the building itself was flimsy and old.

Having committed to the hotel, both financially and logistically, I tried to make it work. I made my coffee using the one working burner. I watched movies on my laptop. I found pillowcases. And I tried not to look too closely at the stains, dirt, and cracked paint.

This worked for about four days, at which time I cancelled the remaining three days of my reservation and left. Satisficing ultimately wore me down, to where I dreaded returning to my room—plush robes notwithstanding.

As a web designer, sometimes my job is to dress up poorly conceived and architected websites and web applications—also known as putting lipstick on a pig. Perhaps this self-awareness is part of what made my hotel experience so uncomfortable. It was like I was living inside one of my less glamorous projects—a bit like Being John Malkovich, but without the humor.

If the basic framework is a pig, lipstick does not a luxury experience make. My guess is that this hotel has a high bounce rate, with visitors checking in, staying a few nights, leaving or leaving early, and never returning. They would be better served spending their luxury dollars on providing a solid baseline of service and cleanliness, and making their facilities fully functional. Who wears bathrobes, anyway?

The same holds true for web experiences. A clean interface that supports basic usability and functionality wins out every time over a luxurious yet buggy design (fortunately, there were no bugs).

The experience served as a good reminder. For interaction design, I need to focus on the essentials and do them extremely well, and resist the urge (or the push from clients) to reach for the lipstick until I’m sure it’s not for a pig.

Google (in)accessibility videos from the National Federation of the Blind

The National Federation of the Blind (NFB) recently raised the possibility of civil rights violations arising from the use of Google Apps for Education, and asked the Department of Justice, Civil Rights Division to investigate. In their March 15, 2011 press release, Adoption of Google Apps Program Discriminates Against the Blind, they claim that both New York University (NYU) and Northwestern University, along with several Oregon public schools, have committed civil rights violations by utilizing these applications that have “significant accessibility barriers for blind people” to deliver email, calendaring, and collaboration tools to their students and faculty.

In following the story I discovered that NFB has devoted resources to preparing (captioned) videos demonstrating the types of barriers encountered by screen reader users in using these tools. As a long-time advocate of accessibility, who has tried countless methods for raising awareness about nonvisual access to webpages, this video collection is a goldmine. The videos illustrate both the challenges of nonvisual access, but also the ease of solving these challenges using good coding and design practices. The issues demonstrated using Google as an example are transferable (unfortunately) to many—maybe even most—web-based applications. Developers should view and learn from these videos, and avoid making the same mistakes.

I have long admired NFB for their work in ensuring equal access for nonvisual users. To admiration I now add my gratitude for providing exceptional content that can be used for education and awareness-raising by accessibility advocates, and to make real the barriers as well as the solutions for the people who code the pages.

Thank you, NFB!

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.

Web design articles for Peachpit

Screenshot of Peachpit article page

Peachpit is one of the most well known publishers in the design and technology industry. In particular, their New Riders imprint is the stomping group for the field’s most prominent experts, through the “Voices That Matter” series. I have had the honor and privilege of publishing a book, Access by Design, and many articles under the Peachpit masthead.

My most extensive series of articles has been for Peachpit’s Web Design Reference Guide. Alongside web gurus such as Andy Clarke, Robert Hoekman, Jr., Molly Holzschlag, and Dave Shea, I published 20 articles for readers interested in learning best practices for web design. For the most part, my articles focus on usability and accessibility concerns, including usable forms, flexible layouts, and data tables.

More recently I published two articles with Peachpit on user-directed design: one on making the case for user research and a second describing the components of a project charter.

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.
Follow

Get every new post delivered to your Inbox.