174 lines
4.5 KiB
Markdown
174 lines
4.5 KiB
Markdown
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:
|
||
|
||
1. Inspect existing dashboard structure
|
||
|
||
* Locate the dashboard controller/view/components.
|
||
* Reuse existing card, alert, progress bar, and button styles.
|
||
* Follow existing UI conventions.
|
||
|
||
2. 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.
|
||
|
||
3. 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”
|
||
|
||
4. 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”
|
||
|
||
5. 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.
|
||
|
||
6. 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.
|
||
|
||
7. 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.
|
||
|
||
8. 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.
|
||
|
||
9. 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.”
|
||
|
||
10. 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
|