Należy opracować projekt szablonu e-maila powitalnego dla Klienta - 2 wersje

1) Goals and KPIs

• Design goal: increase CTR/CTOR, quickly explain the value of the Safe and lead to the first click.

• Primary action: click on the video / key action related to the Safe (the CTA that is already in your content).

• Secondary action: click on the Telegram bot / application (as in the current email).
  
  

2) Source materials

• Current email example: EMP_WELCOME_sejf.jpg + text version

• Style reference for the new UI: Design header.jpg, design footer.jpg

3) Constraints (important)

• Do not rewrite the copy. Only restructure/collapse/split into cards.

• The layout must be assembled in GetResponse drag&drop.

• Video — through image preview (image + play icon) + link (without embedded video).
  
  

4) Style and design system

• Minimalism + modular design: the email as a stream of separate cards with borders/radii/paddings; each section is a separate visual block.

• Link to the example of the new design - https://www.figma.com/design/H9Ky9SJxtfQRcFGKR10Sg6/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%B0?node-id=0-1&p=f

• Other colors and styles can be taken from the main page https://freelancehunt.com/ (displayed for unauthorized users)
  
  

5) “Modularity / block division (must-have)”

Requirement: the email must be visually divided into separate blocks/modules (as in the new Freelancehunt UI) through design, not just text structure.

How to divide:

• Each logical section (Hero, How it works, Advantages, DO NOT do, Video, Secondary CTA) is a separate “card” or block.

• Blocks are separated by at least 2 of 3 features:

  • border 1px (≈ #E6E8EE)

  • separate background surface (white on the gray background of the email)

  • radius 12–16px

  • optional: soft inner padding 16–20px

Rhythm/spacings:

• Between blocks: 16px (desktop), 12–16px (mobile).

• Inside the card padding: 16–20px.

Scanability:

• Each card has a short title + content (bullets/steps).

• Avoid long paragraphs — reformat into bullets/numbering (without changing the meaning).

Acceptance criteria (to accept the design):

1. On the first screen (mobile 375px) the Hero + primary CTA is visible.

2. Further down the email, the “stream of cards” is clearly visible: each section reads as a separate module.

3. If images are turned off — the email still “assembles” into blocks (i.e., boundaries are created not only by images).

6) Layout format (mandatory)

• Figma layout 600px + mobile preview 375px

• UI Kit

• Specification for assembly in GetResponse
  
  

7) Information architecture (email structure)

Option A (main): “Minimal / Fast scan”

• Header

• Hero: title “What is Safe?” + short introduction (existing) + 3 bullets “Safe allows…”

• Primary CTA above the fold (leading to video or relevant action from your content)

• Card “How Safe Works” (1–5 steps)

• Card “Advantages”

• Warning card “Here’s what NOT to do” (❌ list)

• Video preview block (image + play + caption, all clickable)

• Secondary CTA row: TG-bot / application

• Footer (links to social networks + nomination for the best freelance service)

• Text with unsubscribe
  
  

Option B (additional): “Education + Trust”

• After Hero immediately Video preview

• “How it works” split into 2 cards (1–3) and (4–5)

• Then: Advantages → Warning → Secondary CTA → Footer
  
  

8) Components (Email UI Kit) — what the designer needs to draw

• Header (logo row + divider)

• Hero (title + short text + bullets + primary CTA)

• Card (regular)

• Numbered list card (steps 1–5)

• Warning card (❌ list)

• Video preview block (image + play icon + caption link)

• Secondary CTA row (2 outline buttons)

• Footer in the style of the new site (links to social networks + nomination for the best freelance service)

• Text with unsubscribe

9) Technical requirements for GetResponse

• Container 600px; paddings 30/15

• CTA: one primary button (green) + 1–2 secondary (white with black outline)

• Video preview image: 600×340 (retina 1200×680), ALT: “Video: how Safe protects the customer”

• Outlook-safe: no complex CSS, no real accordions, no “important” background-image

• Dark mode: borders/neutral surfaces, no thin texts
  
  

10) Deliverables

• Figma: 2 options (A and B) + UI Kit

• PNG preview desktop/mobile

Specification: styles, sizes, spacings, rules for buttons/images/borders