Projektowanie i wdrażanie witryny marketingowej naszej firmy: Moja podróż od treści do implementacji

Jeśli jesteś użytkownikiem Logto, mogłeś zauważyć, że strona internetowa naszej firmy została niedawno odświeżona. Jeśli nie, sprawdź witrynę, logto.io, i zgadnij, ile zasobów poświęciliśmy na to, aby to się udało.

Możesz pomyśleć: czy chcecie się samopromować, pokazując, że stworzenie tego wymagało mnóstwa pracy, wysiłku i starannego projektu, aby jedynie pokazać swoje mistrzostwo w realizacji?

Nie!

Przeciwnie, chcemy pokazać, jak mądrze wykorzystujemy narzędzia i metody do poprawy jakości naszego produktu i dostarczenia najlepszych produktów oraz usług naszym użytkownikom.

Otrzymaliśmy pozytywne opinie od naszej społeczności i zastanawiamy się, jak to zrobiliśmy. Ta tura aktualizacji jest inna, ponieważ całkowicie przeprojektowaliśmy nowy workflow w dynamicznym środowisku. Chcielibyśmy przedstawić nasze najlepsze praktyki oraz przyjrzeć się bliżej naszej kulturze współpracy i pracy zespołowej.

Tło#

Jesteśmy ekipą techniczną skupioną na zapewnianiu szerokiej gamy usług związanych z tożsamościami klientów oraz pracą nad infrastrukturą. Presja na dostarczanie jest znaczna. Równolegle musimy wspierać różne zadania związane z opowiadaniem historii i operacjami, takie jak budowanie markowych witryn marketingowych, pisanie blogów, promowanie naszych projektów i angażowanie się z naszymi użytkownikami.

Przekonująca strona lądowania jest kluczowa, ponieważ często tworzy pierwsze wrażenie, jakie twoi odbiorcy mają o twoim produkcie, pomagając im zrozumieć problemy, które twój produkt ma na celu rozwiązać, w tym ceny i wszelkie znaczące referencje klientów jako dowód społeczny.

Dodatkowo może spełniać wiele celów biznesowych:

• Przedstaw swój wizerunek marki i propozycję wartości.
• Generowanie leadów.
• Pełnić rolę centrum treści, co jest szczególnie ważne dla firm skoncentrowanych na wzroście napędzanym przez produkt lub deweloperów.
• Umożliwienie optymalizacji SEO, nabywania użytkowników i śledzenie regularnego ruchu.

W mojej poprzedniej pracy byłem zaangażowany w projekt strony internetowej. Przyjrzyjmy się, jak wygląda typowy workflow:

1. Najpierw menedżerowie ds. marketingu produktów i menedżerowie produktów definiują treść i wymagania.
2. Projektanci produktów i UX writer opracowują treści.
3. Przekazujemy pracę w toku, zwykle jest to wersja low-fidelity, do projektantów wizualnych i brandingowych, którzy wprowadzają ostateczne poprawki przed produkcją.
4. Inżynierowie i menedżerowie produktów rozpoczynają implementację, koncentrując się na animacjach i responsywnym projektowaniu stron.

Ten proces jest żmudny i angażuje wiele osób oraz interesariuszy, co czyni go nieodpowiednim dla dynamicznego środowiska.

Nawet jeśli początkowo mamy tylko dwie osoby utrzymujące ten proces — projektanta produktu i inżyniera — zadania zarządzania wydajnością strony internetowej, przesyłania obrazów, zapewniania responsywnego projektu, obsługi formatów obrazów i aktualizacji treści wciąż wymagają wielu komunikacji tam i z powrotem.

Ten workflow jest niewydajny. Stale zastanawiam się, jak uwolnić zasoby inżynieryjne, aby mogły skupić się na podstawowej pracy nad produktem, podczas gdy ja zajmuję się resztą.

Użycie narzędzi do zwiększenia produktywności jest kluczowym elementem filozofii naszego zespołu. Dlatego rozpocząłem badania nad narzędziami, które mogą pomóc usprawnić te procesy.

Rozłożenie potrzeb#

Aby stworzyć udaną witrynę marketingową SaaS, przyjrzyjmy się niezbędnym elementom:

