Golden View: Mobility App

App Explanatory + Color Palette

I was inspired by the colors of San Francisco, California, because I had never seen a mobility app solely based on its city’s colors.

I created personas for young adults working in San Francisco or the Bay Area, and families commuting to the city from the South and East Bay.

When people check for trains from South and East Bay, they use the BART app. The ACE app is for people from Central Valley, South Bay, and East Bay, but does not go to San Francisco like BART. These apps have maps for each major transit area online and on their website.

From the moment I first started, I modified my color palette and created an official style sheet for my app brand. I selected more secondary colors instead of primary ones, along with calm colors to ensure a tranquil user experience. They still evoke San Francisco; I drew significant inspiration from the colors of the Golden Gate Bridge. I opted for a medieval typeface for the app's header to give a nod to the earlier days of San Francisco.

Following my persona outlined above, I incorporated an “enjoying city” section for research, where I gathered inspiration on activities that young adults love to engage in around the city. Popular destinations include the Golden Gate Bridge, Pier 39, Chinatown, and Union Square.

Typically, people use Google Maps to get from their current location to the train station and then walk. Once they arrive at the station, they check the maps for either BART or ACE services to determine their next destination. If tickets weren’t purchased in advance, or if they don’t have a Clipper card, they can buy tickets online or in person at both ACE and BART stations.

Here are the screens of the app in total. These are made on Adobe Illustrator and Adobe XD. We start with the navigation and home page, and see the options of other buttons and pages.

These are the predefined actions where each block of text beneath each screen describes the movement and significance of that screen.

Golden View App on Adobe XD Interaction

Here is a video showcasing the interactive prototype on an Adobe XD live website, since it was made interactive with triggers on Adobe XD.