Past Design Work from TGC/TiVo

TGC was a startup which developed hardware and software for Digital Video Recorder (DVR) systems for the Taiwan and China markets. The systems were based on the US TiVo system but with localization and enhancements.

TGC Taiwan's website

TGC Central   TGC TV Guide   TGC Showcases

My main role was the lead user interface designer for the US, Taipei and Shanghai offices. My responsibilities included:

  • TGC DVR product - localization in Traditional Chinese (for Taiwan market) and Simplified Chinese (for Mainland China)
  • UI Specifications & branding
  • Established and directed UI-related skill set and services across the US/Taiwan/China offices
  • Design, test and specify new Chinese text input UI, searching and collation features on the DVR
  • Design new UI for HDTV DVR and Conditional Access UI
  • Design new On Demand / Content Delivery System UI
  • Websites maintenance, & office designs

Many of the design rationales and decisions we made are confidential, and were validated through alpha & beta users as well as through actual deployment and sales in the Taiwan market. However, in the sections below on issues, I will try to highlight the issues, the research, and the end product as much as possible.

Use of colors in the interface

The TiVo remote uses thumbs up and down icons with associated green and red colors for users to rate the degrees they like a program or not. This is a well recognized and trademarked part of the TiVo User Interface. Investigations was done early in the project to understand and validate if the choice of Western colors and thumb gesture are applicable in the cultures of Taiwan and Mainland China. And if they have any negative connotations we need to worry about.

Thumbs up and down buttons    The TiVo remote with colored thumbs up and down buttons

The color green has a positive connotations of eternity, family, harmony, health, peace, & posterity. However, red also has very strong positive meanings in the Chinese culture, with meanings such as happiness & prosperity. In some instances, red is regarded as positive while green as negative, just the opposite to Western cultures! To complicate the matter, regions especially in Taiwan & Hong Kong may have also adapted (or are more accepting of) the Western approaches. In particular both conventions can co-exist happily within the same culture depending on the context.

Joyo.com: Top selling DVDs (China) (2004)
Movements is top selling DVDs, with red up-arrow indicating a program is getting more popular and green down-arrow indicating less popular — opposite to the Western convention.


Taiwan Stock Exchange (2004)
Stock quotes on the English home page (above) vs. Chinese home page (below). Note the red/green colors convention are reversed between the English and Chinese versions to indicate positive/negative changes!

Many other investigations were done, and our decision was validated though testing and usage.

Use of iconic gestures in the interface

The use of the thumbs up gesture can have many negative and even offensive meanings in various Middle-Eastern cultures [1] [2] [3] [4]. Fortunately, in our regions, "the thumbs-up sign is universally used to mean excellence"[5]. We didn't have to redesign this well recognized feature in the TiVo user interface. Some additional examples are shown below.

Emblem for 2008 Olympics Unveiled (China, 2003)
"Hong Kong actor Jackie Chan and Chinese Olympic table tennis gold medalist Deng Yaping give the thumbs-up on arrival at the gala at the historical Temple of Heaven in Beijing, August 3, 2003." [Reuters] chinadaily.com.cn

Presidential Office Within Sight (Taiwan, 2000)
"DPP presidential candidate Chen Shui-bian gives the thumbs-up at the opening ceremony for his campaign headquarters in Taipei." taipeitimes.com

Mobile Phone Recommendations (China, 2003)
Graph of 55% thumbs-up (positive recommendations) and 45% thumbs-down (negative recommendations) for the LG G220 mobile phones. tech.sina.com.cn

Font and Legibility

The initial tasks of localization was evaluating and selecting a Traditional and a Simplified font for the system. This included selecting a font style, weight, and the set of sizes for use in different text elements. Legibility and flicker test were conducted.


Traditional and Simplified font evaluation and selection

On-screen font size test for legibility and screen flicker for the candidate fonts

Various Photoshop screen mockups for on-screen evaluation

Localization

We had to accommodate different branding requirements in the UI. The TiVo brand is fairly well recognized in Taiwan because of US programming which mentions TiVo and the "TiVo" verb usage. However, people in Mainland China were not. The UI elements not only had to accommodate the Traditional/Simplified Chinese character set, but also linguistic differences between the two countries, as well as branding differences.

