1. Cavallaro,Vincent Albert REPORT 1 SUBMITTAL - Oct. 21, 2011
Evangelisti,Matthew James
Romy,Ben REPORT 2 SUBMITTAL - NOV. 2, 2011
Kim,Sookyung
Xuan,Xueqing REPORT 3 SUBMITTAL - NOV. 18, 2011
Yung Joo Jang
FINAL SUBMITTAL - DEC. 8, 2011
Jeff, Hirsch
Josh, Tsai
Damian, Rakowsky
Jaimie Gerst
Mariano di Guglielmo
BUS APP
2. SU BUS APP
We are happy to present to you our FINAL REPORT for Project Bus App that will live within the sub app family of
apps that now exists for Syracuse University. We enjoyed the opportunity to work ITS to design and develop this app.
TABLE OF CONTENTS:
Primary scope and potential future scope
List of stops to incorporate
List of routes and times to include
Our initial research goals
Mobile user – the target users
Scenario analysis – potential situation a user may encounter
Optimal coding language – how to organize and execute
Architectural Design – flow chart outlining the app
Analysis of Information – how will the information of the app be organized
Creation of potential visual elements – how it may want to look
Wireframe evolution and final Wireframe with Graphics
FINAL Graphic User Interface
FINAL Photos and Maps used with the app
Developers Data Information
Review of file structure
Index.html
JSON Structure/Final Structure
JS Example/Final Examples
Sample Layout
CSS:a schedule table & framework/Final CSS Code
Code Testing and results
Review of Implementation Difficulties/Source Libraries
Final development analysis-Recommendations
Overall Development plan
Our schedule of tasks – deliverable milestones
Distribution of tasks – team members
3. Primary Scope
The scope of the project was to create a functional demo/prototype app with actual real information/data that will be
hosted by local server provided by ITS. The primary function of the app is to display static information containing the
bus schedules of a chosen bus station/stop. Further development or addition of data if the app is successful will take
place beyond this project scope and will be determined by ITS. No GPS, Geo locating or any other existing app proto-
col (like fourscquare ®) is going to be used with this app.
The primary flow that was developed included five primary user interactions.
• First, assuming the SU app is installed on the phone, launch app
• Second, the user will need to determine location on campus and will be given a few options based on broad loca-
tions, for example, Main Campus or South Campus.(Detailed further in report)
• Third, the user will select the station they are at from a list. User will have the ability to view a photo to help
confirm the stop they are at.
• Fourth, the user will be given a list of bus routes for the station they have selected. It will be based on the current
time of the mobile device being used. Only future routes will display for the day. A user using the app in
the afternoon will only see the times for the rest of the day and evening, no morning times will display.
• Fifth and final, the user will be able to view a static map of bus routes using CENTRO
Maps that are associated to list of routes. The maps are stripped of excess information and only act as
reinforcement with static information.
All of the primary interactions have been completed with enough data to demostrate the app on both the develop-
ment and design sides of the project. Future scope will include completion of data entry to encompass all bus routes
and times using developers recommendations. Further design documentation will be needed for stops and maps not
included currently.
The data is organized and stored using JSON files. The files were created for this project custom, since none exist-
ed. Optimal Coding language – HTML5/CSS/JavaScript was used. Some design graphic elements were influenced by
jQuery mobile.
4. Stations and Routes
The station/stops that should encompass a fully functional Bus App:
Indicates future scope.
Manley Downtown
Manley South Warehouse
Manley North Syracuse Stage
Center of Excellence
Sky Hall #9
Learing Center
Sky Hall #19
Everson Museum
Winding Ridge Irving Ave. Garage
Slocum & Lambreth
Small & Lambreth
The work focused on schedules for Main Campus, South Campus because they are the most used by the student body.
Manley and Downtown have initial buttons but contain no further information beyond the main screen.
FUTURE SCOPE:
All Manley and Downtown stops listed. Winding Ridge, Slocum & Lambreth and Small & Lambreth stops.
The bus routes that have been included for this app are limited due to the time restraints. With that said,
enough made it in to truely see how the app can funtion. Further data input is needed to make the app complete.
No special holiday routes or schedules are included with this app.
5. User Profiles
Grad Student (2nd Year) College Professor
Familiar with school bus and stations. -Occasionally needs the bus system
Have iPhone4, save all schedule, PDF files, in -Has an android device
iBooks -Not the best technologically
PDF files sometimes do not display right and -Uses basic organization features the phone
hard to search time. -Frequently running to meetings and classes
When search different bus, need to switch -Usually needs last minute bus times
from one PDF file to another in iBooks. -Does not know their way around campus well
Need to update PDF file every semester be- enough to indentify bus stops
cause bus schedules are different every se-
mester.
College Student (Freshman)
-Never used bus system before
-Owns an iPhone4 and relies on it for
everything
-Busy schedule
-Often needs to check bus times on the go
-Needs to figure out what buses go where
-Needs to find out which stops are on
6. Scenario Analysis
Scenario 1
Looking for bus schedule on the Waiting for the bus “Bus is not comming!”
website He checked the wrong schedule
Scenario 2
Looking her class schedule She needs to go to the She is checking the bus She doesn’t know what bus
class before 3p.m. schedule on the internet stop she needs to wait
7. Optimal Coding
The Development team worked to create JSON files and reviewed how to effectively use them in their code. They
also RE-familiarized themselves with jQuery, JavaScript, HTML5 and CSS3 while devising the Data Structure.
Analysis of Information
Function:
Show the user what busses are on the way to their current location.
This will be based of off the bus schedule and what bus is supposed to be coming.
Focus:
To make the app very linear.
Not complicate the system by adding too much information or too many screens.
Easy to use.
Target the student mainly, also faculty.
Graphic user interface will be based on the SU mobile
8. Inspiration
Research Logo and Color
Body text size 12 Verdana Regular
Body text size 12 Verdana Regular
Body text size 12 Verdana Regular
Body text size 12 Verdana Regular
Body text size 12 Verdana Regular
Body text size 12 Verdana Regular
Body text size 12 Verdana Regular
10. Architectural Design
CONCEPT 1
Version 1
List of bus stops Schedule of the
Manley Picture of the bus stop you
bus stop you pick
Main Campus pick Map of the
bus route
South Campus
Warehouse
Pick a campus List of the bus Click to the next screen Shows the map
stops in the Find your bus
Click to the last screen of the bus route
campus you
pick
11. Concept Design 1
Screen 1 Screen 2 Screen 3 Screen 4 Screen 5
Pick which campus Select a bus stop Icon enlarges Bus schedule page Bus route
you are at
12. Architectural Design
CONCEPT 2
Version 2
Bus Stop Schedule of the
Manley bus stop you
pick
Main Campus Map of the
Picture of the
bus route
South Campus bus stop
Warehouse
Pick a campus Pick a bus stop Find your bus Shows the map
of the bus route
13.
14. Wire Frame Concept 2
Wireframe Concept 1
Pictures of
the bus stop
Takes you backt to start page
Allows you to go to the previous page
Centro map page
Shows all the bus View time, route, Takes you backt to start page
Start Page stops at the campus and bus page Allows you to go to the previous page
you pick College Place
Take you back to phone home page Takes you backt to start page Takes you backt to start page
Allows you to go to the previous page Allows you to go to the previous page 10:15 Rt445 Connective Corridor
Pick a Campus
Main Campus Bus Stops
Manley South Time, Route, Bus
College Place 10:15 Rt445 Connective Corridor
Main Campus Warehouse
YES Yes button
NO No button
15. Wireframe Concept 2
Wire Frame Concept 2 View CENTRO map page
Start Page Pick your station page View Routes page Needs discussion with Developers
Takes you back to Takes you back to Takes you back to Takes you back to
main Sub app page start page start page start page
or to be determined Allows you to move Allows you to view
to any of the four Allows you to scroll
a static map from
main campus categories at all the routes
Centro
with static Centro Maps
Allows you to view
the next station on the
Which Campus are you at? list along with photo
ROUTES & TIMES
ROUTES & TIMES
Main Campus South Campus
Main Campus
What Station/Stop are you at on
Main Campus
Manley Warehouse
College Place Stop
Main Campus College Place Stop
6:54 Rt 143 Quad Shuttle
College Place Stop Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
Which Campus are you at? What Station/Stop are you at on ROUTES & TIMES ROUTES & TIMES
Main Campus Main Campus Main Campus
Main Campus College Place Stop College Place Stop College Place Stop
6:54 Rt 143 Quad Shuttle Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
Manley
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
South Campus 6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
Warehouse
6:54 Rt 143 Quad Shuttle
6:54 Rt 143 Quad Shuttle
16. Final Wireframe With Graphic User Interface
TYPICAL SU MOBILE HEADER WITH BRANDING
CRITERIA.
BUTTON GOES ONE BUTTON GOES BACK
PAGE TITLE TO APPEAR HERE TO REPLACE SU. Back Home
SCREEN BACK (TYPICAL) TO SU APP HOME SCREEN (TYPICAL) FORWARD VIA SELECTION BACK VIA EITHER “BACK” OR “HOME”
“BUS SCHEDULE”
“STATIONS”
“ROUTES”
Back Bus Schedule Home Back Stations Home Back Routes Home
Main Campus Main Campus
College Place College Place
Main Campus
Archbold Gym MAP 10:15 Rt.445 Connective Corridor
MAP 10:30 Rt.443 Connective Corridor
Manley Stadium Place
MAP 10:42 Rt.143 Connective Corridor
MAP 11:05 Rt.443 Connective Corridor
MAP 11:22 Rt.443 Connective Corridor
South Campus
MAP 11:40 Rt.143 Connective Corridor
MAP 12:15 Rt.443 Connective Corridor
Downtown MAP 11:22 Rt.443 Connective Corridor
MAP 11:40 Rt.143 Connective Corridor
MAP 12:15 Rt.443 Connective Corridor
TYPICAL BACKGROUND COLOR
DARK GRAY
#4E4E4E
MAP 10:15 Rt.445 Connective Corridor Back Stations Home Back Home
HEADER COLOR BLACK #000000
Routes
TYPICAL ORANGE FOR HEADER TEXT AND GRAPHICS
#F47321 TEXT COLOR ORANGE #F47321 Main Campus Main Campus
FONT: FRANKLIN GOTHIC NO. 2 ROMAN
Back Bus Schedule Home
FONT: FRANKLIN GOTHIC BOOK REGULAR
43 College Place College Place
MAP BUTTON GRAPHICS AND BAR TO BE SUPPLIES AS PNG FILES
USE EXISTING APP GRAPHICS FOR “BACK” & “HOME” 50 Archbold Gym
BUTTON PHOTO GRAPHICS TO BE SUPPLIES
TEXT COLOR ORANGE #F47321
22
AS PNG FILES
FONT: FRANKLIN GOTHIC NO. 2 ROMAN Stadium Place
Downtown
PHOTO POP UP ALONG WITH TEXT TO BE
SUPPLIES AS PNG OR JPEG AS PER
DEVELOPERS.
Main Campus WHEN POP UP GOES UP, BACKGROUND
LIST TO GO TO 50% OPACITY
College Place
MODIFIED CENTRO MAPS TO BE USED OFF THE “ROUTES” SCREEN.
MAPS THAT CORRESPONDS TO THE ROUTE BEING SHOWN WILL
College Place
TYPICAL GRAPHICS
POP UP. TO BE PROVIDED AS PNG FILES.
NOTE: MAP NEEDS TO BE DYNAMIC AND BE ABLE TO BE BLOWN
UP WITH FINGER MOTION OTHERWISE THE MAPS WILL BE TO
SMALL TO READ.
17. Final Graphic User Interface
Main App Home Screen Main Campus Screen College Place Stop Screen
Asks the user where they are
at, and gives them four main
areas to choose from.
List times and routes of bus-
Main Campus screen list the
ses to come further in the
stops the user could be poten-
day along with the ulitmate
tially be at and also provieds
end desitination. Based on
them with the opportunity to
the current time of the mobile
view a photo to help comfirm.
device being used. Proviedes
a the user with the ability to
view a stripped down static
map to help with orientation.
18. Pictures used for Bus Stops
MAIN CAMPUS
Archobold College Place Stadium Place
SOUTH CAMPUS
Sky Hall - 19 Goldstein Sky Hall - 9
31. Sample Layout
From a structural standpoint, to get the code in place
• At this point we still needed to implement design, etc.
Working visual framework used Working visual framework used
as code is put in place without use as code is put in place without use
of final graphic interface elements. of final graphic interface elements.
35. Planned Tests
• Planned Tests
Verify that the webpage loads
Verify that the buttons on the main page work
Verify that the back button works
Verify a list of bus stops show up on the second page
Verify a picture loads along with the bus stops
Verify that when the picture is clicked, a larger version appears
Verify that you can close the picture
Verify that schedules load when a bus stop is selected
Verify that when a bus stop is selected, the app shows the upcoming times based around
the users current time
Verify that the home button works
Verify page transitions work
Verify that the color schedule is consistent
Verify a map can load from the schedule
• Initial Results
See Attached Screenshots
• Adjustments to be conducted
Focus more on the Android Dev app and making things work in that app first
Include all parts in the app (the pictures and maps) so we can fully test
• Other Testing Activities to be Conducted
Have a few actual users test the app to see if they fully understand it (black box testing)
43. Implementation Difficulties
• JSON file difficult to maintain since it’s so long
• Hardware limitations on mobile devices may cause the application to under-perform with
large volumes of data
• Implementing functions
• Creating JSON files
• Creation of the HTML webpage
• Working with jQuery, Fancybox, GitHub, and Aptana
• No late night schedule times available in the list due to Date/TIme condition in the code.
Libraries
• jQuery
Ajax (getJSON())
• jQuery Mobile
• Fancybox (fancyapps.com/fancybox)
Recommendations
• For easier maintenance, switch to a database
• Use an automated script to generate a JSON file or multiple JSON files
• For better performance, efficiency, and power usage, consider re-visiting the ‘if’ conditions in
the code to get the proper bus schedule
• For late night schedule times for the previous day, re-consider the copndition
44. Overall Development Plan
Our schedule of tasks
Progress Report #1 Oct. 21, 2011 - As outlined in this report
Progress Report #2 Nov. 2, 2011
Refinement from feedback from report #1
Navigation and User Interface Design
Presentation of visual element, including colors, icons, any potential images or sounds to be flushed
COMPLETE
out. Our team will present to concepts to review prior to this submission.
Implementation details
Decide on which routes and times to include
Build JSON files
Progress Report #3 Nov. 18, 2011
Refinement from feedback from report #2
HTML and CSS coding
Testing and deployment by Developers with Design team support
Adjustments as needed
Final Report – Dec. 8, 2011
CURRENT
Refinement form feedback from report #3
Test results
Final enhancements
Final app structure/description
45. Distribution of tasks – team members
The Design team worked on:
Researching background information about the user.
Creating storyboards to further understand the problems that there are with the current bus schedules.
Making a wireframe that represents the architectural design of the interface.
Designing the interaction that occurs on the screen between the user and the app.
Creating a simple easy to use interface.
Ensuring that it relates to the SU mobile app in visually.
Deciding what stations should be included in the initial app.
Designed Graphic User Interface
The Development team met to work on following tasks together:
Data Structure
JSONs
HTML5/CSS
jQuery (JavaScript)
