Golden View: Mobility App

App Explanatory + Color Palette

I was inspired by the colors of San Francisco, California because I have 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 when I first started I changed my color palette and created an official style sheet for my app brand. I chose more secondary colors rather than primary, and calm colors for a calm user experience. They still resemble San Francisco, I took great inspiration from the Golden Gate Bridge’s colors. I chose a medieval typeface for the header of the app, so it resonated with earlier San Francisco a bit.

Following my persona above, I added an “enjoying city” section for research where I added inspiration on what people around the young adult age love to do in the city. Popular places people visit include The Golden Gate Bridge, Pier 39, Chinatown, and Union Square.

Typically people use google maps to get from where they are in the city to the train station and walk. Once they get in the station they will check on the maps on either the BART or ACE maps and look for where to go. If tickets weren’t purchases before, or there is no clipper card, they can either purchase online or in person in both ACE and BART.

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. The arrows point to where it might connect to other screens.

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.