Case Studies

Jak stworzyć stronę internetową w 4 dni? Landing Page dla Upside

Projekty i związane z nimi potrzeby bywają różne. Bardziej złożone, wielopoziomowe, proste i jasno określone. Dla nas najważniejsze jest ich zbadanie i dobranie odpowiedniego narzędzia, które wyczerpująco na nie odpowie. Czy zatem jesteśmy w stanie wykonać stronę w 4 dni? Tak. Czy popieramy tworzenie dedykowanych Landing Page pod usługi, produkty, eventy? Tak. Czy jesteśmy zwolennikami testów? Tak. 3 razy na tak – idealne podsumowanie naszej współpracy z Upside. 

 

Klient:

Upside

Cel:

Zaprojektowanie i wdrożenie Landing Page, stworzenie mockup-u e-booka

Okres współpracy:

Kwiecień 2022

Upside to firma technologiczna specjalizująca się w tworzeniu oprogramowania dla firm z branży digital commerce. Po zaledwie kilku latach działalności może pochwalić się szerokim portfolio międzynarodowych Klientów zawierającym takie marki jak Framebridge, Yoonema, Gladly czy University of Toronto. 

Kreatywność,  doświadczenie i elastyczność – jeżeli takie cechy posiadają oba zespoły, to współpraca musi być udana i efektywna. Tak też było tym razem, gdy Project: People team wirtualnie spojrzał sobie w oczy z zespołem Upside :).  

 

Landing Page w 4 dni 

Potrzebujemy strony internetowej pod promocję e-booka, którego premierę planujemy za kilkanaście dni.

Podczas krótkiego warsztatu kick-offowego otrzymaliśmy wszystkie niezbędne wytyczne wskazujące na to, co strona ma zawierać i jaki kierunek graficzny powinniśmy przyjąć. Wszystkie ustalenia spisaliśmy na Miro. Od razu stało się jasne, że wykorzystamy narzędzia low-codowe, szczególnie, że to rozwiązanie było już z powodzeniem użyte wcześniej, przy tworzeniu pozostałej części witryny. Wybór padł na Webflow. 

Zatrzymajmy się w tym miejscu na chwilę. Zanim przejdziemy do dalszego opisu procesu, przybliżymy, czym jest to narzędzie. Webflow służy do projektowania i wdrażania stron internetowych. Jest to doskonała alternatywa, jeżeli potrzebujemy witryny w krótkim czasie albo chcemy przetestować rozwiązania. Co prawda nie stworzymy strony za pomocą kilku kliknięć. Platforma wymaga większego zagłębienia się w funkcjonalności, jednakże rozbudowana wiedza programistyczna nie jest potrzebna do tego, aby korzystać z narzędzia. Oczywiście znajomość zagadnień i procesów z tej dziedziny może okazać się pomocna, aby szybciej poradzić sobie z ułożeniem poszczególnych elementów. Dla użytkowników, którzy oczekują większej personalizacji bądź funkcjonalności dostępna jest też opcja edycji lub dopisania kodu CSS.

Rozwiązanie Webflow jest bardzo użyteczne dla prostych stron, którymi może zarządzać praktycznie jedna osoba – tłumaczy Tomasz Sikora, front-end developer w Project: People – w praktyce narzędzie można wykorzystać na przykład do stworzenia strony wizytówkowej, portfolio, blogów i stron o podobnych zakresach. 

 

Design na start 

Proces w dużej mierze opierał się na przygotowaniu atrakcyjnego i estetycznego designu w oparciu o CI (Corporate Identity – (ang). Identyfikacja Wizualna) marki. Mimo, że zaproponowany layout jest zgodny z wytycznymi wskazanymi w Brandbooku, to Landing Page został wykonany w taki sposób, aby stanowił odrębną całość a nie podstronę ofertową. Dodatkowo przed naszą designerką stanęło zadanie polegające na stworzeniu mockupu e-booka, co miało na celu uatrakcyjnić przekaz i wyciągnąć na wierzch najważniejsze elementy. Materiały zostały zaprojektowane w taki sposób, aby z łatwością można było je przełożyć na formaty reklamowe wykorzystywane w innych mediach.  

 

Zobacz stronę live – LINK

 

Muszę przyznać, że praca przy tym projekcie była bardzo przyjemna, a duży wpływ na to miała płynna komunikacja. Kasia już na kick-offie szczegółowo zakomunikowała cele i priorytety projektu, dzięki czemu od razu wiedzieliśmy, jakie są nasze zadania i co mamy wykonać w pierwszej kolejności – podkreśla Agnieszka Majchrowicz, UI Designer w Project: People – w trakcie projektowania byliśmy również w ciągłym kontakcie. Udostępniane przeze mnie projekty były komentowane tego samego dnia. Szybki i szczery feedback bardzo usprawnił cały proces, dzięki czemu kolejne etapy były płynnie realizowane i wdrażane.

 

