Golden View

Role: UX/UI Designer

Timeline: 8 weeks

Tools: Figma, Adobe CC, Miro, Canva

Type: Mobile UX Design

A unified transit mobile app designed specifically for San Francisco Bay Area commuters, combining BART and ACE train services into one seamless experience. As the UX/UI designer, I led the end-to-end design process, research, branding, prototyping, and interaction design to create an app that simplifies multi-transit navigation while celebrating San Francisco's iconic visual identity.

🌉 Golden View

What's Missing from Bay Area Transit?

Bay Area commuters juggle multiple apps to plan their journeys. BART serves South and East Bay to San Francisco, while ACE connects the Central Valley and the South Bay but doesn't reach the city. Users must switch between apps, check separate maps, and navigate disjointed experiences just to complete one trip.

How might we design a unified transit app that simplifies Bay Area commuting while capturing the essence of San Francisco?

Drawing Inspiration from the City

I was inspired by the colors of San Francisco—a mobility app had never been designed solely around a city's visual identity. From the iconic Golden Gate Bridge to the city's coastal fog and vibrant neighborhoods, I translated San Francisco's character into a cohesive brand.

Meet The Commuters

The primary users are young professionals—including tech workers, creatives, and service industry employees—who commute daily from the South Bay and East Bay to San Francisco, valuing efficiency, real-time information, and opportunities to explore the city after work. Secondary users include families from the South and East Bay who take weekend trips or visit for special occasions, requiring family-friendly planning tools, clear cost information, and simplified ticket management, particularly as they may be less familiar with Bay Area transit systems.

Current Pain Points

  • App fragmentation: Switching between BART and ACE apps mid-journey

  • Map confusion: Separate maps for each transit system

  • Navigation gaps: Using Google Maps to get to stations, then switching to transit apps

  • Ticket hassles: Buying tickets online, in-person, or managing Clipper cards across platforms

I incorporated an "Enjoying City" research section based on my young adult persona. Popular San Francisco destinations include:

  • Golden Gate Bridge

  • Pier 39

  • Chinatown

  • Union Square

Understanding these destinations informs wayfinding features and destination suggestions within the app, connecting transit with the city's cultural landmarks.

🗺️ Research: How Users Explore the City

Color Palette & Style Guide

I modified my palette throughout the design process, ultimately selecting secondary and calm colors to ensure a tranquil user experience while still evoking San Francisco. The Golden Gate Bridge served as the primary inspiration for the color story.

For typography, I chose a playful, rounded bold typeface for headers to complement the custom interest icons and create an approachable, friendly feel. This created visual cohesion between the app's iconography and type system, while maintaining accessibility for body text, and balanced San Francisco's iconic character with a welcoming user experience.

Home & Navigation:

  • Welcome screen featuring Golden Gate Bridge imagery and San Francisco landmarks

  • Navigation menu with: Home, Your Interests, Your Activities, Previous Trips, Tickets, Routes, and Transit Maps

  • Personalized interest selection with icons for local experiences (boba tea, dim sum, cable cars, food, music, etc.)

Core Features:

  • Interest-Based Discovery: Select activities and places you enjoy to get personalized recommendations

  • Activity Tracking: Save and rate visited locations with photos and star ratings

  • Suggested Walks: Get curated walking routes (5-10 min walks) connecting transit stops to local attractions

  • Trip History: Visual timeline of previous transit trips with dates and routes

  • Digital Ticketing: Enter the starting point and destination to purchase train routes

  • Route Planning: Browse and compare different transit route options with "See More" functionality

  • Interactive Transit Maps: Access Caltrain and other Bay Area transit system maps

  • Personalized Experience: Build your profile based on interests to discover San Francisco like a local

App Screens & Navigation

The app was prototyped in Figma & Adobe XD with interactive triggers

View the interactive prototype on Adobe XD

Design Decisions: The app delivers a unified experience by eliminating app-switching between BART and ACE services, while establishing a distinctive San Francisco identity through the city's signature colors and character. A calm color palette reduces transit anxiety, and simplified navigation transforms complex multi-transit journeys into intuitive, easy-to-follow flows.

What I Learned: This project taught me to balance visual identity with functional clarity in transit design, and how to serve diverse user groups—from daily commuters to occasional travelers. I discovered the critical role of real-time information in building user trust, and how thoughtful typography and color choices can evoke a sense of place and emotional connection.

Future Enhancements: Planned improvements include integration with additional Bay Area transit systems (Caltrain, Muni), social features for sharing routes with friends and family, enhanced accessibility features for users with disabilities, and gamification elements to reward and engage frequent commuters.

Key Takeaways

Golden View isn't just a transit app—it's a love letter to San Francisco. By unifying fragmented services and infusing every screen with the city's visual spirit, I created an experience that makes commuting feel less like a chore and more like part of the Bay Area lifestyle.

🌁 Bringing San Francisco to Life