Mission Bay

Mission Bay

A smart mobility app reimagining Mission Bay transportation.

A smart mobility app reimagining Mission Bay transportation.

App

App

App

Cover Image
Cover Image
Cover Image

About the project

About the project

About the project

Category

CCA Project

Category

CCA Project

Category

CCA Project

Industry

Transportation

Industry

Transportation

Industry

Transportation

Timeline

5 Weeks

Timeline

5 Weeks

Timeline

5 Weeks

Year

2025

Year

2025

Year

2025

Problem

The Mission Bay Shuttle connects UCSF campuses, housing and public transit across San Francisco, yet its current user experience is confusing, stressful, and difficult to navigate.

Riders often feel anxious because they are unsure where to board, when to get off and whether the shuttle is arriving as expected. Real-time tracking is unreliable, leading to uncertainty and loss of trust in the system. In addition, the lack of clear signage, accessibility support and inclusive design features makes the shuttle especially challenging for first-time users, visitors and people with special needs.

As a result, users experience low confidence, missed stops and increased stress during what should be a simple commute. There is a need for a more clear, reliable, and inclusive shuttle experience that provides timely feedback and supports all riders equally.


Solution

Our design directions were guided by core interaction design principles—feedback, discoverability and simplicity and addressed key IxD dimensions including spatial, temporal and physical engagement. Each solution focused on reducing user anxiety while improving clarity, accessibility and trust across the shuttle experience.

1. Multi-Sensory Confidence

We introduced vibration alerts and onboard light indicators to support or replace auditory announcements. This ensured users received timely feedback regardless of environmental noise or hearing ability.
Principles applied: Feedback, Redundancy, Simplicity

2. Anticipatory Clarity

The shuttle app opens directly to live tracking, minimizing cognitive load. “Walk to Stop” directional cues guide users toward boarding locations, helping them prepare before the shuttle arrives.
Principles applied: Visibility, Predictability

3. Respectful Efficiency

We used high-contrast visuals, large typography, and color-blind-safe indicators to improve readability and speed of comprehension across different user abilities and lighting conditions.
Principles applied: Accessibility, User Control

4. Safety and Assurance

An Emergency Contact feature allows riders to quickly connect with trusted contacts or campus security while sharing their real-time location, reinforcing a sense of safety during travel.
Principles applied: Trust, Ethical Design, Contextual Awareness.

Problem

The Mission Bay Shuttle connects UCSF campuses, housing and public transit across San Francisco, yet its current user experience is confusing, stressful, and difficult to navigate.

Riders often feel anxious because they are unsure where to board, when to get off and whether the shuttle is arriving as expected. Real-time tracking is unreliable, leading to uncertainty and loss of trust in the system. In addition, the lack of clear signage, accessibility support and inclusive design features makes the shuttle especially challenging for first-time users, visitors and people with special needs.

As a result, users experience low confidence, missed stops and increased stress during what should be a simple commute. There is a need for a more clear, reliable, and inclusive shuttle experience that provides timely feedback and supports all riders equally.


Solution

Our design directions were guided by core interaction design principles—feedback, discoverability and simplicity and addressed key IxD dimensions including spatial, temporal and physical engagement. Each solution focused on reducing user anxiety while improving clarity, accessibility and trust across the shuttle experience.

1. Multi-Sensory Confidence

We introduced vibration alerts and onboard light indicators to support or replace auditory announcements. This ensured users received timely feedback regardless of environmental noise or hearing ability.
Principles applied: Feedback, Redundancy, Simplicity

2. Anticipatory Clarity

The shuttle app opens directly to live tracking, minimizing cognitive load. “Walk to Stop” directional cues guide users toward boarding locations, helping them prepare before the shuttle arrives.
Principles applied: Visibility, Predictability

3. Respectful Efficiency

We used high-contrast visuals, large typography, and color-blind-safe indicators to improve readability and speed of comprehension across different user abilities and lighting conditions.
Principles applied: Accessibility, User Control

4. Safety and Assurance

An Emergency Contact feature allows riders to quickly connect with trusted contacts or campus security while sharing their real-time location, reinforcing a sense of safety during travel.
Principles applied: Trust, Ethical Design, Contextual Awareness.

Problem

The Mission Bay Shuttle connects UCSF campuses, housing and public transit across San Francisco, yet its current user experience is confusing, stressful, and difficult to navigate.

Riders often feel anxious because they are unsure where to board, when to get off and whether the shuttle is arriving as expected. Real-time tracking is unreliable, leading to uncertainty and loss of trust in the system. In addition, the lack of clear signage, accessibility support and inclusive design features makes the shuttle especially challenging for first-time users, visitors and people with special needs.

As a result, users experience low confidence, missed stops and increased stress during what should be a simple commute. There is a need for a more clear, reliable, and inclusive shuttle experience that provides timely feedback and supports all riders equally.


Solution

Our design directions were guided by core interaction design principles—feedback, discoverability and simplicity and addressed key IxD dimensions including spatial, temporal and physical engagement. Each solution focused on reducing user anxiety while improving clarity, accessibility and trust across the shuttle experience.

1. Multi-Sensory Confidence

We introduced vibration alerts and onboard light indicators to support or replace auditory announcements. This ensured users received timely feedback regardless of environmental noise or hearing ability.
Principles applied: Feedback, Redundancy, Simplicity

2. Anticipatory Clarity

The shuttle app opens directly to live tracking, minimizing cognitive load. “Walk to Stop” directional cues guide users toward boarding locations, helping them prepare before the shuttle arrives.
Principles applied: Visibility, Predictability

3. Respectful Efficiency

We used high-contrast visuals, large typography, and color-blind-safe indicators to improve readability and speed of comprehension across different user abilities and lighting conditions.
Principles applied: Accessibility, User Control

4. Safety and Assurance

An Emergency Contact feature allows riders to quickly connect with trusted contacts or campus security while sharing their real-time location, reinforcing a sense of safety during travel.
Principles applied: Trust, Ethical Design, Contextual Awareness.

Navigation
Navigation
Navigation

User Flow & Accessibility Settings
User Flow & Accessibility Settings
User Flow & Accessibility Settings

Live Track & Emergency Control
Live Track & Emergency Control
Live Track & Emergency Control

Visuals

Visuals

Visuals