| Background |

The Kaohsiung iBus real-time bus information service provides citizens with real-time bus arrival times and route details, making bus travel easier. This project enhances inclusivity by improving accessibility for the elderly and visually impaired and adding personalized features to meet diverse user needs.

My Role and Responsibilities

In this project, I led the branding, style, and interface design, focusing on accessibility research and establishing light and dark modes. As iBus is a government project with the Transportation Bureau, we ensured both the website and dark mode comply with WCAG AA standards, enhancing accessibility and competitiveness.

I independently completed the design for both app versions (General and Friendly) and the responsive website, creating a component library for consistent maintenance. Given that visually impaired users rely on auditory cues, I carefully designed component order and optimized user flows. Research and usability testing showed a need for more transportation information, so I designed various transportation maps for a better navigation experience.

I closely collaborated with UX researcher, product managers, and engineers, fully participating in all stages of product development, from problem definition and market research to design and final delivery, ensuring a high-quality product and optimal user experience.

| Why Optimize iBus? |

To enhance the accessibility experience of iBus, the Kaohsiung Transportation Bureau has commissioned us to optimize the product. In this project, we began by studying the relevant standards and designs for accessible products and analyzing the designs and processes of other related products in the market. Subsequently, we developed the design for the new version of iBus and created prototypes to conduct usability testing.

User Feedback and Solutions for the Previous Version

We collected user feedback on the old version of iBus from the App Store and Google Play. After organizing the feedback, we listed the most common issues and proposed improvement solutions for these issues. The organized content is shown in the table below:

Competitive Analysis

We also researched similar products in the market. The selection criteria include a rating of over 4 stars, support for transit transfers and point-to-point planning, and the presentation of transit schedules. Additionally, we paid special attention to whether these products offer accessibility modes and personalization features. After comparison, we propose key differentiation opportunities:

Usability Testing

From the Transportation Bureau data and our preliminary research, we found that 85% of iBus users are commuters who need transfer options and map features. Elderly and visually impaired users require fewer features and simpler interfaces. Thus, we designed and tested the new iBus website and three app versions: Commuter, Easy-Read, and Assistive. The wireframes were created by the UX designer, and I was responsible for the interface design. Below are the design drafts for the usability testing:

Experienced outsourced testers led the usability testing, with assistance from myself and the UX designer in recording the results. The summarized findings are as follows:

94% of respondents (16/17) indicated willingness to download the new version of the app 🎉

Research Summary

• Merged Versions Enhance User Experience

  To meet our target audience's needs, usability testing showed minimal differences between the Easy-Read and Assistive versions. Thus, we merged them into the Friendly version. The new iBus offers two versions: General and Friendly.

• Transportation Data and Map Integration

  Providing data on metro, light rail and other transportation options to help users make informed decisions about rides and transfers. Additionally, offering maps to understand stop locations, bus routes, and current positions, enhancing users' awareness of their location and itinerary.

• Enhanced Personalization and Quick Access Features

  Personalization options include font size adjustment and light/dark mode switching. New features categorize favorite stops and locations for quick access and allow users to set shortcuts, add labels, and reorder items for easier management.

Target Audience Requirements

Elderly Population

Requires large font sizes, large buttons, and a simple, intuitive interface to facilitate easy use.

Visually Impaired Population

Needs a voice reading function to provide product structure information and transportation updates through the audio content.

General Commuters

Focuses on the accuracy of transfer information and transportation details to ensure smooth travel plans.

| What Else Did I Do? |

1/ Solo Design: 2 App Versions and Responsive Website

General Version

Friendly Version

Responsive Website

Redesigning User Interfaces for Enhanced Experience

Preliminary research showed that users found the old iBus interface outdated, unintuitive, unattractive, and complicated. As the sole designer for iBus, I was responsible for all interface and visual design. I independently designed the entire product, including two app versions with dark and light modes, and a responsive website. Usability testing found the new app interface cleaner, more modern, and intuitive, with imagery and block design for easier understanding.

