TeamBus

This is our development log for our final project in our fall 2006 class, STS331: Re-imagining the User Interface.

Posted by Cristina at 06:36 PM | Permalink | Comments (0) | TrackBacks (0)

So we're going to do a lot of redesigning of the CapMetro look. First up is their
hard copy" paper schedule. I'm going to redesign the cover and one example page of one bus route w/map and time table.

The paper bus schedule are big and not easy to carry. Not sure I can resize the 8.5"x11" book, since a lot of information needs to be displayed per page, but I'm definitely going to redo the single page/single route little leaflets CapMetro also has. That will be task 2.

Here's the bus schedule book cover:

I find the current cover of the book pretty blah, and while the inside has a decent organization of information, it could be a lot better. I've color-coded all the different types of bus services, which also serves as a way to divide the information inside the book. The pages of the current bus schedule book are grey scale on newsprint, no doubt to cut down on costs, but I can't ever find anything inside the book because all the pages look the same, and the numbers/names of the bus routes are left-aligned! When you're flipping through the book, you see most of the text on the right and none of the left, near the spine.

Inside page redesign to follow...

Posted by Cristina at 01:58 AM | Permalink | Comments (0)

Team Bus A Go Go (MAIN PAGE FOR CLIENT TINKERING)

ASSUMPTIONS FOR EXERCISE –
The screen exists in a web browser with normal controls.

Description:
SITE Client will be able to define and manage their information stored on the SITE…

Actors
Web users?
Pager system users
Cell phone/ Internet enabled pda users?

Pre-conditions
Client has accessed www.capmetro.org, logged in, and has access to one of the following: an email address, a cell phone, or a “pager”

Post conditions
None

Flow of Events
Basic flow
The basic flow assumes that the actor is editing the buses on their account on the SITE
1. Client clicks “add bus”
2. SITE prompts the Client for Bus #, location, time, date/days. Alarm.
3. Client enters requested information and clicks “add bus!”
4. SITE error checks Client provided information and adds bus to Client’s myBus list
5. SITE displays summary of Client-defined buses.

Alternate Flows

Assisted bus add: Aides the Client in adding a bus if they don’t already know all of the information (from step 2 of basic flow)
1. Client clicks on “find bus”
2. SITE displays Plan Route screen (see method elsewhere…)
3. Client clicks “add Bus”
4. SITE displays summary of Client-defined buses

Update bus: Update/edit an existing bus (instead of basic flow)
1. Client clicks “edit myBuses”
2. SITE displays editable columns of bus information
3. Client makes changes and clicks “save”
4. SITE error checks information and updates bus to Client’s myBus list
5. SITE displays summary of Client-defined Buses

Edit account: Update/edit Client account on the SITE (instead of basic Flow)
1. Client clicks on “update account”
2. SITE displays editable summary of Client account information
3. Client makes alterations and clicks “save”
4. SITE error checks entries and updates Client account
5. SITE displays summary of account information

Define location: Update/edit Client’s list of defined locations on the SITE (instead of basic flow)
1. Client clicks on “ edit locations”
2. SITE displays summary of locations and prompts user for information (address and location name)
3. Client enters information or edits and clicks “save”
4. SITE error checks information and adds location to Clients defined locations
5. SITE displays summary of locations

Get help: Assist Client to navigate and use the SITE (at any point in any Flow)
1. Client clicks on “help me!”
2. SITE opens new window and displays help relevant to process Client is in (giant list with anchors)
3. Client closes external window and returns to SITE (?).

Posted by Hatty at 02:07 AM | Permalink | Comments (0)

So the idea is to revamp Capmetro's website with client accounts and a better mapping system.
First up is an overly large image of what the home page might look like if you weren't logged in. One will notice that it bears a great deal of resemble to the current webpage, I don't think that the current one is so awful, just that it could be improved!

The following image gives a better look at the mapping system interface, the idea is that it will look and feel just like a google map, just have the bus routes super-imposed when needed.

I apologize to those without high speed internet, but these images were useless when made any smaller

Posted by Hatty at 03:00 AM | Permalink | Comments (0)

So here is a color-coded version of an inside page of the full-size bus schedule:

The numbers of the bus are right-aligned, and the map will take up a full page: instead of the time table beginning below the map, every time table will begin on a new page.

