The BriefResearch & ProblemGoal & SolutionDesign & TestingTakeaways

Goo Trans

#Class Project #UI Design #User Research #Bus Stop Interface

An interactive bus stop panel that provides a better transfer experience for passengers who need to take different kinds of public transportation.


Emma Liu, Hsin-Yi Lin, Tzu-Chi Lan

My Role

UI/UX Designer, Visual Designer


Feb. 2020 - Aug. 2020

Tool Used

XMind,, Adobe Illustrator, Figma


Project Background

In the mid-term plan of the Transportation Bureau of the Taichung City Government,  Wuri ( 烏日 ) Transit Center will build as an important transportation hub, connecting the two major public transportation systems surroundings ─ MRT and bus transport stations to provide passengers with comprehensive mass transit services.

However, although Taichung currently has more than 700 bus stop panels, most of them still use non-interactive panel or paper lists, which cannot effectively simplify important information and provide it to passengers in real-time. We want to create an interactive bus stop panel for a new transport hub to reduce passenger transfer costs between different public transportation and increase the public transportation transfer rate.

Design Process

Conduct Research to Understand Opportunity and Users' Pain Point

Current Situation Analysis

According to the 2018 municipal statistical analysis updated by Taichung City Office, the public transportation system is not the most commonly used transportation vehicle for the citizens. As you can see in Figure 1, the current utilization rate of public transportation is about 12%.

However, after the Taichung city government announced that taking the bus is free of charge within ten kilometers and improved the bus network, more and more people began to use public transportation systems. Meanwhile, it can be found in Figure 2 that the number of passengers using the Taichung Railway has also been increasing year by year. We think that the demand for public transportation will keep growing in the future.

Figure 1
Figure 2

Pain Points

While the demand for public transportation, especially the bus, seems to be increasing, we found that passengers rarely used buses to travel between the city and the transport hub in the suburbs.​ After conducting the survey with 20 passengers, we discover two main problems during the transfer process.

Therefore, the reason wasn’t the price of tickets or a lack of buses; rather, it was that transfer information could not be easily obtained. More specifically, the timetable font at the station hall was crowded and small, and some information was placed above the bus stop panel outside the station. Both were hard for passengers to see.

Problem Statement

Provide An User-Friendly Interactive Bus Stop Panel


In order to effectively solve the problems mentioned above, we want to design a new interactive bus stop panel to improve the existing bus stop of the Wuri ( 烏日 ) Transit Center. By applying a touch interface and user-friendly design, passengers no longer have to passively receive the information, but interact with the transport information by themselves.

Stakeholders' Concern

We also found that there were five important stakeholders: Government, passengers, cooperative transportation units, related manufacturers, and media involved ​in the whole transfer process and the setting of the new stop.
We want to understand the needs of each stakeholder, evaluate the concerns of them, and consider the related risks and conflicts that may arise during cooperation, so as to prevent problems in advance and establish a good and long-term cooperative relationship.


A single, organized bus stop panel

  • A platform that integrated the transfer information of bus, train, metro, and shared bike.

  • Actively interact with the panel without being overwhelmed by tons of information.

  • Place at the bus stop at the exit of the high-speed rail station and put the bus information on the homepage.

  • A QR code to provide real-time feedback.

Effective and efficient searching process

  • A function to search for a specific route.

  • A function to plan your trip to a specific destination.

  • Provide mutiple searching methods to meet the need of different passengers.

  • When searching for a shared bike, provide the distance and the number of bikes left.

  • Recommend nearby tourist attractions after searching.

User-friendly and visually-appealing design

  • Design that can easily navigate the application.

  • Put important information at a height parallel to the user's line of sight, and place the buttons within the range that most users can reach.

  • Build consistent and clear visual elements.

Balance between user, design, and business

  • Use current panel to reduce construction cost.

  • Evaluate the panel price, maintenance costs, and electricity cost before implementation.

  • Replace the area that passengers can not easily access on the panel with advertisements to make profits.

Design Process

Create UI Flow To Decide The Main Function

For starters, we created the UI flow and listed the three main functions and pages for this project, including: search for the bus routes, search for different kinds of transportation, and other functions, such as using QR code to provide feedback.

Draw Flow Chart To Clarify The Way User Interacts With The Interface

To better understand how we would construct the experience for the interactive bus stop, we designed a flow chart. We focused on the experience and needs of the user instead of the details that we would solidify later on. It also allowed us to communicate the entries and exits more clearly.

Design Low-Fidelity Wireframe To Visualize Layout And Functionality

We formed an ideal user journey on the bus stop panel in the previous steps. Now we tried to sketch out our wireframes and figure out how to connect each page. The size of the wireframe is based on the size of the existing stop panel (91 cm * 28 cm) at the Taichung High-Speed Rail Station.​​​​​​ The bottom of the panel is one meter off the ground and the top area of the panel is for the advertisement since it cannot be touched easily.

Iterate The Project Through User Testing

We ran user testing on the lo-fi prototype with several participants to better understand their interaction patterns. We found that:

Detail for unconventional interface

Some of the buttons are too high. Bus stop panel is not a conventional interface such as mobile or desktop so the main interaction area should be somewhere users can easily reach.

Need more input methods

Originally, we only design one input method. However, some people may have difficulties typing. We should also include other input methods such as handwriting or voice input.

Main Features & Final Design Based On Users' Feedback

Basically, the visual design is the screen-by-screen pixel-perfect visualization of the wireframes in detail. This part is all made by myself with Figma. Orange, white and gray were chosen as the main colors because they are also the main color of Taiwan High-Speed Rail and the icons were kept light to make the page look simple.

Visual Element


Expected Result

Expected profit

Take the establishment of five stop signs as the standard. After evaluating the panel price, maintenance cost, and electricity bill, it costs about $12221 to set up the panel for the first month and $4240 per month thereafter. And the estimated advertising cost for each board is $880/month, so the income that can be obtained from this setting is $4400/month, which requires ten months before breaking even.

Expected bus traffic

We hope to increase the bus transfer rate by 5% and the annual bus traffic by approximately 600,000 passengers. In this way, the annual bus traffic in Taichung City can exceed 140 million passengers.

Reflection & Future Plan


01. Design for unconventional interface

I found that different from common devices, there were more factors to consider when designing this bus stop panel. We needed to know the height and width of the bus stop panel. Try to put important information at a height parallel to the user's line of sight, and place the option buttons within the range that most users can touch, to provide the best user experience. I learned to carefully consider the actual situation when designing, and think about the most accurate method to convey messages to our users.​​​​​​​

02. Stakeholder matters

This project involved many stakeholders, including passengers, city government, transportation units, related manufactures, and media. To design the best product, we needed to take every opinion into account. For example, since the government cared about budget control, we evaluated the panel price and maintenance costs, and replaced the area that passengers can not easily access on the panel with advertisements to ensure the implementation cost of the new design can break even within ten months.