Number

#SD-1

Proposal for Website Design & Devlopment

For

HMF Hawaii

Price point

16,000€ ($17,300)

Issued

July 4 2025

Valid until

July 14 2025

From

Benjamin Libor

Allsite

Gruenberger Strasse 17

10243 Berlin

Germany

Quote To

Hawaii Merchant Funding, LLC

(Address to be inserted here)

Table of contents

About the project

This project is a full-scope website design and development for Hawaii Merchant Funding, built entirely in Framer. The site bridges two design worlds: it honors Hawaiian identity through cultural cues, typography, and visual storytelling, while also meeting the clean, minimal, and trustworthy expectations of modern financial brands. The goal is to create a digital experience that feels both island-grown and professionally sharp — instantly recognizable to locals while confidently positioned within the financial space.

The scope includes:

  • End-to-end design system, using Satoshi and Kūpaʻa typography, brand-aligned color palette, and custom layouts

  • Framer CMS implementation for products, services, and customer success stories — scalable and easy to expand

  • Integrated form flows with dual-level logic (short and expanded forms), connected to HubSpot via Zapier for lead qualification and CRM sync

  • Responsive UX/UI, including sticky navigation, dropdowns, animations, and mobile-first design

  • Performance optimization, accessibility, lightweight interactions, and SEO best practices

  • Analytics setup, including GA ID embedding and optional Google Tag Manager

The website is structured to support rapid iteration, localized storytelling, and seamless user flows — all delivered in a three-week timeline.


Sitemap & Page Layouts

I. Home

Sections:

  • Hero – Strong value prop (e.g. “Fueling Your Business, Island Style”), image/video of Hawaii, mini lead form

  • How It Works – Explain loan/funding process simply (3–4 steps)

  • Product Overview – Short intro to main funding products with links

  • Service Snapshot – Highlight key services (from Services CMS)

  • Industries We Serve – Visual cards or grid linking to industry pages (new CMS collection)

  • Customer Success Stories (CMS: Stories) – Grid of visual cards (image + impact metrics + quote + CTA)

  • Testimonials – Short quotes with name, location, photo

  • FAQ – Top 6–8 answers about loans, qualifications, timing

  • CTA Section → Dual Form

    • Short form: Name, phone, email, estimated funding need

    • Expanded form: Conditional reveal after short submit or toggle


II. About

Sections:

  • Mission

  • The HMF Story – Why local, why Hawaii

  • Team & Values (optional, even if just 1–2 people)

  • Tagline Grid – Rotating words/values/cloud

  • Contact Form – Lead intent or general inquiry (same form logic as above)

III. Products (CMS-Powered)

Structure (Product Template):

  • Hero – Title, short intro, CTA anchor

  • Overview – What it is, who it’s for, typical use cases

  • How It Works – Steps, requirements

  • Key Benefits – Up to 5 (icons + text)

  • Example Metrics – Min/max amount, approval time, cost, duration

  • Success Story Highlight – 1 card from CMS: Stories (linked)

  • FAQ – Product-specific

  • CTA – Dual form (short + long, Zapier → HubSpot)

IV. Services (CMS-Powered)

Structure (Service Template):

  • Hero – Service name, image, CTA

  • Description – What it is, who uses it

  • Process – Step-by-step

  • Benefits – Bullet points

  • Testimonials – 1–2 relevant quotes

  • FAQ – Service-specific

  • CTA – Dual form (Zapier → HubSpot)

V. Industries (CMS-Powered)

Each Industry Page includes:

  • Hero – Industry name, image (e.g., food truck, beauty salon, etc.), CTA

  • Common Challenges – Short bullet list

  • How We Help – Tailored benefits + process for this industry

  • Funding Examples – Use cases, amounts, timelines

  • Customer Story – 1 relevant CMS story

  • Relevant Products – Pull from Products CMS

  • Testimonials – From business owners in that industry

  • CTA – Dual form

Initial industry categories (can grow):

  • Food & Service – Restaurants, food trucks, cafes

  • Retail – Boutiques, local shops

  • Hospitality – Small hotels, B&Bs, tourism

  • Convenience & Grocery – Liquor stores, delis, markets

  • Beauty & Wellness – Salons, spas, nail bars

  • Healthcare – Chiropractors, dental, wellness clinics

  • General Services – Freelancers, mobile pros

  • Automotive – Repair shops, car wash

  • Landscaping & Construction – Yard pros, home services

  • Other – Catch-all with flexible layout

VI. Customer Success Stories / Resources (CMS-Powered)

Structure:

  • Grid of Cards – Image, headline, impact or quote

  • Filters – By product or industry

  • Each card links to a detailed story page:

    • Overview

    • Quote from customer

    • Measurable impact

    • Product/service used

    • Optional gallery or video

VII. Demo / Form Page

