Last but not least, disable people could filter route option with inclusive services; we have language setting feature to help our Muti-lingual riders; FAQS helps infrequent rider to better prepare the journey and tutorial providing a user-friendly guidance for elderly people with limited access to digital tech.

LA Bus Stop  

Delivering next bus transit experience for STAP project in Los Angeles @ BMW DesignWorks

During my tenure at BMW DesignWorks, I played a pivotal role in the intricate design of the STAP (Sidewalk and Transit Amenities Program) project, aimed at delivering next bus transit experience in Los Angeles. This initiative left a substantial imprint, benefiting 3.9 million residents and enticing 50 million tourists to the sprawling metropolis of Los Angeles.


11.2022 - 11.2023


Charles Drueco (Creative Director)
Colette Becker (Design Lead)
Yizhen Guo (Interation Designer)
Christine Wei (Interaction Designer)
Shayne Shen (Interaction Designer)

My Role

Interaction designer


After Effects

LA City Council approved $30 million for Sidewalk and Transit Amenities Program to replace and add 3000 bus shelters by 2028.

Sidewalk and Transit Amenities Program, an exemplary and self-sustaining program, is dedicated to offering shelter, shade, safety, and comfort, complete with amenities that promote increased transit usage, alternative transportation, and the shared utilization of City sidewalks.

Los Angeles has long been regarded as one of the most prosperous cities in the world. However, its unclean and outdated transit facilities, coupled with unfriendly services, have made riding on public transit increasingly unattractive. Consequently, the number of passengers continues to decline, perpetuating an eternal downward spiral.
Project Goal
1. Enhance the convenience and safety of the Los Angeles public transit system for all residents.
2. Be well prepare for future big events - 2026 World Cup and 2028 Olympic Games.
Challenges & My Role
1. Targeting millions of commuters.
2. Crafting experience from offline to online and consumer to business.

The most significant challenge we faced was undoubtedly this project is targeting millions of users, we must cater to diverse user needs. It was imperative to ensure that our design would be universally usable. Additionally, our product scope massive scope, requiring us to craft experience for multiple products.

As an interaction designer on the DW team, my responsibilities included crafting solutions that spanned various digital touchpoints. I contributed across multiple domains, encompassing UX research, feature strategy, user experience, interface design, and visual branding design. My engagement in this project extended from its initial conceptualization to the final design phase, a journey that unfolded over the course of a full year.

A quick peek of my contribution

I crafted the end-to-end experience, spanning from offline bus stop interactions to the online web application. Additionally, I developed the internal management tool tailored to the needs of operation teams. Plus, I helped shape the distinct brand identity and vibe to the next LA BUS STOP.

01. Live Bus Transit Display at Bus Stops

The E-ink Display will be installed on the bus shelter structure, and its primary purpose is to provide real-time bus information for the riders at each bus stop.

Quick jump to learn more

02. Web App

The E-Ink display alone cannot address all needs for everyone. So the Web app serves as a support tool for E-INK displays to better assist people in LA without a car

Quick jump to learn more

03. Content Management System

A CMS tool that allowing staffs to efficiently control and manage all assets and data in one central location.

Quick jump to learn more

04. Branding Identity

Create a brand identity that not only stands the test of time but also becomes an iconic representation, evoking the essence and emotions of Los Angeles..

Quick jump to learn more
Discover & Define
Who are taking buses?
How is the current bus rider experience in LA?
How are other cities doing with their public transit experiences?

Since the public transit experience is a broad and complex topic, I began by gaining a contextual understanding through three main questions: Who are taking buses? How is the current bus rider experience in LA? And how are other cities faring in terms of their public transit experiences, and what lessons can be learned?

Research domestic & global best practices + Get inspiration of future transportation concept
Desk Research
Experience the LA bus journey from a rider's perspective to gain a deeper understanding of its pros & cons
Field Immersion
Conversing with local riders at the bus stop & on-site surveys through intercept interviews
User interviews & surveys
Key problems finding
1. The signage is overwhelming & unhelpful

Los Angeles bus signage lacks clear and intuitive messaging, leading to extra time and effort for understanding. Additionally, the presence of multiple bus systems, such as Metro, BigBlueBus, and LADOT, introduces diverse branding and signage, adding to the complexity.

2. Many riders are unaware of available amenities, necessitating the use of multiple apps to access the required information.

During our research, the first/last mile proves to be a significant challenge, discouraging riders from choosing buses. However, there are several underestimated amenities that could address this issue. Moreover, unfrequent riders and tourists often find themselves have to navigating between multiple apps to plan their bus journeys.

3. The current bus signage lacks attention to accessibility and multilingual needs.