1. Treść: Fundamentem każdej witryny marketingowej jest dokładne wiedzenie, co wyświetlić. Wymaga to dogłębnego zrozumienia docelowych klientów, ich typowych przypadków użycia oraz propozycji wartości twojego produktu. Żadne narzędzie nie zastąpi tego zrozumienia. Na szczęście, mój udział w projektowaniu produktu i strategiach wejścia na rynek oznacza, że jestem dobrze przygotowany do tworzenia treści, które spełniają potrzeby użytkowników.
2. Projekt: Strona powinna mieć estetyczny i nowoczesny wygląd. Moje doświadczenie w projektowaniu UX/produktów, choć nie tak obszerne jak dedykowanego projektanta kreatywnego, pozwala mi kompetentnie zająć się tym aspektem.
3. Inżynieria: Kluczowe techniczne kwestie obejmują hosting strony, zapewnienie responsywności projektu i umożliwienie płynnych mikrointerakcji. Ważne jest również, aby strona była płynnie zintegrowana z innymi komponentami, takimi jak przekierowania linków i strona autoryzacji produktu.

Po przeprowadzeniu niektórych badań, oto zestaw narzędzi, który planuję wykorzystać do aspektów projektowych:

Treści produktowe i marketingowe#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper lub podobne aplikacje AI jako pilot.

Chodzi o doprecyzowanie i optymalizację moich treści marketingowych i komunikatów. Ważne jest, aby mieć jasność co do celu i intencji stojących za nimi. AI to tylko pilot, a nie decydent. Zanim napiszę jakikolwiek komunikat marketingowy, zadaję sobie kilka pytań:

1. Kto przeczyta komunikat?
2. Czy potrzebują one dodatkowego kontekstu?
3. Jaki jest kluczowy punkt, który chcesz poruszyć w komunikacie?
4. Jakie działania oczekujesz od użytkownika jako kolejny krok?
5. Czy ten komunikat ma na celu edukację lub wywołanie konkretnego działania?
6. Czy to może być kłamliwe lub przesadzone?

Następnie zapisuję wstępny szkic punktów, które chcę przekazać.

Czasami AI może wprowadzać słowa, które wydają się banalne lub zniekształcać twoje pierwotne intencje, aby brzmiały logicznie poprawnie. Musisz jednak ponownie podkreślić swoją intencję i trzymać się swoich celów. Musisz ustalić standardy, aby zapewnić, że słowa przekazywane odbiorcom są jasne, proste, zwięzłe i przejrzyste. Jest to szczególnie ważne w naszej domenie produktowej, która obsługuje wiele firm i deweloperów.

Projekt#

Figma, Framer do interakcji i projektowania wizualnego, a także do animacji i prototypowania

Mam doświadczenie w projektowaniu, skupiającym się głównie na projektowaniu produktów, które obejmuje tworzenie UI i UX. Choć projektowanie dopracowanego UI nie stanowi dla mnie wyzwania, moja praca nie jest tak dopracowana, jak praca profesjonalisty. Jednak dzięki podstawowym umiejętnościom projektowania wizualnego i ilustracji oraz wybierając odpowiednie narzędzia, możesz poprawić jakość swojej pracy. W tym procesie twórczym korzystam z Framer i Figma.

To jest nasz stary projekt, który został całkowicie zbudowany w Figma

Nasz oryginalny projekt został stworzony w Figma. Użyłem oficjalnego pluginu Framer, "Framer to HTML", aby skopiować i wkleić podstawowy projekt do Framer, co stanowiło dobre miejsce startowe.

Następny krok to projektowanie. Jeśli wcześniej używałeś Figma, przejście do Framer jest płynne, ponieważ ogólne doświadczenia użytkownika są dość podobne. Chcę podkreślić kilka interesujących interakcji, które znacząco zwiększają produktywność.

Układ#

Użytkownicy Figma cenią sobie auto-layout, ponieważ oszczędza on wiele czasu przy rozmieszczaniu i układaniu elementów. Jednak funkcje układu w Framer są jeszcze inteligentniejsze, bardziej zbliżone do front-endowego myślenia. W Framer możesz wybrać, czy chcesz użyć siatki, czy układu stosu, zdefiniować kolumny, ustawić maksymalną szerokość, a system automatycznie przejdzie do następnego wiersza, jeśli zajdzie taka potrzeba. Ta funkcjonalność usprawnia proces projektowania, odzwierciedlając, jak elementy będą zachowywać się na żywo w środowisku webowym.