Sections:

  • Hero – “Schedule Your Funding Call” / “Let’s See If You Qualify”

  • Process Overview – What to expect

  • Dual CTA Form – Short + expanded (Zapier → HubSpot)

  • Testimonials

  • FAQ

VIII. Legal

  • Privacy Policy

  • Terms of Service

  • Disclosures / Licensing

Assets & Inputs Needed

  • Logo asset as svg.file

  • Information/texts for Legal pages (all necc. to operate safely in the USA)

  • Screenshots of the app (any other service-relevant info)

  • Content for success stories

  • HubSpot/Zapier account access (with proper rights so I can create)

Reply to Notes from your CTO

1. Framer Site Implementation – I believe there may be a small misunderstanding here. We don’t just implement existing mockups — we actually design and build everything from scratch. So there’s no need to provide mockups on your end unless you have them; otherwise, we’ll handle the full creative and development process.

2. Webhook Integrations – This is all clear. We’ve done this multiple times. Regarding the optional point of replacing Zapier with direct API calls: that’s not currently included in the proposal, but it’s something we could potentially explore. That said, I’d generally advise against it at this stage, as it might reduce flexibility, especially if you plan to run diverse forms in the future and want to keep CRM logic adaptable.

3. HubSpot Integration – Also clear. We’ll suggest the form structure and fields for you to recreate in HubSpot. Once that’s done and access to your Zapier account is available, we’ll connect everything so the webhook pushes data into the correct fields in HubSpot.

4 & 5. QA – All good here; this is standard practice and well within our capabilities.

6. Collaboration – We won’t be using GitHub. Instead, everything happens within a shared Framer workspace. Once the handoff happens, we can invite your team to the project directly. It supports live collaboration, similar to modern tools like Figma or Notion.

7. Google Analytics – Understood. We’ll integrate GA as part of the implementation.

Tasks That Can Be Outsourced – Understood. Much of this is overlapping with what we already cover; no issues there.

Branding & Style Guide – We like the palette direction. Likely, we’ll use Cream as the main background and Volcanic Black for text. Green, Gold, Ocean Blue, and Dark Brown will be selectively integrated into accents and highlights. Charcoal works well as a softer black alternative. Since branding is part of our scope, we’ll refine and expand on this further in visual exploration.

Design Philosophy / Part 1 – All noted. Sophisticated minimalism, dynamic storytelling, and brand cohesion are already part of our design approach. We’ll explore Satoshi and Kūpaʻa and may recommend additional typefaces that fit well with your identity.

UX/UI Direction – Clear and aligned. As a quick note: while the examples like Credibly and OnDeck are helpful for context, we’d rate their quality at around 5–6/10. We’re aiming closer to an 8–9/10 in terms of polish, clarity, and brand presence. We’ll aim to set a higher bar for HMF.

Advanced Tech / AI Capabilities – These seem to be out of current scope, so we won’t include them in this version.

Content Strategy – Understood. You’ll need to provide content outlines and let us know which sections you’d like to manage via CMS. We’ll set up the right structure accordingly.

Sitemap & Navigation (Part 2) – Thanks for the draft. We've already iterated on this in our proposal, which includes a slightly refined structure. Please have a look — happy to refine it further if needed. As for the nav logic and all other detailed specs: clear on our end.

Tools Used

  • Design: Framer, Figma

  • Content: Midjourney, stock curation

  • Text/copy: ChatGPT

  • Tracking: GA, Framer analytics

  • CRM: HubSpot

  • Connection: Zapier

Timeline

Week 1

Brand direction, Framer setup, home/about/forms

Week 1

Brand direction, Framer setup, home/about/forms

Week 1

Brand direction, Framer setup, home/about/forms

Week 2

CMS, visual creation, products/services logic, API integration

Week 2

CMS, visual creation, products/services logic, API integration

Week 2

CMS, visual creation, products/services logic, API integration

Week 3

QA, SEO, form polish, iteration, final delivery & handoff

Week 3

QA, SEO, form polish, iteration, final delivery & handoff

Week 3

QA, SEO, form polish, iteration, final delivery & handoff

Pricing Terms

Task Level

Total

Framer Page Development

Build all pages based on sitemap and provided content. Includes layout structure, navigation logic, mobile responsiveness, component setup, and CMS collections for Products, Services, and Stories.

€5,500

Framer Page Development

Build all pages based on sitemap and provided content. Includes layout structure, navigation logic, mobile responsiveness, component setup, and CMS collections for Products, Services, and Stories.

€5,500

Framer Page Development

Build all pages based on sitemap and provided content. Includes layout structure, navigation logic, mobile responsiveness, component setup, and CMS collections for Products, Services, and Stories.

€5,500

Framer Design & Visual System

Apply and extend HMF’s brand identity across the site. Includes typography setup, iconography, imagery (edited/sourced), mockup generation, layout styling, animation patterns, and a cohesive design system.

€3,000

Framer Design & Visual System

