• Importing and optimizing a government database with over 150,000 entries
• Developing custom graphing solutions based entirely in Ruby
• Logo and graphic design

For CleanScores, it was paramount that the site be easy to use, so Vestal took the time to perform in-depth user interaction work on the website, which represents a staggering amount of information in a pleasant and digestible format. CleanScores.com presents information in a format which helps every day users learn more about their favorite restaurants without sacrificing functionality for experts who may need technical information.

Visit the site »

Visit the Campus Vortex City Guide »

Premium accounts and online payment

Vestal Design responded within two months, building out the existing site with a new design that meshes well with the original branding. A credit card payment system allows restaurant owners to buy an account, and to upload a logo, post specials, upload a PDF menu, and more.

Mitigating a data entry nightmare

One of the client’s main considerations was data entry — Vestal helped modularize and simplify the system to meet the gargantuan task of gathering a mountain of data on each restaurant.

Community tools and API integration

Finally, Vestal drew upon it’s extensive experience with and community building tools and web service APIs to implement a Facebook sharing link and a Google mapping feature (showing a map of every restaurant). Watch out as Campus Vortex rolls out to cover an ever-growing number of campuses!

• Plays video or audio (with an associated image)
• Includes a Playlist which runs off PodTech’s RSS feeds
• Allows users to link to, embed, or email the player
• Intuitive and distinct controls
• Dynamically resizable, opens in pop-up window

To accomplish this, both Vestal’s Web Design and User Interaction groups tackled the player from separate view points. After each graphic iteration, the user interaction group would analyze the player for ease of use. The PodTech Player team at Vestal consisted of Diego Rojas Bandini, Jeffrey Warren, and David Pitman, with support from Jon Saints, Pete Habuda, and others.

Also see the Vestal Flickr Shufflr

RailsRef gives you a quick and easy reference to Ruby on Rails. Free up your screen for coding instead of crowding your display with documentation pages. Easily search for that method you keep forgetting, then mark it as a favorite to rapidly access it again in the future.

Keep your favorite documentation close at hand with a simple tap to store a class, method, etc. as a favorite, or simply refer back to your recently viewed list. Not sure what you’re looking for? Browse through a complete list of the classes, modules or methods in Rails.

Tired of cramped text? RailsRef fully supports a Landscape view to give your eyes a rest.

All of RailsRef’s documentation is stored on your iPhone, so no internet connection is needed.

RailsRef keeps all of Ruby on Rails documentation in your pocket, ready at a moment’s notice.

Also unique to the system was the reliance upon social networking to organize file exchange and increase relevant search results. During extensive beta testing, it became apparent that allowing users to connect to networks of their friends provided a wealth highly relevant media to each user.

Using a web-based asynchronous Flash system, Coffeeshop offered it’s users a responsive and intuitive interface which was developed in just a few months. By using an intelligent index-caching system, search queries were executed in a fraction of a second, despite an index size of hundreds of thousands of files.

Coffeeshop was an independent project of Vestal Designer Jeffrey Warren and software developer Patrick Fitzsimmons.

MAUVE Control is a dual display interface which allows an operator to simultaneously control four simulated UAV missions. Created for the MIT Humans & Automations Lab and used in an UI study with actual military UAV operators. Vestal designed and built the entire application and developed the GUI with the guidance of the Humans & Automations Lab.

Problem

Currently, the military needs four operators to control one UAV. They approached the MIT Human & Automations Lab to design a UI which reverses that ratio. MAUVE Control is a proof-of-concept designed to operate on two displays, allowing an operator to simultaneously control four UAVs at the same time. MAUVE Control has four different modes relating to the UI and level of HCI. MAUVE Control was used in a study involving actual UAV operators in the Spring of 2005. Vestal developed the GUI and UAV simulator in conjunction with Paul Mitchell, whose Master’s thesis was on the study and design of the timelines.

Approach

Originally Vestal Design was given PowerPoint mockups which showed the basic layout and key concepts behind MAUVE Control. Over the following months, Vestal worked with Paul and our advisor to further develop the interface into a functional GUI. From the start, we knew the timeline would be displayed in four modes: Manual, Passive, Active, and Super Active. The studies were conducted to determine what level of UI and HCI resulted in the most successful mission operations. Subjects were asked to replan UAV missions in real time based on information they could infer from the timeline. Since the environment was dynamically changing, with emerging targets and threats, we were also testing a subject’s situational awareness.

Solution

