Granat
#0B1F3D
Kolor bazowy - nagłówki, teksty, stopka
Komunikuje stabilność, wiedzę i profesjonalizm - cechy, których rodzic szuka u nauczyciela. Na jasnych tłach daje mocny, pewny kontrast tekstu.
← Powrót do realizacji
BrandingWeb designUX/UIDevelopmentTea with Asia2026
Tea with Asia - marka i strona dla korepetytorki języka angielskiego
Kompletna marka osobista dla nauczycielki angielskiego dla dzieci i młodzieży - logo, kolory, ton komunikacji i strona z rezerwacją lekcji próbnej.
- Strategia marki osobistej
- Projekt logo i znaku
- System kolorów i typografia
- Ton komunikacji do rodziców
- Projekt i wdrożenie strony
- Formularz rezerwacji lekcji próbnej
Projekt w skrócie
Tea with Asia to prywatna działalność korepetytorki uczącej angielskiego dzieci i młodzież w Krakowie i online. Zbudowaliśmy markę od podstaw: logo, paletę kolorów, język komunikacji i przyjazną stronę, która tłumaczy ofertę rodzicom i prowadzi do umówienia bezpłatnej lekcji próbnej.
Kontekst i problem
Tea with Asia to marka osobista prywatnej nauczycielki języka angielskiego, prowadzącej zajęcia dla dzieci i młodzieży w Krakowie oraz online. Stronę odwiedzają przede wszystkim rodzice - i to oni podejmują decyzję.
Rynek korepetycji jest pełen anonimowych ogłoszeń: zdjęcie, cena, numer telefonu. Rodzic wybierający nauczyciela dla dziecka nie porównuje metodyk - szuka sygnałów, że po drugiej stronie jest spokojna, kompetentna osoba, której można zaufać. Tego sygnału nie da się wysłać ogłoszeniem.
Jednocześnie marka nauczycielki nie mogła wpaść w żadną z dwóch pułapek tej kategorii: sztywny, „szkolny" wizerunek, który odstrasza dzieci, ani infantylną estetykę, która podważa profesjonalizm w oczach rodzica.
Do rozwiązania były też bardzo praktyczne pytania rodziców: jak wyglądają zajęcia, ile kosztują, czy nauczycielka pracuje online, co z młodszymi dziećmi i czy rodzic dowie się, co działo się na lekcji. Brak tych odpowiedzi na stronie oznacza pytania na priv - albo rezygnację.
Ograniczenia
- Marka jednej osoby - komunikacja musiała pozostać osobista i autentyczna
- Realna oferta: trzy pakiety wiekowe, Kraków + online, wyłącznie polskojęzyczni odbiorcy
- Decyzję podejmuje rodzic, ale strona nie może zniechęcać ucznia
- Większość ruchu z telefonu - pełna ścieżka musi działać na mobile
Założenia strategiczne
- 01
Najpierw poczucie bezpieczeństwa
Rodzic ma w kilka sekund poczuć, że dziecko trafi pod dobrą opiekę. Spokojna kolorystyka, prawdziwe zdjęcie, imię i obietnica „angielski bez stresu" - zanim padnie jakakolwiek cena.
- 02
Rodzic jest odbiorcą, uczeń bohaterem
Treści odpowiadają na pytania rodzica (postępy, kontakt po lekcji, ceny), ale opisują doświadczenie dziecka - bez presji, z czasem na mówienie i błędy traktowane jako wskazówki.
- 03
Konkret zamiast obietnic
Zamiast „skutecznej nauki" - rozpisany plan 60 minut, jawny cennik i FAQ z ośmioma realnymi pytaniami rodziców. Konkret uspokaja lepiej niż zapewnienia.
- 04
Niski próg wejścia
Jedno główne CTA w całym serwisie: bezpłatna lekcja próbna, bez zobowiązania do pakietu. Duża decyzja rozbita na małą.
- 05
Profesjonalizm bez szkolnego rygoru
Wykształcenie i metodyka są widoczne (filologia angielska, specjalizacja nauczycielska), ale podane językiem rozmowy, nie regulaminu.
Kierunek kreatywny
Główna idea marki mieści się w samej nazwie: angielski przy herbacie. Nauka jako spokojna, regularna rozmowa - a nie kolejna lekcja w szkole. Herbata wnosi rytuał, ciepło i domową atmosferę, a jednocześnie dyskretnie łączy markę z kulturą języka, którego uczy. Wszystkie decyzje wizualne i tekstowe wynikają z tej jednej metafory.
Charakter marki
- Spokojna
- Cierpliwa
- Profesjonalna
- Ciepła
- Uporządkowana
Ton komunikacji
Komunikacja jest pisana w pierwszej osobie („Cześć! Nazywam się Asia…") i zwraca się bezpośrednio do rodzica. Krótkie zdania, zero metodycznego żargonu, obietnice tylko takie, które da się dotrzymać: „Nie obiecuję cudów w tydzień. Obiecuję regularną pracę, zrozumiałe wyjaśnienia i atmosferę, w której można spokojnie pytać."
Czego świadomie unikaliśmy
- Szkolna estetyka - tablice, dzwonki, czerwone długopisy
- Infantylne, przedszkolne ilustracje
- Agresywne rabaty, liczniki i presja sprzedażowa
- Anglojęzyczne hasła na stronie dla polskich rodziców
Historia logo
Logo łączy dwa światy marki w jednym obrazie: filiżankę herbaty wyrastającą z otwartej książki. Para unosząca się nad filiżanką przechodzi w dymek rozmowy z wielokropkiem - bo celem zajęć jest swobodne mówienie. Znak celowo odchodzi od szkolnej symboliki korepetycji w stronę spokojnej, domowej sceny.
Otwarta książka
Nauka i rozwój językowy - fundament znaku, na którym dosłownie „stoi" cała reszta kompozycji.
Filiżanka herbaty
Spokojna, domowa atmosfera zajęć i bezpośrednie nawiązanie do nazwy - oraz do angielskiego rytuału herbaty.
Para jako dymek rozmowy
Miękka linia pary kończy się dymkiem z trzema kropkami - komunikacja i mówienie jako właściwy cel nauki.
Gałązka i złote akcenty
Detale, które ocieplają znak i odsuwają go od sztywnego wizerunku korepetycji - staranność zamiast dekoracji.
Pełny lockup z nazwą - antykwą z odręcznym „with" - pracuje w nagłówku strony i materiałach dla rodziców. Sam symbol filiżanki z książką pozostaje czytelny w małej skali: awatar w mediach społecznościowych czy favicona. Na granatowym tle stopki znak działa w jaśniejszym wariancie.
Kolorystyka
Paleta buduje równowagę, na której opiera się cała marka: granat daje powagę i kompetencję, błękity - spokój i lekkość, a złoto dodaje odrobinę jakości, nie tworząc dystansu.
Błękit
#4989E6
Kolor akcji - przyciski, linki, aktywne elementy
Obniża formalność granatu i wprowadza spokój - to on sprawia, że strona jest przyjazna, a nie urzędowa. Z białym tekstem na przyciskach zachowuje czytelny kontrast.
Złoty akcent
#F4C66A
Wyróżnienia - gwiazdki opinii, wyróżniony pakiet
Dodaje jakości i ciepła, ale występuje wyłącznie jako detal - nigdy jako tło dla dłuższego tekstu, bo nie zapewniłby kontrastu. Tam, gdzie potrzebny tekst na złocie, używany jest ciemniejszy wariant.
Mglisty błękit
#F2F6FD
Tła sekcji i całej strony
Bardzo jasne, chłodne tło poprawia czytelność długich treści i buduje bezpieczną, przewiewną atmosferę - oddziela sekcje bez twardych linii.
Typografia
Zestawienie eleganckiej antykwy z bardzo czytelnym groteskiem oddaje charakter marki: ciepło i dojrzałość w nagłówkach, pełna przejrzystość w treści.
Cormorant Garamond
400 · 500
Nagłówki
Angielski bez stresu - spokojne korepetycje
Miękka, klasyczna antykwa nadaje marce dojrzałości i odsuwa ją od szkolnego grotesku typowego dla ogłoszeń korepetycji. Cienkie kreski wymagają dużych stopni pisma - dlatego nagłówki są składane z rozmachem.
DM Sans
400 · 500
Tekst podstawowy i interfejs
Dobieram lekcje do wieku i potrzeb ucznia.
Bardzo czytelny font interfejsowy: cennik, FAQ i formularz zapisu czytają się bez wysiłku również na telefonie. Kontrast stylistyczny z antykwą porządkuje hierarchię bez dodatkowych ozdobników.
Ścieżka użytkownika
Strona prowadzi rodzica dokładnie tą drogą, którą przechodzi jego decyzja: od pierwszego wrażenia, przez konkrety, po rozwianie obaw - i dopiero wtedy zapis.
- 01
Zbudowanie poczucia bezpieczeństwa i zaufania
Hero ze zdjęciem, imieniem i obietnicą „angielski bez stresu" - rodzic od razu widzi, kto będzie uczyć jego dziecko.
- 02
Wyjaśnienie, dla kogo są zajęcia
Sekcja „Dlaczego moje zajęcia?" nazywa cztery rzeczy, które rodzice realnie doceniają: indywidualny plan, przygotowanie metodyczne, naukę przez zabawę i kontakt po lekcji.
- 03
Pokazanie sposobu prowadzenia lekcji
Czterokrokowy stepper współpracy oraz rozpisany plan 60 minut - rozgrzewka, nowy materiał, ćwiczenia, podsumowanie.
- 04
Przedstawienie oferty i korzyści
Trzy pakiety wg wieku z cenami podanymi wprost i oznaczeniem najczęściej wybieranego.
- 05
Odpowiedzenie na obawy w FAQ
Opinie rodziców i osiem najczęstszych pytań - od lekcji online po informację zwrotną - zanim pojawi się wątpliwość.
- 06
Rezerwacja lekcji próbnej
Formularz bezpłatnej lekcji próbnej plus alternatywa „Zadaj pytanie" dla niezdecydowanych - żadna wizyta nie musi kończyć się porzuceniem strony.
Decyzje UX/UI
- Problem
- Rodzic nie wie, jak wyglądają zajęcia, i to jest jego główna niepewność.
- Decyzja
- Plan lekcji rozpisany co do minuty: rozgrzewka 10 min, nowy materiał 15 min, ćwiczenia 25 min, podsumowanie 10 min.
- Uzasadnienie
- Konkret uspokaja skuteczniej niż zapewnienia o „sprawdzonych metodach".
- Wpływ
- Rodzic wie, za co płaci, zanim jeszcze napisze pierwszą wiadomość.
- Problem
- W kategorii korepetycji ceny są zwykle ukrywane „do ustalenia".
- Decyzja
- Jawny cennik na stronie: trzy pakiety wg wieku (60, 70 i 80 zł), z oznaczeniem najpopularniejszego.
- Uzasadnienie
- Transparentność buduje zaufanie i filtruje niedopasowane zapytania po obu stronach.
- Wpływ
- Pierwsza rozmowa zaczyna się od potrzeb dziecka, a nie od negocjacji ceny.
- Problem
- Formularz zapisu musi zebrać dość informacji, nie odstraszając długością.
- Decyzja
- Przełącznik „jestem rodzicem / jestem uczniem" dopasowuje pola do roli, a pole poziomu ma opcję „Nie wiem / ustalimy na lekcji".
- Uzasadnienie
- Opcja „nie wiem" zdejmuje presję oceny jeszcze przed pierwszym kontaktem - nikt nie musi deklarować poziomu dziecka w ciemno.
- Wpływ
- Niższy próg wejścia przy zachowaniu jakości zgłoszeń.
- Problem
- Typowe obawy rodziców (online? młodsze dzieci? co po lekcji?) blokują decyzję.
- Decyzja
- FAQ z ośmioma realnymi pytaniami rodziców i sekcja opinii tuż przed formularzem zapisu.
- Uzasadnienie
- Odpowiedź podana zanim pojawi się wątpliwość jest warta więcej niż najlepsza odpowiedź na maila.
- Wpływ
- Mniej pytań wstępnych, więcej zgłoszeń gotowych do umówienia terminu.
- Problem
- Rezerwacja lekcji to dla części odwiedzających za duży pierwszy krok.
- Decyzja
- Dwie ścieżki: główne CTA „Umów bezpłatną lekcję próbną" i wyraźnie opisane, niezobowiązujące „Zadaj pytanie".
- Uzasadnienie
- Lekcja próbna to duża decyzja, pytanie - mała. Obie są lepsze niż zamknięcie karty.
- Wpływ
- Niezdecydowani mają dokąd pójść, zamiast porzucać stronę.
- Problem
- Większość rodziców otworzy stronę na telefonie, między innymi obowiązkami.
- Decyzja
- Jednokolumnowy układ mobilny z dużymi polami formularza i sekcjami w kolejności ścieżki decyzyjnej.
- Uzasadnienie
- Pełna ścieżka - od hero po wysłanie zgłoszenia - musi być wygodna jedną ręką.
- Wpływ
- Zapis na lekcję próbną nie wymaga „dokończę na komputerze".
Kluczowe sekcje
Wersja mobilna: pełna ścieżka od hero do zapisu w jednej kolumnie, z dużymi, wygodnymi polami.
Od projektu do wdrożenia
Lekki stack dopasowany do marki jednej osoby - szybki w utrzymaniu, tani w hostingu i przygotowany pod lokalne SEO.
- React + ViteKomponentowa struktura utrzymuje spójność sekcji - karty oferty, stepper i FAQ korzystają z tych samych elementów bazowych.
- React RouterPolskie, zrozumiałe adresy (/oferta, /o-mnie) plus przekierowania z wariantów angielskich - żaden stary link nie prowadzi donikąd.
- Tailwind CSS v4Tokeny kolorów marki (granat, błękit, złoto) zdefiniowane raz jako zmienne systemowe - spójność palety bez ręcznego pilnowania.
- Formularz zapisuWalidacja pól, komunikat potwierdzenia („Odezwę się w ciągu 24 godzin") i rozróżnienie zgłoszenia lekcji od zwykłego pytania.
- SEO lokalneMeta tagi pod frazę „korepetycje angielskiego Kraków", znaczniki geograficzne i dane Open Graph - strona jest gotowa do pozycjonowania lokalnego.
- NetlifyHosting statyczny z regułami SPA - wszystkie podstrony otwierają się bezpośrednio z linku.
Co dostarczyliśmy
- 01Marka osobista budząca zaufanie rodziców
- 02Logo łączące naukę (książka) ze swobodną atmosferą (herbata, rozmowa)
- 03Spójny, ciepły ton komunikacji w całym serwisie
- 04Uporządkowana oferta - trzy pakiety wiekowe z jawnym cennikiem
- 05FAQ redukujące najczęstsze obawy rodziców
- 06Prosta ścieżka do zapisu na bezpłatną lekcję próbną
- 07Responsywna strona dopasowana do ruchu mobilnego
Najważniejsza decyzja
Ten projekt najlepiej pokazał, jak komunikować profesjonalizm bez chłodnego, szkolnego wizerunku. Rozwiązaniem nie było dodawanie kolejnych certyfikatów, tylko konkret podany ciepłym językiem: rozpisany plan lekcji, jawny cennik i uczciwa obietnica „nie obiecuję cudów w tydzień". Zaufanie rodzica buduje się przez przejrzystość - estetyka ma je tylko wspierać, nie zastępować.
Strona na żywo
Tea with Asia
Następny projektWaymark Garage - marka, logo i strona dla warsztatu motoryzacyjnego
Pełna identyfikacja marki dla studia tworzącego części samochodowe z druku 3D - od logo i kolorów po stronę i pozycjonowanie marketingowe.
POROZMAWIAJMY
Porozmawiajmy o Twoim projekcie
Budujesz markę osobistą i chcesz, żeby klienci zaufali Ci od pierwszej wizyty? Porozmawiajmy o projekcie.