Accessibility needs at bus stops are insufficiently addressed; approximately 80% lack a push-to-talk feature, with inconsistent functionality and varying button heights, some inaccessible to wheelchair users. Furthermore, the design lacks universality and inclusivity, posing challenges for foreigners to comprehend.

User Segments

Since we are designing for public bus shelter. It’s crucial to map out all different type of user groups to understand their needs and goals, like daily commuters, familiar with the route, prioritize goals such as punctuality and safety in reaching work or school. In contrast, tourists and infrequent riders may require assistance with way-finding and trip planning. Additionally, considerations for elderly individuals with low eyesight and disabled individuals necessitate unique care and support tailored to their specific needs.

Design Goal
Making Los Angeles more livable for anyone using public bus transportation.
Reflecting on Research
How might we design a clear and reliable bus schedule to ehance rider safety and reduce waiting times?
Problem 1:
Complicated & unhelpful transit signage
How might we improve the convenience of accessing information and navigating the city for bus riders?
Problem 2:
Not easy to access related services & info
How might we enabling a more inclusive and universal riding experience of all types of rider?
Problem 3:
Accessibility needs are not very well 
Design Strategy
Based on the city’s requirements and previous insights, the design strategy merges. The E-ink display as a public amenity at each bus shelter to provide clear and inclusive live bus schedule information for everyone. Additionally, introducing a mobile solution to serve as a support tool, offering additional related information and personalized functionality.

02. Develop

With all the key takeaways and insights in mind, these served as a solid foundation as we proceeded to develop the actual design. Now, let's explore the process of its development for all touch points.

Design Process - Live Bus Transit Display

The E-ink Display will be installed on the bus shelter structure, and its primary purpose is to provide real-time bus information for the riders at each bus stop.

For the very first round of exploration, I would say we primary focus was to figure out the product's mental model determine the types of content that would be valuable to a diverse range of users. Like I have all transit related info on the top screen, and developed additional rider-specific content that could slide in and out, catering to various user groups

By identifying 'must-have' and 'nice-to-have' features, it help me effectively prioritizing the essential content features for the MVP version

Simultaneously, we continued iterating, testing, and gathering feedback from clients to refine our design. Looking back right now, despite the simplicity of interactions on the E-ink display, we really ensuring focusing on inclusivity, readability, and technical feasibility for the E-ink

Final design - Live Bus Transit Display

In Default

The top screen displays local weather and city news, and when a bus is arriving, it takes over the top screen.

Other Modes

Web App

The City of Los Angeles has expressed interest in our design services for a web application. This web app serves as an support tool to enhance the functionality of the E-Ink displays on the bus shelter. Notably, our client has not imposed specific limitations on the features or services to be included in the content. During the design process, our primary challenge emerged: the market already hosts a plethora of transit and widely recognized map applications. This led us to a pivotal question: what unique experiences and features can we introduce to enhance the journey of LA bus riders?

I start by examining three product categories:

- "Universal" experiences for daily travel, covering both short and long distances. This helps us avoid duplicating existing solutions.
- Local transit and discovery apps specific to Los Angeles, giving us insights into the local market.
- Official transit and discovery apps from other cities, serving as references for best practices.

This exercise clarifies the market, helping us find opportunities and our unique position.

Using the positioning matrix, we can clearly identify and visualize gaps in the market. We've observed that most apps either focus solely on transit and route planning or on city discovery. While Google and Apple Maps excel in route planning and city discovery, they may not well cater carless bus riders. As a result, we've positioned ourselves as providers of a seamless transit experience in Los Angeles, catering to a diverse range of users. Simultaneously, we enhance the convenience of exploring local points of interest nearby, creating a unique value proposition in the market.

Based on the pain points we summarized earlier and tying back to our three "how might we" statements, I organized all possible feature ideas into three categories: 1. Transit: This includes features that could enhance the convenience for carless riders to reach their destination. 2. Discover: These are features designed to assist unfamiliar riders and those with special needs in exploring the city and accessing available services within one platform. 3. Inclusive: Multi-lingual and accessible services to make our experience more inclusive and universally accessible.

Drawing from our feature ideation, we've outlined three core features for the web app: the Transit home page, the Discover LA page, and other/customization page. We've also taken into account of providing a user-friendly onboarding experience to educate first-time users.

I conducted four rounds of iterations on the homepage to improve the visual hierarchy and emphasize key information. The focus was on helping users quickly understand the purpose of this app and drawing attention to the search field, as well as be able to bookmark their bus lines and destinations.

Final design - Web App

Web app provides detailed bus transit info and nearby POI suggestions in Los Angeles without downloads or account creation, helping users make the most of their waiting time and explore the city.

Search & Save Real-time bus info

First we have the real-time bus info that visually align seamlessly with our E-ink display, allowing users to search for and save favorite destinations and preferred bus lines for future access. This empowers all riders to conveniently check and clarify the status and information of their chosen bus lines.

