fall 11\' mstrs clss prj 02

$: Fall 11\' Mstrs Clss Prj 02$
BUS APP

Cavallaro,Vincent AlbertEvangelisti,Matthew JamesRomy,BenKim,SookyungXuan,XueqingYung Joo JangJeff, HirschJosh, TsaiDamian, RakowskyJaimie GerstMariano di Guglielmo

Oct. 21, 2011

REPORT 3 SUBMITTAL - NOV. 18, 2011

REPORT 2 SUBMITTAL - NOV. 2, 2011

REPORT 1 SUBMITTAL -

FINAL SUBMITTAL - DEC. 8, 2011

SU BUS APPWe 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 ArchitecturalDesign–flowchartoutliningtheapp Analysis of Information – how will the information of the app be organized Creation of potential visual elements – how it may want to look WireframeevolutionandfinalWireframewithGraphics FINALGraphicUserInterface FINAL Photos and Maps used with the app

Developers Data Information Reviewoffilestructure Index.html JSON Structure/Final Structure JS Example/Final Examples Sample Layout CSS:a schedule table & framework/Final CSS Code Code Testing and results ReviewofImplementationDifficulties/SourceLibraries Final development analysis-Recommendations

Overall Development plan Our schedule of tasks – deliverable milestones Distribution of tasks – team members

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 placebeyondthisprojectscopeandwillbedeterminedbyITS.NoGPS,Geolocatingoranyotherexistingappproto-col (like fourscquare ®) is going to be used with this app.

Theprimaryflowthatwasdevelopedincludedfiveprimaryuserinteractions.•First,assumingtheSUappisinstalledonthephone,launchapp•Second,theuserwillneedtodeterminelocationoncampusandwillbegivenafewoptionsbasedonbroadloca- tions, for example, Main Campus or South Campus.(Detailed further in report)•Third,theuserwillselectthestationtheyareatfromalist.Userwillhavetheabilitytoviewaphototohelpconfirmthestoptheyareat.•Fourth,theuserwillbegivenalistofbusroutesforthestationtheyhaveselected.Itwillbebasedonthecurrent 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.•Fifthandfinal,theuserwillbeabletoviewastaticmapofbusroutesusingCENTRO 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.

ThedataisorganizedandstoredusingJSONfiles.Thefileswerecreatedforthisprojectcustom,sincenoneexist-ed.OptimalCodinglanguage–HTML5/CSS/JavaScriptwasused.SomedesigngraphicelementswereinfluencedbyjQuery mobile.

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.

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.

Manley Downtown

The station/stops that should encompass a fully functional Bus App:

Stations and Routes

Indicates future scope.

WarehouseSyracuse StageCenter of ExcellenceLearing CenterEverson MuseumIrving Ave. Garage

Manley SouthManley North

Winding Ridge Slocum & Lambreth Small & Lambreth

Sky Hall #9Sky Hall #19

Grad Student (2nd Year) Familiar with school bus and stations. Have iPhone4, save all schedule, PDF files, in iBooksPDF files sometimes do not display right and hard to search time.When search different bus, need to switch from one PDF file to another in iBooks.Need to update PDF file every semester be-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

College Professor -Occasionally needs the bus system-Has an android device-Not the best technologically-Uses basic organization features the phone -Frequently running to meetings and classes -Usually needs last minute bus times -Does not know their way around campus well enough to indentify bus stops

User Profiles

Scenario AnalysisScenario 1

Scenario 2

Looking for bus schedule on the website

Waiting for the bus “Bus is not comming!”He checked the wrong schedule

Looking her class schedule She needs to go to the class before 3p.m.

She is checking the bus schedule on the internet

She doesn’t know what bus stop she needs to wait

Optimal Coding

Analysis of Information

TheDevelopmentteamworkedtocreateJSONfilesandreviewedhowtoeffectivelyusethemintheircode.Theyalso RE-familiarized themselves with jQuery, JavaScript, HTML5 and CSS3 while devising the Data Structure.

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

Inspiration

Body 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

Research Logo and Color

Inspiration These are examples of existing apps.

CONCEPT 1

Main Campus

Manley

South Campus

Warehouse

List of bus stops

Picture of the bus stop you pick

Schedule of the bus stop you pick

Map of the bus route

Version 1

Pick a campus List of the bus stops in the campus you pick

Click to the next screenClick to the last screen

Find your bus Shows the map of the bus route

Architectural Design

Concept Design 1

Screen 1 Screen 2 Screen 3 Screen 4 Screen 5

Pick which campus you are at

Select a bus stop Icon enlarges Bus schedule page Bus route

Map of the bus routePicture of the

