MFA Thesis

6,148 views

Published on

Academy of Art University
Web Design and New Media
MFA Thesis Project

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,148
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MFA Thesis

  1. 1. AAU Shuttle Service Web + iPhone Applications AAU Shuttle Service AAU Shuttle Service Web + iPhone Applications Web + iPhone Applications for Academy of Art University Shuttle Service TINGYEN YEN 02477219 WEB DESIGN & NEW MEDIAwww.oiseauthere.com DEC.10.2009 11:00am
  2. 2. AAU Shuttle ServiceWeb + iPhone Applicationsfor Academy of Art University Shuttle Service by TingYen Yen
  3. 3. For my dear parents: My father, Albert Yen My mother, Kelly Ma and my best friend, who was, ChunChe Lai www.oiseauthere.com© 2009Copyright All right reserved. 獻給我親愛的家人: 父親, 顏章泉 母親, 馬佳玲 和曾是手足般的好友, 賴群哲
  4. 4. AAU Shuttle Service AAU Shuttle Service Table of Content Statement of Interest Category 1 Project Breakdown Category 3 Launched + Testing 1-2 Type of Subject 3-2 Technical Components List 1-2 Project form 3-3 Technical Components Net 1-3 Target audience 3-4 User Testing Summary 1-4 Competitive for Web 3-5 Testing Document 1 - Greeting and Orientation 1-6 Competitive for iPhone 3-6 Testing Document 2 - Usability Testing Plan 1-8 Competitive Analysis for Web 3-7 Testing Document 3 - Task List 1-9 Competitive Analysis for iPhone 3-10 Testing Reports 1-10 Survey Analysis 1-14 Technology adopted 1-16 Function specificity Category 2 Project Evolution Category 4 Conclusion 2-2 Development process 1 - 2009 Spring 4-2 Project Conclusion 2-4 Development process 2 - 2009 Summer 4-4 Author’s Autobiography 2-6 Development process 3 - 2009 Summer Break Time 4-5 Author’s Resume 2-8 Development process 4 - 2009 Fall 4-6 Author’s Portfolios 2-10 Final UI for Web 4-10 Course History 2-12 Final UI for iPhone 4-11 Reference 2-14 Application Map for Web 4-12 Special Thanks 2-15 Application Map for iPhone 2-16 Flow chart for Web 2-17 Flow chart for iPhone
  5. 5. AAU shuttle service transports students and faculty between campus buildings. These passengers don’t want to waste too much time waiting for a shuttle or even risk the chance of missing one. They needStatement of Interest to be on time for their classes. Managing time is an important skill that students need to learn; it is also a key for success in the world beyond the walls of the Academy. This project creates a tracing system to provide the real-time information on the AAU shuttle service and brings a user-friendly interface to the associated web site. This application system covers all of the AAU shuttles, schedules, and the buildings they service, and allows users to explore our campus through an interactive map. Getting information through portable devices like the iPhone is becoming more popular and practical than printed schedules because of its ”use it anywhere anytime” ability. This application improves current web services and allows users to experience the benefit of a flexible lifestyle through technology.
  6. 6. AAU Shuttle Service AAU Shuttle Service Project BreakdownCategory 1 1-1 Type of Subject Project Form Target Audience Competitive for Web for iPhone Competitive Analysis for Web for iPhone Survey Analysis Technology Adopted Function Specificity
  7. 7. AAU Shuttle Service AAU Shuttle Service Type of Subject Target Audience This project is focusing on transportation web system. It will be used on a daily basis when passengers need to use transportation service. All AAU current students and faculty intend to It is a platform to provide various information for use this web and iPhone application to search specific used. The concept of this project can be and get information before they approach performed on any shuttle transportation system. the shuttles. Most passengers need to take the shuttles to transport them between AAU1-2 faculties, especially freshman who are not 1-3 familiar with our campus and shuttle system. This application can help them quickly to get to know our city campus and understand our shuttle services. Project Form Secondary audiences are people who have There are two kinds of platform for this project. interest in applying to AAU; this application One is on-line web site, which can be launched on allows them to explore the AAU campus. It is a any personal computer with browsers and FLASH complete tour guide line for AAU. Player10.0 installed. Another application is for iPhone 3G. This application allows iPhone users connect to Internet through WiFi or 3G network. Use any time and any where.
  8. 8. AAU Shuttle Service AAU Shuttle Service Competitive Web Application There are some transportation web sites which Contact Us / View BART Map Search Home Stations Schedules Tickets Rider Guide News About BART provide efficient ways for their users to go Home > Schedules > QuickPlanner Result from campus to campus. GPS function on web Montgomery St. Station to Daly City Station application presents a fantastic experience. November 21, 2009 / Departing Around 2:08 PM / $2.95 Change This Trip Reverse This Trip Email this page Print this page In this section, I did a lot of researching for View earlier trains Montgomery St. Station 598 Market Street , San Francisco , CA 94105 current transportation web services such as: Daly City Connecting Transit, Neighborhood Map and more... Montgomery St. Daly City Daly City Station NextMuni, San Francisco Bart, UCSF, Harvard 2:07 pm 2:25 pm 500 John Daly Blvd. , Daly City , CA 94014 Connecting Transit, Neighborhood Map and more... Millbrae CO2 emissions saved by this BART trip: 6.2 pounds. Read more1-4 University, and Stanford University. Montgomery St. 2:12 pm Daly City 2:29 pm Stanford University UCSF 1-5 http://fops-cf.stanford.edu/stanford_ivl/ http://www.parking.ucsf.edu/transportation/ Daly City Montgomery St. Daly City 2:15 pm 2:32 pm Daly City Montgomery St. Daly City 2:22 pm 2:39 pm View later trains | More trips, less detail myBART / BART TV / Mobile Site Contact Us / Your Privacy San Francisco BART © 2009 San Francisco Bay Area Rapid Transit District http://www.bart.gov/ NextMUNI Harvard University http://www.nextmuni.com/ http://harvard.transloc.com/
  9. 9. AAU Shuttle Service AAU Shuttle Service Competitive iPhone Application There are a lot more transportation systems, which is getting to create iPhone applications for their users. iPhone has powerful functions on the Internet and GPS. Those features give developers a chance to use and give users a new experience.1-6 1-7 iStanford University of Washington OU2GO University of San Diego iBart Metro Amsterdam Rover
  10. 10. AAU Shuttle Service AAU Shuttle Service Competitive Analysis for Web Competitive Analysis for iPhone San Francisco Stanford Harvard AAU New NextMUNI UCSF Bart Metro University University Shuttle Service AJAX iStanford San Diego Washington Metro Rover QU2GO iBart iAAU University University Ams. FLASH Interactive Map GPS Func. GPS Func. Prediction Arrive1-8 Reality func. 1-9 GoogleMap Prediction Arrive Street View Facility Info Stop Info Customized Time Ride Planner Customized Download Schedule Mobile Support Announcement On-line Feedback
  11. 11. AAU Shuttle Service AAU Shuttle Service This survey is designed to express the shuttle experience from our students. Below is a survey with feedback and ideas from our target audience. I approached doing the surveys two different ways: one is by interviewing students one by one. The other method I used is an on-line questionnaire Have you ever used the AAU website or Kiosk to What methods do you usually use to check the Survey Analysis system to get the students experiences. schedule? check the shuttle schedule? 50 50 40 40 How often do you use AAU Shuttle service per What time do you usually use the AAU shuttle? week? 30 30 50 50 20 20 40 40 10 10 30 30 0 0 34 18 13 46 30 37 13 20 20 Yes Shuttle book 10 10 Download schedule for iPod No1-10 Download PDF schedule 1-11 0 0 Search on AAU web site 26 14 10 14 36 23 7 Use kiosk at lobby 1~4 times Morning 4~8 times Afternoon Above 8 times Evening Late Night What is the purpose you use the AAU shuttle for? What kinds of shuttle issues do you have? How satisfied are you with our web site or kiosk? How satisfied are you using the schedule book? 50 50 50 50 40 40 40 40 30 30 30 30 20 20 20 20 10 10 10 10 0 0 0 0 48 29 18 5 37 17 5 2 27 6 18 16 10 4 6 17 18 Going to school building Shuttles miss schedule Very satisfied Very satisfied Going home or dorm Couldn’t find shuttle stop Acceptable Acceptable Going to school events Shuttles ignore you So-so So-so Going to places such as restaurant Full loads, have to take next one Not satisfied Not satisfied Take wrong line
  12. 12. AAU Shuttle Service AAU Shuttle Service Would you like to receive or get announcements Shuttle Tracker(Live Map) Quick Point to Point Planner Portable Device Application for Shuttle Service through... 50 50 50 50 40 40 40 40 30 30 30 30 20 20 20 20 10 10 10 10 0 0 0 0 17 20 10 3 30 15 5 0 23 17 8 5 28 12 8 2 E-mail Yes, I really need this Yes, I really need this Yes, I really need this Web site Good idea, but it might help other student, not me Good idea, but it might help other students, not me Good idea, but it might help other students, not me Mobile phone Not interested Not interesting Not interesting1-12 Don’t know what it is 1-13 No, I don’t need to receive anything Don’t know what it is Don’t know what it is Predictor (Real-time arrivals) Automated Passenger Counting 360 Street view on Stops Smart System & Smart ID Card 50 50 50 50 40 40 40 40 30 30 30 30 20 20 20 20 10 10 10 10 0 0 0 0 18 25 5 2 7 18 15 10 6 18 19 7 13 19 10 8 Yes, I really need this Yes, I really need this Yes, I really need this Yes, I really need this Good idea, but it might help other students, not me Good idea, but it might help other students, not me Good idea, but it might help other students, not me Good idea, but it might help other students, not me Not interesting Not interesting Not interesting Not interesting Don’t know what it is Don’t know what it is Don’t know what it is Don’t know what it is
  13. 13. AAU Shuttle Service AAU Shuttle Service Technology Adopted The web application is built by FLASH Action The interactive map is based on GoogleMap Script 3.0. Users are required to install Flash API. GoogleMap enhances the function. I Player 10.0 on their personal computer. The integrated GoogleMap API and FLASH to create minimum requirement of resolution is 1024 x 768 this transportation system map. This system for display on monitors. combines GPS function and GoogleMap, which can be more powerful real-time transportation This web site can be browsed on any browser system. It uses info graphic to clearly display any1-14 and operating platform, Windows and Macintosh kind of information for our facilities and real-time 1-15 system. shuttles. This web application is online only, which means System will use two databases. One is our shuttle it can not be run off line. The most of important schedule database, and the other one is the section requires users to connect, for instance: school database. According schedule database, GoogleMap, personal route schedule, real-time this system can accurately tell the user an information. estimated time by calculating real-time info and schedule data. Connecting school database ( iPhone application literally needs users to have student self service ) gets more information, and an iPhone mobile device and requires this device the system will be smarter allowing users more having the ability to connect to the Internet such efficient using our shuttle service. as 3G network.
  14. 14. AAU Shuttle Service AAU Shuttle Service Function Specifi city 5. Own Route Schedule (Customized) Each users have their own AAU accounts, these accounts could be used on this project. 1. Quick Ride Planner Depends on those information from school Forget the time schedule. Users just need to database, the system will know your course select start and stop point, and then the system and personal information and provides users will analyze the appropriate lines. more efficient information actively. 2. Real-time Shuttle Status 6. Portable Device Terminals This function will offer real-time shuttle location, Using portable devices checks real-time1-16 shuttle statements, and traffic status. It is easy- information, schedule, and route map. 1-17 to-navigate on interactive maps 7. Interactive Map 3. Predictor (Real-time Estimated) The interactive map shows campus GPS updates data to system, that updates and information which can help the new students estimated real-time arrival prediction. to quickly know our campus 4. From Your Location 8. More Efficient Feedback Users don’t need to find their home or address on This new system uses an on-line form instead the map. They just need to type in the address; of traditional e-mail form process. So now and then the system will automatically display users can easily fill out their opinion through their location on map, and tell you which stop is this application. near you. 9. Reality Camera (for iPhone app) This evolution function allows mobile users intuitively get information from their iPhone camera.
  15. 15. AAU Shuttle Service AAU Shuttle Service Depends on user’s GPS system will catch schedule, system will real-time shuttle, and actively send the real- send data to shuttle time information of next service system. shuttle to user’s mobile device. AAU Shuttle Service system has GPS data, and user’s schedule.1-18 10. Shuttle Alarm 1-19 This feature depends on your personal schedule. System knows your schedule; before next event is starting in 30 mins, system will send you a message through cell phone. The information of message provides prediction time, which estimates how long the next shuttle will arrive your place (home), from real-time. Users Before next schedule User will get a phone mes- Then user goes to stop Get the shuttle. Arrive user’s destination. starting in 30mins. sage through system, which to wait that shuttle. don’t need to search schedule by gives you the information of themselves; it’s a actively way that this next shuttle. application gives users information.
  16. 16. AAU Shuttle Service AAU Shuttle Service Project Evolution Category 2 2-1 Project Development Process 1 Web + iPhone Process 2 Web Process 3 iPhone Process 4 Web + iPhone Final UI Web + iPhone Application Map Web + iPhone Flow Chart Web + iPhone
  17. 17. AAU Shuttle Service AAU Shuttle Service 2009.2 Development Process 1 Period One 2009 Spring In 2008 Spring, I was starting to do various research which includes user scenario, audience survey, competitive analysis. After sketching out the layout, the wireframe was getting designed and built. First interactive prototype was finished on the end of this semester and has been tested in the usability lab.2-2 2-3 Work Flow Sketch Screen Sketch 2009.5 Draft Wireframe for Web Draft Wireframe for iPhone
  18. 18. AAU Shuttle Service AAU Shuttle Service2009.6 Development Process 2 Period Two 2009 Summer First UI Edition Second UI Edition 2-3 2-4 UI Design Process Idea Sketch Sketches of developing ideas and function It’s time to get visual. In 2009 Summer, I was taking Direct Study one on one with Michael Kemper. We didn’t only design how to make this interface look good, but also worked on some usability issue and user operating process. Visual design was done on the end of this semester; the second interactive prototype also launched and tested.2009.8 Third UI Edition
  19. 19. AAU Shuttle Service AAU Shuttle Service2009.8 Development Process 3 Period Three 2009 Summer Break Time 2-4 2-5 After 2009 Summer semester, I used one month to explore GoogleMap API on FLASH and started to build rough map functions for my project. Using GoogleMap in my project is a good chance to learn this API, which was a real challenge for me. iPhone interface was defined in this period. iPhone UI design Idea Sketch iPhone UI in Illustrator CS4. Sketches for developing iPhone application2009.9
  20. 20. AAU Shuttle Service AAU Shuttle Service 2009.9 Development Process 4 Period Four 2009 Fall Integrate GoogleMap Coding function and using GoogleMap API into FLASH. In 2009 Fall, I was starting to integrate GoogleMap and my web site. About the section of schedule, I was using school database for my project, but they change their schedule system on the end of Oct. That made my project on pause, so I made another 2-6 one simulating schedule pages for 2-7 application usage. After web application done, I used the same code and modify them to fit in iPhone application prototype on FLASH. Integration After the web application was done, it was2009.11 time to start GoogleMaps in iPhone app.
  21. 21. AAU Shuttle Service AAU Shuttle Service Final UI for Web Login Map Type and Pan Control Log out Navigation MenuContent User Field Profile Personal Info Schedule Window2-8 2-9 Shuttle Route Map Key + Map ToggleCurrent Time Weather forecast Location Search Bar Navigator Nearest Stop Path Information Walking Path Find Your Route Result Personal Schedule Page
  22. 22. AAU Shuttle Service AAU Shuttle Service Menu Find Next Shuttle Final UI for iPhone2-10 2-11 Explore Campus Map Reality View + Camera
  23. 23. AAU Shuttle Service AAU Shuttle Service Application Map for Web Application Map for iPhone app 1.0 1.0 Home page Menu 2.0 3.0 4.0 5.0 6.0 2.0 3.0 Find Your Route Campus Map Download Center Service Assistant Personal Page Shuttle Campus Map 2.1 3.1 4.1 5.1 6.1 3.1 2.1 Select Starting by Building Shuttle Schedule Announcements Add GoogleMap2-12 Select Starting 2-13 2.1.1 3.2 4.2 5.2 6.2 3.2 2.1.1 Select End by Department Campus Map Complaint Form Edit AAU Hunting Select End 2.1.2 3.3 4.3 5.3 6.3 2.1.2 Custom Time by Housing iPod Schedule Disability Help Delete Result 2.1.3 3.4 4.4 5.4 Get Result by Shuttle Stop iPhone App About 2.2 3.3 Custom Time Facility Info 7.0 GoogleMap
  24. 24. AAU Shuttle Service AAU Shuttle Service Flow chart One for Web Flow chart Two for Web This flow chart presents how to “Find Your This flow chart presents how the login system and personal schedule work. Route“ works. Select Starting2-14 Select Ending 2-15 ADD Results EDIT Confirm Win DELETE Schedule YES OK! Database Check Login NO Custom Time Login Personal Page Check Route Results Schedule Database User Database Results
  25. 25. AAU Shuttle Service AAU Shuttle Service Flow chart One for iPhone Flow chart Two for iPhone This flow chart presents how the “Next Shuttle“ works. This flow chart presents how the “Campus Map“ works.2-16 2-17 Switch to AAU Hunting Campus Map Facility List Reality View Select Starting Select Ending Results More Schedule Custom Time Switch Map or List Mode Reset User customizes time Facility Info View in Map
  26. 26. AAU Shuttle Service AAU Shuttle Service Launched+Testing Category 3 3-1 Technical Components by List by Net User Testing Summary User Testing Document 1. Greeting and Orientation 2. Usability Testing Plan 3. Task List Testing Reports
  27. 27. AAU Shuttle Service AAU Shuttle Service Technical Components Technical Components Net User.xml Database Put user info in personal page Send request to database Send result back • com.greensock Tween effect class (http://blog.greensock.com/tweenmax/) • com.google.map GoogleMap API for FLASH (http://code.google.com/apis/maps/) Page0.as CheckShuttle.as • com.oiseau Tween button group Load user list xml for login • com.webdevils Content manager (http://www.webdevils.com/) Page1.as Send stops • CheckShuttles.as Get data from database and send the result array id to check Main.as Page2.as • CreateMarker.as Create markers on the map • DataPicker_AS3.as The calendar from custom time (http://activeden.net/user/unformatt) Page3.as • GoogleMap.as Main stage of map with location search function and color matrix for map Page4.as • Main.as Main class with screen resize function Add map to map holder3-2 • MenuTweenButton.as Main navigation menu tween effect button group Send result to 3-3 show on map • Page0.as Personal page class PanControl.as • Page1.as Find your route page Load xml and send it to create • Page2.as Campus map page TextualZoomControl.as GoogleMap.as Markers.xml • Page3.as Download center page TypeControl.as • Page4.as Service assistant page Add map control in to map Add markers on map • PanControl.as Customized map pan button • RouteCreator.as Create shuttle route in map and animate shuttle running • TextualZoomControl.as Customized zoom control button Route.xml Marker hovered tooptip • TheTime.as Current time class with glow effect • TooltipOverlay.as Map rollover tooltip TooltipOverlay.as CreateMarker.as • TweenButton2.as For second menu button group used Load stop marker array • TypeControl.as Customized map type button RouteCreator.as Add polyline(route) and marker Load route xml
  28. 28. AAU Shuttle Service AAU Shuttle Service Greeting and Orientation Greeting “Hi, my name is TingYen-Yen, who is the AAU WNM student making this project. I am going to work with you in this usability testing. I would give you a brief idea of what you should expect and what I am trying to accomplish” Document One Orientation I have used usability lab to do Hi-fi usability “We are going to test this new AAU shuttle service website and testing, and also did the personal usability testing. iPhone application, the task includes finding your shuttle process, The Hi-fi testing usability lab provides that is a real-time GPS shuttle information, explore campus, getting wonderful experience for me. After I did testing information for AAU facilities.” How are they effective and intuitive on lab, I can review the video and check users’ could be used and found. Please remember, this project is the prototype which means some reaction. That is really helpful to improve usability function is not real working, for example GPS function is going to3-4 Testing Summary on projects. be simulated by programming and not present real shuttle position; 3-5 according this, estimated time is based on AAU shuttle service Rounds: schedule database, not real-time estimated. But when you are doing 3 times - Usability Lab Hi-fi testing testing, please pretend they are real. 7 times - Personal usability testing You are not being tested or evaluated! Its the website and application are being tested. Your experience will help me to improve this project How many people have done this testing: 10 and solve usability problem. I am trying to know how users navigate through this application. Please feel free does anything you can, and Audiences’ backgrounds: don’t be concerned with results. AAU students, who are majoring in different major, While you are working, I am going to take the note and watch. You have experience on taking AAU shuttle. may ask question, but I won’t directly answer them, because it is important for you to go through this application as if I were not here.” “After you finish this testing, I will ask you some brief question and get your experience. And there is a short survey for you to fill out before we done this testing” “Any question?” Thanks. Lets go beginning first task :)
  29. 29. AAU Shuttle Service AAU Shuttle Service Usability Testing Plan Task List Overall goal: This is your user background in this testing To provide specific feedback on checking schedule, personal schedule, Freshman in Academy of Art University. (First semester) interactive map, and iPhone application for AAU shuttle service. Web design and New media student with regular Internet experience. Specific questions must be answered: 1. Is the interactive map (GoogleMap) intuitive for a new user? Live at downtown, address is 1111 Bush St. San Francisco 2. Are the advanced custom time checking shuttle intuitive to use and You are iPhone3GS user. Document Two understandable? 3. Is the “find your route” process clear? Document Three Task1 4. Are the information this website provided useful and easy to find? Current location: Your home 5. Are user login and member function clear to the user? Platform: Website Because you are new student at this school, you are not familiar with User profiles: San Francisco. You don’t know where your home is located in this Participants will fit the target audience who are used to use Internet and city. Try to find the location of your home in the city, and which stop versed in adaptive technology. The target audiences are AAU students ages 20 to 30, they are moderate Internet experience to high. They might have had is closest to your home. Your home is 1111 Bush St. experience taking AAU shuttle, they can compare this site and current site, if Begin task.. not using this application could be their first experience in shuttle service.3-6 Task2 3-7 Methodology: Current location: Your home This project will be tested of 3 to 6 individuals. First of all, interviewing user Platform: Website gets their background information. Three of them will do this usability testing You have class at 180 New Montgomery today, but you don’t know in usability lab with Hi-fi recording; others will do this online or one-on-one where this building is located. Search for its information and location. with administrator. For each session will take approximately 30 minutes. The Begin task… administrator will greet and orient users. After testing, users will be asked to fill out the final results survey form and some basic question ,or giving feedback about their using experience. Task3 Testing outlines: Current location: Your home 1. Orientation Platform: Website 2. Interview User You want to go 180 New Montgomery right now, so you go to check 3. Begin Task List for the next shuttle. Get information for when it is coming and ride 4. Ask users questions and users give feedback information of shuttle. 5. Fill Out Survey Begin task… Summary of result: All testing notes and data will be collected. Observations and specific finding will be summarized.
  30. 30. AAU Shuttle Service AAU Shuttle Service Task4 Task9 Current location: Your home Current location: Your home Platform: Website Platform: Website You have class on 3:00-6:20pm at 180 New Montgomery, and you You have a class on tomorrow 3:30pm at 180 New Montgomery. You also have a study group at 601 Brannan St.at 7:00pm. Try to find the want to find the shuttle to your destination that will get you to class next shuttle that departs around 6:20pm, from 180 New Montgomery on-time. You will be leaving from home 1111 Bush St. to 601 Brannan St. to get your study group. Begin task… Begin task… Extra Task9.1 Extra Task5.1 Save the result from previous results to your personal route. Account name: test Begin task… Password: test Platform: Website Extra Task9.2 You are trying to use your student account to login. And check the Delete the result you saved on previous task. shuttle schedule for getting your class today. Begin task… Begin task… Task103-8 Task6 Platform: Website 3-9 You try to download iPhone application through AAU shuttle service You realize that the H-line is always delayed, and you want to submit website. a complaint. Begin task… Begin task… Task7 Extra Task10.1 Current location: Near 79 New Montgomery Use your iPhone to open iAAU app, and explore campus-hunting Platform: iPhone function. Try to get information from AAU facilities and shuttle. You just finished your lunch with your classmates, and you want to Begin task… get home. You use your iPhone to find the next shuttle. Begin task… Task8 Current location: Near 79 New Montgomery Platform: iPhone You are planning to stay in the Starbuck, which is opposite 79 building, for a while. But you must get home at 7:00pm; try to find the shuttle, which can help you to get home on-time.(before and closed 7:00pm) Begin task…
  31. 31. AAU Shuttle Service AAU Shuttle Service 2. Confused on find the next shuttle Solution Testing Reports Before Some user got the same problem, when they used • Adding a introduction clearly tells user, they can 1. Resolution problem, UI was cut by browser “Find Your Route“ function. It is a “Step 1-2-3” follow step by step to approach result. method, which means you can not skip step2 then go The first problem I found is when users were step3 directly. It didn’t make users clear. • Adding Step1, Step2 ,and Step3 on the button doing testing, browser cut off the bottom title. of my UI. I defined the resolution of this application is 1024x768, but actually our browser can not exactly show real resolution. Before After The reason is most of browser has tool bar on Users don’t know that they the top, this must be a important issue that need to follow step1-2-3.3-10 designers have to concern. 3-11 Add brief introduction Default height can be displayed. can let users know to After follow step. Solution • Redefine best resolution for 1024x740 (original is 1024x768.) • Modify resize screen function on Actionscript, it can make sure everything to be displayed accurately.
  32. 32. AAU Shuttle Service AAU Shuttle Service 3. Usability problem with button on Result section 4. Indication title was not obvious 5. List button was hard to tell it’s meaning When users got the results after using find your In iPhone application, the indication title was Users can click the marker to choose stops, they route, the position of button of UP, DOWN, placed on title below. It made users hard to quickly also can use AAU shuttle stop list to get stop. RESTART, and SAVE sometimes are confusing. get that, what next step they should do. The problem is that icon was hard to express the They have different functions, but they are too meaning, LIST. closed looks like a group. Solution Solution Solution • Moving indication title to the bottom of screen. • Changing icon expression to text “List.“ • Moving UP and DOWN buttons to the upper right.3-12 • Giving distance between RESTART and SAVE Icon hardly conveys 3-13 Before After buttons. it’s meaning. Use text instead of icon. Move UP and DOWN buttons to here. Before After Indication title is not obvious. Add brief introduction can let users know to follow step. Move indication to Give the distance the bottom of screen between two buttons.
  33. 33. AAU Shuttle Service AAU Shuttle Service Summary Category 4 4-1 Project Conclusion Author’s Autobiography Author’s Resume Author’s Portfolios Course History Reference Special Thanks
  34. 34. AAU Shuttle Service AAU Shuttle Service Project Conclusion This project, AAU Shuttle Service, has a user- friendly system for passengers. It is a good example for other schools, organizations, and governments who want to improve their transportation through their web site. This Rich Internet Application combines Internet application and GPS, and brings convince and efficiency into4-2 our life. After done this project, I really learned a lot, 4-3 such as usability, UI design, and programming. It definitely improved my skills on web design and This web site would be a good example for AAU develop web application. The people who are in transportation department. I believe this web site the Web design & New Media department, my would help the school to create a good image, director , my professors, they really helped me out and also make the AAU shuttle services more and encouraged me for doing this. In the future, I reliable. will keep working on web design, and contribute to this world with what I learned the knowledge from this school and teachers taught me. AAU Shuttle Service really concentrates on resolving current problem by using a Real-time system; using it anywhere and anytime. Especially for Freshmans, this makes it easy to use our shuttles, but also providing campus information. AAU Shuttle Service will make students’ lives more convenient.
  35. 35. AAU Shuttle Service AAU Shuttle Service Author’s Autobiography Author’s Resume Work Experience AVANT, LLC San Francisco 2009.9~Present Designer (Internship) Jeff Yen, a Taiwanese designer, who focuses on Design Skill • Responsible for building web sites and creates using Flash Action Script, developing web site UI, • Flash CS4 & ActionScript2.0, ActionScript3.0 interfaces visual design, pictogram icon and logo design, • HTML, CSS, basic PHP, basic MySQL • Assist developer to build RIA and also motion graphic design. In Taiwan, he • Familiar with web design and visual design • Develop the coding with HTML and CSS was a freelance designer and a computer repair • AfterEffect CS4 & Motion Graphic • Logo and graphic design technician. • Photoshop, Illustrator, In design CS4 Freelance Job, San Francisco 2006~Present • Logo, icon, and pictogram design Freelance Web and Graphic Designer4-4 After obtaining a BFA degree from the Chinese • 3-D Model , Maya 2009 4-5 • Use HTML, CSS to build web pages Culture University in Taiwan. He continued his • Create interactive web sites with ActionScript education and major in "Web design and New Language Skill • Logo, poster and various graphic design Media" MFA at the Academy of Art University Mandarin, English in San Francisco. He has numerous web design works selected for the Spring Show, and receiving Other Skill Awards a motion graphic award for 09 Spring Show. • Industrial Electronics of Technician for Class C • AAU Springshow09 Third place (Taiwan) Target commercial (Motion graphic video) • The computer hardware repair for Class C (Taiwan) • AAU Springshow09 nominated Joshua Davis (Motion graphic video) • AAU Springshow08 nominated Chinese Tea House (E- learning web site) Education • AAU Springshow08 nominated MFA in Web Design & New Media, Academy of Art University Fisheye2Day (Personal album web site) BFA in Political Science, Chinese Culture University • AIC Interactive Website awarded 2006(Taiwan) JR House (Personal portfolio web site)
  36. 36. AAU Shuttle Service AAU Shuttle Service Author’s Portfolio Web Scripting Experimental This is a FLASH practice for using Use Papervision to create this 3-D4-6 Actionscript3.0 and database. look environment. 4-7 Anger Me 3D PAPERVISION 1 Get the data from database, using Using Papervision to create this 3-D Actionscript to draw object on scene. look environment. DRAWING 3D PAPERVISION 2
  37. 37. AAU Shuttle Service AAU Shuttle Service Author’s Portfolios Motion Graphic A motion graphic for interview Joshua Davis. The sound is from I LUV NYC Corona4-8 ADOBE.com 4-9 A motion graphic for I LUV NY. I took all A motion graphic piece for Corona. Joshua Davis pictures in that. Taiwan travel AAU bumper A motion graphic for Target. A motion graphic for promo Taiwan festival. A motion graphic for AAU bumper. Target

×