Cavallaro,Vincent Albert REPORT 1 SUBMITTAL - Oct. 21, 2011Evangelisti,Matthew JamesRomy,Ben REPORT 2 SUBMITTAL - NOV. 2, 2011Kim,SookyungXuan,Xueqing REPORT 3 SUBMITTAL - NOV. 18, 2011Yung Joo Jang FINAL SUBMITTAL - DEC. 8, 2011Jeff, HirschJosh, TsaiDamian, RakowskyJaimie GerstMariano di Guglielmo BUS APP
SU BUS APPWe are happy to present to you our FINAL REPORT for Project Bus App that will live within the sub app family ofapps 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 includeOur 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 appDevelopers 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-RecommendationsOverall Development plan Our schedule of tasks – deliverable milestones Distribution of tasks – team members
Stations and RoutesThe 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 & LambrethThe 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.
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
Scenario AnalysisScenario 1 Looking for bus schedule on the Waiting for the bus “Bus is not comming!” website He checked the wrong scheduleScenario 2Looking 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
InspirationResearch Logo and ColorBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana Regular
InspirationThese are examples of existing apps.
Architectural Design CONCEPT 1Version 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
Concept Design 1 Screen 1 Screen 2 Screen 3 Screen 4 Screen 5Pick which campus Select a bus stop Icon enlarges Bus schedule page Bus routeyou are at
Architectural DesignCONCEPT 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
Wire Frame Concept 2Wireframe 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 CorridorMain Campus Warehouse YES Yes button NO No button
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
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.
Final Graphic User InterfaceMain App Home Screen Main Campus Screen College Place Stop ScreenAsks the user where they areat, and gives them four mainareas 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.
Pictures used for Bus Stops MAIN CAMPUS Archobold College Place Stadium Place SOUTH CAMPUS Sky Hall - 19 Goldstein Sky Hall - 9
Sample MapsExisting CENTRO maps were used that correspond to routes on the list selected.
Sample LayoutFrom 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.
Final CSS Example CodesBus Schedule Table General CSS
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)
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
Overall Development PlanOur 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