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 Descriptions
Create a "cutting edge" attraction that assists students, faculty and visitors with information about the College of Engineering.


 * 1) Design a 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 for the content and look of app to be easily edited by non-engineers after original designers have left the university.

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.

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.

UI Parts

 * User experience UI
 * Admin editing UI

User Experience UI
For the user experience we are planning on offering these options: More will be added to this list as we think of them.
 * 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

Because our display will reach up to the ceiling, we recognize that most people cannot reach that high. For this reason, this part of the screen will not be interactive. Instead, it will scroll useful information across it much like that of a news feed. Some of the information that can be displayed here is:
 * Class cancellations
 * Engineering events for the week
 * Teachers with office hours at that time
 * Weather information
 * Club meetings
 * Etc.

Admin Editing UI
For the Admin editing experience we are planning on offering these options:
 * Tool to add image from URL or directly from hard drive (png, jpg, or SVG)
 * Tool to 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