The following figure shows some of the graphics localization and branding I did – click the image to see all DVR elements. This image was taken from one of the internal webpages cataloging all the localizable elements, which was extremely useful as a reference as well as for marketing/documentation/implementation/testing. Similar localization/branding work was done on the "TGC Desktop" product for the PC.

TGC graphics localization
Localization of TiVo elements (2004)
Leveraging off the TiVo brand recognition in Taiwan, but marketing the TGC brand in Mainland China

I also worked with translators and helped validating the translation for correct usage and voicing. The latter is very important part of giving the TiVo UI the "friendly" feel it has.

UI specification and navigation map

Part of my job was to localizing the set of TiVo UI specifications (200+ screens/60+files/2000+pages) for engineering implementation and QE testing. I also created the entire navigation map of the TiVo system which did not existed. These maps were invaluable for communicating with the UI, documentation, marketing, development, quality assurance, beta testing, and customer support teams in our US, Taiwan and Shanghai offices for them to understand the TiVo system. Additionally, these maps aided in communicating what is new in a software release. New features and general screen updates are marked with different colors "stars" with notes so that everyone can get a quick overview of the changes and plan their responsibilities accordingly.

TGC UI Navigation Maps
TGC/TiVo UI navigation map - Nine 11x17" pages
(Yellow stars to indicate new features in the next release. Blue stars to indicate screen updates.)

Chinese character input

The initial release of the product didn't have searching capabilities. While doing all the learning with the introductory product release, I lead a team with members from both the Taipei and Shanghai offices to design Chinese character input.

There are actually over a thousand different Chinese input system. The popularity of cellphones and computers have narrow the field down to a few handful – but unfortunately not just one. The most popular systems are phonetically based (but typically this limits accessibility to those users who can speak Mandarin, and to a much less degree Cantonese). These systems use a two-step approach. The user must first spell out each character phonetically, and then choose the correct character out of a list of candidate characters with the same pronunciation. Spelling in Mainland China means using Pinyin and Roman (alphabetical) letters. The use of Pinyin in primary education and in common usage helps to standardize it. Spelling in Taiwan typically means using Zhuyin (Bopomofo) and the Mandarin Phonetic Symbols which have no Western equivalents. Primary education in Taiwan continues to teach pronunciation using Zhuyin but is not common in normal day-to-day usage. For Chinese who don't speak Mandarin, there are many stroke-based input systems for the computer and cellphones.

Our research and UI design worked included:

  • Reviewed many Chinese input method that were popular on cellphones and computer systems (based on pronunciation, stroke, numeric keys, and arbitrary code). Created a randomized paper survey to gather user's preferences, in terms of the input system, computer vs cellphone keyboard entry, and specific computer/cellphone layouts. In order to get more realistic responses, we had the users go through specific character entry exercises before providing their ratings.
  • In the course of narrow it down to one method for Taiwan and one method for Mainland China, we also had to weigh in the factors that the two systems cannot have drastically different engineering implementations because of schedule constraints, and that the input software we license would be able to handle both systems.
  • The next step was to design the on-screen UI that would be optimized for entry using the TiVo remote (typical remote with buttons for directional navigation, numeric entry, and DVR controls).
  • To validate our designs, we created prototypes of our UI's in Flash and tested 16 users in our Taipei and Shanghai offices. We used users with different levels of computer and cellphone experience, and whether they have used other DVRs. We tested character entry of different program titles purely in Chinese, English or a mix. We tested the user's ability to find the correct character among the candidate characters using the 2-step approach, their ability to make characters corrections, and whether they could discover shortcuts keys or not.
  • We then iterated the design and finally created the UI specification.
  • Related, we also had to determine which collation standards (sort order) to use when displaying a list of program titles, for example. The collation of characters in China and Taiwan are distinctly different, even for characters that are shared between the Traditional and Simplified character set. Display of names, such as a list of actors or directors, also required special rules. The order of surname/given name (first name/last name) is not the only consideration. In addition, both Easterners and Westerners may be known by theirs (translated) first name, last name, or nickname. And some Asian actors are well known by both their both their Chinese and English name.

Current TiVo Work

Please see resume for a description of my current TiVo design work.