Optimizing Accessibility:
Dark and Light Mode

As a government collaboration project, iBus must meet policy compliance and accessibility standards. The new iBus design includes light and dark modes to enhance user experience. I developed these modes with a focus on improving accessibility for the elderly and visually impaired, ensuring that color choices and font sizes in dark mode meet accessibility standards for better readability and comfort.

• Dark Mode Challenges

  Maintain brand style and color consistency while ensuring element recognition and readability. Avoid making the interface appear broken or elements look disabled during color testing.

Using the yellow boxed area (bus arrival status) as an example, which color combination is clearest and easiest to identify while meeting accessibility standards? Testing determined that Option A was best, as its distinct status allowed passengers to recognize the bus arrival more quickly.

Meet needs: Accessible Font Size and Color

Based on previous research and usability testing, the new version of iBus has met the needs of various user groups in terms of color and font design:

• Clearer and More Understandable

  Require larger fonts and buttons. Use at least 18pt font size and offer multiple size options for easier operation and recognition. Research showed that larger, clearer buttons and text are needed for elderly and visually impaired users. Therefore, in the Friendly Version, we enlarged text, images, and buttons to enhance readability and usability.

Font size design requires careful attention. As shown, I specify font height, weight, and size in the component library and check for layout issues when switching font sizes.

• Dark Mode Contrast

  Ensure a 4.5:1 contrast ratio between text and background in dark and light mode, meeting WCAG AA standards.

2/ Screen Readers Have a Profound Impact on Interface Design

During the process of merging the two versions, special attention needs to be paid to the placement order of the components, as the positioning can affect the reading order.

What Happen?

To maintain interface consistency between the friendly and general modes, despite differing text sizes and layouts, efforts will minimize differences in button placement.

In Fact

In the general mode, route information is presented using a drawer with navigation buttons fixed at the bottom. However, in the friendly mode, we avoid using drawer components due to potential accessibility issues with screen readers. Instead, we place navigation buttons above the route information. This allows quicker access to navigation mode while reading, unlike the general mode where users must finish reading all route details before navigating.

Another example is the station timetable. In the general mode interface, the schedules for weekdays and holidays are fully displayed together. However, in the screen reading system, it reads all the weekday times first before starting to read the holiday times. To help visually impaired users quickly find the times they need, we have made a more user-friendly version where the weekday and holiday times are collapsed. Initially, only 9 sets of weekday times are displayed, and users can choose whether to continue listening to more.

The friendly mode serves visually impaired users, where reading order typically proceeds from top-left to bottom-right. Therefore, interface design carefully considers component placement. For instance, in the friendly navigation, pages beyond the second level include a "Return to Homepage" button beside the back button. This feature assists visually impaired users in reorienting themselves within the product structure.

Why Simplify Processes and Information for Friendly Version?

In the friendly version simplifies processes and information to enhance usability, reduce the learning curve, and improve efficiency. It minimizes confusion and errors, increases accessibility for users with varying abilities, and highlights key information. This design also reduces cognitive load, allowing users to focus on essential tasks.

As shown in the video on the left, you only need to click a few times to complete the task. The images below show the interface differences between the General Version and the Friendly Version across several screens.

Challenge: Different Engineers Have Different Habits

• What Happen?

  Different engineers handle iBus features, and not all use the component library, leading to inconsistent component designs. For example, the Tab component varies across functions and interfaces, and the Friendly Version uses styles and font sizes from the General Version.

• Solution

  Carefully compare the test device with design drafts, clearly marking differences and potential solutions, or discuss issues in meetings. For example, I compare screenshots with design drafts, noting component spacing and font sizes, and explain handling extreme cases like excessive text, to quickly resolve problems.

How Do I Collaborate with Engineers?

• Finding Examples

  We search online for reference materials to assist engineers in adding dynamic elements to the interface, believing visual examples are clearer and quicker to understand than verbal descriptions.

