# Navigating the bills screen
source: https://developer.mastercard.com/bill-pay-experience-design-guide/documentation/design/navigating-the-bills-screen/index.md

### One place for all bills {#one-place-for-all-bills}

Once a consumer adds their first bill, they are shown a screen where all their bills reside. This screen has many names, such as: dashboard, home, bills or main screen and is the "powerhouse" screen where bills are added, sorted, updated, scheduled and paid. From this point on, all action associated with a bill begins from the dashboard. Account holders also access their bill payment history and preferences from this screen.

Once consumers add their first bill, they begin on the dashboard every time they sign into their bank account and access Bill Pay. Let's take a closer look at how the screen is designed to make the bill payment experience useful and easy.

### Key components and functions: Bills screen {#key-components-and-functions-bills-screen}

For the best viewing experience of the UX journey, click the **full screen mode** option or **zoom** using the controls located on the right.

To view the prototype and specs for this experience, visit Figma [here](https://www.figma.com/file/jamxCat034ufU4bA438fp1/BPX-Prototypes?node-id=6105%3A26568&t=dsM7TPVwUSKU9OLt-1&fuid=1128325947710363067). Password: **BPXMC2022**
Tip: **Design recommendations**

* Keep color used on the bills screen functional. Avoid using only brand colors. Instead, use colors that are accessible, as well as signify changes or demand attention. For example, green for completed tasks, red for alerts, etc.
* Use a clean, simple design for the bills screen. Keep primary actions, such as scheduling and paying bills, central to the experience and have key information, such as payment statuses, due dates and alerts, easy to locate.
* Alert consumers to fees for upcoming payments, if possible. Consumers dislike finding out too late that they will incur a fee for using a debit or credit card.
* A key aspect of the bills screen is that the bills are always visible on the screen and only their statuses change. This dynamic feature allows for the status of all bills to be easily scannable and categorizable.
* Give users the ability to customize categories and sort their bills the way they prefer which is crucial to the success of Bill Pay. To eliminate unnecessary clutter, don't show categories if there are no bills assigned. This includes when categories are sorted alphabetically, by frequency or status.
* Use simple micro-animations within the experience, to highlight an edited bill after exiting a flow for example, to help consumers maintain their location as they leave and reenter payment flows.
* Use sleeves on bills to emphasize key changes to a bill, such as: when a new bill arrives, is adjusted, cancelled or has completed the e-billing process.
* Design the experience using plenty of white space to prevent information overload or consumers feeling overwhelmed.
* Alert consumers to confirm payment option selections that could be user error during the flow.
Note: **Mastercard Bill Pay APIs used in this experience**

* [Link retrieval](https://developer.mastercard.com/bill-pay-for-dsps/documentation/use-cases/request-to-link/link-retrieval/)

<br />

Next: [Adding or deleting a bill](https://developer.mastercard.com/bill-pay-experience-design-guide/documentation/design/adding-or-deleting-a-bill/index.md)