4.5 KiB
Add a dashboard progress widget for post-onboarding activation.
Context: This is a powder coating shop management app. We recently shortened the setup wizard and added a guided activation flow. Some setup items are intentionally deferred so users can evaluate the system quickly before fully configuring everything.
Goal: Create a dashboard widget that helps users “get the most out of their shop” without making it feel like unfinished homework.
Do NOT call it “Complete setup.”
Recommended title: “Get the most out of your shop”
Purpose: Show progress based on real usage/configuration milestones and give users clear next actions.
Requirements:
- Inspect existing dashboard structure
- Locate the dashboard controller/view/components.
- Reuse existing card, alert, progress bar, and button styles.
- Follow existing UI conventions.
- Widget visibility Show the widget for companies that:
- Have completed the setup wizard
- Are not yet meaningfully activated OR still have recommended setup tasks incomplete
It is okay to keep showing it until all tasks are complete.
- Progress calculation Create a checklist of 5–6 items max.
Suggested items:
A. Create your first quote or job Complete when:
- company has at least one quote OR at least one job
CTA:
- “Create quote/job” or “Start workflow”
B. Move a job through your workflow Complete when:
- at least one job has had a status/stage change
- If there is no existing way to detect this, use the closest available activity/history/status timestamp
CTA:
- “Open daily board”
C. Create your first invoice Complete when:
- company has at least one invoice
CTA:
- “Create invoice”
D. Invite your team Complete when:
- company has more than one active user/team member
CTA:
- “Invite team”
E. Customize pricing Complete when:
- company has configured pricing tiers/custom pricing settings beyond defaults
- If this is hard to detect reliably, make this optional or use a simple existing flag/count
CTA:
- “Customize pricing”
F. Review payment terms Complete when:
- company has customized payment terms from default
- If this is hard to detect reliably, make this optional or use a simple existing flag/value comparison
CTA:
- “Review terms”
- UX copy Use friendly, value-focused language.
Widget title: “Get the most out of your shop”
Subtitle: “Complete a few quick steps to unlock the full workflow.”
Progress text: “X of Y complete”
Avoid wording like:
- “Incomplete setup”
- “Missing configuration”
- “Required steps”
- Visual design
- Use a card-style widget near the top of the dashboard.
- Include a progress bar.
- Show checklist rows with completed and incomplete states.
- Completed items should feel rewarding.
- Incomplete items should have one clear CTA.
- Keep it compact and non-annoying.
- Behavior
- Each checklist item should link to the most relevant existing page or action.
- Do not build new duplicate workflows.
- Reuse existing guided activation route for “Create your first quote or job” if available.
- If a task cannot be detected reliably yet, implement it conservatively or leave a TODO comment explaining why.
- Data/query logic
- Prefer calculating progress server-side in the dashboard view model.
- Avoid expensive queries.
- Reuse existing repositories/services if available.
- Keep the logic readable and testable.
- Dismissal behavior Add optional dismissal if easy:
- Let user collapse or dismiss the widget.
- If dismissed, do not permanently hide it forever unless all tasks are complete.
- Prefer “collapse” over full dismissal.
- Store dismissal/collapse state only if there is already a simple place to store dashboard preferences.
- Important product guidance This widget should guide users from evaluation into real adoption.
The emotional framing should be: “You’re already making progress — here are the next valuable things to try.”
Not: “You failed to finish setup.”
- Implementation style Before coding:
- Inspect relevant dashboard, setup wizard, guided activation, company preference, quote, job, invoice, user/team, pricing, and payment term structures.
- Propose a concise implementation plan.
- Then implement incrementally.
After coding:
- Summarize changed files.
- Explain how progress is calculated.
- Provide manual QA steps.
Manual QA scenarios:
- Brand new company after setup wizard
- Company with first quote/job created
- Company with moved job/status change
- Company with invoice created
- Company with invited team member
- Company with all tasks complete