millersville interactive campus directory kiosk imd123 user-centered information design

44
Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design 1

Upload: zandra

Post on 07-Jan-2016

38 views

Category:

Documents


0 download

DESCRIPTION

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 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Millersville Interactive Campus Directory Kiosk

IMD123User-Centered Information Design

1

Page 2: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Table of Contents

2

Stakeholder InformationStakeholder Goals & ObjectivesUser DemographicsUser Needs & ObjectivesUser Personas - New Student - Third Year Student - Alumni - Visiting GrandparentHypothetical User ScenarioMeeting the ObjectivesFunctional/Content Specifications - Ad Mode - Home Screen - Map Search Screen - Events Screen - Restaurants Screen - Content Requirements

3456 789101112 131415171921

Meeting the Objectives TableFeatures Table - Home Screen - Map Search Screen - Events Screen - Restaurants ScreenContent Assets Table - Ad Mode & Home Screen - Map Search Screen - Events Screen - Restaurants ScreenDigital Signage Software DetailsArchitectural MapWireframe – Home Screen 1AWireframe – Second-level Screen 1BWireframe – Home Screen 2AWireframe – Second-level Screen 2BMock-up – Home Screen

25

26272829

3031323334353637383940

Mock-up – Second-level ScreenStyle Guide - Colors - TypographyReferencesContact Information

41

42424344

Page 3: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Stakeholder

3

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.

Page 4: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Stakeholder Goals & Objectives

4

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.

Page 5: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

User Demographics

5

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.

Page 6: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

User Needs & Objectives

6

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.

Page 7: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

ChauncyNew Student

Age: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.

User Persona 1

7

Page 8: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

ThomasThird Year Student

Age: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.

User Persona 2

8

Page 9: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

LeslieAlumni

Age: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.

User Persona 3

9

Page 10: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

User Persona 4

10

SarahVisiting Grandparent

Age: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.

Page 11: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Hypothetical User Scenario

11

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.

Page 12: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Meeting the Objectives

12

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.

Page 13: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

13

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.

Page 14: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

14

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.

Page 15: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

15

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.

Page 16: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

16

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.

Page 17: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

17

Events 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.

•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.

Page 18: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

18

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.

Page 19: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

19

Restaurants 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.

•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.

Page 20: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

20

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.

Page 21: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

21

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.

Page 22: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

22

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.

Page 23: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

23

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.

Page 24: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Functional/content Specifications

24

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.

Page 25: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Meeting the Objectives Table

25

Project ObjectivesObjective Details Concerns Content

Interactive Commercial grade touchscreen in a protective case and digital signage software to power the kiosk. NEC touchscreen, protective

case, digital signage software

University Brand Will feature the University logo and branding guidelines. .jpg, .png

Map/Way-finding Campus map to plot destination paths/routes. Digital signage software, .jpg or .png

Destination Direction Delivery A form will allow users to receive destination directions via email or text. A virtual keyboard will be used for typing in the information.

Must have internet connection in order to function

Digital signage software, Flash and PHP

User Value Features Date & Time, weather, campus news feed.Must have internet connection in order for the weather and campus news feed to function

Digital signage software

Advertisement ModeWhen the kiosk is not in use the campus directory will become an advertising medium. 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.

Ads provided by the marketing department. .jpg

Home ScreenUniversity logo at top left, navigation below the photo, date & time, weather at the top right, title of “interactive Campus Directory” at top center with the photo underneath the title, and campus feed at the bottom.

Digital signage software, .jpg, .png, data source for feed

Map Search Screen

University logo at top left, navigation below the photo, date & time, weather at the top right, title of “Map Search” at top center with the photo underneath the title, and campus feed at the bottom. Campus map is to the right with destination locations menu to the left.

Digital Signage software, .jpg, .png

Events ScreenUniversity logo at top left, navigation below the photo, date & time, weather at the top right, title of “Events” at top center with the photo underneath the title, and campus feed at the bottom. Upcoming events are to the right with event ads the left.

Digital Signage software, .jpg, .png, data source for upcoming events

Restaurants ScreenUniversity logo at top left, navigation below the photo, date & time, weather at the top right, title of “Restaurants” at top center with the photo underneath the title, and campus feed at the bottom. Restaurant ads/blocks in main area are scrollable.

Digital Signage software, .jpg, .png, data source for upcoming events

Page 26: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Features Table

26

Home Screen

Feature Details Concerns Content

Logo Top left, when touched it will send the user back to the home screen. .png or .jpg

Title Top center, title text for current screen the user is on.

Text via digital signage software or .png

WeatherTop right of screen next to the date & time, will provide current weather and weather for the next day.

Must have internet connection in order to function

Digital signage software

Date & Time Top right, next to weather, will provide current date & time. Digital signage

software

Campus News Feed

Bottom of the screen, and provides campus news to the user.

Must have internet connection in order to function

