UC San Diego
Shuttle Website
June 2017


This was done as a final project for a design course (DSGN 1 - Design of Everyday Things) at UC San Diego.

Duration: 3 weeks

Team Members
Akanksha Kevalramani, Alia Awni, EJ Ozyazgan, Jessyca Beksa, Lee Anne Mercado

Platform: Mobile Web Application

The Problem
Students were not able to take full advantage of the UC San Diego Shuttle System because the current interfaces to the shuttle system, such as the mobile app, the website, and the physical bus stops, made the shuttle system difficult to discover and understand for those who are new to the system.

My Role
• Helped conduct user interviews and then analyze the data
• Created the lo-fi wireframes as well as the high-fi mockups
• Helped in the documentation of the project

User Research

Problem Finding - Part 1 (Narrowing Our Focus)
We knew we couldn't focus on redesigning all interfaces of the shuttle system including the website, the mobile app and the physical bus stops all in 3 weeks. Hence, we decided to conduct user research to determine which interface redesign would benefit the whole system more. We conducted user interviews with students and faculty on campus using the master-apprentice model. We learned that one of the biggest pain points in the current system was not being able to learn about new routes efficiently. Current interfaces did not encourage route discoverability and 65% of users said that they learn what routes to take based on word of mouth which is an inherently slow and ineffective method of learning information. We concluded that redesigning the website would have the greatest impact on shuttle usage because users wanted the flexibility to be able to get information from anywhere instead of having to go to a bus stop to learn about a new route. The need for easy access to information is also the reason we targeted the mobile version of the website specifically.

Problem Finding - Part 2 (Discovering Problems on the UCSDBus Website)
We conducted a second round of user interviews to help us understand the pain points in the current UCSD Shuttle Website. We asked our users to "find the route and bus stop names that will go from Muir to Scripps.", without giving any other hints or additional answers to their questions regarding this task. We did this because users are generally looking for route options from Point A to Point B instead of from Stop A to Stop B and we wanted to test whether the current website allowed for this kind of flexibility. We discovered that there was a large gulf of execution as well as a large gulf of evaluation throughout the process, especially for first time users.

The designers of the current website probably designed the homepage to list all the routes to provide immediate information for users. The downside of this trade-off is that this layout is not user friendly for new users because they do not have prior knowledge of what any of the routes mean so being prompted to choose one right off the bat is very confusing for them.

It was especially difficult for beginners to efficiently use the website because the user needs previous knowledge of the routes. Additionally, people felt more perplexed by the provided information than informed. As a result, we decided to focus our redesign on recreating the website to be effective for both frequent and new users of the shuttle system by increasing route discoverability and maintaining easy access to information related to frequently used routes.

Competitve Analysis

We researched other public transportation applications currently on the market and took a note of what they're doing well such as the Google Maps Mobile App, MTS Mobile Website, Transit Mobile App, OneBusAway Mobile App. We then compared these products against each other based on the following criteria that were most important to users: smallest amount of prerequisite knowledge of the shuttle system required, information clarity, system familiarity, fastest at suggesting routes, personalized experience and route discoverability.


Lo-fi Wireframes
We had a brainstorming session where we followed a double diamond process. We chose to include features that would allow us to create the most complete user experience. A search function, color coded region map, and position tracking allowed the best functionality for new users, since these three features afforded route discoverability and low pre-requisite knowledge of routes. We also chose to incorporate a favorite routes feature into our redesign for returning users, who would like to quickly access the information they need. The previously mentioned three features would also benefit returning users looking to take a different route.

We iterated on our lo-fi wireframes multiple times. The first time we had a sketching session where we individually drew out our versions of the redesign which incorporated all the features we decided on. Once we were all finished, we came back together as a group where each person talked us through their design decisions and tradeoffs, and as a group we decided what we liked about each design. Then we started brainstorming together on the next iteration of our final redesign, drawing inspiration from all the things we liked from the individual sketches.

Hi-Fi Mockups
For our high fidelity prototype, we designed the screens on Adobe Photoshop and used InVision to create an interactive mockup. As we designed the screens we tried to use colors and typography that aligns with the branding of UC San Diego and we tried to use design practices that users are familiar to in other mobile applications. Click here to see our prototype on InVision.

Design Space
Lastly, we graphed our final redesign against all the products in the current design space to see how we ranked and we were very close to Google Maps and much higher than the current UCSDBus Website.

Business Logistics and Scope

As Professor Meyers mentioned in class, “companies want results” and for that they are willing to invest time and money into whatever would bring them more customers. We believed that UCSD will be willing to invest money in redesigning the UCSD Shuttle Website because as we found through our user research, it is the most impactful interface to the shuttle system. Not only will having a better interface for the website encourage new users to use the existing shuttles but also it will better the experience of the current users, contributing to increased student satisfaction rates at UCSD.

Although our redesign is a large improvement over the current system, there is always room for improvement. In the future we would like to make the navigation more intuitive and easier for new and returning users. We would also like to further optimize the experience for new users. To do this we would like to do user interviews and conduct further testing to see how people interact with our redesign. Once we have collected more data we could once again iterate on our solution. We would also consider redesigning the physical bus stops as well, since, as we mentioned earlier, we believe their design also contributes to low usage rates of the shuttle.

Click here to read our entire project .