Apply and extend HMF’s brand identity across the site. Includes typography setup, iconography, imagery (edited/sourced), mockup generation, layout styling, animation patterns, and a cohesive design system.

€3,000

Framer Design & Visual System

Apply and extend HMF’s brand identity across the site. Includes typography setup, iconography, imagery (edited/sourced), mockup generation, layout styling, animation patterns, and a cohesive design system.

€3,000

Form Integrations

Dual-form setup (short + expanded), styled and connected via Zapier → HubSpot. Field mapping + webhook testing included.

€1,000

Form Integrations

Dual-form setup (short + expanded), styled and connected via Zapier → HubSpot. Field mapping + webhook testing included.

€1,000

Form Integrations

Dual-form setup (short + expanded), styled and connected via Zapier → HubSpot. Field mapping + webhook testing included.

€1,000

Form Integrations

Dual-form setup (short + expanded), styled and connected via Zapier → HubSpot. Field mapping + webhook testing included.

€1,000

Form Integrations

Dual-form setup (short + expanded), styled and connected via Zapier → HubSpot. Field mapping + webhook testing included.

€1,000

Form Integrations

Dual-form setup (short + expanded), styled and connected via Zapier → HubSpot. Field mapping + webhook testing included.

€1,000

Visual Creation

Design and select well-fitting hero and content visuals where assets are not provided (image editing, sourcing).

€1,500

Visual Creation

Design and select well-fitting hero and content visuals where assets are not provided (image editing, sourcing).

€1,500

Visual Creation

Design and select well-fitting hero and content visuals where assets are not provided (image editing, sourcing).

€1,500

Visual Direction & Brand Refresh

Define core visual direction based on provided logos, palette, taglines. Includes type system, spacing logic, color use.

€1,500

Visual Direction & Brand Refresh

Define core visual direction based on provided logos, palette, taglines. Includes type system, spacing logic, color use.

€1,500

Visual Direction & Brand Refresh

Define core visual direction based on provided logos, palette, taglines. Includes type system, spacing logic, color use.

€1,500

Design Iteration

One feedback round after initial design pass (site-wide, light layout/visual adjustments).

€1,000

Design Iteration

One feedback round after initial design pass (site-wide, light layout/visual adjustments).

€1,000

Design Iteration

One feedback round after initial design pass (site-wide, light layout/visual adjustments).

€1,000

QA, Testing & Handover Support

Cross-device testing, performance, metadata, accessibility, and basic analytics integration (e.g., GA ID).

€1,500

QA, Testing & Handover Support

Cross-device testing, performance, metadata, accessibility, and basic analytics integration (e.g., GA ID).

€1,500

QA, Testing & Handover Support

Cross-device testing, performance, metadata, accessibility, and basic analytics integration (e.g., GA ID).

€1,500

€16,000

Terms & Conditions

Allsite works as your flexible, fractional design partner — offering hands-on, transparent support tailored to your project.

  • Project Fee: €16,000 — 50% upfront, 50% upon final delivery

  • Timeline: ~3 weeks from kickoff to handover

  • Ownership: Full rights to all final deliverables (excluding third-party licensed assets, tools, services)

  • Deliverables: All design files and assets in Figma & Framer

  • Revisions:

    • 1 design revision round after visual direction

    • 1 layout revision round after client inserts final content

    • Additional rounds or major scope changes billed separately

  • Feedback Process: All feedback and change requests must be submitted via Framer comments to ensure clarity and efficiency

  • Content Workflow:

    • We provide example copy and layout guidance during design

    • Client adds final content once structure is approved

    • We perform a final design pass to adjust layout/styling with real content in place

  • 3rd Party Tools: Client provides access to any required tools (e.g. HubSpot, GA, Zapier)

  • Initial Delivery: First design version delivered within 10 business days after upfront payment

Questions?

Let's have a chat.

Frequent questions

with specific answers.

What we do

Who we work with

How to get started

What are terms

What services do you offer exactly?

Do you also do brand work?

Why Framer over Webflow?

How long does a project take?

Frequent questions

with specific answers.

What we do

Who we work with

How to get started

What are terms

What services do you offer exactly?

Do you also do brand work?

Why Framer over Webflow?

How long does a project take?

Frequent questions

with specific answers.

What we do

Who we work with

How to get started

What are terms

What services do you offer exactly?

Do you also do brand work?

Why Framer over Webflow?

How long does a project take?

Frequent questions

with specific answers.

What we do

Who we work with

How to get started

What are terms

What services do you offer exactly?

Do you also do brand work?

Why Framer over Webflow?

How long does a project take?

Frequent questions

with specific answers.

What we do

Who we work with

How to get started

What are terms

What services do you offer exactly?

Do you also do brand work?

Why Framer over Webflow?

How long does a project take?

Interested

in collaborating?

Interested

in collaborating?

Interested

in collaborating?

Interested

in collaborating?