DilwoarH
commented
6 days ago Code Quality Process with Designer & Product Manager Sign-Off
1. Pre-Development Planning
- Kickoff / Engineering refinement Meeting:
- Involve developers, designers, and product managers (PMs).
- Define acceptance criteria, including design and business requirements.
- Identify edge cases, potential blockers, and key areas to focus on.
2. Development Stage
- Feature Branch Workflow:
- Develop each feature/bug fix in a separate branch (e.g.,
feature/128-new-dashboard). - Set up automated unit tests and code linting.
- Develop each feature/bug fix in a separate branch (e.g.,
3. Continuous Integration (CI) & Preview Link Setup
-
CI/CD Pipeline:
- On push or PR creation, Heroku automatically builds and deploys the branch to a Heroku Preview App.
- Example:
https://submit-pr-[PR_NUMBER].herokuapp.com
Example CI Workflow:
- Developer pushes code to the feature branch.
- Heroku CI pipeline deploys the code to a preview environment.
- Automated tests (unit, integration, acceptance) run to ensure code quality.
4. Peer Code Review
- Pull Request (PR):
- Developers submit a PR from the feature branch to the
mainbranch. - Peer code reviews focus on:
- Correct implementation of the feature or bug fix.
- Performance, security, and scalability of the code.
- Adherence to coding standards (ESLint, Prettier, etc.).
- Developers submit a PR from the feature branch to the
5. Designer Sign-Off (via Heroku Preview Link)
-
Preview Link Sharing:
- Share the Heroku Preview Link with the designer in the PR comments or via Slack.
- Designers review UI/UX changes using the preview environment.
Designer’s Checklist:
- Does the implementation match design specs (e.g., Figma)?
- Are interactions, transitions, animations, and responsiveness correct?
- Is the visual hierarchy consistent across screens?
-
Feedback & Approval:
- Designer approves the PR via comment or provides feedback for revisions.
Example Sign-Off Comment:
- “Design looks good. Approved!”
6. Product Manager Sign-Off (via Heroku Preview Link)
-
Preview Link for PMs:
- After designer approval, share the same Heroku Preview Link with the PM.
- PM checks the feature against business requirements and product roadmap.
PM’s Checklist:
- Does the feature solve the intended business problem?
- Is the user experience intuitive and efficient?
- Does it meet the defined acceptance criteria?
-
Feedback & Approval:
- PM approves or requests changes via PR comments or task management tools.
Example Sign-Off Comment:
- “Feature meets all requirements. Approved for merge!”
7. Automated Testing (CI) & Sentry Integration
-
Automated Testing:
- After designer and PM approval, automated tests (unit, integration, acceptance) are triggered again.
- Ensure all tests pass before merging into
main.
-
Sentry Integration for Error Tracking:
- Monitor for errors or warnings in both the preview environment and production using Sentry.
- Share significant Sentry logs in the PR for any necessary fixes.
Example:
- "Noticed a warning in Sentry logs on the preview app – let's investigate before moving forward."
8. Merge to Main Branch & Deployment
- After receiving approval from both the designer and PM, and passing all tests:
- Merge the feature branch into the
mainbranch. - Github action triggers production deployment upon a successful merge to
main.
- Merge the feature branch into the
9. Post-Deployment Monitoring (Sentry)
-
Sentry Monitoring:
- Monitor errors and performance issues in the production environment.
- Log any critical issues as hotfixes or new tickets for the next sprint.
-
Follow-Up with PM/Designer:
- Post-launch, share any critical Sentry alerts with the PM and designer.
10. Feedback & Retrospective
- Conduct a retrospective meeting after each sprint or major release:
- Gather feedback from designers and PMs on the process.
- Identify areas for improvement.
- Update the workflow if necessary.
Example Workflow
- Branch Name:
feature/128-new-dashboard - Heroku Preview Link:
https://submit-pr-[PR_NUMBER].herokuapp.com/ - Designer Feedback:
- Designer reviews the Heroku preview link, comments on PR: “UI looks good, approved.”
- PM Feedback:
- PM reviews the Heroku preview link, comments on PR: “Meets business requirements, approved.”
- Automated Tests: Run automatically after approvals.
- Merge to Main: Code is merged and deployed to production.
- Sentry Monitoring: No critical issues detected in Sentry.
- Follow-Up: Post-deployment checks with Sentry, feedback loop in retrospective.
Benefits of This Workflow
- Visibility for All Stakeholders: Designers and PMs can review changes visually using Heroku’s preview links without needing local setups.
- Early Detection of Errors: Sentry integration ensures errors are tracked both in staging and production.
- Continuous Feedback Loop: Designer and PM feedback is incorporated early, reducing rework.
- Automated Safeguards: CI pipelines, automated testing, and Sentry ensure that only high-quality code reaches production.
rosado
What
Propose an updated code review and product sign off process.
Why
We want to implement a sign off process that allows product managers and designers to review any work before it gets released to production.
A sign off process will ensure any bugs and immediate issue can be resolved before a feature is released.
Outputs of this issue