1
2
Table of Contents Concept Brief
3
Requirement Spcifications
3
Project Timeline
4
Personas
5
Sitemap
7
Conceptual Sketches
8
Technical Specifications
12
Required Technologies
12
User Scenarios
13
Low-Fidelity Prototype (1st Iteration)
14
Low-Fidelity Screen Shots
15
User Testing Report
19
Second Iteration
20
Low-Fidelity Prototype (2nd Iteration)
21
High-Fidelity Prototype
21
High-Fidelity Screen Shots
22
Final User Testing Report
26
Final High-Fidelity Prototype
27
Moore • User Experience Prototyping • May 2015
3
Concept Brief For Residence Life and Security staff on a college campus, tasks and emergencies can come quickly. It is imperative that they are equipped with the information that they need to make decisions quickly as possible. My proposal is that a mobile app be provided that would assist them with their responsibilities. This app should deliver real-time access to student information and will integrate with the campus Enterprise Resource Planning (ERP) and ID systems to allow staff to track down a student when an emergency occurs. The app should also provide a feature that would allow staff to create incident reports on students when campus violations occur.
Requirement Specifications This app should include the following components: • • • • • • • •
Emergency Contact Information Medical History Insurance Information Dorm Rooms Incident Reporting Class Schedules Photo Identification Student ID Usage (to determine location of students)
These data points would be provided for every student on campus.
4
Project Timeline
Moore • User Experience Prototyping • May 2015
Personas
5
6
Moore • User Experience Prototyping • May 2015
Site Map
7
8
Conceptual Sketches Behavior of Application The user will be able to search for a student from any screen in the application. The search feature will locate the text string keyed by the user by searching multiple fields such as Name, ID, Vehicle ID and etc. Once a student is located the user can tap the student they want to select, at that point the user will be taken to the Student Information screen. Once a student is selected it becomes the active student on all subsequent screens until another student is selected.
Student Information This screen will show the user details for the selected student. From here they will be able to see all the critical information for that student. • Emergency Contact: displays contact numbers to use in case of an emergency. • Medical History: medical history including insurance information, doctor, perscriptions, allergies, etc. • Student Tracking: can be used to track a student and find their current location (uses data from integrated ID system) • Class Schedule: student's class times and locations
Moore • User Experience Prototyping • May 2015
9
10
Incident Reporting
When incidents occur on campus, Residence Life staff need to be able to report these issues. This screen is used to log any incident that the student is involved in. Upon submission, notifications will be pushed out to appropriate staff. Any incident created for a student will be added to their permanent record and will be viewable from the Student Info screen.
Moore • User Experience Prototyping • May 2015
Housing Staff will be able to determine roomates for the selected student. There may be occasions when Residence Life staff will need to locate a student through roomates. This screen will give them the information they need to accomplish this.
11
12
Technical Specifications Because of differing technologies at institutions of higher education, this application will be a hosted solution. The decision to provide a hosted solution will trim down development costs and will provide timelier deliverables to institutions. The technical team will work with analysts from institutions to establish how data from their Student Information System (SIS) will be mapped into the ResLife system. Processes will need to be configured at each location to push data into ResLife.
Required Technologies • jQuery Mobile, HTML and CSS – Used to build the UI. • Oracle Database – Tables used to store data from participating institutions. • ColdFusion Enterprise – Provides interaction with data from the database, email and push events. • PL/SQL – Provides a means to update data from participating institutions.
Moore • User Experience Prototyping • May 2015
User Scenarios
13
14
Low-Fidelity Prototype (1st Iteration) The low-fidelity version of the 1st iteration can be found at http://anthonyamoore.com/project_b/prototype_lowfi/iteration1
Moore • User Experience Prototyping • May 2015
Low-Fidelity Screen Shots
Landing Screen The landing screen is designed to contain the ResLife and University branding. The university can use the logo of their choice and the application will be branded to match the colors of the logo.
15
16
Student Information
Moore • User Experience Prototyping • May 2015
Incident Reporting
17
18
Housing
Moore • User Experience Prototyping • May 2015
19
User Testing Report Users were briefed on the purpose of the application. After the briefing they were prompted to begin navigating the application. The usability, learnability, data elements and subjective satisfaction were measured during the test.
Measurment Usability
Learnability
Data Elements
Subjective Satisfaction
Definition Results How easily could the user Overall the application received good marks for navigate to the informausability with the following comments: tion they needed. • The collapsible menus on the Student Information screen once expanded, they could collapse again. • Be able to return to the home screen. How quickly were the All users had a background in higher education users able to acclimate which allowed them to have a proper framework themselves to the in which to understand the purpose of the application. application. Were the data elements The following request for information was adequate enough to suggested: complete certain tasks. • Student ID numbers be added to the search screen. • Add professor’s name to the student’s class schedule. • Add google maps to student info to allow users to locate buildings. Overall satisfaction with the application.
Overall the users were satisfied with the product.
20
Second Iteration The results from user testing produced the following changes for the second iteration of the low fidelity prototype. • Collapsible menus that were in the expanded state can now be collapsed to their original state. • On the search bar an ‘X’ was added to allow the user to clear the search results. Doing so brings back the branding logos of the home screen. • Student ID’s were added to the search results. • Professor’s names were added to the student’s schedule.
Moore • User Experience Prototyping • May 2015
21
Low-Fidelity Prototype (2nd Iteration) The second itteration offered the improvements suggested by the group of users that provided feedback during the first test of the prototype. A working version can be found at http://anthonyamoore.com/project_b/prototype_lowfi/iteration2
High-Fidelity Prototype After the second iteration of the low-fidelity prototype was completed, suggestions and ideas from user testing were incorporated into the design and work began on finalizing the product by producing a high-fidelity prototype for ResLife. Attention was given to branding. It was my goal to produce the feeling of ownership and university branding was a matter of high priority for this project and is illustrated throughout the high-fidelity prototype.
22
High-Fidelity Screen Shots Landing Screen The high-fidelity prototype was designed using a fictitous university. The logo and colors demonstrate the ability of ResLife to be branded to match the logo of the institution.
Moore • User Experience Prototyping • May 2015
23
Student Information
24
Incident Reporting
25
Moore • User Experience Prototyping • May 2015
Housing
26
Final User Testing Report The high-fidelity prototype was developed using a ficticious university. The color scheme of the app matches the logo and demonstrates how ResLife can be branded.
The user testing for the final product consisted of the same group of individuals that piloted the low-fidelity prototype. They were reminded of their comments and suggestions and given access to the high-fidelity prototype. After the first round of testing one suggestion that was made was to add Google maps so that locations of dorm rooms and class rooms could be easily located. This feature was added to the hi-fidelity prototype. When the final user testing was conducted, it was determined that I had not given the user an affordance to know that this capibility had been added. As a result of the final user test, the affordance was added by underlining the addresses and presenting them as a clickable link.
Moore • User Experience Prototyping • May 2015
Final High-Fidelity Prototype The final, high-fidelity protoype can be found at: http://anthonyamoore.com/project_b/prototype_hifi/iteration1/
27