Module 9 / Component craft
Product patterns and dashboard UI
Covers higher-order patterns from the component guide: pricing, carts, dashboards, hero sections, pagination, tab bars, and decision-heavy screens.
Learning outcomes
- Design comparison and pricing sections that make tradeoffs visible.
- Create dashboard cards and tables that support scanning, prioritization, and action.
- Use pagination, tabs, and hero patterns without hiding state or user location.
Lessons
Pricing and comparison patterns
Pricing UI should help users compare plans, understand tradeoffs, and choose without being tricked.
Practice: Design a three-plan pricing table with a clear recommended plan and transparent feature comparison.
Shopping-cart and checkout thinking
Cart experiences require line-item clarity, totals, errors, delivery or service details, and confidence before payment.
Practice: Map a checkout flow and identify trust points, failure states, and edit paths.
Dashboards and data density
Dashboards should prioritize decisions. Metrics, charts, tables, and filters need hierarchy and context.
Practice: Create a small dashboard with stat cards, a chart, a table, loading, empty, and error states.
Pagination, tabs, and mobile tab bars
Navigation patterns need active state, item count, labels, and predictable behavior across screen sizes.
Practice: Design a tabbed dashboard section and paginated list with active, empty, and overflow states.
Studio assignment
Dashboard prototype with pricing/comparison pattern, metrics, table, tabs, and list navigation.
Design a product dashboard concept for tracking learning progress in Jambo Learn.