Menu
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.
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)
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 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?
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.
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.
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.
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.
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.
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.