Digital signage software will tap into an existing data source.

Navigation

Above the campus news feed and will provide the navigation to the user with the following sections/categories: Map Search, Events, and Restaurants.

Text via digital signage software or .png

Photo AreaCampus life related images will be shown here fading in and out randomly.

.jpg or .png, transitions via digital signage software.

Page 27: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Features Table

27

Map Search ScreenFeature Details Concerns Content

Logo Top left, when touched it will send the user back to the home screen. .png or .jpg

Title Top center, title text for current screen the user is on. Text via digital signage software or .png

Weather Top right of screen next to the date & time, will provide current weather and weather for the next day.

Must have internet connection in order to function

Digital signage software

Date & Time Top right, next to weather, will provide current date & time. Digital signage software

Campus News Feed Bottom of the screen, and provides campus news to the user.Must have internet connection in order to function

Digital signage software will tap into an existing data source.

NavigationAbove the campus news feed and will provide the navigation to the user with the following sections/categories: Map Search, Events, and Restaurants.

Text via digital signage software or .png

Map/Way-findingCampus Map is center to the right and 2/3’s of the screen. Panning and zoom features are supported by familiar swipe gestures, path to destination to be visible on map.

Digital signage software and .jpg or .png

Send Directions FormAn overlay appears with a form on the left and a virtual keyboard to the right, over the map area, after a user chooses to have directions sent to them via email or text.

Must have internet connection in order to function

Flash, php, digital signage software

Campus Locations Center and to the left 1/3 of screen, scrollable/swipeable list of locations that the user can choose. Via digital signage software

Page 28: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Features Table

28

Events ScreenFeature Details Concerns Content

Logo Top left, when touched it will send the user back to the home screen. .png or .jpg

Title Top center, title text for current screen the user is on. Text via digital signage software or .png

Weather Top right of screen next to the date & time, will provide current weather and weather for the next day.

Must have internet connection in order to function

Digital signage software

Date & Time Top right, next to weather, will provide current date & time. Digital signage software

Campus News Feed Bottom of the screen, and provides campus news to the user.Must have internet connection in order to function

Digital signage software will tap into an existing data source.

NavigationAbove the campus news feed and will provide the navigation to the user with the following sections/categories: Map Search, Events, and Restaurants.

Text via digital signage software or .png

Map/Way-finding

Campus Map appears once user chooses to map an event destination. It is in an overlay. The map is to the right and 2/3’s of the screen. Panning and zoom features are supported by familiar swipe gestures. Path to destination is visible on map.

Digital signage software and .jpg or .png

Send Directions Form

Appears once a user has chosen to map a n event destination. It is in an overlay. The form appears on the left and a virtual keyboard to the right, over the map area, after a user chooses to have directions sent to them via email or text.

Must have internet connection in order to function

Flash, php, digital signage software

Event Ads Ads for the next ten events. Users will be able to touch an ad to map the destination to the event. .jpg or .png, digital signage software

Event Locations Ads for the next ten events. Users will be able to touch an ad to map the destination to the event. Tap into data source via digital

signage software

Page 29: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Features Table

29

Restaurant ScreenFeature Details Concerns Content

Logo Top left, when touched it will send the user back to the home screen. .png or .jpg

Title Top center, title text for current screen the user is on. Text via digital signage software or .png

Weather Top right of screen next to the date & time, will provide current weather and weather for the next day.

Must have internet connection in order to function Digital signage software

Date & Time Top right, next to weather, will provide current date & time. Digital signage software

Campus News Feed Bottom of the screen, and provides campus news to the user. Must have internet connection in order to function

Digital signage software will tap into an existing data source.

NavigationAbove the campus news feed and will provide the navigation to the user with the following sections/categories: Map Search, Events, and Restaurants.

Text via digital signage software or .png

Map/Way-finding

Campus Map appears once user chooses to map an event destination. It is in an overlay. The map is to the right and 2/3’s of the screen. Panning and zoom features are supported by familiar swipe gestures. Path to destination is visible on map.

Digital signage software and .jpg or .png

Send Directions Form

Appears once a user has chosen to map a n event destination. It is in an overlay. The form appears on the left and a virtual keyboard to the right, over the map area, after a user chooses to have directions sent to them via email or text.

Must have internet connection in order to function Flash, php, digital signage software

Restaurant AdsAds for campus restaurants will be in the main area. Restaurant ads will be scrollable/swipeable and users will be able to touch a restaurant ad to map its destination.

Digital signage software and .jpg or .png

Page 30: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Content Assets Table

30

Advertisement Mode

Feature Details Concerns Content

Ads

Ads will be provided by the university marketing/graphics department and must be of high quality.

.png or .jpg

Home Screen

Feature Details Concerns Content

Logo/Branding Will be provided by the university marketing department.

.png or .jpg and guidelines in .doc or .pdf

Title/Header

