Audio Enclave

Summary

A web-based community repository for searching, uploading, and playback. Audio Enclave is being developed in an extremely tight iterative design process. Audio Enclave uses AJAX, when appropriate, to enhance then user’s experience. For this project, a Vestal employee design and implement the UI and graphic design.

Problem

Audio Enclave’s predecessor, which was created in 1998, began to break in the Fall of 2004. At the same time, the user interface, while appropriate for the late nineties, had lived on long enough. Vestal Design and others took it upon ourselves to completely start over. There were several existing problems in the user interface, and additional features we wanted. For example, information was limited and poorly displayed in the old interface, and the user was limited to adding and removing songs from the queue At the same time, the consensus was clear that the remainder of the hall liked the key concepts behind the old interface- a simple front page, a minimalist design, and some humor. The site is used by the entire hall, and has speakers placed in both lounges and all bathrooms on the hall (for shower music).

Approach

Vestal Design’s employee had been using the previous incarnation of Audio Enclave every day for approximately two years when he first approached designing the interface. Since there was an excellent user base to draw on, it was decided to employ a tight iterative design process in building Audio Enclave. As soon as we felt the interface had reached a sufficiently stable level, it was immediately deployed. All code commits are automatically live-updated to the server. This allows us to employ an iterative design process which comes full cycle approximately once a day. We actively solicit input from the rest of the community for new functionality and feedback on existing features.

As Audio Enclave was being designed in the Spring of 2005, AJAX was just beginning to appear on the radar of web designers. Initially, the site was implemented without any JavaScript (one requirement was that the design have basic functionality in a terminal web browser). In the past few months, the team has gone back and re-implemented several parts of the site to use AJAX and JavaScript.

Solution

After a summer of work, Audio Enclave went live in August 2005. The interface includes sortable tables which display information relevant to the mode. Intelligent linking is used when a user clicks on information. For example, clicking on an artist name anywhere on the site automatically redirects to a page displaying all albums by that artist. Fitts’ Law is used in the design to minimize user interaction time. AJAX is employed to tighten the user’s sense of “cause and effect” in playing songs and controlling playback. Finally, the user receives graphic feedback whenever they hover over any actionable item on the site. After clicking on an actionable item, confirmation feedback is always given to the user.