Case study — redesign strony
Granty.org.ua
Międzynarodowa platforma polskich i ukraińskich ekspertów: wyszukiwanie grantów, przygotowanie wniosków, prowadzenie projektów i szkolenia. Przebudowaliśmy stronę tak, aby każda grupa odbiorców w minutę znalazła swój format wsparcia — i zostawiła zgłoszenie.
Omówić projekt →
Punkt A — z czym się zgłoszono
Wiele formatów, brak wyboru
Wykłady wideo, konsultacje menedżerów, kurs z certyfikatem VCC i szkolenie offline — cztery formaty dla różnych odbiorców. Strona miała połączyć je w jeden system i nie zamienić się w katalog.
- Formaty trudno porównać: komu wystarczy wykład, a komu potrzebny jest kurs
- Brak jednego punktu wejścia — odwiedzający gubi się między działami
- Zgłoszenie przychodzi bez kontekstu: nie wiadomo, na jakim etapie jest projekt i jaki menedżer jest potrzebny
- Kluczowe przyciski giną wśród opisów usług
Proces i analityka
Kluczowe punkty wzrostu
Zaczęliśmy od prostego pytania: z czym człowiek wchodzi na stronę o grantach. Okazało się — z trzema różnymi sytuacjami: „potrzebuję środków, ale nie wiem, od czego zacząć”, „już piszę wniosek i utknąłem”, „chcę się nauczyć i zdobyć certyfikat”.
Rozpisaliśmy ścieżkę użytkownika:
wyszukiwarka lub polecenie → strona główna → wybór formatu wsparcia → formularz konsultacji lub zapis na kurs.
- Sprowadziliśmy wszystkie usługi do trzech wariantów wsparcia: od samodzielnej nauki po pełne prowadzenie projektu
- Umieściliśmy blok wyboru zaraz po pierwszym ekranie — użytkownik widzi swój scenariusz bez przewijania
- Dodaliśmy kwalifikację wprost do formularza: menedżer, temat zapytania i wygodny kanał kontaktu
- Wzmocniliśmy dowody: eksperci z imienia i nazwiska, wideoopinie absolwentek, certyfikacja VCC
- Zrobiliśmy z FAQ narzędzie sprzedaży: uczciwe odpowiedzi o gwarancje, koszt i sposób płatności
- Ograniczyliśmy wezwania do działania do dwóch: zapisz się na konsultację albo przejdź do nauki
Projekt i struktura
Najpierw makieta, potem kodowanie
Złożyliśmy pełną makietę: rytm sekcji, przeplatanie granatu, kremu i żółci, całą długość przewijania. Dzięki temu było widać, gdzie strona traci tempo, a gdzie na odwiedzającego spada za dużo tekstu — jeszcze zanim ruszyło kodowanie. Te same zasady — siatka, kolory, typografia, styl kart — rozeszły się potem na podstrony serwisu.
Granat trzyma kluczowe bloki: pierwszy ekran, konsultację i kurs. Krem — dla „spokojnych” sekcji z wyborem i wyjaśnieniami. Żółty działa jako akcent: przyciski, znaczniki i blok zespołu.
- Granatowynagłówek, stopka, głębia tła
- Niebieskikluczowe bloki: hero, konsultacja, kurs
- Żółty akcentprzyciski, znaczniki, blok zespołu
- Kremowytło sekcji z wyborem i wyjaśnieniami
Efekt w ruchu
Strona w przewijaniu
Proces — jak pracowaliśmy
6 kroków od makiety do strony
Główna decyzja w tym projekcie jest prosta: najpierw scenariusze odbiorców, potem struktura, a dopiero na końcu — projekt i kodowanie.
-
1. Scenariusze odbiorców
Opisaliśmy trzy sytuacje, w których człowiek szuka grantów, i przypisaliśmy każdej własny blok strony oraz własne działanie.
-
2. Struktura strony
Ułożyliśmy kolejność strony głównej: pierwszy ekran → wybór formatu → szczegóły każdego wariantu → dowody → odpowiedzi na wątpliwości → finalne działanie. Nawigację ograniczyliśmy do pięciu pozycji, aby podstrony nie konkurowały z wyborem formatu.
-
3. Makieta i akcenty kolorystyczne
Złożyliśmy makietę całej strony, aby zobaczyć rytm sekcji i długość przewijania, zanim ruszyło kodowanie.
-
4. Teksty i komunikaty
Przepisaliśmy nagłówki pod korzyść, a nie pod nazwę usługi. Sprawdziliśmy ton: bez obietnic gwarantowanego grantu.
-
5. Formularze z kwalifikacją
Trzy wybory w formularzu — menedżer, temat zapytania i kanał kontaktu. Menedżer dostaje zgłoszenie już z kontekstem:
- z jakiego kraju ma być specjalista;
- na jakim etapie jest projekt;
- gdzie wygodnie się kontaktować;
- co dokładnie chce uzyskać.
-
6. Kodowanie i wersja mobilna
Przenieśliśmy makietę do istniejącego CMS bez zmiany hostingu i adresów podstron, a potem osobno sprawdziliśmy długość bloków, rozmiary przycisków i formularz na smartfonie.
Potrzebujesz strony, która doprowadzi każdego klienta do własnej usługi?
Rozłożymy usługi na scenariusze odbiorców i ułożymy strukturę oraz teksty tak, aby odwiedzający w minutę znalazł swój format i zostawił zgłoszenie.
Punkt B — rezultaty
Punkt B
Po zmianieStrona po redesignie
3
warianty wsparcia w jednym bloku wyboru
4
minikursy z przejściem na platformę szkoleniową
10
pytań w FAQ, które rozwiewają wątpliwości
- Strona prowadzi trzy różne grupy odbiorców do trzech różnych działań
- Formularz konsultacji sam kwalifikuje zgłoszenie: menedżer, temat, kanał kontaktu
- Dowód społeczny na miejscu: sześcioro ekspertów z imienia i nazwiska oraz wideoopinie absolwentek kursu
- Struktura gotowa na rozbudowę: nowy format to kolejna karta, a nie kolejna podstrona
Zakres: strona: struktura + projekt + teksty + formularze
Strona odpowiada na trzy pytania odwiedzającego: który format jest mój, co dostanę i jak zacząć.
Opinia
Co mówi klient
„W Hil Studio zamówiliśmy stworzenie design nowego landing page dla projektu Granty.org.ua. Stworzona grafika była estetyczna i funkcjonalna. Na jej podstawie została zaprogramowana strona www, którą chwalą użytkownicy. Rekomenduję”.
Krzysztof Łątka, Granty.org.ua — po uruchomieniu strony.
Wnioski
Co dał ten projekt
Strona o grantach sprzedaje nie designem, lecz zrozumiałością: człowiek ma w minutę pojąć, który format wsparcia jest jego, co dostanie i ile to kosztuje w czasie.
Najbardziej działa tu nie nowa grafika sama w sobie, lecz decyzja, by sprowadzić kilka usług do trzech scenariuszy wyboru — to ona przesądza, czy strona stanie się realnym narzędziem sprzedaży.
Wybór zamiast katalogu
Gdy usług jest kilka, strona główna ma proponować nie listę, lecz wybór: trzy formaty o różnej głębokości i cenie.
Kwalifikacja na wejściu
Trzy pola wyboru w formularzu oszczędzają menedżerowi pierwszą rozmowę i pokazują, z kim i o czym będzie rozmowa.
Zaufanie na faktach
W delikatnym temacie przekonują nazwiska ekspertów, certyfikacja, opinie i uczciwa odpowiedź o tym, czego zagwarantować się nie da.
Kontakt