Will be created in the digital signage software for easy updating/changing later or the marketing/graphic department can supply an image instead

Text via digital signage software or .png

User Value Items

Weather, date & time, campus news feed & navigation to be handled in the digital signage software.

Must have internet connection in order for the weather and campus news feed to function

Digital signage software

Campus News Feed

Existing data source will either exist or will need to be created by the marketing department.

Must have internet connection in order to function

Digital signage software or .xls, .xml, or existing database such as SQL

Photo/ImageryWill be provided by the university marketing department and must be of high quality and of campus life.

.png or .jpg

Page 31: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Content Assets Table

31

Map Search Screen

Feature Details Concerns Content

Logo/Branding Will be provided by the university marketing department. .png or .jpg and guidelines in .doc or .pdf

Title/HeaderWill be created in the digital signage software for easy updating/changing later or the marketing/graphic department can supply an image instead

Text via digital signage software or .png

User Value Items Weather, date & time, campus news feed & navigation to be handled in the digital signage software.

Must have internet connection in order for the weather and campus news feed to function

Digital signage software

Campus News Feed Existing data source will either exist or will need to be created by the marketing department.

Must have internet connection in order to function

Digital signage software or .xls, .xml, or existing database such as SQL

Location Listing Existing data source will either exist or will need to be created by the marketing department. Digital signage software

or .xls, .xml

Map/Way-finding

Campus map will be an HD image of the campus and will be provided by the marketing/graphics department. Way finding functionality to be handled within the digital signage software.

The map either already exists or will need to be created can be .png or.jpg. Way finding will be created in the digital signage software.

Send Directions Form Will be created by the web development/graphics department.

Must have internet connection in order to function

Flash, php, digital signage software

Page 32: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Content Assets Table

32

Events ScreenFeature Details Concerns Content

Logo/Branding Will be provided by the university marketing department. .png or .jpg and guidelines in .doc or .pdf

Title/HeaderWill be created in the digital signage software for easy updating/changing later or the marketing/graphic department can supply an image instead

Text via digital signage software or .png

User Value Items Weather, date & time, campus news feed & navigation to be handled in the digital signage software.

Must have internet connection in order for the weather and campus news feed to function

Digital signage software

Campus News Feed Existing data source will either exist or will need to be created by the marketing department.

Must have internet connection in order to function

Digital signage software or .xls, .xml, or existing database such as SQL

Event Ads Event ads will be provided by the university marketing/graphics department and must be of high quality. .png or .jpg

Event Listing Existing data source will either exist or will need to be created by the marketing department.

Digital signage software or .xls, .xml, or existing database such as SQL

Map/Way-finding

Campus map will be an HD image of the campus and will be provided by the marketing/graphics department. Way finding functionality to be handled within the digital signage software.

The map either already exists or will need to be created can be .png or.jpg. Way finding will be created in the digital signage software.

Send Directions Form Will be created by the web development/graphics department.

Must have internet connection in order to function

Flash, php, digital signage software

Page 33: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Content Assets Table

33

Restaurant Screen

Feature Details Concerns Content

Logo/Branding Will be provided by the university marketing department. .png or .jpg and guidelines in .doc or .pdf

Title/HeaderWill be created in the digital signage software for easy updating/changing later or the marketing/graphic department can supply an image instead

Text via digital signage software or .png

User Value Items Weather, date & time, campus news feed & navigation to be handled in the digital signage software.

Must have internet connection in order for the weather and campus news feed to function

Digital signage software

Campus News Feed Existing data source will either exist or will need to be created by the marketing department.

Must have internet connection in order to function

Digital signage software or .xls, .xml, or existing database such as SQL

Ads Restaurant ads will be provided by the university marketing/graphics department and must be of high quality. .png or .jpg

Map/Way-finding

Campus map will be an HD image of the campus and will be provided by the marketing/graphics department. Way finding functionality to be handled within the digital signage software.

The map either already exists or will need to be created can be .png or.jpg. Way finding will be created in the digital signage software.

Send Directions Form Will be created by the web development/graphics department.

Must have internet connection in order to function

Flash, php, digital signage software

Page 34: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Digital Signage Software Details

34

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.

Page 35: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Architectural Map

35

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.

Page 36: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Wireframe: Home Screen 1A

36

Page 37: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Wireframe: Second-Level Screen 1B

37

Page 38: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Wireframe: Home Screen 2A

38

Page 39: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Wireframe: Second-Level Screen 2B

39

Page 40: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Mock-up: Home Screen

40

Page 41: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Mock-up: Second-Level Screen

41

Page 42: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Style Guide

42

Honeycomb Footer Image

Page 43: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

References

43

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/>.

Page 44: Millersville Interactive Campus Directory Kiosk IMD123 User-Centered Information Design

Contact Information

44

Hector Colon

IMD123 | User-Centered Information DesignTuesday, May 28, 2013