Menu
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
Colette Becker
Yizhen Guo
Christine Wei
Shayne Shen
Interaction designer
Figma;
Photoshop;
Illustrators;
After Effects
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.
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.
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
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
A CMS tool that allowing staffs to efficiently control and manage all assets and data in one central location.
Quick jump to learn more
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 moreSince the public transit experience is a broad and complex topic, I began by gaining a contextual understanding through two main questions: 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?
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.
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.
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.
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.
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.
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
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
.png)
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.
Once we had our positioning and goals in place, I began brainstorming potential product features that aligned with our approach. My primary focus was on generating ideas for features that could enhance the experiences of individuals in Los Angeles who rely on public transportation, also considered how are some services could make our experience to be 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.
During the initial phase, our approach was to maintain content consistency on the E-Ink display while introducing search and filtering features on the primary Live bus home page. However, following our client's feedback, they encouraged us to think more innovatively, pushing the boundaries of what's possible. They encouraged us to shift our perspective from a one-size-fits-all approach to a more personalized approach, focusing on individual rider experiences. This entails tailoring information to prioritize their specific destinations and preferred bus lines, providing a more customized and user-centric experience.
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.
Live Bus Home Page
On the Live Bus Home page, users can save their favorite destinations and preferred bus lines for convenient in the future. Additionally, they can view information about nearby upcoming buses, points of interest, as well as recent notifications.
Bus route flow
While you're on your journey, we're not only giving you directions, but we're also helping you discover cool stuff nearby. So, while you wait for your bus, you can explore the city and make the most of your time. This is what sets us apart from the other competitors.
Search & Results
Users have the flexibility to search by destinations, bus lines, and bus stops, enabling our riders to obtain results that guide them to their desired destination via the Los Angeles public bus system.
Other features
Here are some other features and information: Explore all points of interest on the "Discover LA" page. Check all notifications in the "Notification" page. Adjust language settings in the "Language" page. Report any issues or provide feedback through the "Contact Us" page. View all updates, alerts, and messages in " Notification" page.
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.
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.
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.
.png)
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
.png)
Image & Pattern usage
.png)
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!
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.
.png)
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.
.png)
.png)
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
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.