Showcase & Discover Creative Work Sign Up For Free
Hiring Talent? Post a Job

Bēhance

  • Introduction
     
    n00Bart is an Android transit application. It is for BART (Bay Area Rapid Transit) in the Bay Area. This app is designed for visitors who have never taken BART before, and thus I wanted to make it as simple as possible to use.
     
    Demo Video
  • Style
     
    Although we could not use the BART logo, I chose to go with the BART color scheme (blue, gray, white, black) for my app. In terms of other stylistic aspects, I strived for a minimalistic design and also got more into the different font styles and ways to manipulate text while making this app, which was pretty fun and a nice break from debugging. I learned about the Android font "Roboto" and about how "Touchable UI components are generally laid out along 48dp units." I stuck with the same font family for the most part and altered the styles (light or condensed or regular).
  • Home Screen
  • The home screen is very simple with four buttons to accomplish the desired tasks:

    1) Provide information on how the BART ticket system works.
    2) Provide a (possibly interactive) graphical map of the BART system.
    3) Provide fare information for a BART trip, given the originating and destination stations.
    4) Provide real-time train departure times for the closest station using the Location API.
     
    The buttons on the home screen are pretty big and close to each other, which would make them easier to click as according to Fitts' Law. There are also icons next to the buttons that represent what they are: 1) an 'i' that is typical for "Information" logos, 2) a map, 3) a $ to represent money, and 4) a clock to represent time/departure times.
  • How do I buy/use a ticket?
     
  • n00Bart offers step-by-step instructions accompanied by real pictures from the BART station.
  • The first button leads to step-by-step instructions on how to buy and use a ticket. I thought that step-by-step instructions would be the most easy for people to understand. Since people tend not to read lengthy and verbose instruction manuals, I wanted to be clear and concise and economical with my words. They call scroll through the instructions, and there are pictures accompanying the instructions to help with understanding. I went to the Rockridge BART station to take the pictures.
  • Where can I go?
  • n00Bart has a zoomable map.
  • The second button leads to a zoomable map. The map fills up the whole screen to allow for easy viewing.
  • How much will my trip cost?
  • n00Bart uses autocomplete to facilitate station entry.
     
  • The third button leads to the Fare Calculator. To enter the origin and destination stations, I chose to use an AutoCompleteTextView with a threshold of 1 because since these people are new to BART, they probably don't know the station names very well, so I thought it was important to offer suggestions early on. Not only does the app calculate the one-way cost, it also calculates the round-trip cost! I thought that this would be helpful to n00BARTers because usually people will want to avoid having to go to the ticketing kiosk too much, so if they can buy a ticket that will cover them to and fro, they would do so.
  • n00Bart calculates both one-way and round-trip costs.
  • When will the next train leave?
  • Pre-click screen.
  • The fourth button leads to the Nearest Station Finder. When the user goes to that screen, the user is directed to click on the button below to find the nearest station with the instruction "Click below to find the nearest station." 

    "Click below to find the nearest station." is in the color gray, and once the user clicks on the button it will turn into the station name written in black, and a list of destination stations and departure times is generated below. To maintain consistency, the destination stations were also in black because they are stations.
  • Post-click screen.
  • Unimplemented ideas
     
    1) BART Trip Advisor
  • Here is a mockup of one way I envision the tourist destinations part to work. So the user would be able to click on stations in the map view, and the station's "profile page"—which is what I drew the mockup of—would pop up. On the screen, there would be a map of the general vicinity of that particular BART station and attractions within walking distance would be pinned on the map. There's also a brief description about the area under the map, and the user can click on the tabs below to find out more about activities, food, and attractions.
  • 2) Route comparison
  • Another idea I had was having a route comparison feature. Although this might not be something that n00BARTers would use, it would be pretty cool to see how two different origin stations going to the same destination station compare. I thought of this because I live between the Downtown Berkeley BART station and the Rockridge station, and going to either is convenient for me, but sometimes one would be better than the other because I wouldn't have to transfer, there are more trains, it takes a shorter amount of time, crowdedness etc. (the "newness of train" feature is just for kicks, but if we could actually get that info that'd be pretty cool!). With this activity, the user would be able to enter a destination station and two origin stations to compare and help him/her decide which one to take based on preferences.