Multidisciplinary Designer
Mission Bay Shuttle Website Redesign
Digital • Spring 2024
I collaborated with a team to reimagine the Mission Bay Shuttle website, transforming it from a basic informational site into an intuitive digital experience. Our team dove deep into understanding user pain points by conducting interviews with both shuttle riders and the original website developers, which gave us valuable insights into both user needs and technical constraints.
Using Figma as our primary design tool, we crafted a comprehensive redesign that focused on making shuttle information more accessible and the journey planning process more straightforward.
The final design significantly improved the user experience by streamlining the navigation, implementing a more intuitive route planning interface, and creating a cleaner, more modern visual aesthetic. This project demonstrated our team's ability to collaborate effectively, understand stakeholder needs, and deliver user-centered solutions that balance both functionality and visual appeal.
Main Weaknesses of the Mission Bay Shuttle Website
Finding shuttle routes should be simple, but the scattered placement of this essential information forces users to hunt across multiple pages. Most notably, the clinical design lacked warmth and personality - missing an opportunity to build trust with the community it serves. These pain points create unnecessary friction in what should be a straightforward service website.
Timeline Overview
Our Mission Bay Shuttle website redesign followed a structured UX process to ensure thoughtful, user-centered solutions. We began with ideation and crafting a focused design brief to establish clear project goals. This foundation led us into information architecture, where we developed site maps and user flows, identifying critical red routes that would guide our design decisions.
With our core structure in place, we moved into prototyping and conducted quick hallway testing to validate our initial concepts. The process then evolved into high-fidelity wireframes, allowing us to test more polished interactions through medium-fidelity prototypes. Our final phase centered on comprehensive usability studies, providing valuable insights that shaped our final design decisions.
Paper Wireframes
Paper Prototype
Key insights and recommendations from Hallway Testing
Our hallway testing uncovered critical navigation issues that shaped our redesign approach. Users struggled to locate key features, revealing fundamental flaws in our initial navigation structure. This quick feedback proved invaluable in identifying early usability concerns.
The sign-in process emerged as a major friction point, with users questioning its necessity. Their feedback prompted us to reconsider the entire authentication flow, suggesting that removing account requirements might better serve our users' needs.
A clear pattern emerged around visual communication preferences. Users consistently gravitated toward visual elements, demonstrating the importance of incorporating icons and imagery to enhance navigation clarity. This insight guided our design decisions toward a more visually intuitive interface that better aligns with user expectations.
Medium Fidelity Prototype
Key insights and recommendations from Usability Studies
Our usability study revealed crucial insights that shaped our redesign decisions for the Mission Bay Shuttle website. The color scheme created confusion around interactive elements, with users attempting to click on non-clickable items while missing actual buttons. This highlighted the need for clearer visual hierarchy and interaction design.
A significant pain point emerged around accessibility features. Users struggled to locate these essential tools, with many failing to recognize the standard accessibility symbol. The discovery that users expected these options under a settings menu provided valuable direction for improving navigation patterns.
The site's user flow proved more complex than anticipated, with participants taking longer than expected to complete basic tasks. While the navigation seemed logical to our team, real user testing exposed gaps in our assumptions about user behavior. These findings reinforced the importance of user-centered design and iterative testing in creating intuitive digital experiences.
High Fidelity Prototype
What did we learn?
Our usability research revealed crucial lessons about user behavior and design effectiveness. Users rely heavily on visual cues to navigate interfaces, making it essential to establish clear distinctions between clickable and non-clickable elements. This insight reinforced the fundamental principle that visual design must prioritize clarity over aesthetics.
Accessibility Insights
The conventional blue accessibility symbol surprisingly proved less effective than anticipated. Users naturally searched for these features within settings menus, highlighting how mental models often differ from designer assumptions. This discovery led us to rethink standard accessibility conventions in favor of more intuitive solutions.
Navigation Principles
Simplicity emerged as the cornerstone of effective navigation. While we initially aimed for comprehensiveness, user testing demonstrated that straightforward paths with clear visual aids and consistent patterns better served user needs. The integration of familiar icons and photos significantly improved navigation confidence.
User Expectations
Perhaps most importantly, our research reinforced the value of early testing. The gap between designer assumptions and actual user behavior became evident through hands-on testing, proving that user expectations should drive design decisions rather than internal team perspectives.