A typical page with CSS supported, and without CSS supported
I created HotAIR (http://www.improb.com) in 1994 as a one-page links list. The page was reworked in 1999 to use Cascading Style Sheets, and to incorporate another URL (http://www.ignobel.com). We later added http://www.improbable.com as that became available.
The design challenges associated with the HotAIR redesign were many:
- The site interaction was almost entirely experiential - aside from a subscription page and a "bookstore," visitors to the site were not expected to use the site to perform transactions or look up specific information. On the other hand, the audience for the site was academics and scientists, who are more likely to respond to valence effectors that are central (content-based) rather than peripheral (presentation-based).
- At the time the new design was created, hosting was distributed among several different locations, with "satellite masters" maintaining different parts of the site. We also linked to many other websites. Feedback from site visitors indicated that many readers could not tell which pages were "ours" (where AIR controlled the content), and which were links.
- The site was maintained by volunteers, who did not necessarily have high-level skill with HTML.
- The site had a large international readership, with associated bandwidth and technology limitations.
- While CSS was already in use on the web, it was not ubiquitous. The site design would have to work well both with style sheets and without them.
The final design for the new HotAIR was CSS-based, and included a collection of page templates to be used to add content to various parts of the site. These templates used a common color, layout, and font, with a prominent (and branded) logo that changed slightly for each site area. The logo was presented as a line drawing (about 30k). All color and font designations were done using CSS, at a substantial bandwidth savings. Nevertheless, the style sheets fell out gracefully - pages were navigable and esthetically pleasing when viewed in browsers down to Netscape or IE 3.0, and in theory could also work well on cellphones or PDAs.
Page content for leaf nodes was typically presented in the format of an academic paper, with no or few embedded links, but a sidebar on each page offered links to other material for random surfers (and all link trails eventually lead back to the bookstore). Pages were added by copying a template page and changing the text - deep knowledge of HTML or CSS was not necessary.
During my time as webmaster, HotAIR grew to include about 2000 files, and almost 1000 unique pages. It was consistently ranked as the Internet's most popular science humor site by Yahoo and Google.
http://www.improbable.com went to a full blog format in 2006.
The earliest page archived by the wayback machine is here:
http://web.archive.org/web/19961106172821/http://www.improb.com/ target="blank"
A welcome screen screenshot and a game screenshot, and a preliminary working draft of the Teamnuts UI spec
Teamnuts was founded to research, design, and implement an on-line poker site. I did benchmarking of existing sites, worked with subject matter experts and a graphic artist to brainstorm functionality and develop a UI and Widget spec, created wireframes and flowcharts as part of the site design process, and evaluated proposed graphic treatments created by the staff artist.
Since Teamnuts entered the online poker environment late in the game, after several other sites had already been launched, one major task in the brainstorming process was to come up with ways to distinguish ourselves from other sites offering the same apparent functionality. One general consensus was that the interaction should offer more background information, for novice players. The staff artist contributed a cleaner layout and page design (where most other sites sought to recreate the experience of a gaming table, complete with a perspective view, avatars, and even tableside drinks, Teamnuts chose to start with the premise of serving the information, not recreating the casino experience). One of my contributions was to support the use of emoticons during game chat.
After a merger with Cyberarts, the Teamnuts site was launched in April of 2005.
A working draft of the Open Country UI spec, and an internal memo reporting the results of the preliminary round of user testing
Open Country was an integrated software management tool for Linux administrators. As the UI lead, I designed generalizable CSS-based templates for interaction screens for the 1.0 release, worked with individual programmers to customize those templates for specific interactions, worked with marketing and business development to determine requirements, and created both a functional and a UI spec based on marketing requirements documents. I also acted as temporary project manager to finalize the 1.0 release.
As part of my "mopping-up" work for Open Country, I participated in planning and design meetings for the 2.0 product, did user testing of the 1.0 interface to inform the design of 2.0, and designed additional screens to be used in the 1.x extension of the product.
Rubicon (http://www.rubiconprograms.org) provides social services and support to a wide range of clients in the San Francisco bay area. I provided a usability evaluation of their website, and implemented a 508-compliant version of the site using CSS. (Because of a change in project management and resources, that site version was never fully launched).
A "crossroads page" screenshot, and a content page screenshot
The Freedom Rider's Foundation (http://www.freedomridersfoundation.com) organized and publicized a 40th reunion of the activists who traveled to the deep South in the 1960s to challenge segregation laws. Starting from a non-usable artist's rendition, I re-designed and implemented their website. The target audience for the site was the Freedom Riders themselves, all of whom were in their late 50s or older. The site function was twofold - to provide visitors with information about the reunion, and to allow visitors to reminisce about their experiences.
Because older users are much less tolerant of "busy" pages, the Freedom Riders Foundation site was designed with simplicity in mind. The pages use a minimalist design, with photo "landmarks" at branch points ("crossroads") in the navigation tree. For the most part (except where content is a direct download from printed material), the site design works well in full-screen browser windows, with font sizes up to 200%.
Because many of the pages are intended as memory and conversation triggers (like yearbooks, or photo albums), some of the cardinal rules of site design were broken for this site. We included menu lists that were much longer than seven items, without necessarily providing the cognitive chunking that would be necessary in a navigation menu. We also included some photos that require sideways-scrolling in a standard browser window, since potential visitors were more likely than the general population to be visually impaired, and because, in this case, the ability to see details in the pictures was more important than the ability to get a message across in a single glance.
In conjunction with Addwater, a design and marketing consulting group, I tested the usability of Wells Fargo's existing touch-screen ATM machines, evaluated newly introduced functionality that had been released on a few local machines, and explored the feasibility of not-yet-introduced functionality that had been proposed by Wells' own internal product development branch.
Unlike web surfers, users of ATM machines have a high cost of error recovery (both in their perceived value of time, and in potential financial mistakes). ATM machines are also relatively resource-poor when it comes to display capability and input devices, but perceived as far less mutable than websites. In addition, because of the unique nature of ATM interactions, it was not possible to observe users in a true field situation.
The testing was threefold:
- I performed a heuristic evaluation of the existing UI based on my own extensive interaction with a local machine. This evaluation identified both procedural and cognitive issues that could potentially affect the speed and accuracy of an interaction, and generated suggestions on how to streamline those interactions.
- Using Wells' own testing lab, we evaluated both novice and experienced Wells ATM users, who interacted with both a real ATM that presented existing common functionality, and with newly released functionality that was presented in mockup on a laptop computer. To replicate the conditions of a typical ATM interaction, we asked users to perform a small number of tasks at a single time, followed by a "break" to fill out a questionnaire. After three iterations of this cycle, users were interviewed. The visual mockup on the laptop computer was intentionally degraded, to convey to users that this was a mutable design, and to encourage them to suggest changes. Both the interviews and all user interactions (both on the ATM and on the laptop) were videotaped (yes, videotaped) for later evaluation.
Among other findings, this evaluation identified a substantial divergence between the intended interaction model of the existing ATM's and the actual mental model of three different users, including two who had been Wells' customers for several years. The interviews also uncovered several common sentiments among users regarding the perceived value versus actual value of some services offered. (For example, it doesn't matter how little of a surcharge you're adding for selling postage stamps - any markup above the normal ATM fee is too much. "Stamps are money.").- In response to an initial requirements list supplied by Wells, Addwater had created several mockups of new ATM functionality and usage strategies. I evaluated these new functionalities in light of current marketing and social psychology research, and wrote up a fully referenced memo outlining some of the expected user responses and business outcomes, should the new functions be implemented. The report was very well received by the Wells Fargo VP in charge of the project.
Little Engine sought to improve childhood education by providing an Internet-based support and communication service for teachers and parents. I participated in architecture and design meetings as a UI advocate, both within the company and in meetings with contractors. Among other outcomes, I identified a localization issue that would have substantially impacted consumer responses to a particular logo. The design firm that proposed the logo had been retained by Little Engine to develop marketing materials and a website design, but was unaware that some cultures read from right to left.
I was retained by CTP to act as a UI subject matter expert during the design of a website for Publix Supermarket's new on-line shopping service, PublixDirect. As part of my work on this project, I did field research in supermarkets to determine shopping patterns and existing product taxonomy, participated in design and brainstorming meetings, designed and developed a testing plan to identify product classification strategies, did benchmarking of existing shopping sites, and searched for (and found) published research that was relevant to the project.
Marketing research to determine the appropriate target market had already been done when I joined this project, however, after examining the results, I convinced CTP's researchers to add one more question to their next round of questionnaires: "Would you use this service to shop for anyone else?" The responses to this question inspired a change in the site design, to give the originally identified demographic (busy white collar workers) more resources to help them shop online for their elderly parents and college-age teenagers.
As a subcontractor for Addwater, I performed a heuristic ("armchair") evaluation of the Plantronics website, uncovering flaws in basic information architecture and in page presentation.
TCN provided telecom consulting and access services to nonprofit organizations. While my title at TCN was "Senior Web Designer," much of my work for TCN was actually as a project manager, doing costing and scheduling of projects, and acting as a client liaison. I also revamped TCN's website to fix basic flaws in the menu and interaction tree, and researched, designed, and implemented an online advertising campaign for TCN's services.
The ad campaign used two banner ads with the same wording but different graphic elements, one designed by our in-house designer as a typical high-end display ad, and one designed by me to specifically target our intended market (nonprofit organizations). According to statistics provided to us by DoubleClick, the targeted ad generated significantly higher click through than the "standard" one.
The UI spec and a site mockup
I wrote the UI spec for this Internet startup, and worked with graphic designers and the company founders to develop and design an overall look and feel for the site.
I was initially hired by the Genome Radio Project to create a mockup of a website for the syndicated public radio program The DNA Files, as well as to provide advice to project planners and artists who were unfamiliar with Internet technologies and limitations. One issue in the design requirements was the desire to create elements on the site that would be strongly interactive, instead of just being listings of information. Those interactive elements were eventually brought to fruition in the form of an interactive "scenario tree," which I was retained to research and write. The site was launched in December of 1998. The DNA Files won a Peabody Award in 2002.
See my artwork pages for Manus graphics, and others.
The Manus Project was a project within MIT's Newman Lab to develop a computerized robotic system for rehabilitation and physical therapy. I designed and implemented a graphical user interface for Manus, for use by therapists and patients. This GUI took into account the limitations of the input system (which, for patients, could only capture the user's arm position and hand rotation), the limitations of the operator (physical therapists who had little or no computer experience), and the limitations of the user (typically, stroke patients with some amount of neurological deficit).
My duties included generating proposals for interface solutions, meeting with project leaders to finalize project plans and schedules, programming in C++, demonstrating work in progress for the laboratory staff, writing end-user documentation for my programs and those of other programmers, and helping in the installation, testing, and debugging of the system at our first beta site. As part of my research for the Manus project, I also worked for two months as a Nurse's Aide at Burke Rehabilitation Hospital in White Plains, New York.
(I did lots of UI work in academic settings, including conducting formal testing with more than 100 users in various UI experiments, and testing or observing many, many others as part of required class work. Those descriptions are under construction. In the meantime, see these descriptions of my design classes and management classes).