Mobile Banking: UX Research to Redesign 手机银行数字化转型

About

A regional commercial bank in Southeast China was advancing its digital transformation. They commissioned this project to rebuild the mobile banking application.

The engagement covered the full cycle from user research to design execution — and was received with strong recognition from both client and users, leading directly to a follow-on WeChat mini-program redesign.

Challenge

As a regional rural commercial bank, the client served a user base with needs that differed significantly from mainstream fintech. The challenge was improving retention against platforms that had already set high product standards.

Another challenge was organizational. The bank had a layered stakeholder structure where decisions rarely moved in a single direction.

Solution

We understood the users deeply, then anchored every recommendation in user evidence — behavioral observations, task failure rates, and verbatim quotes — and carried that research through to design, not stopping at a report. This gave us a consistent basis to navigate organizational disagreement, and ensured design decisions were traceable back to what users actually needed.

Process

User Insights

Three segments emerged, defined not by age alone but by their relationship with the app. The majority of users came from lower-tier cities and rural areas — with deeply local financial habits, lower average digital literacy, and a stronger reliance on in-person service than typical fintech users.

Across all segments, users positioned the app as a financial tool. Simplicity, reliability, and security mattered far more than feature breadth.

UX Pain Points

# Cluttered Structure, Hidden Information

The Credit & Loan homepage mixed two distinct services with no clear separation.

The result was a module that felt neither like a credit card page nor a loan page — leaving users unable to locate key information or find the actions they needed.

”I’d prefer the credit card and loan sections to be separate — having them together makes it harder to navigate."

"I do check the card application page, but the apply button text is so small I’d easily miss it."

"The loan page isn’t clear about what it’s for. It’s not intuitive, and the information isn’t presented clearly enough.”

# No Onboarding, No Guidance

The app offered no onboarding flow and no guidance for new users. Without a safety net for mistakes, users avoided exploring unfamiliar features — the care mode entry point was just one example of a useful function that went undiscovered.

”I never noticed the simplified version — the entry point wasn’t obvious at all."

"Banking apps deal with money — I’m afraid to tap things I don’t understand.”

# Unguarded Privacy

The app exposed account balance in every transaction screenshot, and offered no in-app channel for users to communicate securely with their relationship manager.

”When I share a screenshot, my balance shows — I have to edit it out with a photo app."

"I usually talk to my relationship manager over WeChat — I do worry about whether it’s safe.”

From Research to Screen

The findings translated into redesign decisions across three levels. The information architecture was rebuilt to clarify structure and reduce cognitive load. Key modules were restructured to separate what had been conflated. Core flows were streamlined to reduce steps and surface the right information at the right moment. Besides, new capabilities such as privacy controls were added where research identified clear gaps.

Information Architecture

The credit card and loan modules needed to be restructured to address unclear architecture. However, separating them entirely would have broken long-standing user habits.
The solution: keep them under the same navigation tab, but introduce a tab switcher at the top so each gets its own dedicated homepage, structured around its own primary tasks.

# Credit Card

# Loans

The transaction history page was restructured to address two gaps identified in user interviews: missing key fields in the detail view, and the absence of filtering tools that users expected as standard.

# Transaction History

# Transfer Flow

Four friction points addressed: card scanning, photo recognition, one-tap receipt sharing, and balance masking on share.

# Loan Application Flow

Shortened path with rate, term, and repayment breakdown surfaced before confirmation.

# Loan Repayment Flow

Three states handled — on-time, overdue, multiple loans — with pay-in-full or partial options.

# Deposit Purchase & Withdrawal Flow

Surfaces yield rates upfront and reduces steps to complete a purchase. Rate and term disclosed clearly at each stage.

High-Fidelity Screens

Component Library

Follow-On: WeChat Mini-Program

Following the main engagement, the team was commissioned to redesign the WeChat mini-program. Built directly on the UI standards established during the banking app project, interaction prototypes were delivered at high-fidelity — a selection is shown here.

Reflection

Being involved across both research and prototyping made the gap between insight and implementation very visible. Research surfaces what’s broken; design has to decide what’s actually fixable within constraints. That selection process is where most of the real judgment happens — and it’s harder to explain than the research itself.

Anchoring every recommendation in user evidence turned out to serve a different purpose than I expected. It wasn’t just about convincing stakeholders — it was about maintaining internal consistency across a project that ran for months, with multiple rounds of review and revision.

If I were to do this again, I’d push for usability testing on the interaction prototypes earlier. We validated the research direction at scale, but the design decisions themselves were mostly evaluated through heuristic evaluation and client review rather than testing with actual users.