A Simple Contact Manager
posted 2012-21-01 21:50:00 -0500
This is a small project I worked on for the University of Toronto’s Governing Council. They required a simple and intuitive way to manage the members of their various boards and committees, as well as committee assignments (past and present).
Pretty Pictures
This application’s interface features two separate “perspectives”. Users may flip between them at will.
The Member Perspective
To keep things as familiar as possible, my solution imitates a traditional address book application, with the members arranged in a searchable list on the right (the arrow was an interesting challenge), and individual profiles arranged on the left. A member’s profile is divided into various sections, including basic information and an optional photo, as well as contact and biographical data. This application includes a privacy model inspired by modern social networking websites, thus each piece of contact and biographical data has its own privacy level toggle (indicated by a globe or shield icon). Individual contact methods may also be set as preferred (black heart) or default (blue heart). From a design perspective, the interface’s colour scheme is deliberately monochromatic and relies on profile pictures to provide a splash of colour. This choice also allows for easy emphasis of the current contact (the blue seen in the contact list on the right), as well as easy visual chunking when a user highlights a single piece of a profile (my email address, in the above screenshot). Yes, I like peach juice. No, that isn’t my address.
The most unique feature of this application is its data entry method. Users who wish to update a member’s record may hit the “unlock contact” button at the top of the screen, turning every piece of profile text into an interactive, self-validating form widget.
Member profile (unlocked) - adding information 
Additional form widgets can be added to each category as desired, for rapid, simultaneous input of information. In the above screenshot, I have added several blank email addresses, degrees and honours, and professional affiliations, as well as an assistant relationship and a committee assignment. When a user is finished editing a member’s profile, they may press the “lock contact” button to save their changes.
The Committee Perspective
Flipping to the committee perspective via the button in the top left, the user is presented with an almost identical interface. On the right is a list of committees currently present in the system, and the left region is now occupied by data concerning a single, selected committee. Much like the member perspective, a user may unlock a committee to assign or remove members from it. Note that this implies that committee assignments can be made both from the perspective of the committee AND from the perspective of an individual member, as seen previously. Users may click the magnifying glass to view an individual member’s profile.
Past members (those whose assignment period has expired) may be viewed by pressing the “show past members toggle”. Past members are presented with some translucency to differentiate them from current members.
The Nerdy Stuff
Identical to Sakia, this is an Enterprise Java (J2EE6) application running on Glassfish 3.1, supported by Hibernate and a DB2 LUW database (though it is fully database independent). At the level of application logic, it makes extensive use of stateless session beans (EJB3), the Java Transactions API (JTA), the Java Authentication and Authorization Service (JAAS), and the Java API for RESTful Web Services (JAX-RS). JSON+REST is used as an intermediary between the Enterprise Java and the presentation layer, because it’s fat cousin SOAP+XML is…fat. The presentation layer itself is implemented using largely custom widgets developed for the dojo AJAX framework (1.6), and employs CSS3 and HTML5.