• Design Validation

  During design validation, we compare device screenshots with design drafts. Adjustments are listed clearly, and an Excel sheet tracks fixes, dates, versions, issues, priorities, responsible persons, and links to comparison screenshots. Engineers appreciate this method for identifying and resolving issues promptly.

• Design Adjustments

  Of course, there may still be adjustments needed after engineers complete development. However, directly requesting changes to features already implemented can be frustrating for both parties. Therefore, in our communication, we ensure engineers understand the reasons behind adjustments. For example, user testing results may show a preference for a particular version. Building and maintaining good relationships is crucial in our collaboration.

3/ Design Multiple Maps – No More Tool Switching!

Multiple Maps at One Stop

From previous research and interviews, we learned that users often use other apps for assistance, such as Google Maps, because iBus cannot accurately pinpoint their location, they frequently rely on Google Maps to determine routes and directions. However, they do not use Google Maps exclusively because they believe that iBus, as a government-provided product, offers more accurate information regarding transit times and fares. Additionally, Users also hope the new iBus will integrate dynamic data for other transportation modes, like metro and light rail, with its map functionality.

Integrating Transportation Resource

In the new design, I referenced existing products, gathered extensive data from transportation websites, and analyzed user needs. I created various transportation maps to offer comprehensive and accurate information, helping users plan and manage their travel more easily. These maps feature detailed routes for buses, metros, and light rails, and include real-time data for the latest traffic conditions and schedules.

As shown in the prototype on the left, tapping the "Info" tab allows you to choose between bus or metro/light rail updates. After selecting metro/light rail, detailed information such as nearby station times, first and last train schedules, station facilities, and vehicle crowding levels will be displayed.

Meet needs: Get Information Faster

• Most Users

  Provide various transportation data and add quick access to frequently used stops on the homepage, allowing users to easily retrieve information without searching or multiple clicks. In addition to buses, include light rail, metro, and YouBike in the frequently used stops list.

• General Commuters

  The new iBus offers more detailed transportation information, allowing users to find nearby transfer options on the map. To address users' confusion about bus routes and directions, I designed bus icons with directional indicators on the route map to help users quickly identify the direction of the buses.
  
  While designing light rail and metro maps, it was found that open-source data can provide waiting times and information on station exits, such as elevators, restrooms, and nearby intersections, all accessible through iBus.

Challenge: Mismatched Information

• What Happen?

  During the data integration process, engineers have observed occasional information errors. For example, pricing information for transportation vehicles may sometimes be missing, or it may appear with correct or incorrect details.

• Solution

  The conclusion of our discussion is that if the data shows a price of 0, we won't display specific pricing details. Instead, we'll offer an external link for users to view detailed "price information." If available, we'll include a note stating "Price information is for reference only" nearby. This approach aims to prevent potential issues caused by displaying free information, which can be more problematic than displaying incorrect prices. It helps reduce complaints related to this issue.

Generally, in data integration, if we fail to receive data correctly, we choose to hide that information. Simultaneously, when providing the data, we include a note stating "Information is for reference only."

4/ Project Branding

Tell the Project Story

Finally, let's discuss the visual design of iBus. With my extensive branding experience, I led the design, drawing inspiration from Kaohsiung, a vibrant coastal city in southern Taiwan. I chose a warm yellow and aqua-blue color scheme, reflecting the city's energy and warmth, and used playful 3D illustrations to create a lively and dynamic atmosphere for iBus. Photo by Kaohsiung Tourism Bureau.

Friendly Accessories

I'm also responsible for designing the friendly identification symbols as well. The rounded heart shape, paired with a bright and warm yellow, along with gentle slogans, aims to promote greater social inclusivity and understanding through this cute imagery and symbol. We've created user-friendly identification signs to enhance the commuting experience for visually impaired individuals and promote social inclusion. These signs allow staff and passengers to recognize and assist visually impaired individuals, improving their travel quality and efficiency.