This project is a redesign of the current Dublin Bus App. Students, both international and local, have expressed frustrations with the local public bus system’s mobile app. In this project, we conducted primary and secondary user research to propose a new interface aimed at eliminating the major pain points expressed by users.
Dublin Bus is the sole public bus service for the Greater Dublin Area. In 2011, Dublin Bus released their own app to provide users with real time information on bus schedules and routes, including journey planning and fare calculation features. Since then, the app has accumulated over 1 million downloads. However, as students who commute to class on the bus, we found the experience of using this app to be frustrating, and we quickly realized we were not alone. The app has received 1.8/5 and 3.7/5 star ratings on the Apple App Store and Google Play, respectively. The negative feedback inspired us to dig deeper into the app’s issues and propose potential solutions.
I conducted secondary research on public transit users in Dublin and Ireland as a whole to get a better understanding of the target users of Dublin Bus App. According to the Irish Central Statistics Office:
We collected user reviews from the Apple App Store and Google Play to gain insight on what users like and dislike about the app. We then organized that data into an affinity diagram using FigJam. This allowed us to identify common pain points and opportunities for improvement.
We used Google Forms to conduct a survey of current Dublin Bus App users to better understand how they use the app and what their pain points are. The survey was distributed to Dublin-based students ages 22-29, the largest demographic of passengers. Below are some of our findings:
What is your preferred search method?
What features do you use on the Dublin Bus app?
What other app(s) do you use for planning your bus journey?
What are your frustrations while using the Dublin bus app?
Ease of navigation was a common concern among users. When recreating the sitemap for the current app, we noticed some inefficiencies. In order to find information about a certain route, users have to enter stop numbers or route numbers multiple times, indicated in dark purple below. Additionally, some functionalities simply do not exist on the app anymore, seen in red.
For our redesign, we proposed the following layout. We wanted to minimize the number of times users have to input their route information and eliminate all dead ends. We also added a feature that was requested in the app store reviews, which was to set an alert for an upcoming bus.
We decided to create our wireframes in Figma so we could prototype and test the basic navigation of the app. This allowed us to make adjustments early on based on how current users responded to our redesigns.
The Dublin Bus has its own branding beyond their mobile app. For this project, we decided it would be best to stick to their current brand identity to replicate a real-life client experience. Dublin Bus uses Helvetica for all their branding with a black, yellow, and blue color scheme. We used a slightly darker blue to improve contrast with text, as their current blue did not meet accessibility standards.
Dark mode is an option on both iPhone and Android devices. Major navigation apps such as Google Maps and Apple Maps provide light and dark mode options. In order to align with the standard of major map and journey planning apps, we created light and dark mode options for our version of the Dublin Bus App. We used Material Design’s guide on Dark Theme to create our dark mode color palette.
Our prototypes were uploaded to Useberry in order to conduct remote user testing. The test consisted of a clickable prototype and a series of survey questions. We sent it to current Dublin Bus App users between the ages of 22-24. We set up the following tasks for users to complete, based on our survey responses for the most used features on the app:
Completion for each task was defined one of two ways, depending on the task and whether there were multiple ways to complete it:
Throughout the test, we asked users whether the last task was confusing. We also asked the following questions at the end:
Overall, users preferred the redesign over the current app. All users indicated that the redesign was easier to use. While we received a 100% task completion from all users on all the tasks, many noted their confusion on the Search Near Me and Favourites screens. Their main issues on the Search Near Me screen were that the bus stops were not distinguishable from the location marker and there was no visual indication that the search bar was disabled. On the Favourites page, the delete button was very low contrast and hard to see.
With this input, we redesigned the two screens and retested the new designs on a new set of users. In this new round of testing, none of the new users cited the above issues.
Homepage:
The in-app experience begins with a search screen that is more reflective of modern transit apps. Users can use the dropdown to search by different methods. The default search method is by route, as 50% of the users we surveyed preferred this method. Users can search for stops along a route and find the real time information.
Search by stop:
The user can also search by stop number or address. This combines the functionality of the search by stop and search by address buttons on the original home page, as both actions require users to provide a location.
Setting alerts for upcoming buses:
When a bus stop is selected through any search method, users can set alerts for upcoming buses, as requested by current users on the Apple App Store. Stops can also be added to Favourites from this screen, just like in the original app.
Search Near Me:
Users may also find stops through the near me option, which disables the text search and expands the map to show nearby stops. They can select a stop to see its number and go to its real time information.
Dark Mode:
Dark mode is set according to the user’s device display settings, like Apple Maps does. Here is a glimpse of what the dark mode display looks like. The yellow and blue accent colors remained but more grey colors were added to the color palette, per the Material Design’s guide on Dark Theme.
