Web views

Design a set of connected web views for a SaaS product: an overview page, a detail page, and a settings page. Treat them as parts of one flow, not isolated screens. Each view should solve a different job: scan status, inspect one item, and change account or workspace settings.

Make the hierarchy change by view. The overview should help users compare at a glance. The detail page should surface the selected item, related actions, and supporting information without burying the primary task. The settings page should group controls by intent and keep destructive actions separate from routine preferences.

Show how users move between views with tabs, breadcrumbs, side nav, or another pattern that fits the product. Include the key states for at least one view: loading, empty, and error. If a view blocks progress, show the recovery path in the same screen instead of forcing a dead end.

Design for a real web app, not a generic mockup. Use consistent spacing, type, and interaction patterns across the set, but let each view feel tuned to its job. The result should read as one product with three distinct surfaces.

Incorporate visual storytelling by using consistent design elements that guide users intuitively through each view.