Figma – FigJam: sitemap, card sorting, and user flow

Goal

In this session you draw the three main elements of homework 5 in FigJam: the labels checked with card sorting, the sitemap, and the user flow of the main task with decision points and exceptional states. By the end of the exercise you will have a structure that can be turned into wireframes in the next chapter.

Diagrams in FigJam

FigJam's shape and connector tools are enough for the sitemap and the flow. The most important consideration is readability: a diagram is useful if someone else understands it at first glance.

• Shapes: one page (sitemap) or one step (flow) per shape. Use the standard notation: rectangle = step, diamond = decision, rounded = start/end.
• Connectors: FigJam connectors follow the shape when you move it. You can write a condition on the arrow ("Yes", "Place full").
• Sections and colors: put the sitemap and the flow into separate sections. A consistent color code helps: for example green = successful end, red = error, gray = external system.
• Alignment and distribution: FigJam helps to arrange elements evenly; a tidy diagram looks more reliable.

Task: the board for homework 5

1. Content inventory and card sorting

1. Write the main content elements and functions of the product on stickies (15–25 of them), one element per sticky.
2. Ask at least three people to group these (open sort) and name the groups. They can do it on the board, or on paper and you record it.
3. Make a summary section: which groups recurred, what names they used, what surprised you.

2. Sitemap

4. Draw the hierarchy of the product's pages: one home page, below it the main areas, below them the subpages.
5. Mark the entry points, and highlight the shortest path to the main task.
6. The labels should be built on the result of the card sort; where you deviated, write next to it why.

3. User flow

7. Draw the flow of the main task from the user goal to the successful end. Use the diamond for decision points.
8. At each decision point write next to it the necessary information (with a small sticky).
9. Add at least three exceptional branches (for example error, place full, interruption), each with an outcome.
10. Mark the successful and the failed end with color.

4. Closing steps

11. Mark which screens will be the wireframes of homework 6 (3–5 screens of the main task).
12. Share the board with the instructor.

Checklist

• The card sort had at least three participants.
• The sitemap keeps the path of the main task short.
• The start of the flow is a goal, not a screen.
• Every decision point has information, every exceptional branch an outcome.
• The diagram is understandable even without reading anything else.

Learning resources

• Figma Learn – official help: search for "FigJam flowchart", "connectors", and "sections"