These were possible designs for our main screen. Initially, the thought was to either pick a line or station from drop-downs. But then we realized this would be a bit too cumbersome when scrolling through all the possible stations. After realizing this, we added filters to the stations and lines as to save the users time when finding a station they want. Then, we realized the users might want to change general settings (e.g., brightness) as in most other systems or simply search right away for what they specifically have in mind, adding the settings and a search menu.
In the final design, this first main screen that users will encounter upon opening the app. It will allow the users to search the app for either a specific line (i.e., Blue, Green, Orange, Red, or Silver) or a specific station. Selecting a line from the first drop-down (Green Line in this case) will filter possible station selections to only stations that are on that specific line. Shown next to each station’s name on the drop-down is colored squares (shown with letters for their respective line names) representing which lines they are on.
Shown here is a map view of the Red Line. It displays each station on the actual line (not to scale, just a rough estimate) with brief information about each line (i.e. bus or other train connections) and clickable/touchable links to train connections displayed next to applicable stations.
Shown here is the individual information page for the Downtown Crossing station. It displays a close-up view of the station (relative to the entire overarching line map) allowing it to show any intersecting train lines that are available to that station (in this case, Red, Orange, and Silver). Beneath the map are links to line pages that are available to that station. So for this example of Downtown Crossing, the user is able to click either the Red Line, Orange Line, or Silver Line links that will take them to the respective line pages.
Here are rough initial sketches meant to serve as jumping off points for both the individual stations maps (on the top half) and main screen (bottom half). These were used to bring out ideas as to how the app will work and interact with itself.
(2) Going from line to station
(3) Going from station to line
Roles and Tasks:
For this part of the project, Matt acted as architect, bring out overarching ideas as to what the system will do between pages and within pages while Mark acted as the designer/web designer, figuring out the small details of how the system/interface will look and feel. Matt and Mark both acted as business analysts, deciding what users would need and eliciting respective requirements.