Psychology practice

Context

Explain an unfamiliar topic without overload and help visitors recognise situations they know. The site links the psychology practice to a separate digital product in Telegram.

The challenge

Combine an emotional image with a precise description of the next step. The self-check should feel like a tool for self-reflection, never a stand-in for a consultation or a medical diagnosis.

What we did

1. One main way in

   The first screen holds a short offer, a button for the free self-check and a note on the format. Visitors know in advance that the next step opens in Telegram.

2. A sequence, not a pile of blocks

   From familiar situations the page moves on to four indicative patterns, explains the steps of the self-check, introduces the practice and answers questions.

3. Imagery that carries the subject

   A room with an open window and a cage, a bird, a feather and three-dimensional object illustrations tell one visual story. Four icons help tell the patterns apart.

4. The same route on every screen

   Repeated calls to action lead to one flow. On narrow screens the grid becomes a vertical sequence, and the large type scales with the width.

What we built

1. Structure and copy

   We built a sequence from the main offer and familiar situations to the four profiles, the quiz steps, an introduction to the practice and the FAQ. Each block sets up the next step.

2. Visual direction

   We developed a calm editorial look: large serif headings, warm neutral surfaces and generous spacing. The current version adds the room, the bird and three-dimensional images of the patterns.

3. Responsive build

   We built the site in HTML, CSS and JavaScript. On narrow screens the content stacks vertically and the main call to action stays visible; headings and spacing adapt to the width.

4. Product link and launch

   We set up consistent links into Telegram and launched the site. It introduces the offer, while the quiz, personal results, payments and booking continue in MindType, which we built separately.

Visual system

The current version pairs a warm light background with dark navy text and a muted terracotta accent. Onest handles reading and the interface, Cormorant the headings, and Bodoni the expressive numeral on the first screen.

Body text

Onest 400 · 16 px / 1.6

First headline on desktop

Cormorant 300 · clamp(66 px, 6.8vw, 106 px) / 0.88

Headline tracking

−0.068em

Subheading

Onest 400 · 18 px / 1.7; max 490 px

At a 1180 px viewport

H1: 80.24 px; line height: 70.61 px

Section headings

Cormorant 300 · clamp(34 px, 4vw, 52 px) / 1.15

Journeys and material

A familiar situation → the four patterns explained → a description of the short quiz → on to Telegram. Information about consultations remains a route of its own: nobody has to take the quiz before getting in touch.

Promotion

We optimised the site for search, set up Yandex Direct and Google Ads accounts, and launched advertising and search promotion.

The result

A turnkey website for a psychology practice is live. Structure, copy, visual system and responsive build work together, and the Telegram links carry the journey on into MindType. The site and the bot are two connected parts of one project, each described in its own case study.

Tools and build

HTML · CSS · framework-free JavaScript · custom CSS/JS animations · Telegram deep links