My role
My role

User Experience Design, Information Architecture and Quality Assurance

Duration
Duration

Apr 2022 - May 2022 (6 weeks)

Team member
Team member

2

Context
Context

iTaipei, previously used for various Taipei City Government services, has been optimised and rebranded as TaipeiPass. T Radio is one of the features and requires a redesign.

About T Radio
About T Radio

It is a streaming service from Taipei Broadcasting Station, a public radio station managed by the Taipei City Government. The station offers a wide range of programs that emphasise local culture, social welfare, and community topic.

About TaipeiPASS
About TaipeiPASS

TaipeiPASS integrates various municipal services, connecting citizens with the government through digital identity verification and authentication mechanisms, providing convenient online and offline applications and payment tools for daily life.

Goals

Goals

Increase usage rate
Increase usage rate
Improve user experience
Improve user experience
Meet stakeholder requirements
Meet stakeholder requirements

Challengs

Challengs

I evaluated the interfaces and problems by Heuristic Principles from Nielsen Norman Group and Accessibility Guidelines from W3C.

I evaluated the interfaces and problems by Heuristic Principles from Nielsen Norman Group and Accessibility Guidelines from W3C.

Heuristic Evaluation

Visibility of System Status

Homepage

Homepage

No progress bar is displayed when users replay, so they cannot tell how much of the show they have listened to.

Recognition Rather Than Recall

Schedule

Schedule

With two channels and 56 programs, users may find it challenging to navigate the schedule to locate their favorite shows.

Aesthetic and Minimalist Design

Homepage

Homepage

Schedule

Schedule

News

News

A non-functioning button may distract users from achieving their goal, and the lengthy paragraph is difficult to read. (PIC 1 & 2)
At first glance, the rows appear to have similar content and lack emphasis on informational differences, making it difficult for users to distinguish between them and locate the episodes they need. (PIC 3)

Accessibility Evaluation

Touch Target Size and Spacing

Homepage

Homepage

When the target size is too small, accurately selecting or aiming at it can become difficult.
Users with hand tremors, limited dexterity, or other challenges may struggle to interact with small targets.

Provide clear indication that elements are actionable

Schedule

Schedule

Interactive elements that initiate changes should be clearly distinguishable from non-interactive elements.
If they are not, it can make the site significantly harder to navigate, potentially causing confusion and increasing the cognitive burden for individuals with cognitive impairments.

Designing for Stakeholder Alignment

Designing for Stakeholder Alignment

I designed the app based on stakeholder feedback, trying to meet their requirements for the project.
Taipei Broadcast Station
  1. The updated interface remains familiar to the original

  2. Scroll the whole trending prgrams on Homepage

  1. The updated interface remains familiar to the original

  2. Scroll the whole trending prgrams on Homepage

(Scroll the programs )

(Scroll the programs )

(Scroll the programs )

Schedule

Search by date

My Repsonse
  1. I combined the "Schedule" and "Search by Date" functions into a single tab, as some users find it confused to navigate between them.

  2. Since the WebView couldn't support scrolling, I initially added a "Popular Programs" section.

  1. I combined the "Schedule" and "Search by Date" functions into a single tab, as some users find it confused to navigate between them.

  2. Since the WebView couldn't support scrolling, I initially added a "Popular Programs" section.

Commissioner of Department
  1. The commissioner finds it easy to navigate programs by swiping the images.

  2. He suggests including more content and restructuring the layout.

  3. He also recommended removing the "Popular Programs" section, as the bottom overlay takes up too much space.

This is screenshot of lite version.

Popular Programs

My Repsonse
  1. The design does not align with user behavior (supported by research evidence).

1.1. The WebView component doesn't support scrolling functionality

  1. After finalising the content for Phase 2, I redesigned the structure, including changes to the tab bar layout.

  2. The "Popular Programs" section was transformed into the "Feature" tab, making it a dedicated section within the app's navigation.

  1. The design does not align with user behavior (supported by research evidence).

1.1. The WebView component doesn't support scrolling functionality

  1. After finalising the content for Phase 2, I redesigned the structure, including changes to the tab bar layout.

  2. The "Popular Programs" section was transformed into the "Feature" tab, making it a dedicated section within the app's navigation.