Punkty przerwania dla responsywnego projektu#

Dzięki sprytnemu ustawianiu punktów przerwania i ustawień szerokości (takich jak wypełnienie, stałe, względne i dopasowane do treści) oraz definiowaniu różnych kanwasów, możesz łatwo i precyzyjnie osiągnąć różne projekty responsywne. Takie podejście pozwala efektywnie dostosować układ do różnych rozmiarów ekranów i urządzeń.

Animacja#

Framer oferuje szeroką gamę gotowych animacji, w tym animację ticker, której intensywnie używamy na naszej stronie internetowej, aby zaprezentować naszą pracę. Możesz ustawić komponent i osadzić go w tym widżecie. Pozwala to zdefiniować różne konfiguracje, takie jak prędkość, kierunek, odstępy i więcej, dając ci elastyczność i kontrolę nad tym, jak animacja zachowuje się na twojej stronie internetowej.

Kolejną użyteczną funkcją w Framer jest możliwość dostosowania animacji scrollowania. Na przykład, możesz określić, jak elementy pojawiają się w miarę przewijania na ekranie. Ustawienie animacji scrollowania pozwala kontrolować czas i styl wyświetlania elementów, zwiększając tym samym wrażenia użytkownika i zaangażowanie w treść.

Szybkie publikowanie#

Jednym z moich kluczowych wymagań jest możliwość:

1. Szybkiego projektowania wielu stron lądowania dla optymalizacji SEO i kampanii marketingowych. Szybkość jest kluczowa.
2. Częstego aktualizowania treści samodzielnie. Strona lądowania twojego produktu odzwierciedla najnowsze zmiany i bieżące pozycjonowanie produktu. Przestarzałe treści oznaczają tracenie rynkowych możliwości i brak aktualności wobec potrzeb twoich klientów.

W moim poprzednim workflow, za każdym razem, gdy musiałem zaktualizować treść, musiałem albo poprosić inżyniera o to, albo samodzielnie złożyć pull request. Nasz zespół inżynierski przestrzega surowych procesów mających na celu zapewnienie jakości kodu, co może być czasochłonne i ogranicza moją możliwość szybkiego wprowadzania zmian.

Framer rozwiązał dla mnie ten problem. Teraz, gdy dokonuję zmiany i klikam publikuj, jest ona natychmiast widoczna na produkcji. Ta możliwość znacznie ułatwiła proces, pozwalając na szybkie aktualizacje i większą autonomię w zarządzaniu treścią.

Inżynieria#

Ponieważ strona jest hostowana przez Framer, nie ma potrzeby żadnej implementacji ani pracy technicznej z naszej strony. Nasi inżynierowie potrzebowali tylko około 10 minut, aby zintegrować ją z resztą naszej witryny.

Nasza obecna strona składa się z 20-30 stron; niektóre są rozwinięte przy użyciu Framera, a inne zostały stworzone tradycyjnymi metodami programistycznymi. Jesteśmy w trakcie wyboru najlepszych narzędzi do utrzymania naszych stron. Na przykład, dla dokumentacji deweloperskiej, która jest trudna do zarządzania przy pomocy Framera, użycie przyjaznego deweloperom frameworka do dokumentacji, aby hostować treści, jest optymalnym wyborem. W przyszłości dokonamy oceny naszych potrzeb i zdecydujemy, czy kontynuować hosting na własnym serwerze, czy całkowicie przejść na Framer.

Jak zmieniło się nasze workflow#

Całkowicie przekształciliśmy nasze workflow, co sprawiło, że produkcja witryn marketingowych stała się całkowicie bezwysiłkowa. Jest niezawodna, łatwa do utrzymania i wysoce efektywna.

Napisałem ten blog, aby podzielić się najlepszymi praktykami. Jeśli masz doświadczenia z Framerem i projektowaniem pięknych stron internetowych, chętnie o nich usłyszę. Porozmawiajmy i uczmy się od siebie nawzajem.

Teraz czas sprawdzić nasz produkt! Odwiedź nas na logto.io.