bus stop

Bus Stop Schedule of the bus stop you pick

Main Campus

Manley

South Campus

Warehouse

Version 2

Pick a campus Find your bus Shows the map of the bus route

Pick a bus stop

Architectural DesignCONCEPT 2

Wire Frame Concept 2

YES

NO

Pick a Campus

Manley South

Main Campus Warehouse

Main Campus Bus Stops

College Place

College Place

Time, Route, Bus

10:15 Rt445 Connective Corridor

10:15 Rt445 Connective Corridor

Start Page

Take you back to phone home page

Allows you to go to the previous page

Takes you backt to start page







Yes buttonNo button

Shows all the bus stops at the campus you pick

Pictures of the bus stop

View time, route, and bus page

Centro map page

Wireframe Concept 1

Wireframe Concept 2

South Campus

Main Campus

Warehouse

Manley

South CampusMain Campus

WarehouseManley

Which Campus are you at?

Which Campus are you at?

What Station/Stop are you at on

What Station/Stop are you at on

College Place Stop

Main Campus

Main Campus

Main CampusMain Campus

College Place Stop

College Place StopCollege Place Stop

ROUTES & TIMES

ROUTES & TIMESROUTES & TIMES

College Place Stop

6:54 Rt 143 Quad Shuttle

Main Campus

















ROUTES & TIMES

College Place Stop

Rt 143 Quad Shuttle

Main Campus

Rt 143 Quad Shuttle

Takes you back tomain Sub app pageor to be determined

Takes you back tostart page



Start Page

Wire Frame Concept 2Pick your station page View Routes page

View CENTRO map pageNeeds discussion with Developers

Allows you to moveto any of the fourmain campus categories

Allows you to viewthe next station on thelist along with photo

Allows you to scrollat all the routes with static Centro Maps

Allows you to viewa static map fromCentro

FinalWireframeWithGraphicUserInterface

South Campus

Main Campus

Downtown

Downtown

Manley

StationsBus Schedule Routes

Main Campus

Main Campus

College Place

College Place

Main Campus

College Place

Archbold Gym

Stadium Place

Stations

10:15 Rt.445 Connective Corridor










Main Campus

College Place43

50

22

Archbold Gym

Stadium Place

College Place

10:15 Rt.445 Connective Corridor Routes

Main Campus

College Place

HomeBack

HomeBack

Home

MAP

MAP

MAP

MAP

MAP

MAP

MAP

MAP

MAP

MAP

MAP

Back

HomeBack

HomeBack

Bus Schedule HomeBack

HomeBack BUTTON GOES ONESCREEN BACK (TYPICAL)

BUTTON GOES BACKTO SU APP HOME SCREEN (TYPICAL) FORWARD VIA SELECTION BACK VIA EITHER “BACK” OR “HOME”PAGE TITLE TO APPEAR HERE TO REPLACE SU.

“BUS SCHEDULE”“STATIONS”“ROUTES”

TYPICAL SU MOBILE HEADER WITH BRANDINGCRITERIA.

TYPICAL BACKGROUND COLORDARK GRAY#4E4E4E

HEADER COLOR BLACK #000000

TYPICAL GRAPHICS

MAP BUTTON GRAPHICS AND BAR TO BE SUPPLIES AS PNG FILES

BUTTON PHOTO GRAPHICS TO BE SUPPLIES AS PNG FILES

PHOTO POP UP ALONG WITH TEXT TO BESUPPLIES AS PNG OR JPEG AS PER

DEVELOPERS.WHEN POP UP GOES UP, BACKGROUND

LIST TO GO TO 50% OPACITY

MODIFIED CENTRO MAPS TO BE USED OFF THE “ROUTES” SCREEN. MAPS THAT CORRESPONDS TO THE ROUTE BEING SHOWN WILL POP UP. TO BE PROVIDED AS PNG FILES.

NOTE: MAP NEEDS TO BE DYNAMIC AND BE ABLE TO BE BLOWNUP WITH FINGER MOTION OTHERWISE THE MAPS WILL BE TO SMALL TO READ.

TYPICAL ORANGE FOR HEADER TEXT AND GRAPHICS#F47321

USE EXISTING APP GRAPHICS FOR “BACK” & “HOME”

TEXT COLOR ORANGE #F47321FONT: FRANKLIN GOTHIC NO. 2 ROMAN

TEXT COLOR ORANGE #F47321

FONT: FRANKLIN GOTHIC NO. 2 ROMAN FONT: FRANKLIN GOTHIC BOOK REGULAR

FinalGraphicUserInterfaceMain App Home Screen

Asks the user where they are at, and gives them four mainareas to choose from.

