Tiger Transit Message Center

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.

3
Layout and Design
4
Layout and Design

• 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
Layout and Design

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

7
Layout and Design
8
Layout and Design

• 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
Layout and Design

• 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

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!

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.