Touchscreen Kiosk

TouchStone's goal is to create an information portal at the college of engineering that students and visitors may use to experience information about the college. This portal should be interactive and even attract people to the college.

Problem Description
The goal is to create an information kiosk for JEB that will offer all inclusive information on the college of engineering. This kiosk needs to demonstrate cutting edge technology to make the college of engineering stand out as a bastion for learning and technology. With consideration to the following we designed the Janssen Interactive Multimedia Module.


 * 1) Design an exciting and innovative medium for displaying our user interface.
 * 2) Design a user interface that is appealing both in usability and presentation.
 * 3) Create the display and integrate the user interface into it.
 * 4) Make it simple and create a guide for the content and interface to be easily edited by anyone for the coming years.

Display Design
In this task we considered several options from a simple 40" touchscreen to virtual reality. We decided that the technology in virtual reality was not quite complete enough yet and a 40" touchscreen was too small and didn't deliver enough of a "WOW" factor. Instead we settled on something we think will match the aesthetic of the Think Tank which is just around the corner from the hallway where our display will be placed.

The design we chose is to project our UI onto a large glass pane from behind. This will give the illusion of the glass being the object displaying the UI much like what is seen in many sci-fi films. In order to make this display interactive, we need to implement a way to interact with it. For this we will be using Ubi Interactive which uses a short throw camera and a laser sensor to read touch events on the displayed surface. With this hardware we can detect up to 20 touch points, allowing for a maximum of 10 concurrent users.

This display will be placed on top of a wooden or metal kick box to keep users from accidentally kicking or shattering the glass. It will also serve as cover for concealing the projector, computer and any other cables from view.

Display Design Concepts




User Interface Design
The UI for this project needs to be a living UI, meaning it needs to move and display useful information while not in use. It also needs to be easy to understand and navigate for the user. Because of this we are planning on using a "live tile" system, where bits of useful information are displayed periodically on their respective tile. We are also thinking about developing this as a three-dimensional tree structure where the user is flown/zoomed into the next layer of whichever menu options they choose.

As design has progressed, we were met with the issue of how to make it as easy as possible for the content and look of the app to be updated after we had left the university. It hadn't really occurred to us, but the people updating the UI and the content of JIMM are very likely not going to be engineers in any capacity. Therefore, we had to forfeit some of our earlier ideas (such as using web scraping to get the necessary information) for the sake of longevity.

This led to us deciding to create an "Edit Mode" within the app itself that can be easily accessed to edit any and all content. So, basically, we're not hard-coding our user interface at all, but coding an app that can itself create the user-interface via intuitive content creation menus. Taking this approach will make life much, much easier for the person tasked with updating content than if we had hard-coded everything.

User Experience UI
On the user end of the UI the following information will be supplied somewhere in the application. Using button presses the user will be able to navigate an intuitive UI to find the following.
 * Map of engineering building/campus
 * Map and information on parking
 * History of programs with timelines and photos
 * History of Deans of the college of engineering with timelines and photos
 * Faculty of the college of engineering
 * Academy of Engineering members
 * Class schedules and rooms
 * Student clubs in the college
 * Information on majors
 * NAE Grand Challenges
 * Events list/calendar

Editing UI - List of Tools
The UI will be modifiable after entering a key combination and correct password. There will be numerous tools available to create and modify the UI to achieve an interface that will supply the information listed above.
 * Tool to add image from URL or directly from hard drive (png, jpg, or SVG)
 * Tool to move, scale, and rotate images once they've been loaded
 * Tool to add bodies of text with editable properties (font style, size, color, etc)
 * Tool to add hyperlinked text and images
 * Tool to add YouTube videos
 * Tool to change the background color of a panel
 * Tool to choose which transition animation to use