Design

Navigation:

The main content of Pack Planner is the interactive calendar which users see upon login.  During the initial paper prototype designing, we experimented with many different calendar representations ranging from a strict metaphor of a calendar, to a representation so simplified it was simply a list of events.  Ultimately something in the middle was chosen.  The focus of the calendar is put around the week, as we found that is what users mostly focus on. On load, the current day is expanded to show a list of tiles, each tile representing an activity planned for the current day.  During GR1, interviewees said that they most often look at their calendar to quickly remind themselves what needs to be done on the current day, so we made our interface cater to this quick current day view.  Users can navigate easily within the week by clicking the vertical tile for a given day, or use the previous/next day buttons at the top. Furthermore, the mini cal on the left hand side of the screen allows a user to more efficiently navigate to a day that may be further in the future, or simply help the user by alleviating the need to recall the structure of the given month.

...

Lastly, the contacts page utilizes a simple design to give the user the basic functionality needed to intact with others within Pack Planner.  The contacts page acts as a user's physical contact book would.  There is one entry per family, and when the entry is clicked, information is displayed on the right pane to show the family details including the parents' names, the children's names, and other useful information like email address and street address.  From the contacts page, a user can send a message to a contact, perhaps just to communicate about an upcoming event, or to plan a carpool.  Furthermore, a "find friends" button is present to search for the user's other friends which may have recently signed up for pack planner.Implementation

Implementaion

We used the Django Web Framework to implement PackPlanner. For the main pages, we simply have links that query the Postgres database for the appropriate information for the current user. We use this information and the Django template tag system to create JavaScript objects that mirror entries in the database. Then, we build the UI from these javascript objects, encoding onclick functions that use object IDs to determine which objects are involved in the user's actions.

...