Screenshot and UI map

Screenshots should explain real product workflows. They should not decorate the page. Each screenshot needs a clear purpose, a capture environment, and a review date.

Screenshot rules

Rule	Reason
Use realistic demo data.	Empty screens do not explain the workflow.
Crop only when the surrounding UI is irrelevant.	Users need to recognize where they are.
Avoid private client data.	Documentation may be shared with prospects or multiple clients.
Keep a stable file name.	Existing links should survive image refreshes.
Record capture context.	Reviewers need to know whether the image is current.

Required screenshot inventory

Area	Screenshot	Purpose	Suggested file
Start	Company space dashboard	Shows the first operational landing point.	/screenshots/client/dashboard.png
Users	User list with filters	Explains searching, state, role, and bulk operations.	/screenshots/client/users-list.png
Users	User detail	Shows role, state, metadata, groups, and learning.	/screenshots/client/user-detail.png
Groups	Group detail	Shows membership and assigned content.	/screenshots/client/group-detail.png
Content	Content list	Shows own and purchased content in a space.	/screenshots/client/content-list.png
Content	Version detail	Explains active versions and upgrade risk.	/screenshots/client/content-version.png
Assignments	Assignment form or detail	Shows direct and group assignment fields.	/screenshots/client/assignment-detail.png
Learner	Assigned learning	Shows what the learner receives.	/screenshots/client/learner-assigned-learning.png
Learner	Completion and certificate	Shows completion confirmation and certificate state.	/screenshots/client/learner-completion.png
Reporting	Completion report	Shows status, deadline, and exportable data.	/screenshots/client/reporting-completion.png
Integrations	API credential or webhook setting	Shows what an admin configures.	/screenshots/client/integration-settings.png

Capture checklist

For every screenshot, record:

• capture date,
• environment,
• user role used for capture,
• relevant feature flag or configuration,
• source page URL,
• reviewer,
• whether the screenshot contains generated demo data or real anonymized data.

UI map

flowchart TD
  Dashboard[Dashboard] --> Users[Users]
  Users --> UserDetail[User detail]
  Dashboard --> Groups[Groups]
  Groups --> GroupDetail[Group detail]
  GroupDetail --> GroupAssignments[Group assignments]
  Dashboard --> Content[Content]
  Content --> ContentDetail[Content detail]
  ContentDetail --> Versions[Versions]
  Dashboard --> Reporting[Reporting]
  Reporting --> Exports[Exports]
  Dashboard --> Integrations[API credentials and webhooks]
  UserDetail --> LearnerView[Learner view]
  LearnerView --> Certificate[Certificate]

Missing screenshots

Until screenshots are captured, pages should use this wording near the relevant section:

Screenshot needed: describe the exact screen, role, and state that should be captured.