baytrains

BAYTRAINS is a hub for all information regarding rail transit in and surrounding the San Francisco Municipal Boundaries.

This responsive website will help users learn more about payment, navigation, and other relevant rider information for MUNI and BART trains.

Finding information for travel by train should be simple. MUNI and BART systems are intertwined, after all, so it is important to have access to a compilation of vital information in terms of fare prices, passenger rules, and navigation throughout the Bay Area. While drawing the first wireframes, I focused on keeping pages simple–without any frills–and focusing on five major areas of interest: maps/schedules, municipal projects, costs of fares/passes, system stations/lines, and how to ride the trains.

While exploring page layout, I took a top-down approach. All information can be accessed from a central homepage, creating a linear experience for the user. Not sure how to pay your fare from your phone? This information can be found under “How to Ride”, “Transit Apps”, or “Fares & Passes”, all of which are interconnected (not only to each other, but to the homepage as well). This format minimizes the risk of users becoming lost or overwhelmed by information.

Inspiration for the visual design was taken directly from the source, borrowing the iconic reds and blues from the MUNI and BART system designs. While keeping information simple and modern to maintain accessibility, I incorporated eye-catching graphics of the MUNI and BART trains, as well as their respective system maps. 

Check out the Figma files!