Posted by Cristina at 12:55 AM | Permalink | Comments (0)

So I've created what I'm calling QUICKguides. They are wallet-sized foldouts that serve as a quick reference for a particular route. Getting all the info so small was a challenging task. I had to sacrifice some information density because of the limitations of the size I was working with, but I tried to make the QUICKguides as useful as possible.

Cover: Would be laminated to protect pages. large numbers and color-coding of route types.

First inside page, with a simple map with numbered stops and main destinations labeled.

Listing of the ten main stops.

Time table layout.

Posted by Cristina at 12:59 AM | Permalink | Comments (0)

Background:

So every day when I'm ready to leave work, I have to click on a bookmark to take me to the CapMetro website and look up the correct time table for the Forty Acres route. This is pretty annoying, and as I use the coolest web browser in the world (Firefox), I decided to mockup a Firefox plugin that would theoretically work with Hatty's system.

I took my cue from the Firefox extension Forecastfox. It allows you to set your location and select the types of weather icons and alerts you want displayed. The options allow for a lot of customization.

Customized toolbar showing forecast for current conditions, night, and next day:

Mouseover display:

Options window:

Stay tuned for mockups of the proposed Firefox extension, NextBus.

Posted by Cristina at 11:27 PM | Permalink | Comments (0)

NextBus is a proposed Firefox extension that would display the user's chosen buses in the Firefox browser status bar.

The extension would get pinged from CapMetro's new system, which would get updated with the position of each bus at a predetermined interval.

The user can subscribe to as many buses as they'd like, through the NextBus interface. They would also choose their location or be able to create a new location.

They can choose to have a single icon display in the status bar, which the user would hover over to get a mouseover window of information for their subscribed buses, or they could have each bus represented by a bus icon, with the bus route number on it.

Example 1: Mouseover window w/single icon
The window would display a list of each bus's route # info, and how far away (in miles or estimated minutes) the next three buses are from the user's location.

Example 2: Individual icons for each subscribed bus
Though the status bar could get cluttered with many bus icons, it is a very clear method of displaying the information without the user having to undertake an action.

Each bus icon would be labeled with their route number, and would be color-coded red, yellow, or green. The colors would correspond to user prefs, with defaults as:
green= bus is 5 minutes or less away, yellow=bus is 6-15 minutes away, red= bus is 15-30 minutes away. If no bus is expected, then the icon is grey. (Minutes could be switched to miles as well.) Mousing over the bus icon would provide further info on the upcoming buses. (If you need to display outgoing/incoming times for one bus route, i.e., #15 soutbound and #15 northbound, there would be a bus icon for each, but the second bus icon would face the opposite direction to indicate it's heading a different way.)

Posted by Cristina at 12:01 AM | Permalink | Comments (0)

Well my copy of flash is not co-operating with the one I used to make things, so I can't open my movie to make a swf of it at the moment. It will go up tonight though. I'll go back to campus, but now it is time for food and uhhh relax. :/ sorry :(

Posted by Hatty at 07:49 PM | Permalink | Comments (0)

so, here be the pager, because the swf had to made on a different compy... one without my fonts it looks a little off and had to use a super super low res render of the pager because my lappy can't handle Maya...

Anywho the function is there and the basic look. :) You'll discover you can navigate without clicking on things, but that is WRONG! pretend you are using it and click on the sad little buttons :/
Here it be

Posted by Hatty at 11:11 PM | Permalink | Comments (0)

erm I dunno? for the webbie I guess? there are prototype drawings... I can even explain them all too!

I think we have to include them in the final doo-hickey...

I have given up on being good and formal, since you are making another webbie that will be pretty, I am just dumping stuff here for awesome teambus to keep track of. :)

look at those fancy drawings!

Posted by Hatty at 11:42 PM | Permalink | Comments (0)

forgot to upload this earlier

it's "special" :P but all will be good. Many Many things are still being worked on..
I hate buttons, and color, it was in greayscale for the longest time for my guinea pigs ;)

Special
eh, to "login" click on create account... yeah not really a create account page :P It gets you to a few of the others though.

also, "planned route" page , though that's the really wrong old map.

have faith! We'll get a super grade in the end!

Posted by Hatty at 02:21 AM | Permalink | Comments (0)