About the project
Foothill Transit’s legacy website presented major usability challenges. Navigation was confusing, real-time tools were hard to access, and key content was often buried or difficult to use, particularly for riders with limited mobility or digital fluency. Many users became frustrated and turned to customer service instead of relying on the site. Internally, the platform didn’t reflect the agency’s values or forward-thinking mindset, and it lacked the clarity needed to build rider trust and confidence.
The redesign aimed to create a more accessible and intuitive experience across devices. The process began with eleven stakeholder interviews, which revealed friction points across departments. Navigation was overly complex, key tools were buried, and content lacked clarity for both internal and public audiences. There was a strong push to ensure the new site could promote ridership while reflecting Foothill Transit’s mission and community role.
User journeys were mapped to capture the needs of different rider types. First-time users, in particular, expressed uncertainty about how to prepare for a trip, how to pay, and what to expect while riding. Across the board, there was an expectation that real-time tools should be accessible from anywhere, not hidden behind multiple clicks.
Informed by these insights, a revised sitemap was created to streamline the experience. It introduced clearer pathways for core actions, a “Bus Basics” section to support new riders, and dedicated areas to spotlight technology, sustainability, and service to the region. Wireframes were developed to define key interactions, including the trip planner flyout, route maps, bus timetables, articles, and a modular content system designed to support future flexibility after handoff. These early structures also informed low-fidelity prototypes and storyboards, which helped illustrate user flows, reduce ambiguity, and shape onboarding elements like location prompts, pagination, and tooltips for key features such as real-time arrivals and accessibility info.


High-fidelity UI designs were created, establishing components that respected brand cohesiveness while introducing a clear color and typographic system to support intuitive use. The Trip Planner was rebuilt to live in a sticky footer for persistent access, with a simplified two-step flow: select a start and end point, then choose a departure or arrival time. Users could also toggle between external planning tools like the Metro (MTA) and Google Maps based on preference. Real-time bus arrivals were surfaced automatically through location access, with autocomplete available to help riders quickly find any of the 39 lines. The alerts system was redesigned to allow users to view, filter, and subscribe to service updates by route, location, or proximity—giving them the tools to plan ahead confidently.
To support consistency across the experience, a comprehensive design system library was created. This ensured alignment with Foothill Transit’s brand standards while providing a flexible foundation for future iterations and content expansion. I created high-fidelity prototypes to communicate scroll-based microinteractions and component animation, helping ensure the experience felt responsive, fluid, and polished across devices.



The result was a dramatically improved rider experience, one that felt modern, intuitive, and accessible from the start. The new site not only made trip planning and navigation simpler, it repositioned Foothill Transit as a rider-first system that’s both reliable and forward-thinking. The project was honored with Best Mobile Visual Design and Function recognition, underscoring the impact of the work in both design quality and user value.
