diff --git a/CHANGELOG.md b/CHANGELOG.md index 03db8081..f27fb910 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -232,6 +232,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added +- Introduced SDD structure for Services Page +- Updated SDD docs to include new Service page issues + ### Fixed ### Changed diff --git a/specs/services-page/decisions.md b/specs/services-page/decisions.md new file mode 100644 index 00000000..701552c7 --- /dev/null +++ b/specs/services-page/decisions.md @@ -0,0 +1,148 @@ +# Services Page Decisions + +## Source of Truth + +### Decision + +The Services Page specification folder is the primary source of truth for this initiative. + +### Reason + +Requirements, decisions, implementation references, and task tracking should remain centralized and easily discoverable. + +### Implementation + +Contributors should consult: + +- specification.md +- decisions.md +- references.md +- tasks.md + +before beginning implementation work. + +GitHub Issues and Pull Requests should reference these documents whenever applicable. + +## Branch Strategy + +### Decision + +All Services Page development will occur within the `services-dev` branch. + +### Reason + +The Services Page represents a large initiative involving multiple contributors. + +Using a dedicated branch allows the team to: + +- Reduce merge conflicts. +- Test functionality independently. +- Continue maintaining the production site through `main`. +- Deploy Services Page work to a dedicated Netlify staging environment. + +--- + +## Hero Section Form + +### Decision + +Remove custom intake form fields from the Hero section. + +### Reason + +Calendly already collects the required information. + +Maintaining both a custom form and Calendly introduces duplicate data entry and unnecessary friction. + +### Implementation + +Replace the form with a CTA that opens Calendly. + +--- + +## Testimonials Section + +### Decision + +Do not implement the Testimonials section during the initial release. + +### Reason + +The organization does not currently have enough completed client projects to support testimonials. + +### Future State + +The section may be implemented after sufficient client feedback and case studies have been collected. + +--- + +## Pricing Strategy + +### Decision + +Pricing will be one of the final sections implemented. + +### Reason + +The team requires additional time to conduct pricing research and validate assumptions before publishing pricing information. + +The goal is to establish pricing that is: + +- Affordable for small businesses. +- Competitive within the market. +- Sustainable for project delivery. +- Aligned with Web Dev Path's educational mission. + +### Implementation + +Pricing cards may be built after pricing research is completed and approved. + +--- + +## Specification-Driven Development + +### Decision + +The Services Page will be developed using a lightweight Specification-Driven Development approach. + +### Reason + +The team wants to: + +- Improve onboarding. +- Reduce ambiguity. +- Improve collaboration. +- Improve AI-assisted development workflows. +- Create experience with specification-based delivery practices. + +### Implementation + +The following documents act as the source of truth: + +- specification.md +- decisions.md +- tasks.md + +GitHub Issues and Pull Requests should reference these documents whenever applicable. + +--- + +## Netlify Environment Strategy + +### Decision + +Services Page development will be validated through a dedicated Netlify staging environment connected to `services-dev`. + +### Reason + +This allows the team to: + +- Test independently of production. +- Validate functionality before merging. +- Review large features incrementally. + +### Implementation + +Production remains connected to `main`. + +Services staging remains connected to `services-dev`. \ No newline at end of file diff --git a/specs/services-page/references.md b/specs/services-page/references.md new file mode 100644 index 00000000..59690812 --- /dev/null +++ b/specs/services-page/references.md @@ -0,0 +1,132 @@ +# Services Page References + +## Design + +### Approved Mockups + +[Figma](https://www.figma.com/design/Fp0lLB5OWZLJseTs2svGbg/Web-Dev-Path_design?node-id=4813-12781&t=nFCiwC8KAHXakSmE-0) +[Figma Prototypes: animations and behaviours](https://www.figma.com/proto/Fp0lLB5OWZLJseTs2svGbg/Web-Dev-Path_design?node-id=5354-12767&viewport=11375%2C-3827%2C0.23&t=fUPGkKi107ruYZK8-0&scaling=contain&content-scaling=fixed&starting-point-node-id=5354%3A12839&show-proto-sidebar=1) + + +### Google Docs + +[Components' Study, Content, and Architecture](https://docs.google.com/document/d/15evnvS0T8jMhE_mlp1IyIOEhWWKH7eaDwoKVWrLG9PM/edit?usp=sharing) +[Design System Doc](https://docs.google.com/document/d/16SaPlRJmAB6GCPcW4uo09owKVvkD0sgKm-BZzh0avEc/edit?usp=drive_link) + + +### Design Notes + +- Testimonials section is deferred. +- Hero form has been replaced by a Calendly CTA. +- Mobile and desktop layouts should follow the approved Figma mockups. +- Pricing values are pending research and team review. + +--- + +## Environments + +### Production + +https://www.webdevpath.co + +Purpose: + +Current production website. + +### Services Development Staging + +[NETLIFY_STAGING](https://services-dev-webdevpath.netlify.app/) + +Purpose: + +Dedicated environment for Services Page development and testing coming from +the branch `services-dev` + +### Main Staging + +--- + +## Integrations + +### Calendly + +[CALENDLY](https://calendly.com/marianacaldas/30-min) + +Purpose: + +Primary lead capture and discovery call booking flow. + +Notes: + +- Do not implement duplicate intake forms. +- Calendly should remain the primary scheduling mechanism. + +--- + +## GitHub + +### Repository + +https://github.com/Web-Dev-Path/web-dev-path + +### Services Page Specification + +/specs/services-page/specification.md + +### Services Page Decisions + +/specs/services-page/decisions.md + +### Services Page Tasks + +/specs/services-page/tasks.md + +### Services Page References + +/specs/services-page/references.md + +--- + +## Related Issues + +Add Services Page GitHub Issues here as they are created. + +Example: + +- Hero Section +- What We Offer Section +- How It Works Section +- Pricing Research +- Pricing Section +- Technology Stack Section + +--- + +## Pricing Research + +Purpose: + +Provide supporting information for future pricing decisions. + +Future Resources: + +- Competitor research +- Freelancer pricing research +- Agency pricing research +- Non-profit pricing considerations +- Recommended pricing proposal + +--- + +## Future Resources + +Reserved for: + +- Case studies +- Client testimonials +- Discovery call analytics +- Conversion metrics +- Additional design iterations +- Service package documentation + + diff --git a/specs/services-page/specification.md b/specs/services-page/specification.md new file mode 100644 index 00000000..bbd9ef42 --- /dev/null +++ b/specs/services-page/specification.md @@ -0,0 +1,270 @@ +# Services Page Specification + +## Problem + +Web Dev Path currently lacks a dedicated services page capable of clearly communicating our offerings and creating opportunities for potential clients to engage with the organization. + +Without a dedicated services page: + +- Potential clients have limited visibility into available services. +- Contributors have fewer opportunities to gain experience through real-world projects. +- Organizations interested in collaborating with Web Dev Path lack a clear path to start a conversation. +- The organization cannot effectively communicate its technical capabilities, process, or pricing approach. + +## Goal + +Create a responsive services page that: + +- Explains Web Dev Path's service offerings. +- Builds trust and credibility with potential clients. +- Demonstrates the team's technical capabilities. +- Provides transparent information about engagement options. +- Encourages discovery call bookings. +- Creates opportunities for contributors to gain experience through real client projects. + +## Project Context + +The Services page is part of Web Dev Path's effort to create opportunities for contributors to gain practical experience through real-world projects. + +In addition to supporting lead generation, the page should help establish a pathway for potential clients to engage with Web Dev Path and collaborate with contributors under the guidance of experienced team members. + +## Users + +### Small Business Owners + +- Need website development. +- Need technical support. +- Need affordable pricing. +- Need guidance through the development process. + +### Startup Founders + +- Need MVP development. +- Need product guidance. +- Need technical implementation. +- Need flexible collaboration. + +### Non-Profit Organizations + +- Need digital presence. +- Need community-focused solutions. +- Need affordable development support. + +--- + +## Functional Requirements + +### Hero Section + +#### Purpose + +Introduce the value proposition and encourage visitors to schedule a discovery call. + +#### Requirements + +- Display a primary headline. +- Display supporting copy. +- Display a primary CTA. +- Support desktop and mobile layouts. + +#### Constraints + +Do not implement custom intake form fields. + +Calendly already collects scheduling information. Requiring visitors to complete both a page form and Calendly creates duplicated data entry and unnecessary friction. + +#### CTA + +Primary CTA opens the Calendly booking flow. + +--- + +### What We Offer + +#### Purpose + +Present available service categories. + +#### Requirements + +Display service categories as cards or visual tags. + +#### Service Categories + +- Website Development +- Product Management +- UI / UX Design +- CRM Development +- CMS Development +- Mobile Development +- SEO Optimization +- Project Management + +--- + +### How It Works + +#### Purpose + +Explain the engagement process. + +#### Process Steps + +1. Share Your Project +2. Get Your Team +3. We Build Together +4. Project Launch + +--- + +### Why Choose Us + +#### Purpose + +Build trust and communicate differentiators. + +#### Content Areas + +##### Client-Centric Approach + +Focus on understanding client goals and delivering practical solutions. + +##### Talent Development Model + +Projects create opportunities for contributors to gain real-world experience while delivering value to clients. + +##### End-to-End Expertise + +Support clients throughout planning, design, development, and launch. + +--- + +### Technology Stack + +#### Purpose + +Demonstrate technical capabilities. + +#### Requirements + +Technology list should remain easy to update over time. + +--- + +### Testimonials + +#### Status + +Deferred. + +#### Reason + +The organization does not currently have sufficient completed client projects to support a testimonial section. + +#### Implementation + +No development work is required during the initial release. + +Design placeholders may remain in Figma. + +--- + +### Pricing + +#### Purpose + +Provide transparent starting pricing ranges. + +#### Requirements + +Display available pricing tiers. + +#### Constraints + +Pricing must be supported by market research before implementation. + +Research should consider: + +- Comparable agencies. +- Freelancers. +- Small business affordability. +- Web Dev Path operational capacity. +- Long-term sustainability. + +Pricing values should not be finalized until pricing research has been completed and reviewed with the team. + +--- + +### Discovery Call Section + +#### Purpose + +Provide a final conversion opportunity. + +#### Requirements + +- Display CTA. +- Open Calendly booking flow. +- Support responsive layouts. + +--- + +### Footer + +#### Requirements + +Use existing Web Dev Path footer patterns. + +--- + +## Non-Functional Requirements + +### Responsiveness + +- Desktop +- Tablet +- Mobile + +Layouts must follow approved Figma designs. + +### Accessibility + +- Interactive elements must remain keyboard accessible. +- Buttons and links must remain clearly identifiable. + +### Performance + +- Avoid unnecessary client-side complexity. +- Avoid animations that negatively impact performance. + +### Maintainability + +- Prefer reusable components whenever practical. +- Support future content updates with minimal code changes. + +--- + +## Out of Scope + +- Custom lead capture forms +- CRM integrations +- Automated proposal generation +- Client portals +- Testimonial functionality +- Payment processing + +--- + +## Acceptance Criteria + +The page is considered complete when: + +- All approved sections are implemented. +- Desktop layouts match approved Figma designs. +- Mobile layouts match approved Figma designs. +- Calendly integration is functional. +- No duplicated intake form exists. +- Testimonial functionality remains excluded from implementation. +- Responsive behavior works across supported screen sizes. +- Content is editable without major code changes. +- The page successfully deploys through the services-dev workflow. \ No newline at end of file diff --git a/specs/services-page/tasks.md b/specs/services-page/tasks.md new file mode 100644 index 00000000..42b4ab44 --- /dev/null +++ b/specs/services-page/tasks.md @@ -0,0 +1,132 @@ +# Services Page Tasks + +## Foundation + +- [PR 306](https://github.com/Web-Dev-Path/web-dev-path/pull/306) Create specification-driven development structure. - DONE +- [Slack Convo](https://webdevpath.slack.com/archives/C09JD1SKVSQ/p1779164066044519) Align team on specification-driven workflow.- DONE +- [Issue 307](https://github.com/Web-Dev-Path/web-dev-path/issues/307) Reference specification files and how to use it under the Wikipedia. - OPEN + +--- + +## Hero Section + +- [Issue #308](https://github.com/Web-Dev-Path/web-dev-path/issues/308) - OPEN + + +--- + +## What We Offer + +- [Issue #310](https://github.com/Web-Dev-Path/web-dev-path/issues/310) - OPEN + +--- + +## How It Works + +- [Issue #311 ](https://github.com/Web-Dev-Path/web-dev-path/issues/311) - OPEN + +--- + +## Why Choose Us + +- [Issue #312](https://github.com/Web-Dev-Path/web-dev-path/issues/312) - OPEN + +--- + +## Empowering Your Business with Modern Web & Team Solutions section (Technology Stack) + +- [Issue #313](https://github.com/Web-Dev-Path/web-dev-path/issues/313) + +--- + +## Testimonials + +### Deferred + +- [ ] Collect client testimonials. +- [ ] Collect case studies. +- [ ] Reassess implementation after future projects are completed. + +--- + +## Pricing Research + +### Research + +- [ ] Research pricing models used by comparable agencies. +- [ ] Research pricing models used by freelancers. +- [ ] Research pricing models used by development consultancies. +- [ ] Research pricing for website development services. +- [ ] Research pricing for product management services. +- [ ] Research pricing for UI/UX services. +- [ ] Research pricing for CRM implementation services. +- [ ] Research pricing for CMS implementation services. + +### Analysis + +- [ ] Identify affordable pricing ranges. +- [ ] Assess operational feasibility. +- [ ] Assess sustainability of proposed pricing. + +### Team Review + +- [ ] Prepare pricing recommendation document. +- [ ] Present findings to the team. +- [ ] Collect feedback. +- [ ] Finalize pricing strategy. + +--- + +## Pricing Section + +### Dependency + +Pricing implementation must not begin until pricing research has been completed and approved. + +### Development + +- [ ] Finalize pricing tiers. +- [ ] Create pricing card component. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## Need More Info? Let's Schedule Your Discovery Call section (Discovery Call Section) + +- [issue #314](https://github.com/Web-Dev-Path/web-dev-path/issues/314) - OPEN + + + +--- + +## Quality Assurance + +### Accessibility + +- [ ] Verify keyboard navigation. +- [ ] Verify button accessibility. +- [ ] Verify link accessibility. + +### Responsiveness + +- [ ] Test desktop layouts. +- [ ] Test tablet layouts. +- [ ] Test mobile layouts. + +### Performance + +- [ ] Review page performance. +- [ ] Review image optimization. +- [ ] Review animation performance. + +### Final Review + +- [ ] Validate implementation against specification.md. +- [ ] Validate implementation against decisions.md. +- [ ] Validate implementation against approved Figma designs. +- [ ] Obtain team approval. +- [ ] Merge `services-dev` into `main`. +- [ ] Validate deployment in staging. +- [ ] Validate deployment in production.