Creating a QA Process for Web Design
At C Squared Social, I built a QA method to streamline the design-to-development handoff, improve the development process, and strengthen communication between teams and reduce revisions.
Project Details
This project focused on transforming web development QA from an informal final check before launch into a structured system that occurs at every step of the web design project.
The Problem
Web projects were launching with inconsistencies across devices, broken forms, accessibility oversights, visual deviations from approved designs, and late-stage bugs creating developer rework.
The Goal
Design a scalable QA framework that reduced launch errors, standardized testing across breakpoints, improved collaboration between design and development, and increase predictability in delivery timelines.
Challenges
- High project volume across industries
- Different tech stacks and CMS platforms
- Varying levels of developer QA maturity
- Tight timelines
- No existing documentation or ownership model
- QA often happened too late in the lifecycle, creating bottlenecks.
Constraints
- Breakpoint complexity (desktop, tablet, mobile)
- Browser inconsistencies
- Accessibility compliance expectations
- The system needed to be lightweight enough to adopt yet structured enough to prevent oversight
Outcome
- Established a 6-phase QA framework embedded into the SDLC
- Implemented breakpoint-based phased testing (Desktop → Mobile → Tablet)
- Standardized bug severity and tagging in BugHerd
- Reduced post-launch defects and last-minute fixes
- Improved collaboration and accountability between QA, Design, and Dev
- The QA framework became reusable infrastructure across future projects.
My Process
While building this QA framework, I focused on creating a clear, repeatable process that all team members could implement. Instead of treating QA as a last-minute checklist, I designed a workflow that kept everyone aligned each step of the SDLC to ensure each client project was intentionally crafty, accessible, and polished.
1. System Mapping
Mapped QA checkpoints to the Software Development Lifecycle to ensure quality was proactive, not reactive.
2. Phase Design
Created six structured QA phases with defined objectives, scope, and criteria.
3. Workflow Design
Built a phased 4-week testing cadence aligned to breakpoints.
4. Collaboration Infrastructure
Developed a BugHerd SOP to minimize ambiguity and improved iteration cycles.
- Severity classification by user impact
- Clear lifecycle states (New → In Progress → Fixed → Retest → Closed)
- Consistent tagging conventions
5. Accessibility & Edge Cases
Formalized checks for:
- Keyboard navigation
- Contrast compliance
- Form validation clarity
- Error states and interaction indicators
Tools Used in QA Process Development
To make building the landing page easier, nearly every element on the page is a component. I built out form elements, buttons, and icons utilizing auto layout to quickly align and structure each component to make the content dynamic and responsive.
Figma
Designed responsive layouts, documented interaction states, and ensured design system alignment before and during QA.
Bugherd
Logged, annotated, prioritized, and tracked UX issues directly on live builds to streamline cross-functional collaboration.
Monday.com
Tracked phased QA passes, timelines, and ownership to maintain predictable delivery across projects.