Web-Dev-Path
Services Page PRD Web Dev Path Document
Services Page Design - Web Dev Path
Focus: Nonprofits & Early-Stage Enterprises
Date: 18th July 2025
Last Updated:
1. Executive Summary
Web Dev Path connects early-career tech professionals with real-world project experience by delivering community-built digital solutions for nonprofits, NGOs, social enterprises, and early-stage mission-driven startups.
This Services Page will communicate what we do, who we serve, and how to engage with us, targeted at resource-constrained but mission-driven teams who need web, product, or design support and are open to collaborating with volunteer contributors.
2. Audience Profile
Primary Audience:
- Nonprofits, Charities & NGOs (small to mid-size)
- Early-Stage Social Enterprises (pre-seed to seed stage)
- Grassroots Community Initiatives
- Educational, Health, e-Commerce, Finance, Youth Development Projects
Secondary Audience: - Philanthropic organisations evaluating partners for grants
- CSR team exploring meaningful volunteer placement
- Partners (incubators, accelerators, university programs)
3. Service Categories
Core Service Areas
- Website Design & Development
- UI/UX Design
- Product Management
- Low-Code Solutions
- Technical Writing & Documentation
- Web Accessibility Improvements
- Social Media Management
Sector-Specific Services - Nonprofits & NGOs
- Mission-aligned websites (donation portals, volunteer sign-up, etc.)
- Campaign reporting dashboards (visualised in tools like Power BI, Tableau)
- Even platforms or RSVP forms
- Education & Youth Empowerment
- LMS platforms, online course portals, etc
- Educational microsites or knowledge bases
- Career pathway and mentor match-making apps
- Healthcare & Wellness
- Clinic/hospital websites with serve directories and appointment booking
- Healthcare education platforms and symptom guides
- Telemedicine (consultation, therapy, etc.)
- Civic Tech/Community Building
- City info platforms, community bulletin boards
- Petition or engagement websites
- Arts & Culture
- Artist portfolios, museum websites, or gallery platforms
- Event calendars and donation-friendly e-commerce
- Podcast/blog setup for cultural storytelling
4. How We Work
- Project Request - You fill out a form to tell us your needs
- Needs Discovery - We meet to clarify goals, team needs, and feasibility
- Internal Agreement - We decide if your project aligns with our goals
- Team Matching - Volunteers (designers, PMs, developers) are assigned
- Build & Deliver - Sprints with regular check-ins and demos
- Handoff & Documentation - You get full access and documentation
- Maintenance Service - We maintain your infrastructure (coming soon)
5. Page Structure & Features
- Hero Section
- Headline
- Sub
- CTA
- What We Offer
- Tabs or filters by category/sector (Nonprofits, NGOs, etc.)
- Cards for each service (icon, description, example use case)
- Who It’s For
- Persona-based blurbs:
- “You’re a nonprofit director with a PDF newsletter and no website.”
- “You run a youth-led climate org and need a campaign page.”
- “You’re launching a co-op and need a digital tool to organise members.”
- Persona-based blurbs:
- How It Works
- 7-step visual flow
- Case Snapshots
- Mini case studies with visuals:
- Before/After screenshots
- Volunteer profiles
- “What We Built” and “Why It Mattered”
- Mini case studies with visuals:
- FAQs
- Final CTA Section
6. Success Criteria
- Visitors can easily understand what services are available and whether they qualify
- Early-stage organisations can envision collaborations and take action via contact forms
- Web Dev Path maintains clarity on what it offers and how
- Enhanced credibility and traction for mission-driven project acquisition
7. Timeline - to be discussed
- Content Discovery
- Wireframes
- Design
- Development
- QA and Launch
- Review and Iterate
8. Next Steps
- Approve service classification and tone
- Finalise intake form content
- Begin wireframe and copywriting in parallel
- Identify case study partners
I would just like to add up to what I've suggested on our last meeting, regarding the page structure; Instead of having two(multiple) hero section, it's better to just update our current hero section on our home page. This way, we are passively promoting our Services Page as the call-to-action(CTA) could be link to our Services Page directly, and this will make the Services Page be viewed as part of the whole website, rather than looking like a microsite.
Additionally, we could make it something like what freelancing websites(Upwork, Fiverr, etc.) have. Where there's a toggle to shift the view, either for freelancers or employers. This way we could have two different call-to-action(CTA), one for people interested to join our team, and one for our target audience (NGOs, Partners, etc.)
I would just like to add up to what I've suggested on our last meeting, regarding the page structure; Instead of having two(multiple) hero section, it's better to just update our current hero section on our home page. This way, we are passively promoting our Services Page as the call-to-action(CTA) could be link to our Services Page directly, and this will make the Services Page be viewed as part of the whole website, rather than looking like a microsite.
Additionally, we could make it something like what freelancing websites(Upwork, Fiverr, etc.) have. Where there's a toggle to shift the view, either for freelancers or employers. This way we could have two different call-to-action(CTA), one for people interested to join our team, and one for our target audience (NGOs, Partners, etc.)
Hey Brian :) ,
Do you mean adding a "Our Services" link to the Homepage linking to a new "/our-services/" page that contains a Hero following the same format we already have for the other pages? If so, I like this simple approach. We are trying to leverage our current structure to provide the best UX for promoting our services without overthinking the approach. Does it make sense @briangesteban and @sergiojramirez ?
Hi @mariana-caldas,
Do you mean adding a "Our Services" link to the Homepage linking to a new "/our-services/" page that contains a Hero following the same format we already have for the other pages? If so, I like this simple approach.
Yes, that's the general idea. We want to have a call-to-action (CTA) that links to our new services page.
We should consider updating the hero section on the homepage, as it feels outdated. Currently, it focuses on inviting talents instead of clients. I propose we implement a toggle feature in the hero section that allows visitors to choose between joining as a talent (developer, designer, product manager, etc.) or as a client (NGO, small businesses, etc.), each with its own CTA buttons.
We are trying to leverage our current structure to provide the best UX for promoting our services without overthinking the approach.
I think that's possible. We could maintain hero sections on each page and adapt that structure to the new services page. However, I strongly recommend that we consider to update our home page's hero section.
Additionally, to enhance UX, if we plan to maintain multiple hero sections structure, maybe our development team could tackle the scrolling view from our blog page when navigating to a blog post. Currently, when you open a blog post it automatically scrolls at the top(hero section) which I think could cause nuance to users and inefficient as you always have to scroll down to view the actual content.
Furthermore, we should also update the header/navigation menu. The "Join Us" CTA will be quite vague as we have two sets of target audiences now, talents and clients. It would also be beneficial to add the Services Page and Home Page on our navigation menu. Using the logo as a navigation link may not be user-friendly, especially for those who are not tech-savvy.
Hi @mariana-caldas,
Do you mean adding a "Our Services" link to the Homepage linking to a new "/our-services/" page that contains a Hero following the same format we already have for the other pages? If so, I like this simple approach.
Yes, that's the general idea. We want to have a call-to-action (CTA) that links to our new services page.
We should consider updating the hero section on the homepage, as it feels outdated. Currently, it focuses on inviting talents instead of clients. I propose we implement a toggle feature in the hero section that allows visitors to choose between joining as a talent (developer, designer, product manager, etc.) or as a client (NGO, small businesses, etc.), each with its own CTA buttons.
We are trying to leverage our current structure to provide the best UX for promoting our services without overthinking the approach.
I think that's possible. We could maintain hero sections on each page and adapt that structure to the new services page. However, I strongly recommend that we consider to update our home page's hero section.
Additionally, to enhance UX, if we plan to maintain multiple hero sections structure, maybe our development team could tackle the scrolling view from our blog page when navigating to a blog post. Currently, when you open a blog post it automatically scrolls at the top(hero section) which I think could cause nuance to users and inefficient as you always have to scroll down to view the actual content.
Furthermore, we should also update the header/navigation menu. The "Join Us" CTA will be quite vague as we have two sets of target audiences now, talents and clients. It would also be beneficial to add the Services Page and Home Page on our navigation menu. Using the logo as a navigation link may not be user-friendly, especially for those who are not tech-savvy.
I like your thinking, @briangesteban ! Do you think we're ready to write the first issue for Brian to provide us a wireframe based on this discussion @Ruky-Ericson , @dami-boy , and @Yowa-Tosin ?
Additionally, to enhance UX, if we plan to maintain multiple hero sections structure, maybe our development team could tackle the scrolling view from our blog page when navigating to a blog post. Currently, when you open a blog post it automatically scrolls at the top(hero section) which I think could cause nuance to users and inefficient as you always have to scroll down to view the actual content.
Rather than auto-scroll down to the main blog content on page load, why don’t we use the hero section for the post’s title? Doing so would eliminate the double <h1> elements on the page and prevent unnecessarily forcing a page scroll on load. It would look something like this:
Thanks @mariana-caldas !
Rather than auto-scroll down to the main blog content on page load, why don’t we use the hero section for the post’s title? Doing so would eliminate the double
<h1>elements on the page and prevent unnecessarily forcing a page scroll on load. It would look something like this:
That's a good idea @oluwatobiss. We could consider this approach, we'll try to checkout how it looks like on different scenarios on the design mockup. Thanks for this!