1 / 44

Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design. 1. Table of Contents. 3 4 5 6 7 8 9 10 11 12 13 14 15 17 19 21. Stakeholder Information Stakeholder Goals & Objectives User Demographics User Needs & Objectives User Personas

zandra
Télécharger la présentation

Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Millersville Interactive Campus Directory Kiosk IMD123User-Centered Information Design 1

  2. Table of Contents 3 4 5 6 7 8 9 10 11 12 13 14 15 17 19 21 Stakeholder Information Stakeholder Goals & Objectives User Demographics User Needs & Objectives User Personas - New Student - Third Year Student - Alumni - Visiting Grandparent Hypothetical User Scenario Meeting the Objectives Functional/Content Specifications - Ad Mode - Home Screen - Map Search Screen - Events Screen - Restaurants Screen - Content Requirements Meeting the Objectives Table Features Table - Home Screen - Map Search Screen - Events Screen - Restaurants Screen Content Assets Table - Ad Mode & Home Screen - Map Search Screen - Events Screen - Restaurants Screen Digital Signage Software Details Architectural Map Wireframe – Home Screen 1A Wireframe – Second-level Screen 1B Wireframe – Home Screen 2A Wireframe – Second-level Screen 2B Mock-up – Home Screen 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Mock-up – Second-level Screen Style Guide - Colors - Typography References Contact Information 41 42 42 43 44 2

  3. Stakeholder Millersville University wanted to provide an effective wayfinding solution for their students, staff and visitors to make the campus friendlier and easier to navigate. • “The school is on 250 acres” (Colleges.com). • There are 1,160 first year students and 6,282 undergraduate students • Total campus enrollment of 7,466 students. • The need to provide a solution was growing. 3

  4. Stakeholder Goals & Objectives The goal is to provide students, visitors and staff with an interactive campus directory kiosk that assists in navigating the campus. There will be stations placed in a few key places throughout the campus that are visible and easily accessible. Objectives • The objectives are to have an easy to use interactive campus directory kiosk. • The kiosk must first function as a campus wayfinding tool. • Must be easy to navigate. • Must provide information such as date & time, weather, and campus events. • Must function as an advertising medium when the kiosk is not in use. 4

  5. User Demographics The user demographic for the Interactive Campus Directory is vast. The targeted users vary in age can range from 18 or younger all the way up to the elderly. The majority of targeted users have an “average age of 21, and are full-time undergraduate students”. They are tech savvy and most if not all, utilize a smart phone, tablet or some kind of mobile device for communication and as such are familiar with touch technology. There will be users that are not as familiar with touch technology, these may include: • Parents and/or grandparents of soon to be graduates. • Older Alumni • Visitors and/or students and staff who have not used devices containing touch technology. 5

  6. User Needs & Objectives The directory will fulfill the user goal of getting information to get from point A to point B. New students unfamiliar with the campus and existing students not familiar with the whole campus as well as visitors to the campus, and staff, can benefit from a campus directory. • Central locations are needed for accessing information be able to navigate the campus. • Current date & time, weather forecasts, and campus events will be available. • Users will: • See their current location on a map • Be able to select the destination by touching the screen. • See a path to the intended destination. • Have the option of getting directions sent to via email or text to their mobile device. • Information is accessible fairly quickly as users will most likely be in between classes. • Multiple directories will make up directory stations to accommodate more users. 6

  7. User Persona 1 ChauncyNew StudentAge:18 years old and fresh out of high school. Technical Knowledge:He is tech savvy and loves video games. Background:Just moved from Mobile, Alabama to Lancaster, Pennsylvania to attend Millersville University. Aside from an exploratory visit over the summer he does not know the campus. 7

  8. User Persona 2 ThomasThird Year StudentAge:32 years old and is a Junior at Millersville University. Technical Knowledge:Very tech savvy. Has owned many mobiles devices throughout his life. Uses technology to stay connected with family and friends. Background:Very familiar with the campus, although he lives off campus. Interested in campus events and attends quite a few throughout the year. 8

  9. User Persona 3 LeslieAlumniAge:45 year old successful, single business woman. Technical Knowledge:Somewhat tech savvy. uses her BlackBerry to stay in contact with her office and clients while on the road. Background:Passionate about her job as a Business Development Specialist at Bank of America. 9

  10. User Persona 4 SarahVisiting GrandparentAge:77 year old grandparent of soon to be grad. Technical Knowledge:Is not tech savvy. Uses a basic model cellphone. Is not familiar with smart phone technology. Background:Prefers to use a traditional paper map over the GPS. 10

  11. Hypothetical User Scenario Leslie is an alumna of Millersville University and has been invited back after 20 years as a guest speaker. Leslie makes her way to the campus early and instantly realizes the campus has grown and developed over the years. As she parks her car and heads to where the admissions office used to be, she realizes it is the wrong building. While she did not pay attention to the traditional signage of the campus she has found a great parking spot and does not want to go through the trouble of looking for another. As she looks around she is delighted to see an Interactive Campus Directory. Leslie walks over to it and gets the information she needs sent to her cell phone and off she goes. As she walks towards her destination she is pleased with the experience she just had with the campus directory and her gears start turning. As a business development specialist she begins thinking of ways her clients could benefit from a similar solution. 11

  12. Meeting the Objectives To meet the needs/objectives of the stakeholder and the user an intuitive interface will be key in the success of the kiosk deployment, to give users a quick and simple way to get information. • Clean design and clear instructions will aid in the navigation of the product and its features. • Date & time, weather and campus events feed must be incorporated into the kiosk. • Delivery of wayfinding directions should be an option to the user. • Will carry the university brand, utilizing the logo & colors, to create a familiar look & feel. • Additional areas of interest to the user are: • An events area • A restaurant list of places to eat on campus • When the kiosk is not in use it will be an advertising medium for the university. • After 30 seconds of interactivity the kiosk will revert back to advertising mode. 12

  13. Functional/content Specifications Ad Mode The interactive campus directory will be a large touch-screen monitor in a protective stand and utilize digital signage software to provide the functionality and interactivity of the kiosk to and for the user. • The kiosk becomes an advertising medium when the Campus Directory is not in use. • After 30 seconds of user inactivity the kiosk will revert back to advertising mode. • Ads will feature a “touch” message that will prompt a user to begin using the kiosk. 13

  14. Functional/content Specifications Home ScreenUpon walking up to the kiosk, users will initially see school advertisements fading in and out, in full-screen with a message that reads “touch to begin” or “touch to find your way”. Users will then be on the home screen of the kiosk after touching the screen. • The home screen contains the university logo & branding. It will includes: • Navigation with the categories Map Search, Events and Restaurants. • Date & time, title, weather, photo of campus life and a campus news feed. • The logo is at the top left, the time & date and weather are at the top right. • The title that reads “interactive campus directory” is at the top center. • The photo is below the title, taking the full width of the screen. • Below the photo, is where the navigation is located • Underneath the navigation will be the campus events news feed. 14

  15. Functional/content Specifications Map Search ScreenThe Map Search screen contains all of the branding of the home screen. The logo, date & time, title, weather, navigation, and campus events news feed are in the same position. • There is a large main area that contains the campus map. • Panning of the campus map, zooming in & out, and swipe gestures are supported. • To the left of the map area will be a scrollable list of campus locations. • Upon touching a location, the path is then displayed from the “you are here” location to the destination. • An overlay appears on the left of the screen: • This overlay takes up about 1/3 of the screen. • The destination path on the campus map is still viewable. 15

  16. Functional/content Specifications • Map Search Screen – Continued • The overlay contains an image of the destination & directions for getting to the destination. • Underneath the directions will be a set of buttons that read Email, Text, and Close. • Close allows the user to search for a new location and restart the process. • Email & Text presents the user with a form in the overlay area where they will enter their email or phone number respectively. • The form contains one field and a send/submit button. • Once sent, users will then be back to the map screen & free to get on their way or explore the rest of the kiosk. 16

  17. Functional/content Specifications • Events Screen The Map Search screen contains all of the branding of the home screen. The logo, date & time, title, weather, navigation, and campus events news feed are in the same position. • The main area to the left is 2/3’s of the screen and contains: • Ads of upcoming events that users can scroll through. • Only the next ten events will be shown here. • To the right (1/3) will be a scrollable event listing of upcoming events. • “Touch to map” is present in each event block allowing users to map the event location. • Upon touching an event block users will be presented with a large overlay. 17

  18. Functional/content Specifications • Events Screen – Continued • The overlay is split into two areas: • The right (2/3’s) of the overlay is the map displaying the destination path. • The left (1/3) of the overlay contains an image of the destination & directions for getting to the destination. • Underneath the directions will be a set of buttons that read Email, Text, and Close. • Close allows the user to search for a new location and restart the process. • Email & Text presents the user with a form in the overlay area where they will enter their email or phone number respectively. • The form contains one field and a send/submit button. • Once sent, users will then be back to the events screen & free to get on their way or explore the rest of the kiosk. 18

  19. Functional/content Specifications Restaurants Screen The Map Search screen contains all of the branding of the home screen. The logo, date & time, title, weather, navigation, and campus events news feed are in the same position. • The restaurants are shown as blocks that can be scrolled horizontally. • Each block contains that specific restaurants brand. • Blocks contain hours of operation, a current special, & is branded to that restaurant. • All blocks will follow a specific format to keep uniformity and a professional look. • “Touch to map” is present in each ad allowing users to map the restaurant location. • Upon touching a restaurant block, users are presented with a large overlay. 19

  20. Functional/content Specifications Restaurants Screen – Continued • The overlay is split into two areas: • The right (2/3’s) of the overlay is the map displaying the destination path. • The left (1/3) of the overlay contains an image of the destination & directions for getting to the destination. • Underneath the directions will be a set of buttons that read Email, Text, and Close. • Close allows the user to search for a new location and restart the process. • Email & Text presents the user with a form in the overlay area where they will enter their email or phone number respectively. • The form contains one field and a send/submit button. • Once sent, users will then be back to the restaurant screen & free to get on their way or explore the rest of the kiosk. 20

  21. Functional/content Specifications Content RequirementsThe content requirements for the interactive campus directory will mainly be in the form of images with the software providing the majority of the other content. Home Screen For the home screen there will be a series of campus photos that will be in random rotation. The photos will be provided by the university’s marketing department and will be updated every month or so. Map Screen The Map Search screen will contain a large HD image of the campus. This image can be provided by the university’s marketing department. If an image does not yet exist then one will need to be created. 21

  22. Functional/content Specifications Content Requirements – ContinuedEvent ScreenThe Event screen images that rotate in and out showing the next ten events, will need to be created by the marketing department for each event. The upcoming events on the right will be fed by an existing feed that already feeds the website and will be formatted in the digital signage software for the interactive campus kiosk. Restaurant Screen The Restaurant screen content requirements will be the same as in the Event screen. The Restaurant block ads will be in the form of an image that will be supplied by the marketing department. 22

  23. Functional/content Specifications Content Requirements – ContinuedUser Value ItemsWeather and date & time elements will be automatically updated by the software that operates the campus directory. The campus events feed will be fed through an already existing feed that is used on the website. The software will be able to tap into that feed via the backend and pull the information into the campus directory events screen. Content ManagerIn order for the event images and restaurant ads to be updated there will be a dedicated content manager updating the campus directory as needed. 23

  24. Functional/content Specifications Content Requirements – Continued Form FunctionalityThe form functionality of the interactive campus kiosk will be created as a web form and hosted on the university web server. The form will be created using HTML 5, Flash and PHP. The digital signage software will then be able to load the webpage into a specified area or region and a virtual keyboard will appear over the map region, via the software, so that the user can type the information needed. Branding The logo/branding will be provided by the university marketing department. Titles/headers of each screen will be created in the digital signage software or created and supplied by the marketing/graphics department. 24

  25. Meeting the Objectives Table 25

  26. Features Table 26

  27. Features Table 27

  28. Features Table 28

  29. Features Table 29

  30. Content Assets Table 30

  31. Content Assets Table 31

  32. Content Assets Table 32

  33. Content Assets Table 33

  34. Digital Signage Software Details Four Winds InteractiveThe Four Winds Interactive software can handle data types common with databases and would be able to utilize existing database information and format it as needed for the project application. It contains “unparalleled mapping and wayfinding functionality” (Four Winds Interactive). Wayfinding The wayfinding function is built into the software. To start you need an image of a map or several images of floor maps for a building, then you can: • Declare a “you are Here” point • Plot points for each location on the campus. • Draw Paths to each point from the declared "you are here" location. • Set egress and ingress points for stairs and elevators to move between floors. • Zoom and panning of the map is also supported within the software. 34

  35. Architectural Map Notations: The overall kiosk will utilize the Hierarchical Branching design strategy. This type of design will allow the user to easily access the information they need from any screen they are on, via the global navigation area. The design strategy ensures that the user is able to navigate quickly while receiving the information they seek fulfilling the goals of the user and meeting the objectives of the stakeholder. The Linear Branching strategy is utilized when a user decides to send directions via email or text. After a user hits submit they will see a status message and get sent back to the screen they sent directions from. The home screen will appear after thirty seconds of inactivity from any of the second-level screens. After five minutes of inactivity on the home screen advertising mode will take over until the user touches the screen. 35

  36. Wireframe: Home Screen 1A 36

  37. Wireframe: Second-Level Screen 1B 37

  38. Wireframe: Home Screen 2A 38

  39. Wireframe: Second-Level Screen 2B 39

  40. Mock-up: Home Screen 40

  41. Mock-up: Second-Level Screen 41

  42. Style Guide Honeycomb Footer Image 42

  43. References Works Cited Colleges.com. "Millersville University." Colleges.com. N.p., n.d. Web. 10 May 2013. Four Winds Interactive. "Unparalleled Flexibility and Ease of Use." Content Manager. Four Winds Interactive, n.d. Web. 03 June 2013. <http://www.fourwindsinteractive.com/products/manager.htm>. Millersville University. Circle M Logo. Millersville: Millersville University, n.d. Eps. Millersville University. Graphic Style Guide. Millersville: Millersville University, n.d. Pdf. Millersville University. Logo. Millersville: Millersville University, n.d. Eps. Millersville University. School of Education Sign. Digital image. Millersville University. Millersville University, n.d. Web. 28 May 2013. <http://www.millersville.edu/education/>. 43

  44. Contact Information Hector Colon IMD123|User-Centered Information Design Tuesday, May 28, 2013 44

More Related