Project 4 – Design Sketches

Design Alternatives/Descriptions:

main design sketch proto 1main page design sketchmain design sketch proto 2

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.

red line design sketch

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.

station design sketch

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.

station & main deisgn sketches

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.


(1) Searching

main pagesearchingsearch resultsscience park page

(2) Going from line to station

main pageselect linegreen line pagescience park page

(3) Going from station to line

main pageselect pagescience park pagegreen line page

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: