Webflow Design System & Componentization

Prepared for:

Dallin Hatch, Pattern.com

Prepared By:

Kenneth Yu, Specter Studio

Prepared on:

October 9, 2024

Revised on:

October 16, 2024

Introduction

Ready for a new website?

With over 15 years of web development experience, I hold myself to the standard of excellence in every project I have the privilege to be a part of. By consistently delivering work of the highest quality on-time and within budget, I strive to serve as a hands-on technical partner for my clients throughout every stage of the website creation process.

Within this proposal, you'll find details about my development process and the project scope outlined in the quote. My intention is to provide you with the information necessary to make an informed decision as you consider your web development partner.

If you believe that Specter Studio is the right fit for your project and choose to entrust us with it, please kindly sign the Proposal on the last page and return it to me.

Thank you very much for your time and for considering this proposal!

Kenneth Yu

Developer, Specter Studio

kenneth@specter.studio

This document provides details for the work (the "Project") performed by Blackpixel Inc. ("Specter Studio" or the "Contractor") and Pattern.com (the "Client"), dated as of Nov 01, 2024.

Summary

Project Scope

Development responsibilities include:

Refactor pattern.com using a responsive framework (Lumos) and into a component-based system
Enable page building for the marketing team by developing ready-to-use sections and static page templates
Build out the CMS collections and templates for a robust resource hub including blogs, case studies, etc...
Set up a components library that’ll allow for quicker page deployment while strengthening design consistency at scale
Offering technical consultation on website-related topics such as CMS utilization, editing access, external apps, etc.
Ensuring seamless transition of existing SEO settings and redirects
Conducting audits for mobile responsiveness and accessibility
Producing training tutorial videos
Providing any necessary assistance for a successful site relaunch targeted for Q4 2024

Throughout the process, I'll collaborate closely with the stakeholders from Pattern.com to understand their needs and recommend best practices to enhance user experience and achieve project goals.

Pattern.com

Specter Studio

Assessment

Site Structure

The following data were collected from an assessment of Pattern's read-only link.This information was used to approximate the quote. The final site structure is to be confirmed during the "Project Kick-off" phase.

Page Count:

22 static pages
7 CMS collections w/ page templates
3 footer/legal pages

Integrations:

Google Tag Manager
Meta Pixel
Marketo
Hockeystack
Qualified

Layout complexity: Medium

Interaction complexity: Low

Pattern.com

Specter Studio

Timeline

Proposed Schedule

These are the main phases the project will go through, with the target launch date set for the week of Jan 31, 2025.

Stage

Est. Completion Date

Project Kick-off (1 week)

Initiate meetings to finalize project requirements, define schedule, and finalize action items.

→ Deliverables:

Project schedule with milestones

October 18, 2024

Design System Sprint (2 weeks)

Collaborate with Pattern design team to create a scalable Figma design system for future efficiency.

→ Deliverables:

Design System (in Figma)

November 15, 2024

Design System Development (2 weeks)

Convert the approved Figma Design System into Webflow using Lumos framework, implementing variables, components, and classes.

→ Deliverables:

Design System (in Webflow)

December 2, 2024

Website Development (4 weeks)

Rebuild pattern.com with the new design system and Lumos framework. Enhance CMS functionality to support an expanded blog and resource hub.

→ Deliverables:

Staging link to Webflow site, Weekly check-in meetings

January 6, 2025

QA, Feedback, Revisions, and Approval (1 week)

We'll share a staging link for feedback, make revisions, and prepare approved pages for launch (up to 2 rounds). We'll conduct QA testing, create a launch plan, verify DNS settings, and ensure a smooth transition from the old to new website.

→ Deliverables:

Client feedback, Development approval

January 13, 2025

Website Relaunch

The new website goes live. We will assist in resolving any immediate issues or bugs that might occur during the transition. Furthermore, we'll set up any necessary redirects to prevent broken links.

→ Deliverables:

Site Deployment

January 20, 2025

Pattern.com

Specter Studio

Workflow

Development Process

This process is based on my experience with previous projects similar in size and scope.

001

Design/Figma review

002

Content processing

003

Create global brand styles and reusable components

004

Page & CMS development

005

Interactions/Animation development & revision (if applicable)

006

Accessibility audits

007

Client review & revisions

008

On-page SEO settings

009

Pre-launch preparations

010

Page approved for launch

