menu

HTC IME

HTC IME

HTC IME

HTC IME

IME Rendering Architecture Redesign

IME Rendering Architecture Redesign

IME Rendering Architecture Redesign

IME Rendering Architecture Redesign

Water Resource
Water Resource

Rebuilt HTC's IME key rendering —— Code-drawn dividers replaced image assets, making the keyboard open over a second faster at every resolution.

Rebuilt HTC's IME key rendering —— Code-drawn dividers replaced image assets, making the keyboard open over a second faster at every resolution.

Rebuilt HTC's IME key rendering —— Code-drawn dividers replaced image assets, making the keyboard open over a second faster at every resolution.

Rebuilt HTC's IME key rendering —— Code-drawn dividers replaced image assets, making the keyboard open over a second faster at every resolution.

As the owner of HTC's Sense IME line, I led the design of every input scenario under it — Western text input (WIME), Chinese Zhuyin input (CIME), handwriting recognition (HWR), secure PIN/SIM entry, voice input, and multilingual scripts including Burmese and Arabic — working closely with the IME engineering team throughout.
COS IME marks a key turning point within that scope: built in 2013 as a standalone system outside the existing Sense architecture, developed together with an external engineering team. At the same time, working with our Taiwan-based IME engineers, I traced the system's load to asset rendering and led the shift of its rendering architecture to a fully code-based approach, authoring the complete interface design guideline. That approach was later carried back into the Sense series itself.
As the owner of HTC's Sense IME line, I led the design of every input scenario under it — Western text input (WIME), Chinese Zhuyin input (CIME), handwriting recognition (HWR), secure PIN/SIM entry, voice input, and multilingual scripts including Burmese and Arabic — working closely with the IME engineering team throughout.
COS IME marks a key turning point within that scope: built in 2013 as a standalone system outside the existing Sense architecture, developed together with an external engineering team. At the same time, working with our Taiwan-based IME engineers, I traced the system's load to asset rendering and led the shift of its rendering architecture to a fully code-based approach, authoring the complete interface design guideline. That approach was later carried back into the Sense series itself.

Challenge —— Visible Lag on Overlay, Traced to the Button Edge's Light/Shadow Assets

Challenge —— Visible Lag on Overlay, Traced to the Button Edge's Light/Shadow Assets

Challenge —— Visible Lag on Overlay, Traced to the Button Edge's Light/Shadow Assets

Challenge —— Visible Lag on Overlay, Traced to the Button Edge's Light/Shadow Assets

Since Sense 3.5, HTC's interface had leaned heavily on .r.9.png texture-style static assets, and the cumulative system load kept climbing. The problem showed up most clearly in the IME: when the keyboard opened and overlaid on top of a running app, users could visibly feel the lag. Working with our Taiwan-based IME engineers, we traced the cause to asset rendering — every key needed not just a base texture and key-state layer, but a separate divider asset for its edge light/shadow effect, and each resolution tier (FHD, HD, QHD, WVGA) required its own exported set of these assets. That resolution-by-resolution export was one of the most laborious parts of an HTC UI designer's job at the time, and it's exactly what drove up the rendering cost every time the IME opened.

Strategy —— Used Sense 5.0's Shift to Flat Design as the Opening to Move Divider Assets to Code

Strategy —— Used Sense 5.0's Shift to Flat Design as the Opening to Move Divider Assets to Code

Strategy —— Used Sense 5.0's Shift to Flat Design as the Opening to Move Divider Assets to Code

Strategy —— Used Sense 5.0's Shift to Flat Design as the Opening to Move Divider Assets to Code

Sense 5.0 was already moving toward flatter buttons — dropping rounded corners while keeping a light touch of texture — which gave me an opening to rethink how the edge highlight was built. I proposed shifting the rendering logic from "shipping fixed image assets" to "code-defined structure": breaking each key down into four layers — an SRC semi-transparent texture layer, common_key/function_key layers (still provided as image assets, since gradients couldn't yet be done in code), a color-coded divider, and a background color value — composed together in code into the final button style, so the divider and background no longer needed bitmaps. I then authored a complete HTC COS IME Guideline specifying the exact divider width per resolution tier (2px on FHD, 1px on HD/QHD/WVGA), precise light/dark mode color values, and press-state behavior — giving engineering an unambiguous spec to implement directly.

Impact & Delivery —— Fewer Assets to Load, Noticeably Faster on Open

Impact & Delivery —— Fewer Assets to Load, Noticeably Faster on Open

Impact & Delivery —— Fewer Assets to Load, Noticeably Faster on Open

Impact & Delivery —— Fewer Assets to Load, Noticeably Faster on Open

Moving the divider and background from image assets to code meaningfully cut the number of assets each key had to load, with the divider making the biggest difference. When the IME overlaid a running app, the keyboard now opened over a second faster — a change users could clearly feel. The same spec also applied across every resolution tier without exporting a separate divider set for each. The approach was later carried back into the Sense series itself, becoming a shared technical foundation across both systems.

HTC IME

IME Rendering Architecture Redesign

IME Rendering Architecture Redesign

YEAR

YEAR

2013

2013

2013

2013

TIMELINE

TIMELINE

1 month

1 month

1 month

1 month

TOOLS

TOOLS

Photoshop

Photoshop

Photoshop

Photoshop

CATEGORY

CATEGORY

UI/UX

UI/UX

UI/UX

UI/UX

TAGS

TAGS

Android OS · Rendering Architecture · Legacy System Redesign · Design Systems · Mobile · Product Design · Design Engineering

Android OS · Rendering Architecture · Legacy System Redesign · Design Systems · Mobile · Product Design · Design Engineering

Android OS · Rendering Architecture · Legacy System Redesign · Design Systems · Mobile · Product Design · Design Engineering

Android OS · Rendering Architecture · Legacy System Redesign · Design Systems · Mobile · Product Design · Design Engineering

Guideline
CIME, HWR
WIME, PIN/SIM

Open to new collaborations.

Open to new collaborations.

Open to new collaborations.

ëaprica Creative Design © 2026 All Rights Reserved.

ëaprica Creative Design © 2026 All Rights Reserved.

ëaprica Creative Design © 2026 All Rights Reserved.