Projects

Projects

Transit App Redesign

Transit App Redesign

A phone displays search results for a bus route. Best results are flagged.
A phone displays search results for a bus route. Best results are flagged.
A phone displays a map that indicates a walking route with a dotted lines. More details are shown on the drawer.
A phone displays a map that indicates a walking route with a dotted lines. More details are shown on the drawer.

As part of a design challenge, I worked with a partner to propose a redesign of the Transit app. We were interested in exploring how we could leverage data the app is already collecting about routes and stops to create a more informed public transit experience. User interviews and competitive analysis helped us to identify areas where users were leaving the app and redesign them. These proposed redesigns were positively received by current users.

Role

UX for Navigation

Key Skills

Competitive Analysis

Timeline

4 weeks

User Research

We conducted 3 semi-structured interviews discussing current users’ experience of the Transit app. Participants generally used the Transit just to identify times when buses would be at their normal bus stop, preferring to use other apps to plan their route or navigate to a stop. We created a user journey map from these insights.

A user journey map. From left to right, prepare for trip, choose a route, walk to bus stop, follow progress, arrive.
A user journey map. From left to right, prepare for trip, choose a route, walk to bus stop, follow progress, arrive.

Most of our participants preferred to use other apps to identify which route they’d take. They pointed at the imprecise timeline and limited details that could be found in the Transit app.

Users discussed the limitations with the maps and figuring out how to get to and from bus stops. They often use other navigation apps when in an area they are unfamiliar with.

How might we add real-time context to simplify route planning and encourage uninterrupted app usage from transit riders?

Competitive Analysis

In anticipation of a limited ability to test the maps, we chose to conduct an additional round of competitive analysis for our pedestrian navigation tools. There were a few basic features that the other 4 apps had and Transit did not, such as an indication of orientation, written directions, and corrections. Additionally, we noted that these apps generally did not offer pedestrian specific features, with similar experiences to driving navigation. Thus, we would like to further explore further changes to accommodate this and distinguish the Transit experience. You can view the full report here.

Initial Designs

Route Planning

Our initial designs focused on proposing the new features we want to add. For route planning, this meant providing additional information about each route and highlighting key information for users.

A phone shows off search results for a bus route. These routes have flags that indicate "Best Stops," "Fastest," or "Least Walking" with a short description.
A phone shows off search results for a bus route. These routes have flags that indicate "Best Stops," "Fastest," or "Least Walking" with a short description.
This screen shows a pop up while in transit. It suggests an alternative and uses a yellow dotted line to show the new route.
This screen shows a pop up while in transit. It suggests an alternative and uses a yellow dotted line to show the new route.

For the search results, flags are added above different routes to highlight preferred options. While en route, users may see a pop up suggesting alternate routes or busses.

Pedestrian Navigation

For pedestrian navigation, we focused on introducing the base features discussed in the competitive analysis.

This screen displays the pre trip screen for a walking route. The overhead map view uses a dotted line to indicate a walking route.
This screen displays the pre trip screen for a walking route. The overhead map view uses a dotted line to indicate a walking route.
Phone displays a perspective view of a map. A line indicates the route and written directions are displayed at the bottom of the screen.
Phone displays a perspective view of a map. A line indicates the route and written directions are displayed at the bottom of the screen.

This includes step-by-step instructions, a perspective view, and updates as the user moves along their route.

User Testing for Route Planning

User testing involved simulating situations where the users would make a decision based on one of our proposed features. Overall, users responded positively to the additional context, noting that it was helpful in decision making. Feedback focused on taking into account individual user preferences and clarifying wording.

Two phones in the background. In the foreground, 3 pop ups are pulled out. At the top, filters for qualities of routes. Center, a detail box that gives information about times and shelters. On the right, updated pop up text with bolded sections.
Two phones in the background. In the foreground, 3 pop ups are pulled out. At the top, filters for qualities of routes. Center, a detail box that gives information about times and shelters. On the right, updated pop up text with bolded sections.

Pedestrian Navigation Feedback

We were able to get some feedback from users and designers. They responded positively to the changes made and focused on further features, such as adding haptic feedback or other map views. We also discussed adjustments to the way directions were written.

Screen displays an overhead view of a map. Line indicates route and description is writen along the bottom. Buttons for audio and haptic feedback.
Screen displays an overhead view of a map. Line indicates route and description is writen along the bottom. Buttons for audio and haptic feedback.
Phone displays a perspective view of a map. The red location dot is visible. Written directions on the bottom.
Phone displays a perspective view of a map. The red location dot is visible. Written directions on the bottom.

Final Designs

Our final designs incorporated the changes discussed in our testing round and further fleshed out the prototype. Both flows can also be explored in our high fidelity prototype.

Screen displays search results for a bus route. The flags are smaller and to the right.
Screen displays search results for a bus route. The flags are smaller and to the right.
Phone shows off the pop up for next bus suggested. Text is shortened and map shows both bus' icons.
Phone shows off the pop up for next bus suggested. Text is shortened and map shows both bus' icons.
Overhead view of map with dotted line indicating route.
Overhead view of map with dotted line indicating route.
Screen displays an overhead view of a map. Line indicates route and description is writen along the bottom. Buttons for audio and haptic feedback.
Screen displays an overhead view of a map. Line indicates route and description is writen along the bottom. Buttons for audio and haptic feedback.

Evaluation

We solicited responses from user testing participants on the modifications we implemented and, on the whole, they believed their issues were tackled. Across all categories, a majority of users found that the aforementioned alterations aided them in comprehending the supplementary context faster and in making prompt decisions. A handful of participants expressed disfavor for the inclusion of excess information in different categories, which we resolved by incorporating customization options in the current Settings menu.

Reflection

Prototyping navigation features and other dynamic experiences provides a unique challenge.

Maps and other navigation apps are extremely situational, making it difficult to fully test and prototype the features of a very dynamic user experience. This forced us to be creative with how we conducted research and presented prototypes, including more manual prototyping and varied research methods. This opportunity to stretch our skills provided an excellent learning opportunity as well.