Trip Planning & Transit Companion

For riders who require more assistance, we introduce the Transit Companion feature. This feature ensures that riders can fully enjoy the entire route with peace of mind, as our system consistently provides reminders of their current location and upcoming steps.

Discover amenities & POI

The Discovery feature provides riders with access to public amenity services and highlights points of interest in LA using LA Tourism content, along with bus routes to reach them—all conveniently available on one platform.

Explore along the trip

Tourists and event attendee who willings to explore the city, can also discover cool stuff along the bus route make the most of your time.

Other features

Responsive design for other devices

Given that this is a web app, it's essential to design it in a way that ensures scalability and a seamless experience across various devices, including tablets and desktops.

Content Manage System

And then lets talk a bit on the CMS design. So Content Management System is a tool that allowing clients to efficiently control and manage all assets and data about bus amenities in one central location. To kickstart the design process, we gather key feature sketches from our clients. These sketches serve as a foundation, helping us grasp the overall content and feature requirements for the product. Our primary objective is to define the navigation layout, create an intuitive user experience for the core features, and establish a clean, approachable, and user-friendly visual language.

I began by creating the high-level information architecture for the CMS, which aided in structuring the hierarchy and providing a clearer visualization of the system's entire content.

In consideration of the IA map, I end it up go with the first navigation layout option. This choice was made because it optimally conserved space for the main content and minimized cursor movement, perfectly aligning with our goals of efficiency and functionality.

Once the system's structure and layout were established, I delved into determining the appropriate look and feel for a management tool. Using moodboards and inspirational references, I crafted a clean, approachable, and user-friendly visual language for the system.

To boost efficiency and ensure consistency for client to build the whole product, I crafted a comprehensive component library featuring over 60 components. I also created variants for each component, allowing users to easily adjust properties on the side to modify the state of that component. After we hand off to clients, they like it a lot how convenient it is.

Final design - CMS
Beyond UIUX contribution, I've also challenged myself by taking on branding and graphic design works...
Brand Identity for "LA BUS STOP"

The client want to rebrand the entire product under their own name, incorporating their distinctive visual and branding elements that will be consistently applied to all STAP project touchpoint products. Our team is responsible for delivering both the brand's visual identity and recommending a suitable brand name.

GEO: Geometry & Geography
Inspire from the map grid pattern. Connect With the City; Landmark; Transpiration; Geography and Neighborhoods in LA.

Logo + Dayamic animation

Pattern + Dayamic animation

Image & Pattern usage

Application (Web & Poster)

Although my initial approach wasn't ultimately used, I still like it a lot and reflects the playful and excitement side of Los Angeles and demonstrates my ability to independently create innovative brand strategies. Therefore, I'd like to provide an opportunity to showcase it!

With the city feedback, we iteration the brand style to be more reliable and long-lasting, but still remain the dynamic, vigorous and Excitement side of LA.

Let's take a look at the final brand identity and its application!

Final Brand Identity - LA BUS STOP

‍The LA BUS STOP brand logo draws inspiration from the distinctive shape of a bus shelter, elegantly incorporating the brand name within its design.

We've made some strategic choices, especially when it comes to color. Our primary, green core color is all about simplicity and clarity, providing high contrast for easy recognition, they can be great when showing functional / utility touch points.

But we also know that LA is a energetic and excitement city, so we've incorporated secondary bright colors to add that extra punch. They're perfect for use in promotional and marketing content, helping us convey the lively spirit of the city.

This summarizes my contributions to STAP. I'm incredibly proud of my deep involvement in the design of this impactful project and I'm very excited to see how it will unfold next year (2024)!
My learning through this project

Be proactive in sharing your design progress and seek timely feedback from both internal and clients

In complex projects involving multiple external partners, such as STAP, blending digital and physical elements, staying on the same page is absolutely key. Regular updates, confirmed information, and get timely client feedback will large help prevent redundant tasks. While surprises can still occur, But they serve as valuable takeaway.

Always make inclusive design & accessibility top priority when developing public amenity products

When we're creating stuff like bus shelters for everyone to use, prioritizing inclusivity and accessibility is paramount. These amenities serve a diverse range of people, making it crucial to address various needs. It’s important that we Conduct thorough research and field studies to uncover pain points and observe user behavior. In the meanwhile, keep testing in different situations to catch problems early. It's all about making sure our designs work for everyone

DesignWorks LA studio IXD team

My experience with DesignWorks was a journey marked by continuous learning, valuable connections, and a spirit of bold creativity. Amidst a team of supportive and kind-hearted colleagues, I embraced the opportunity to explore new domains, pushing the boundaries of my capabilities.

Thanks for

Quick jump
OverviewDiscover & InsightE-Ink DisplayWeb AppCMSBrandingLearning