Designed to use the full size of two displays, MAUVE Control contains two main windows: one for mapping and controlling a UAV, and another to display the timeline and UAV status. The two displays were linked together through common colors: UAV symbols in both would update their color in real-time to show their status. The control display allowed users to command UAVs in the simulation to arm, fire, and perform a variety of tasks. They could also change the UAVs route, and add or remove waypoints as they saw fit. The map in the control display was the next generation of the mapping interface used in the Strike View project. The other display, which contained the timelines for each UAV varied by experiment. The timeline display also contained a message window and chat dialogue, to inform users of changes in the environment and ask questions to test their situational awareness.

Manual Mode – The Manual Mode only displays basic information in a text format. In this mode, along with the Passive and Active modes, the user is required to manually initiate actions such as arming and firing, which is UAVs are controlled today.

Passive Mode – The Passive Mode uses a graphical timeline that displays the UAV’s future actions, and windows of opportunities (ToT) for targets in the UAV’s route. Actions on the timeline are color coded according to mililtary specifications, and use the same color scheme as the UAV symbols. The timeline also displayed when waypoints would be reached, and time slots when targets were active and could be fired upon. The timeline updates in real-time to reflect actions taken by a user. In this respect, the timeline respresents an especially powerful information visualization technique. Users could actively drag waypoints until they observed that the UAV’s timeline matched when a target was active.

Active Mode – In the Active Mode, users are given additional timeline information through reverse shading of the timeline. Areas of high workload for the user (when they will have to approve multiple UAV actions at the same time) are displayed clearly while the rest of the timeline is shaded over. In this mode, the timeline also displays dialogue boxes suggesting actions the user should take to alleviate high workload situations.

Super Active Mode – In this mode, operators controlled the UAVs through management by exception. Therefore, there was no need for a reverse shading technique to identify areas of high workload. Users were shown a Passive timeline, and dialogue boxes appeared next to each timeline with a countdown to actions the UAV would take (arming, firing on a target, etc). While management by exception is becoming more popular, there is also an increasing concern that it leads to the loss of situational awareness.

An application to support military planners in creating missions for Tomahawk missiles and visualizing the mission/missile matchings. Created for the MIT Human & Automations Lab, Vestal Design helped to refine the basic UI and created the visualization and artificial intelligence for the mission/missile matching.

Problem

Originally the Human & Automations Lab had Strike View built by an outside contractor. However, after they failed to deliver a usable UI, Vestal Design’s Technology Director was hired as a researcher to refine the interface and create the functionality for visually and optimally assigning missile to missions. The primarily goals of the interface were to allow planners to easily create and modify missions, and then easily visualize how to optimally match missiles and missions. For any mission there are nine critical variables to consider when assigning a missile. Coupled with identification information, the primary problem of matching was how to effectively represent the vast quantity of information and interaction between variables. This was a classical example of visualizing and interacting with a multi-variable optimization problem. In addition, Vestal Design had to design and implement an artificial intelligence algorithm to produce an optimal solution which the human’s solution could be compared against.

Approach

Designed under a Navy research grant, the application had to conform to standard military design standards for terminology and graphics. In this case, graphic design was consider superfluous to the goals of the project. Instead, attention was focused on how to allow users to intuitively interact with the map displaying missions in the main interface. For the missile/mission matching, it was previously decided that the interface would be constrained to basic tables and bar graphs (more advanced UIs are now being investigated as the topic of a Ph.D. thesis), but advanced user assistance could be implemented, as well as how the table was displayed. All users of the application were considered to be expert users which would make errors due to habitual experience (akin to the bathtub curb found in Human Factors Engineering studies of airline pilot error rates).

Solution

In the main interface, the map display was extensively modified. Users could now drag and drop with any of the elements within the map. Additionally, relevant information was displayed upon mousing over the symbol. A movable legend was added, as were coordinate ticks and grids. The ability to visualize the flight to the center of an area of interest (AOI) was implemented to allow users to quickly identify optimal locations to place loiter waypoints (where a missile could circle until given further commands regarding emerging targets). Although graphic design was not part of the project, the graphics of the map display were enhanced for comprehensibility.

The mission to missile matching interface was designed using custom rendered tables and bar graphs. A basic color scheme was employed for each row which corresponded to previous assignments, variable matches between a missile and multiple missions (or vice-versa) and if any matches were possible. Also, lists of targets and missiles were displayed to alert users to targets or missiles with sparse solution spaces or no solution space. Since the overall goal is optimize target coverage by priority, a relative bar graph display was used to give planners an overview of the current solution metrics.

CarePlace is a startup based in Boston, MA with the mission “to address the difficulties caregivers and patients encounter in their search for social support and peer information.” Their social networking site, CarePlace.com was about to enter their Beta phase, but first they enlisted Vestal Design’s services to review the UI of the site.

