Mobile UI Loaders

Designing a better waiting experience

Wells Fargo · Mobile Experience · 18 months

My scope: Loading strategy, motion design, stakeholder alignment, and delivery.

I turned a request for a bespoke animated loader into two complementary loading patterns for Wells Fargo’s mobile app: skeleton loaders for essential account information and a full-screen animation for delays elsewhere. The work required both design judgment and a change in how decisions were made.

Questioning the brief

Parts of the mobile app experienced long loading times caused by API calls, different codebases, and underlying architecture. Our head executive asked me to create a distinctive, engaging Wells Fargo loader for use across the app.

I raised two concerns. Our research suggested that branded loading animations could associate the frustration of waiting with the brand. A custom animation also risked taking longer to load than the native indicator, which already worked well.

As the project moved forward, I continued to advocate for the user experience: where custom animation was appropriate, how it could add personality, and where a different loading pattern would better serve the task.

Recognizing a decision-making problem

Over 18 months, I developed dozens of loader iterations. Designs passed through nearly 12 directors and two executive directors before reaching the sponsoring executive.

The breadth of feedback made it difficult to establish a shared direction. An external agency was brought in, but none of its three final concepts were selected. The project returned to me.

At that point, moving forward required a change to the review process.

Creating a path to approval

I persuaded my director to establish a smaller working group that could develop and champion a single direction. This gave us a more focused setting for evaluating the animation and building agreement.

We refined a design the group supported and worked with a designated representative who had a strong relationship with the sponsoring executive. I helped present the final direction, which received approval for immediate implementation.

After the loader was implemented, I created variations for Wells Fargo’s sub-brands, extending the approach across related experiences.

Matching the loading pattern to the task

During the project, I also made the case for skeleton loaders, which our mobile experience did not yet have. The trust I had built with leadership gave that recommendation a stronger hearing.

We agreed that a full-screen animation was not appropriate for every situation. On Account Summary and account detail, where people check balances and recent transactions, we introduced skeleton loaders. The intent was to keep attention on the structure of the expected content and make waiting feel less disruptive.

The bespoke full-screen loader became the fallback for occasional delays elsewhere in the experience.

The key design decision was choosing the right kind of feedback for each context. Essential account information called for a loading pattern connected to the content itself; other waits could accommodate a more expressive animation.

What the work led to:

  • A bespoke animated full-screen loader implemented in the mobile app, followed by sub-brand variations.

  • Skeleton loaders introduced on two of the app’s most important screens: Account Summary and account detail.

  • A clearer distinction between content-focused loading and full-screen waiting states.

  • A stalled project brought to delivery through a smaller decision-making group and focused executive alignment.

The project established me as a go-to motion specialist and a design leader trusted to build consensus and deliver through ambiguity.