Main Campus screen list thestops the user could be poten-tially be at and also provieds them with the opportunity to view a photo to help comfirm.

List times and routes of bus-ses to come further in the day along with the ulitmate end desitination. Based on the current time of the mobile device being used. Proviedes a the user with the ability to view a stripped down static map to help with orientation.

Main Campus Screen College Place Stop Screen

Pictures used for Bus Stops

Archobold

Sky Hall - 19 Goldstein Sky Hall - 9

College Place Stadium Place

MAIN CAMPUS

SOUTH CAMPUS

Sample Maps

Existing CENTRO maps were used that correspond to routes on the list selected.

Development Data Information

File Structure

index.html * BuSU •css(folder) -main.css •scripts(folder) -jq-main.js -jq-mobile-main.js -jquery-1.3.2.debug.js -json.debug.js -json.htmTable.js •res(folder) •images •data.json •index.html

Final Development Data Information

File Structure -index.html

-css/schedtable.css../themes/ ../../bus_sched_SU.min.css ../../images ../../../ajax-loader.png ../../../icons-18-black.png ../../../icons-18-white.png ../../../icons-36-black.png ../../../icons-36-white.png-fancybox/../blank.gif../fancybox_loading.gif../fancybox_sprite.png../jquery.fancybox.css../jquery.fancybox.js../jquery.fancybox.pack.js-imgs/../433skyhall.jpg../43toCollegePlace.jpg../43toWarehouse.jpg../443goldstein.jpg../Archbold.jpg../CollegePlace.jpg../Goldstein.jpg../SkyHall19.jpg../SkyHall9.jpg../StadiumPlace.jpg-sched_dat/../data0.json-scripts/../json2table.js

Final Development Data Information (Continued)

JSON Structure

JSON 1 for bus schedule JSON 2 for bus stops

Final JSON Structure

JS Example

ThissegmentofcodeisfromtheJavaScriptfileweareusing.It’smainpurposeistocreateatablewithinformationfromtheJSONfile.

Final JS Example

Sample Layout

From a structural standpoint, to get the code in place•Atthispointwestillneededtoimplementdesign,etc.

Working visual framework usedas code is put in place without useof final graphic interface elements.

Working visual framework usedas code is put in place without useof final graphic interface elements.

CSSMain CSS: schedule table part

CSSMain CSS: framework part

Final CSS Example Codes

Bus Schedule Table GeneralCSS

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 FocusmoreontheAndroidDevappandmakingthingsworkinthatappfirst 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)

Test Results

Results Continued

Final Test Results

Final Test Results Continued

ImplementationDifficulties

Libraries

•JSONfiledifficulttomaintainsinceit’ssolong•Hardwarelimitationsonmobiledevicesmaycausetheapplicationtounder-performwith large volumes of data•Implementingfunctions•CreatingJSONfiles•CreationoftheHTMLwebpage•WorkingwithjQuery,Fancybox,GitHub,andAptana•NolatenightscheduletimesavailableinthelistduetoDate/TImeconditioninthecode.

•jQuery Ajax (getJSON())•jQueryMobile•Fancybox(fancyapps.com/fancybox)

•Foreasiermaintenance,switchtoadatabase•UseanautomatedscripttogenerateaJSONfileormultipleJSONfiles•Forbetterperformance,efficiency,andpowerusage,considerre-visitingthe‘if’conditionsin the code to get the proper bus schedule•Forlatenightscheduletimesforthepreviousday,re-considerthecopndition

Recommendations

Our schedule of tasks Progress Report #1 Oct. 21, 2011 - As outlined in this report Progress Report #2 Nov. 2, 2011 Refinementfromfeedbackfromreport#1 Navigation and User Interface Design Presentationofvisualelement,includingcolors,icons,anypotentialimagesorsoundstobeflushed out. Our team will present to concepts to review prior to this submission. Implementation details Decide on which routes and times to include BuildJSONfiles Progress Report #3 Nov. 18, 2011 Refinementfromfeedbackfromreport#2 HTML and CSS coding Testing and deployment by Developers with Design team support Adjustments as needed Final Report – Dec. 8, 2011 Refinementformfeedbackfromreport#3 Test results Final enhancements Final app structure/description

Overall Development PlanC

OM

PLE

TE

CU

RR

EN

T

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

The Development team met to work on following tasks together:Data StructureJSONsHTML5/CSSjQuery (JavaScript)

Distribution of tasks – team members

fall 11\' mstrs clss prj 02

Documents

project bus app

bus routes

final report

submittal final submittal

static information

functional demoprototype

bus schedules

bus appcavallaro