Jak został skonstruowany Landing Page? 

Zanim przystąpiliśmy do docelowego planu pracy, przedstawiona została makieta low-fi, którą tworzy się w początkowym etapie pracy nad designem. Zawiera się na niej podstawowe informacje dotyczące tego, jakie dane będą umieszczone w poszczególnych sekcjach. Tego typu proces stosuje się przede wszystkim po to, aby zapewnić jak najlepszy user experience. Dlaczego to jest ważne? Uogólniając, im lepsze doświadczenia użytkownika, tym większa szansa na jego zapoznanie się z informacjami na stronie oraz szczegółami przedstawionymi w ofercie. Makieta została opracowana w Figmie i pokazywała: 

1.Nawigację 

2.Zawartość 

3.Strukturę 

4.Intuicyjność 

5.Szybkość dostępu 

Po akceptacji makiety przystąpiliśmy do prac nad Landing Page. Strona została podzielona na kilka segmentów.

1.Hero – w tej części dodaliśmy informację o e-booku oraz mockup, aby użytkownik od razu wiedział, czego dotyczy Landing Page. 

2.Sekcja “about e-book” – wyjaśniająca w kilku punktach, których zakresów dotyczy publikacja i jakie tematy podejmuje. 

3. Authors – miejsce, w którym opisane zostało doświadczenie autora oraz dodane jego zdjęcie. Celem było przedstawienie członka zespołu jako eksperta i podkreślenie jego doświadczenia w podjętym temacie.  

4.Sekcja “About Upside” – krótka informacja na temat firmy, aby użytkownik wiedział, kto sygnuje daną publikację.  

5. Testymonial klienta dotyczący firmy w celu uwiarygodnienia publikacji. 

 

6.Kontakt z zespołem + stopka, dla ułatwienia nawigacji i możliwości szybkiego skontaktowania się w razie zapytań. 

Współpraca przebiegała bardzo sprawnie. Zespół Project: People, z którym mieliśmy okazję współpracować wykazał się bardzo dużym zaangażowaniem podczas realizacji projektu. Zarówno Agnieszka, jak i Tomasz często przejmowali inicjatywę proponując nowoczesne rozwiązania, które miały znaczący wpływ na wypracowane efekty. – podsumowuje Kasia Ryniak, Co-CEO Upside.

W momencie, gdy design został już zaakceptowany przez klienta, nasz developer przystąpił do prac wdrożeniowych. Przy tym projekcie nie było potrzeby tworzenia kodu. Wykorzystane zostały gotowe elementy oferowane przez Webflow. Dodatkowo Tomasz przygotował formularz pod dalszą integrację z Hubspotem, co umożliwiło uruchomienie całego procesu marketingowego związanego z kampanią promocyjną e-booka. Zadbaliśmy również o dopasowanie strony do różnych rozdzielczości, co zagwarantowało użytkownikom korzystającym z różnych urządzeń miłe doświadczenia ze stroną. Kontynuując ten proces, nasz developer dodał animacje, które uatrakcyjniają przekaz i mają wpływ na lepszy UX. Następnie strona została przetestowana przez oba zespoły i po wprowadzaniu poprawek przekazana klientowi w formie Landing Page gotowego do uruchomienia. 

 

Bieżąca komunikacja 

Komunikacja projektowa opierała się na Figmie oraz Slacku. Klient na bieżąco komentował udostępniane layouty, pozostawiając przy nich komentarze, dzięki czemu prace szły płynnie. Dzięki sprawnej komunikacji członkowie odpowiedzialni za poszczególne zakresy byli na bieżąco informowani o wprowadzanych zmianach, co usprawniało realizację poszczególnych zadań. Cały proces, wliczając briefing, realizację oraz testy, zajął nam tydzień. 

Co chcemy przez to zakomunikować? Jesteśmy otwarci i gotowi na różne wyzwania. Zarówno rozbudowane projekty, jak i szybkie realizacje. Chcesz dowiedzieć się więcej? Zapisz się do naszego newslettera i bądź na bieżąco. 

Case study to za mało?

Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

Umów się na bezpłatną konsultację

Zobacz usługę

Sprawdź, jak wspólnie
możemy przeprowadzić
ten proces w Twojej
firmie

Sprawdź teraz