Develop Team

To address API limitations and technical challenges, I adjusted the design to balance functionality and user-friendly experience.

To address API limitations and technical challenges, I adjusted the design to balance functionality and user-friendly experience.

  1. MP3 files are only accessible for 90 days.

  2. The program status in the schedule does not update automatically

  3. Due to WebView limitations, users are unable to drag the progress bar.

  1. MP3 files are only accessible for 90 days.

  2. The program status in the schedule does not update automatically

  3. Due to WebView limitations, users are unable to drag the progress bar.

My Repsonse
  1. Since there are not many files, the months are displayed using tabs.

  2. To check the program status, users need to manually click the refresh button.

  3. Allows users to skip forward or rewind by 10 seconds by pressing the button.

  1. Since there are not many files, the months are displayed using tabs.

  2. To check the program status, users need to manually click the refresh button.

  3. Allows users to skip forward or rewind by 10 seconds by pressing the button.

Sitemap

Sitemap

Competitive Audit

Competitive Audit

Product offering

Rating

Reviews

BBC Sound

BBC Sound

Discover and follow top global podcasts with expert curation and personalized recommendations

4.7

Likes:

Likes:

+ The intuitive design makes navigation straightforward.

+Interface clear and easy to use

+ Personalised recommendations have been well-received

Dislikes:

Dislikes:

-Locating certain programs can require multiple steps

-Some users found the content too fragmented, requiring constant back-and-forth to access playlists, episodes, or live shows.

-Dialing interface is unfriendly

Apple Podcast

Apple Podcast

Access millions of top podcasts with curated suggestions and personalised picks.

4.9

Likes:

Likes:

+Interface clear and easy to use

+ Filtering is incredibly easy.

+Available in many languages

Dislikes:

Dislikes:

-Only apple user can access to the app
-Some users felt that content was too fragmented

My Tuner

My Tuner

With more than 200 countries available, there are many kinds of stations for you to choose from.

4.7

Likes:

Likes:

+ Mini player allows for easy access and control, enabling users to change or pause music conveniently without disrupting other activities.

+Efficient Search Functionality

Dislikes:

Dislikes:

-Some users feel the visual design is outdated. Users find oversized icons unnecessary and cluttered and reminiscent of older design styles.
- Too many ads

Feature Analysis

Feature Analysis

Search

Search

Mini Player

Mini Player

Schedule

Schedule

Featured / Editor Pick’s

Featured / Editor Pick’s

Featured

BBC Sound

BBC Sound

V

V

V

V

V

V

V

V

Apple Podcast

Apple Podcast

V

V

V

V

X

X

V

V

My Tuner

My Tuner

V

V

V

V

V

V

V

V

Wireframe

Wireframe

Interface

Interface

Homepage

Before

After

Based on uses' reviews and the preferences of the Taipei radio station, I re-organised the content and ensures a clear layout while maintain the main features.

  1. Removed unnecessary buttons

  2. Maintained a centered layout

  3. Added a section for trending programs (Feature)

  4. Kept 'Schedule'

Schedule

Before

After

Based on the preferences of the Taipei radio station and feature analysis, I keep the feature and iterate it.


In the feedbacks of iTaipei, users often struggled to identify which episode was playing. Therefore, the new version places greater emphasis on the status of program and even display "Live" to indicate the live show.

Program Detail

Before

After

To create a more engaging and intuitive user experience, I added program details to familiarise users with the content.

  • Previous: Displays only a list of episodes with basic time and date information.

  • Current:

    • Adds a program introduction section

    • Episodes are presented by month, with top episodes

Before

After

To enhance user understanding, the additional program details were added to provide comprehensive context for each show.

Search

To help users easily find programs and since every app in the feature analysis includes a search function, I think it’s necessary to add this feature.

Mini Player

Through competitive and feature analysis, the mini player emerged as a key feature for streaming and entertainment apps. A review shown in the competitive analysis highlighted that the mini player improves usability by allowing users to easily pause or switch music without disrupting their current activity.

© Pei Ying 2024

© Pei Ying 2024

© Pei Ying 2024