Pattern.com

Specter Studio

Project Quote

Payment & Invoicing

Below is a price quote based on the project's scope, scale, and suggested timeline. A 14 days support period is included to ensure a smooth transition after site launch.

Project Milestone

Due

Price

Project Kick-off

October 14, 2024

Project Payment

October 31, 2024

35000

Target Launch Week

January 20, 2025

Post-launch Support

January 31, 2025

Discounted Total:

Total before 25% discount

Discounted Total:

Total:

Invoices can be paid via Wise, bank transfer, or mailed cheque. Payment is expected within 14 days of the invoice issue date.

Pattern.com

Specter Studio

Post-launch Maintainance

Support Packages

Below are three monthly support packages available to supplement your team, should you need it.

Webflow Support Plans

Price

Support Lite

5 hours of development time
Regular turnaround (2 business days*)
Webflow support via email or Slack

$1250/month

Support Grow

15 hours of development time
Regular turnaround (2 business days*)
Webflow support via email or Slack

$2375/month

Support Scale

30 hours of development time
Priority turnaround (same day or next day*)
Webflow support via email or Slack

$3500/month

The Webflow Support Plan will take effect following the 14 days post-launch period if selected at launch. It's a month-to-month commitment, allowing plans to be upgraded or downgraded at any time.

*For site fixes, maintenance tasks, and minor updates, an estimate will be provided. Larger custom development tasks will also be estimated separately.

Pattern.com

Specter Studio

Terms

Confidentiality

All information exchanged between Blackpixel Inc. ("Specter Studio" or the "Contractor") and Pattern.com (the "Client") is considered confidential information. Both sides need to take the necessary steps to guarantee that any information exchanged stays confidential and that it's used only for the purpose of this project. Confidential information does not include information that is already in the public domain or might become public during the course of the work on this project.

Proposal Terms

1. Independent Contractor

Specter Studio is hired by Pattern.com in its capacity as an independent web development contractor to provide the services of development, and deployment of their future website.

2. Invoicing & Currency

All invoices will be issued in USD and are expected to be paid in USD, within 14 days of the invoice issue date.

3. Launch Date

Specter Studio will do its best to complete the project in the agreed timeframe and launch the website before or on the agreed launch date. In order to meet its deadline the client rely on Specter Studio that it will stay actively engaged in the project communication and will reply to all questions submitted by Specter Studio in a timely manner.

4. Subcontracting

Specter Studio is allowed to, but not required to, hire subcontractors in order to fulfill the project requirements and deliver the completed project on time.

5. Change Requests

Any changes to the Project Scope will be billed separately and will be agreed upon in a separate contract. Such changes may delay the launch date of the website.

6. Severability

The terms of this contract are independent of one another. If one or more of its terms are found to be unenforceable, the rest of the contract will remain in force.

Pattern.com

Specter Studio

7. Third-Party Rights

Pattern.com guarantees that any graphics, images, texts, plug-ins, or add-ons used in the project are owned by the Client or that their use is paid for to the rightful owner. In case of breach of a third party's rights, Pattern.com agrees to indemnify Specter Studio against all costs and damages that may arise from such breach.

8. Transfer of Copyrights

All copyrights over the final project will be transferred from Specter Studio to Pattern.com as soon as the final payment is completed. Specter Studio keeps the right to show the client's website as part of its portfolio.

9. Entire and Sole Agreement

This agreement is the entire agreement between the two parties and the only agreement in regards to this project. Any changes in scope or price must be outlined in a new, separate document and agreed upon by both sides.

10. Post-Launch Support Policy

Specter Studio is committed to the client's full satisfaction. If for any reason Pattern.com is not satisfied with the website development work delivered by Specter Studio, they have the right to request fixes and patches within 14 days of the last project delivery at no additional cost. After the 14th day, it is considered that the web development work is accepted as is by the Client.

11. Termination

This Project may be terminated at any point by the Client or Contractor before completion. Either party may end this Project for any reason by sending an email or letter to the other party, informing the recipient that the sender is ending the Project.

The Client will pay the Contractor for the work done up until when the Project work has ending and will reimburse the Contractor for any agreed-upon, non-cancellable expenses.

Service Provider (Contractor)

Blackpixel Inc. (Specter Studio)

Signature

Date

Client

Pattern.com

Signature

Date

Pattern.com

Specter Studio

Sign Here