Explore

Teamwork SOP

Website Development SOP

Phase 1: Client Onboarding

Step 1: Initial Meeting

Understand Client Preferences for website design & layout, photos, and illustrations.

Discuss business needs, services/products & offerings, and competitors' websites.

Explore the client's sales funnel: Online/Offline/Store Visit.

Discuss color preferences.

Understand lead generation and customer communication channels.

Step 2: Additional Requirements

Discuss Blog/Social Media/Podcast/YouTube/Fundraising methods.

Discuss Payment Gateway/Donation Processor needs.

Traffic sources and landing page requirements.

Administer a form or quiz for further understanding.

Discuss the number of 'Thank You' pages required.

Step 3: Pre-Reading for Team

Share client references and brief team on client needs.

⁠

Phase 2: Planning and Brainstorming

Step 1: Team Meeting

Participants: Developer, UI/UX Designer, Content Writer, Project Manager

Prepare Project Timeline

Discuss Implementation Challenges

Discuss work responsibilities and existing workload

List accesses received from the client side and pending requirements

Research for inspiration: 4-5 websites to emulate

Step 2: Content vs. Design Debate

Homepage and blogs: Content should follow design

Landing pages and service/program pages: Design should follow content

Step 3: Sitemap Preparation

Include required listed sections

Navigation Bar /Menu Bar Homepage About Us/Mission Vision Programs/Services TOS/Privacy Policy Blogs Landing Pages Knowledgebase/Resources Donate Contact Us Volunteer Career Teams/Founders/Board Members/Contributors Past Impact Works Testimonials

⁠

Phase 3: Design and Copywriting

Step 1: Share Requirement With Clients

Get approval or changes for sitemap and initial ideas.

Step 2: Mood board Preparation

Tools and requirements for preparing the mood board.

Step 3: Flowchart Preparation

Outline the user journey and interactions.

Step 4: Wireframe Preparation

Tools for wireframe

Requirements to Prepare Wireframe (Layout)

Step 5: Figma Design

Start developing wireframe/layout to drive action for visitors.

Develop in Figma with demo content and photos.

Add actual content in Figma.

Step 6: Final Design Approval

Share the final Figma design with the client for approval

Phase 2.5: Content Creation and Copywriting

Step 1: Content Strategy Meeting

Participants: Content Writer, UI/UX Designer, Project Manager

Discuss the target audience and tone of voice

Decide on SEO strategy and keyword focus

Outline the main messages and call-to-actions

Step 2: Content Writing

Create draft copies for:

Homepage

About Us

Programs/Services

Blogs (if applicable)

Any other custom pages

Step 3: Content Review and Approval

Internal review by the content team and project manager

Share the drafts with the client for feedback and approval

Revise based on feedback

⁠

Phase 4: Development

Step 1: Platform Development

Develop on the platform chosen: Wordpress, Webflow, Wix, SquareSpace, Shopify, Custom Coded.

Step 2: Client Approval and Launch

Get the final approval from the client and launch the website.

⁠

Step 3: Post-Launch

Monitor for bugs and user experience and make adjustments as needed.

By following this SOP, you're setting up your team and the client for a successful collaboration that leads to a website that meets its intended goals.

⁠

Requirement From Client

Logo Platform Preference for Website Development {WordPress/Webflow/Wix/SquareSpace/Shopify/Custom Coded} Domain(Access) Hosting cPanel(Access) Donation Platform/Payment Processor (Iframe Code or Access) - Stripe/PayPal/Direct TransferPhotos High Quality (stock photos/illustration/photos by client) Email & form service provider access if any Google Account Access for Tag Manager & Google Analytics Facebook Pixel(If Any)

Integrations (Need Google Account for signup for following services)

Email Subscription Integration/Form Integration Google Search Console Google Analytics Google Tag Manager Google Ads

Additional Resources

https://blog.hubspot.com/marketing/elements-of-modern-web-design-list⁠

⁠

https://blog.hubspot.com/marketing/best-website-designs-list⁠

Share developed website link with client & ask them to check in incognito & guest mode to see live changes and update every time.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.