Redesigning Financial Digits: Custom Typography and SmartSlider Boost Mobile Banking UX

Project Background

Tianxing Bank, a virtual bank under Xiaomi Financial, aims to promote fintech innovation in Hong Kong by delivering cost‑effective, inclusive financial services. Recognizing that Hong Kong’s financial sector historically prioritized corporate needs over user experience, the team set out to rebuild trust and usability by focusing on the concept of “digital” to strengthen security and efficiency.

How to Design Financial “Digits”?

MiType Font Creation

Digits are the most critical information in financial services. To create a typeface suited for mobile internet scenarios, the team collected and extracted typical life‑scene digit samples that could withstand extreme conditions. The resulting MiType font, developed in collaboration with MIUI font designers, leverages the advantages of DIN Pro and LuzSans to produce a financial‑focused digit typeface.

A dedicated method called “omnidirectional dynamic blur” was designed to distinguish static and dynamic scenes, improving digit legibility under various conditions.

How to Make Digit Input More Efficient?

Gesture‑Based “SmartSlider”

To provide a consistent interaction model for numeric input across financial services, the team invented SmartSlider, a gesture‑driven input method that complements traditional numeric keyboards. SmartSlider limits input ranges to meet financial limits while preventing invalid entries such as format errors or over‑limits.

The design also addresses the challenge of selecting very large numbers within limited physical movement by incorporating a magnetic‑snap rounding algorithm based on the Round‑Number Bias theory from behavioral finance.

The rounding algorithm enables the slider to snap to integer values efficiently, as illustrated in the following animation.

SmartSlider has been extended to almost all core banking numeric inputs, becoming a core input method that works alongside traditional keyboards.

Icon Design Balances Visual Harmony

Based on abstract shapes derived from Tianxing Bank’s brand, each icon underwent rigorous mathematical calculations to achieve near‑perfect visual balance while expressing strong brand personality.

Simplicity and Efficiency Earn User Recognition

The design has won two international awards: IDEA 2020 Bronze and G‑Mark 2020, yet the team acknowledges ongoing iteration to keep the product a “clear stream” in banking design.

References

【1】《小米旗下虚拟银行天星银行在港试业 雷军任董事会主席》，新浪网，2020年3月。

【2】张旭：《小议金融服务的数字的功能设计》，小米金服用户体验公众号，2018年10月。

【3】张旭：《关于金融产品中的输入框设计》，小米金服用户体验公众号，2019年3月。

【4】张旭等：《一种金融数据输入方法、装置及介质》, 中国发明专利 CN110262746A，2019年。

【5】Harley A. Slider Design: Rules of Thumb, Nielsen Norman Group, 2015。

【6】Slider. Material Design, Google, 2014。

【7】Ackert L., Deaves R. Behavioral Finance, Cengage Learning, 2009。

【8】Renedoa E., Sobrino A. Round numbers revisited, Fuzzy Sets and Systems, 2007。

【9】余隋怀等：《设计数学基础》，北京理工大学出版社，2006年。

【10】IDEA 2020: Airstar Bank, IDSA, 2020。

【11】International Design Excellence Awards, IDSA, 2020。

【12】G‑Mark 2020: Virtual Bank App, Japan Institute of Design Promotion, 2020。