Global Preference Center

Designing a clear, reliable transaction history experience for mobile app users

OVERVIEW

Customers had no way to view their bill and payment history in the National Grid mobile app. This project focused on designing a clear, reliable Account Activity experience — accounting for complex edge cases like error states, partial data failures, and HEAP payments.

Within a week of deployment, 500+ users had updated the app and were actively using the new feature. The team continues to monitor performance and gather feedback.

TEAM AND DURATION

2 Product Designers

2 Leads

1 Manager

December 2024- December 2025

PRODUCT CONTEXT

What Customers Couldn’t See

Background: Customers using the National Grid mobile app had limited visibility into their billing and payment history. The Recent Activity screen only showed payments from bank accounts or credit cards. This left out key statuses like failed, canceled, or pending. Users could only see “scheduled” or “completed,” which created confusion, eroded trust, and led to unnecessary support calls.

Solution: The redesigned Account Activity experience gave users a full view of their transaction history across all payment method with clear statuses, an organized timeline, and actionable detail for each entry. The goal was simple: users should be able to confirm payment outcomes instantly, without calling support.

PHASE 1

Telling the Story Before Building It

Before any screens, we worked through narratives with product and engineering to validate edge cases and prioritize user needs. Key decisions included things like whether to show canceled and rebilled bills side by side, how to handle partial data failures, and what 24 months of history actually looks like across different account types. Below are a few narratives that we brainstormed.

Single Account— Payments, Empty State

User: Serena and her roommate has a new account and received their first bill. She wants to use the app to see if her roommate made a payment or not.

Rationale: New users still need to feel oriented even when there isn’t much to show yet. An empty screen with no context feels broken. Added context feels intentional.

Single Account— Entries Missing

User: Jamie wants to review their payment and bill activity but there is an error loading payment entries.

Rationale: When data fails to load, users shouldn’t be left wondering what went wrong. Showing what’s available while being transparent about what’s missing keeps users informed without blocking their full experience.

Single Account— Billing, Failed Payment

User: Pierre made a payment with his credit card a few days after his bill was posted. He decides to log into the mobile app a week later to see that his payment has failed to process.

Rationale: Currently, failed and canceled payments don’t surface on the users dashboard when they log into the app. We wanted to create a dedicated space for users to find them without having to guess where to look.

PHASE 2

Where the Details Live

In Phase 2, we moved into UI exploration. We focused on how to present information clearly across each tab. We explored how to distinguish between bills, payments and how to communicate payment status. We also looked into how color, hierarchy and font weight could work within each screen without overwhelming the user. Below are some of the explorations that didn’t make the final cut but helped shape where we landed.

Account Activity Exploration

Explored how to display payment status and bill history across each tab.

Bill and Payment Details Exploration

Explored hierarchy and information display within bill and payment detail views.

DEPLOYMENT

From Figma to 500+ Downloads

After months of designing, iterating and account for edge cases, Account Activity was ready to be released. The Account Activity feature was released as part of Mobile App Release 4.7 in November 2025, giving users access to up to 2 years of bill and payment history for the first time in the mobile app. Within the first week of deployment, over 500 users had updated the app and were actively using the new feature.