Design

Sitemap

Tree of screens and sections, navigation hierarchy.

When. In a redesign, information structure is often the real problem, not the visuals.

Duration
2 h
Participants
Design + PM
Output
Target structure
Stage
Pre-PMF · Post-PMF · Scale-up · Mature
HomeSectionsPages
Open in FigJamFind the right sequence

In FigJam: File → Duplicate to your drafts, then keep this workshop's section. Get the file on Figma Community

Filled example

HomeToday: map, running jobs, alertsSearch bar: customer, address or jobnumberSectionsPlanningInterventionsCustomers & contractsCompanyPagesPlanning → Day board and technicianavailabilityInterventions → List and filtersInterventions → Job detail with photosCustomers → Customer fileCustomers → Recurring contracts (new)Company → Parts stock, invoicing exportsand integrations

Example data. Fieldnote is a fictional company used to fill all 61 boards, so the examples tell one consistent story.

Mature, Ana and Karim redraw the office web app before adding recurring contracts, because dispatchers cannot find the parts stock anymore.

What the team took away

Parts stock moves from a buried settings tab to the Company section, and recurring contracts get their own page under Customers instead of a modal on the customer file.

How to run it

Preparation

Agenda

  1. 15 min
    Read the current tree
    Walk the existing structure top to bottom. Mark in red every node support mentions in tickets and every page with a bounce above 70 %.
  2. 20 min
    List the jobs
    Each person writes the five things users come to do, one per sticky, in the user's words. Merge to a list of 6 to 10 jobs.
  3. 35 min
    Card sort
    Write every page as a card. In pairs, group the cards by job without looking at the current tree. Compare the two groupings and keep what both pairs did the same.
  4. 30 min
    Draw the target tree
    Build the new hierarchy from the groups: top level = jobs, second level = pages. No node deeper than three levels. Name each node with a verb or a plain noun, no marketing labels.
  5. 15 min
    Test with a task
    Give the support person three real tickets and ask them to point where the answer lives in the new tree. Every hesitation is a node to rename or move.
  6. 5 min
    Close
    Mark the pages to merge, the pages to delete and the redirects needed. That list is the deliverable, not the drawing.

Pitfalls

Afterwards

The target tree and the redirect list go to the tech lead for the migration plan. The designer uses the tree as the skeleton for low-fidelity wireframes of the top-level pages.

Related workshops

Back to the compassAll workshopsVersion française