How I Land and Deliver $25k+ Framer Websites

Key Concepts

• Inbound Lead Generation: Attracting clients through organic means like referrals, social media, and content creation.
• Discovery Call: Initial conversation to assess mutual alignment and project scope.
• Questionnaire: Detailed form to gather client requirements and design preferences.
• Proposal/Contract: Formal document outlining deliverables, timeline, budget, and legal terms.
• Strategy Phase: Deep dive into the client's business, competitors, and goals to inform design decisions.
• Design Directions: Presenting multiple visual concepts with mood boards and hero section mockups.
• Framer: Web design and development platform used for building websites.
• Launch and Handoff: Transferring the project to the client, providing training, and offering ongoing support.

1. Lead Generation and Discovery Call

• Lead Generation: Matt Jumper primarily relies on inbound leads from referrals, social media (YouTube, Twitter), Framer's ecosystem (expert program, gallery submissions, templates, commerce plugin), Contra, Flex Academy, and design galleries. He emphasizes the importance of consistently creating and sharing great work to cultivate inbound inquiries.
• Discovery Call Purpose: The discovery call is a "gut check" to assess mutual alignment. The goal is to gather high-level information without delving into detailed questions.
• Five Key Areas Covered in Discovery Call:
  • Purpose: Understanding the core reason for the website redesign (e.g., conversion rates, credibility, performance).
  • Success Metrics: Defining specific, measurable goals to track the website's performance.
  • Brand Check: Assessing the client's brand and their willingness to embrace change. Jumper notes that website redesigns are often rebrands in disguise.
  • Budget and Timing: Discussing the client's budget and desired timeline. Jumper shares his minimum project price or a high-level range.
  • Roles and Responsibilities: Identifying the point of contact, decision-makers, and contributors from the client's team. Jumper prefers to treat the main contact as a teammate.
• Project Categorization: Jumper mentally categorizes projects into four scenarios:
  1. Ideal: Solid budget, timing, and confidence in the output.
  2. Portfolio Opportunity: Budget/timing isn't great, but it's a good portfolio piece.
  3. Good Budget/Timing: Budget/timing is good, but the portfolio opportunity isn't there.
  4. Pass: Poor budget, timing, and portfolio opportunity.

2. Questionnaire

• Purpose: To gain clarity and gather detailed information from the client before starting work.
• Two Main Buckets:
  • Inputs for Scope (Requirements): Uncovering everything needed to create a bulletproof proposal, including site map, content, copy, SEO, brand assets, and technical requirements. Jumper emphasizes transparency about his skillset and willingness to bring in specialists for areas outside his expertise (e.g., SEO-focused blog content).
  • Inputs for Design: Gathering information about the client's business, industry, and brand to make informed design decisions. This includes business foundation, goals, competitive landscape, marketing questions, brand assets, and inspiration. The questionnaire helps educate the client and rationalize the cost of the project.

3. Proposal, Contract, and Payment

• Proposal Contents:
  • Deliverables: Pages, features, platforms, integrations.
  • Workback Schedule: Check-ins, approvals, timelines, and milestones.
  • Budget: Cost breakdown.
  • Payment Agreement: 50% upfront, 50% on delivery.
• Contract: A proposal with legal terms attached to protect both parties. It clarifies deliverables, timing, and budget to prevent scope creep.
• Late Approval Clause: Jumper includes a clause in the contract that charges clients per week for delays caused by late approvals or content delivery. This has proven effective in keeping projects on track.

4. Strategy Phase

• Deep Dive: Jumper thoroughly researches the client's business, competitors, and goals, using the information gathered in the questionnaire. He also seeks inspiration from website design galleries.
• Site Map: The first deliverable is a site map created in FigJam, outlining the navigation, pages, sections, footer structure, and CMS/dynamically generated pages. This provides a bird's-eye view of the website structure and helps align the client.
• Wireframes: Wireframes may be created depending on the project and client agreement.
• Design Directions: Jumper presents two or three visual directions, each including a mood board and hero section mockup. This allows the client to provide feedback on the vibe, fonts, colors, and general feel.

5. Design and Development

• Framer Transition: Jumper is transitioning his design process from Figma to Framer to streamline the workflow.
• Homepage Check-in: The first check-in includes a full homepage with a responsive state and one or two other key pages for approval.
• Feedback: Smaller budget projects often bring in more feedback, while higher budget clients usually give more trust.
• Framer Efficiency: Building the site in Framer allows for easy setup of textiles, color styles, components, and templates, making the development process fast and efficient.
• Technical Aspects: Jumper ensures proper configuration of semantics, accessibility, and SEO.
• QA and Checklist: Thorough quality assurance and a checklist are used to ensure the site is ready for delivery.
• Flux Academy Courses: Jumper mentions two courses with Flux Academy that delve deeper into his design and Framer workflow.

6. Launch and Handoff

• Project Transfer: Transferring the Framer project to the client's account.
• Domain Setup: Assisting with custom domain setup if needed.
• Training: Walking the client through how to make edits and publish the site. For larger teams, a full education session and documentation are provided.
• Warranty and Support: A 30-day bug fix warranty is included in the contract, with options for hourly rates or a retainer for ongoing support after that period.
• Follow-up: Jumper emphasizes the importance of following up with the client to assess the site's performance, gather testimonials, and obtain data for case studies. Staying in touch keeps him top of mind for future projects and referrals.

7. Conclusion

Matt Jumper's website design process is a structured approach that prioritizes clarity, communication, and client collaboration. By focusing on inbound lead generation, thorough discovery, detailed planning, and efficient execution, he delivers high-value websites with confidence and charges what his work is worth. The key takeaway is that a well-defined process fosters confidence, which in turn builds trust with clients, allowing for fair compensation and successful project outcomes.