1. Tiger Transit Message Center

2. Requirements  Combine functions to make them easier.  Related functions in the existing system are spread over different pages.  Keep the look and feel of the original interface.  In order to facilitate an easy transition between systems.  Combine functions to make them easier.  Related functions in the existing system are spread over different pages.  Keep the look and feel of the original interface.  In order to facilitate an easy transition between systems.

3. Layout and Design

4.  Page 1: Intro page  Welcome and basic information.  Notice the Navigation Links on the left that not only provide links to other page, but also indicate the page you are currently viewing.  Page 1: Intro page  Welcome and basic information.  Notice the Navigation Links on the left that not only provide links to other page, but also indicate the page you are currently viewing.

5. Layout and Design

6.  Page 2: Message Control  View all current messages, sorted by expiration.  Change expiration dates.  Add new messages.  Remove messages.  Page 2: Message Control  View all current messages, sorted by expiration.  Change expiration dates.  Add new messages.  Remove messages.

7. Layout and Design

8.  Page 3: Phone Control  View list of phones, sort by either number, carrier, or bus number.  Add new phones.  Reset phone messages.  Remove phones.  Page 3: Phone Control  View list of phones, sort by either number, carrier, or bus number.  Add new phones.  Reset phone messages.  Remove phones.

9. Layout and Design

10.  Page 4: Password Update  Updates username with a new password  Page 4: Password Update  Updates username with a new password

11. Scenarios  Billy wants to enter a new message for the buses  Billy logs into the site and clicks on the messages link  Billy enters his text in the message text field and enters the expiry date in the fields for date.  Once entered, Billy clicks Add Message to have the system update the buses with his message  Billy wants to enter a new message for the buses  Billy logs into the site and clicks on the messages link  Billy enters his text in the message text field and enters the expiry date in the fields for date.  Once entered, Billy clicks Add Message to have the system update the buses with his message

12. Scenarios  Bobby wants to update his password  Bobby navigates to the Password Update page  Bobby enters his Username, Current Password, New Password, and retypes his New Password.  If everything matches up, then Bobby has his new password!  Bobby wants to update his password  Bobby navigates to the Password Update page  Bobby enters his Username, Current Password, New Password, and retypes his New Password.  If everything matches up, then Bobby has his new password!

13. Notes  This design utilizes DHTML techniques with CSS and JavaScript to make the presentation to the user  Functionality is essentially the same, just better organized and compressed into fewer pages.  This design utilizes DHTML techniques with CSS and JavaScript to make the presentation to the user  Functionality is essentially the same, just better organized and compressed into fewer pages.