MFA Thesis

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 MEDIA
www.oiseauthere.com DEC.10.2009 11:00am

AAU Shuttle Service
Web + iPhone Applications
for Academy of Art University Shuttle Service by TingYen Yen

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.

獻給我親愛的家人:
父親, 顏章泉
母親, 馬佳玲

和曾是手足般的好友, 賴群哲

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

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 need
Statement 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.


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


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 AAU
1-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.


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 more

1-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/


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


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 Arrive
1-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

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 No
1-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


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 interesting
1-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


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 any
1-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.


Function Speciﬁ 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-time
1-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.


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.


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


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


2009.6
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


2009.8
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 application
2009.9


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 was
2009.11 time to start GoogleMaps in iPhone app.


Final UI for Web Login
Map Type and Pan Control
Log out

Navigation Menu

Content User
Field Profile

Personal Info
Schedule Window

2-8 2-9

Shuttle
Route

Map Key
+
Map Toggle

Current
Time

Weather forecast Location Search Bar
Navigator Nearest Stop Path Information
Walking Path

Find Your Route Result Personal Schedule Page


Menu Find Next Shuttle

Final UI for iPhone

2-10 2-11

Explore Campus Map Reality View + Camera


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 GoogleMap
2-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


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 Starting

2-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


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


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


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 holder

3-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


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 to

3-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 :)


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.


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…
Task10
3-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…


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.


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.


Summary Category 4
4-1

Project Conclusion
Author’s Autobiography
Author’s Resume
Author’s Portfolios
Course History
Reference
Special Thanks


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 into
4-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.


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 Designer
4-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 Springshow'09 Third place
(Taiwan)
Target commercial (Motion graphic video)
• The computer hardware repair for Class C (Taiwan)
• AAU Springshow'09 nominated
Joshua Davis (Motion graphic video)
• AAU Springshow'08 nominated
Chinese Tea House (E- learning web site)
Education • AAU Springshow'08 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)


Author’s Portfolio Web Scripting Experimental

This is a FLASH practice for using Use Papervision to create this 3-D
4-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


Author’s Portfolios Motion Graphic

A motion graphic for interview
Joshua Davis. The sound is from
I LUV NYC Corona
4-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

MFA Thesis

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie MFA Thesis

Ähnlich wie MFA Thesis (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

MFA Thesis