Multidisciplinary Designer
Mission Bay Shuttle Website Redesign
Digital • Spring 2024
Working with a team, I helped reimagine the Mission Bay Shuttle's website, elevating it from a basic informational platform to an intuitive digital experience! We worked to understand user pain points by conducting interviews with both shuttle riders and the original website developers, which gave us valuable insights into both the needs of users and technical constraints.
Using Figma as our main design tool, we created a comprehensive redesign that focused on making finding shuttle information and journey planning quick, easy, and more accessible.
Ultimately, our design gently guided users through a smoother experience, making navigation simpler, route planning more intuitive, and the overall look and feel more clean and modern. This project showcased our team's effective collaboration, our careful attention to stakeholder needs, and our commitment to delivering user-centered solutions that balanced both functionality and visual appeal.
Main Weaknesses of the initial Mission Bay Shuttle Website
Timeline Overview
Our redesign of the Mission Bay Shuttle website followed a clear UX process, making sure our solutions were truly centered on the user. We started by brainstorming ideas and creating a focused plan to set our project goals. From there, we built the site's structure with sitemaps and user flows, pinpointing the most important paths that users would take.
Once we had our basic structure, we began prototyping, doing quick “hallway tests” to check our first ideas. This led us to create more detailed wireframes, which we then tested through medium-fidelity prototypes. In our final step, we conducted thorough usability studies, and the insights from those studies guided our final design choices.
Paper Wireframes
Paper Prototype
Key insights and recommendations from Hallway Testing
During our hallway testing, we found some important navigation issues that helped shape our redesign. Users had trouble finding key features, which showed us that our initial navigation wasn't working well. This early feedback was really helpful for catching usability problems right away.
The sign-in process also turned out to be a point of frustration, with users wondering why they even needed to sign in. Their comments made us rethink how people access the site, suggesting that removing account requirements might be better for everyone.
We also noticed a clear preference for visual information. Users consistently liked visual elements, which highlighted how important it was to use icons and images to make navigation clearer. This guided us toward creating a more visual and user-friendly interface that matched what users expected.
Medium Fidelity Prototype
Key insights and recommendations from Usability Studies
Our usability study gave us key insights that guided our final design choices for the Mission Bay Shuttle website. We found that the colors sometimes confused users, as they tried to click things that weren't buttons and missed the real ones. This showed us we needed clearer visuals for interactive elements.
Accessibility features were another big challenge. Users had trouble finding these important tools, and many didn't recognize the usual accessibility icon. Learning that users looked for these options in a “settings” menu really helped us improve our navigation.
The site's user flow was also more complicated than we thought. Participants took longer than expected to finish simple tasks. Even though the navigation made sense to our team, actual user testing revealed gaps in how we thought users would behave. These findings emphasized how important it is to focus on the user and keep testing to create easy-to-use digital experiences. After all this, we made some final adjustments to make everything just right.
High Fidelity Prototype
What did we learn?
Our usability research taught us important lessons about how people use websites and design effectiveness. We learned that rely heavily on visual cues to navigate interfaces, so it's key to make it crystal clear what they can and cannot click, as they’ll try everything you wouldn’t expect. This insight reinforced the fundamental principle that design must always prioritize clarity over aesthetics.
Accessibility Insights
Surprisingly, the usual blue accessibility symbol wasn't as effective as we thought. Users naturally looked for these features in “settings” menus, which showed us that what designers assume isn't always how users think. This discovery helped us rethink standard accessibility ideas for more intuitive solutions.
Navigation Principles
Simplicity was key for good navigation. While we first tried to include everything, testing with real users showed that simple paths with clear visuals and consistent patterns worked much better. Adding familiar icons and photos really made users more confident in finding their way.
User Expectations
Perhaps most importantly, our research confirmed how valuable early testing is. The difference between what we, as designers, expected and how users actually behaved became clear through hands-on testing. This proved that user expectations should really guide our design decisions, not just our own team's ideas.