Problem

Before launching their Beta site in August, Careplace had several issues they wanted advice on.

• An evaluation of the site’s usability and user interface
• Consulting on how to design and administer a user study
• Advice on creating an effective user survey
• Recommendations and Improvements for the site

Approach

For a week, Vestal Design worked with the CarePlace team, both in 1-on-1 meetings, and in team discussions to help them identify what they were seeking in their user studies and surveys. At the same time, Vestal went through the entire site and documented potential usability issues, formally known as an expert heuristic evaluation.

Solution

None of the CarePlace team had formal training in user interaction, so Vestal provided mini-courses on topics like performing a user study, selecting questions which would not produce a biased result, and other related topics. Inbetween these courses, Vestal carefully reviewed the entire site, identifying, documenting, and classifying usability issues. At the end of the week, Vestal gave an hour presentation to the CarePlace team reviewing the topics we had covered earlier, as well as providing recommendations on how they could improve the UI and design of their site.

Clock Sketch is representative of a new wave of software within the medical community. With Clock Sketch, a doctor can analyze and view a true copy of the patient’s sketch. The UI allows a doctor to playback a movie of the sketch, or display analysis information overlays. Vestal designed and implemented all aspects of the application with guidance from Professor Randall Davis in the Design Rationale Group within MIT CSAIL.

Problem

In the initial stages of diagnosing people with neurological disorders, such as Alzheimer’s, doctors will ask the patient to draw a simple sketch of a clockface which conveys information about cognition, mental representations, and fine motor control.

Unfortunately, at the end of the test, all that is left to the doctor is a final drawing and observations they were able to make on the fly as the patient drew. The goal is to allow doctors to use this sketch as a more thorough test for detecting neurological disorders faster and more accurately, instead of as an initial screening procedure.

To achieve this goal, we must digitize the patient’s sketch, so a movie of the sketch can be played, analyzed, and quantitatively compared with the norm. The application receives uploaded patient data via a special pen which records a user’s strokes spatially and temporally.

Approach

Clock Sketch was designed to simultaneously interact with two different groups of users: novices which were simply conducting the patient experiment and only needed to upload sketch data, and experts who were interested in analyzing the sketches. Appropriately, the novice user experience must be tightly controlled so data is not lost. On the other hand, the expert interaction must minimize the amount of redundancy and maximize the amount of information presented.

Solution

A GUI was designed which allowed doctors to play, pause, scale, and change the speed of a patient’s sketch. After attempting to automatically classify the strokes within the drawing (as digits, hour/minute hands, basic shapes, etc), Clock Sketch then provides overlays of the analysis results. Doctors can also edit classification of a stroke through a drag and drop interface and tree hierarchy. As another example, after determining strokes compose the circle outlining the clock face, Clock Sketch calculates an ideal ellipse based on the aggregate data points in those strokes. The ellipse and its orientation is then superimposed over the original drawing. In another case, the individual data points, which are regularly sampled, can be shown, which gives doctors an approximate view of the pen speed through a stroke. Bounding boxes are displayed around recognized digits, which allows one to quickly and easily discern if the AI’s interpretation was correct. Accompanying this purely visual display, doctors can generate Excel spreadsheets of the exact numbers and statistics so they can easily compile data in studies.

Robotics for the Masses

Exploiting the markets of scale of the toy industry, specifically in the realm of entertainment robotics, the Feral Robotic Dog project provides a readymade, inexpensive and highly distributed robotic hardware platform. The “toy” robotic dogs currently on the international market provide the most inexpensive source of compatible motors, actuation, and sensing mechanisms available ($15-$200 for the dog adaptation).

Information Legibility

Isn’t it ironic that EPA reports are often illegible to those who live in the areas they address? If kids are playing in a playground built on a possible toxic waste site, they’re much more likely to understand a dog searching for toxins than a man in a white suit. Mediagenic technologies promote transparency and information legibility in an age when the problem isn’t getting enough information, it’s understanding it all.

Link to Natalie Jeremijenko’s Feral Robotics website

Design for Interaction

As part of the exhibit, encounters with real geese are captured on digital video, uploaded to an interactive website where users can annotate and define their goose conversations. Ultimately, a goose translator can be derived from the data using waveform association with user supplied definitions of the goose speak.

Design for Community

The ooz Goose is part of the larger ooz project by Natalie Jeremijenko’s xDesign Labs. The ooz project is an “inverted zoo” which attempts to improve the level of communication between animals and humans in a zoo-like setting. In a true ooz, visitors would not only view animals in actual (non-simulated) habitats, but would have more meaningful interactions than simply tapping on the glass.

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.