Architecture: An Interactive Introduction is a private web application for first-year architecture students at the University of Wisconsin-Milwaukee. This project previously existed as a Macromedia Shockwave application, but by 2011 few students were able to successfully install the application. If successful, they were trapped inside a small window no more than 480 pixels wide. I worked with the primary professor to transport the architectural content and experience into a modern format. Today, AAII is a robust Ruby on Rails web application with over 400 chapters and thousands of images and videos.
It's not just a benefit to students: the professors now have full control over the content, accessible from any web browser. New chapters can be added or edited, new images uploaded, and the text modified, all from a convenient and usable custom interface. Professors can also manage the class roster and easily send email invitations to incoming students to complete the automatic sign-up process.
The client required a privacy wall, so students can be easily invited to complete the automated registration process via email and subsequently sign-on from any web browser.
The primary display of chapters is through an adaptable grid-based design, brought over from the previous application. Only approved administrators see the small 'Manage Chapter' link
The image grid provides a forward navigation structure, inviting students to explore the contents of each chapter — “History” in this case.
Above the grid, the current chapter and its parent chapters are listed for easy backwards navigation.
The top of each page also features a global navigation system with drop-down menus to navigate all sub-chapters.
Administrators can edit a chapter's name, grid image, and primary and secondary descriptions, as well as its sub-chapters and images.
Chapters can also act as image and video galleries, with each piece of media given its own custom description. The galleries can be navigated with the on-screen buttons or more quickly with convenient keyboard shortcuts.
When editing image galleries, individual images (and sub-chapters) may be easily dragged around the screen to update their position.