What Makes CMB’s Mobile Banking App Design So Engaging? A Deep Dive

With the rise of mobile payments, mobile banking has become an integral part of daily life. The advantages of mobile banking are fully leveraged by internet development, spawning many related products. Designers must consider how to provide a better user experience; this article uses the China Merchants Bank (CMB) app as a case study to uncover its design secrets.

Typical mobile banking homepages consist of three parts: 1) a banner area for brand or product promotion; 2) a quick‑entry area (often called the "golden" or "tile" area) for frequently used functions; 3) a content channel providing access to product operations. CMB’s homepage mimics a red‑envelope cover, especially the banner design, where a button at the edge resembles an unopened envelope.

The top icons use silhouette shapes with opacity adjustments, allowing them to display well against various banner colors. Because many functional elements sit above the banner, the main visual focus of the banner image is placed lower, while the upper part transitions with a gradient background.

The banner occupies a large portion of the screen and carries strong colors, which could make the page feel flashy. To avoid visual overload, the quick‑entry area adopts linear icons highlighted with the theme color, creating clear visual hierarchy and focus.

Below the main banner, a smaller capsule‑shaped banner provides an ad space, also using a gradient background with text as the main element.

Financial product cards use a white card with subtle shadow to separate them from the background. Important data is highlighted in red, and low‑saturation shapes (circles or simple icons) are overlaid to add visual balance.

If only a single card layout were used, the interface would lack depth. By alternating between card and list presentations, the page rhythm improves and visual fatigue is reduced.

Text colors are chosen with similar saturation and brightness, resulting in a soft, comfortable visual experience.

The "Life" section continues the card layout but changes the color style, using light‑material icons for common functions and linear designs for less‑used ones, shortening user decision time.

Life pages focus on images with supporting text, employing an endless waterfall flow for immersive browsing. Sensitive information such as price tags is highlighted in red to draw attention.

The personal‑center page uses a plain, calm color scheme to convey security. Functions are grouped into cards, reducing complexity, and privacy‑related information is hidden to respect user feelings.

At the bottom tab bar, unselected icons are linear while selected ones are filled; some tabs replace icons with a refresh button, allowing users to reload the page with a single tap, reducing learning cost.

The "My" tab uses a gray fill when selected, dimming the visual to convey privacy and discourage prolonged stay, aligning with the bank’s focus on core financial functions rather than extensive engagement.

Instead of a simple red dot, the life page uses a small label to indicate the day’s activity, giving users clear information without requiring a tap.

The startup page of CMB shares a similar poetic feel with WeChat’s startup page. While WeChat uses a human figure against a globe to evoke loneliness and connection, CMB features a running figure toward the sun, symbolizing that wealth requires effort and ambition.

The slogan’s typography is deliberately staggered to match the logo’s mountain shape, creating dynamic visual rhythm; the font itself is opened at the ends to convey vitality.

Designers should not only ensure visual appeal but also understand the rationale behind each element. With a clear design philosophy, products can convey emotion and meaning beyond mere functionality.