Redesigning Watchtower’s navigation so it keeps working as new modules are added

The goal

The top nav on Watchtower was overflowing, and every new module made it worse.

Watchtower is the internal tool Paystack’s operations teams use to look up merchants, transactions, disputes and payouts. Each new module added another item to the top navigation, until the menu no longer fit. We redesigned it by grouping related items into mega menus.

Research

We grouped similar modules, and retired the ones no one used

Research with the teams who live in Watchtower showed which items belonged together and which were no longer in use. That led to a few clear decisions:

• Group every customer or merchant initiated record, such as all transactions, transfers and debit orders
• Keep all merchant details in one group, so compliance sits with merchants rather than on its own
• Deprecate items that were no longer in use

Synthesis

A new information architecture for the nav

Five top-level groups (Merchants, Collections, Disbursements, Treasury and Admin) each open into second and third levels, so new modules have a home without adding to the bar.

Mega menus

Five groups replace a bar that kept running out of room

Each group opens into the modules within it. Collections, for example, holds Transactions, Terminal and Disputes, and each of those opens to its own pages.

Usability test

Three teams, one realistic task each

We sent prototype links to the User Ops, Reviews and Refunds & Disputes teams with a short form about their experience, then followed up with moderated interviews.

What we heard

The grouping worked. Two things needed another look.