Strona startupu z branży cyberbezpieczeństwa

Rola: UX/UI Designer & Webflow Developer
(w ramach adcookie)

Narzędzia:

O projekcie

Relock to innowacyjny startup z branży cyberbezpieczeństwa, który zapewnia płynną weryfikację użytkowników w czasie rzeczywistym, chroniąc przed kradzieżą danych i cyberzagrożeniami bez fizycznych kluczy czy dodatkowych aplikacji. Firma zgłosiła się do adcookie po nowoczesną, skalowalną stronę, która jasno komunikuje złożone rozwiązania i podkreśla ich wiodącą technologię.

Harmonogram

Proces

Discovery i warsztat online

Współprowadziłem wstępny warsztat online w Miro, aby lepiej zrozumieć cele biznesowe Relock, grupę docelową, produkt i kontekst technologiczny. Głównym celem było zebranie kluczowych insightów potrzebnych do dalszych prac nad brandingiem i projektem strony. Sesja objęła analizę produktu, segmentację odbiorców, funkcjonalności strony oraz wszystkie wizualne aspekty projektu.

Na podstawie insightów z warsztatu opracowaliśmy architekturę informacji strony, która stała się fundamentem kolejnych etapów projektu. Warsztat pomógł też uzgodnić oczekiwania, wyznaczyć jasny kierunek projektowy oraz zbudować wzajemne zaufanie i dobrą współpracę z klientem, co okazało się kluczowe w całym procesie.

Wireframe’y (low-fidelity)

Na podstawie insightów z warsztatu przygotowałem wireframe’y, aby szybko iterować i testować różne koncepcje układu. Pozwoliły one szybko zweryfikować strategię UX przed przejściem do szczegółowego projektu.

Prototypowanie high-fidelity

Na bazie ustalonego kierunku wizualnego przygotowałem makiety high-fidelity w Figmie. Projekt miał komunikować profesjonalizm, innowacyjność i przejrzystość, tak aby złożone zagadnienia cyberbezpieczeństwa były zrozumiałe dzięki intuicyjnemu UX i angażującemu UI. Dopracowałem cały interfejs, żeby był czystszy, płynniejszy i łatwiejszy w nawigacji, tak by działał równie dobrze, jak wygląda.

Strona została zaprojektowana w wersji mobilnej i desktopowej, aby zapewnić optymalne doświadczenie na każdym urządzeniu. Projektowanie obu formatów zapewnia spójność, zwiększa zaangażowanie i odpowiada współczesnym nawykom użytkowników.

Aby utrzymać jasną komunikację i zgodność przez cały projekt, prowadzę regularne cotygodniowe spotkania z klientami. Pozwalają one trzymać się celów, szybko reagować na feedback i dostosowywać się do zmieniających się potrzeb. Taka stała współpraca zapobiega nieporozumieniom i utrzymuje projekt na właściwym kursie.

Wdrożenie w Webflow

Zająłem się pełnym wdrożeniem strony w Webflow, przekładając projekty hi-fi na w pełni funkcjonalną, responsywną i skalowalną stronę. Zadbałem o spójność na wszystkich urządzeniach oraz zoptymalizowałem stronę pod kątem wydajności i użyteczności.

Najważniejsze elementy wdrożenia

• Finsweet Attributes – wykorzystałem narzędzia Finsweet do zbudowania zaawansowanych sliderów z pełną kontrolą nad responsywnością i interakcjami.
• Własny efekt podświetlenia tekstu – przygotowałem autorskie rozwiązanie w CSS do animowanych podświetleń tekstu, spójne z identyfikacją wizualną marki.
• Webflow CMS – skonfigurowałem dynamiczne kolekcje CMS dla bloga, dokumentacji i strony kariery, dzięki czemu klient łatwo zarządza treściami.
• Animacja Typed.js – zintegrowałem Typed.js w nagłówku, tworząc animację w stylu maszyny do pisania, która dodaje sekcji hero dynamiki i nowoczesności.

Rezultaty

Gotowa strona skutecznie pozycjonuje Relock jako zaufanego, innowacyjnego dostawcę rozwiązań z zakresu cyberbezpieczeństwa. Dzięki Webflow pozwala łatwo aktualizować treści i skalować się, umożliwiając zespołowi Relock sprawne zarządzanie dalszym rozwojem.

Najważniejsze wnioski

Szczegółowe warsztaty UX na wczesnym etapie znacząco zwiększyły przejrzystość projektu i zgodność co do kierunku projektowego.

Odpowiadanie zarówno za projekt, jak i development w Webflow pozwoliło na płynniejsze i spójniejsze przejście od koncepcji do gotowego produktu.