Projekt strony internetowej dla najszybciej rozwijającej się spółki paliwowej w Polsce - Anwim S.A.

Nie mogło zabraknąć omówienia wielkiego projektu strony internetowej dla naszego Klienta Anwim, z którego jesteśmy baardzo zadowoleni. Strona internetowa dla Anwim to nasza kilkumiesięczna ciężka, ale satysfakcjonująca praca, a teraz nadszedł czas, aby się nią pochwalić!
Projekt strony internetowej dla Anwim. Projekt, dla nas bardzo ważny, wielomiesięczny, ale przebiegający w najlepszej atmosferze, gdyż z Anwim pracujemy nie od dziś. To zaufanie, które wybudowaliśmy zaowocowało m.in. tak dużym projektem, a co najważniejsze, na tym nie poprzestaniemy.

Jednakże dzisiaj skupimy swoją uwagę na projekcie strony internetowej Anwim, a jest się o czym rozpisywać, gdyż jest to naprawdę spore przedsięwzięcie. Witryna ma multum funkcjonalności i podstron.

Jak zaczęliśmy zadanie? Rozmowami online, jak na pandemiczny czas przystało. Przeprowadziliśmy z Klientem warsztaty, które pomogły określić konkretne potrzeby i oczekiwania Klienta względem nas i projektu. A dzięki długiej i udanej współpracy opierającej się na realizacji przeróżnych zadań, same przygotowania poszły jak z płatka.

Kolejny etap to rozpisywanie celów, określanie odbiorców, potencjalnych problemów. I tutaj poszły w ruch sticky notes i markery! Razem robimy burzę mózgów. Przyklejamy, wpisujemy, skreślamy, przeklejamy, zakreślamy, aż dojdziemy do zarysu ogólnej koncepcji strony.
Czasami potrzeba odejść cztery kroki i spojrzeć na całość, aby ruszyć dalej z tematem. Czasami zostawić projekt, na jeden dzień czy dwa. Jedno jest pewne, tego procesu nie można pominąć ani potraktować po macoszemu. Choć wygląda niewinnie to istotny etap, na którym później będzie bazował projekt.
Analiza konkurencji i słów kluczowych. Na tym etapie, m.in. skorzystaliśmy z usług Semstorm - to rozwiązanie, które usprawnia cały proces wyszukiwania dostosowanych fraz do odpowiedniego źródła, a także dostarcza informacji, ile razy dane frazy są wyszukiwane, o trendach, średnim CPC oraz o konkurencyjności. Podczas tak złożonych prac, należy zoptymalizować konkretne etapy, aby sprawnie i szybko, bez utraty na jakości, przeprowadzić poszczególne działania tworzenia strony od podstaw. Mieliśmy pełną listę potrzebnych danych, na której oparliśmy nasz projekt.

Wireframy, czyli projektowanie makiet, czy to w formie odręcznej, czy już w programie komputerowym. U nas – rozrysowujemy ręcznie, później przerzucamy do programu Adobe XD. Na tym etapie zajmujemy się układem i rozmieszczeniem elementów. Ustalamy, jak mają wyglądać w przybliżeniu grupy podstron. Już na tym etapie, możemy zweryfikować pomysły, określić wynikające problemy. Na ten moment nie zaprzątamy sobie głowy kolorami czy zdjęciami. Mamy czystą esencję. Dostosowujemy układ do treści, które mają się znaleźć na stronie oraz do ustalonych funkcji. Tworzymy zarys modułów, które posłużą do zaprezentowania poszczególnych treści. Oczywiście wraz z projektem strony internetowej na desktop powstaje równolegle projekt strony internetowej na telefony komórkowe.
Następnie przechodzimy do określania fontów i kolorystyki. Na tym etapie także powstały przyciski i ikonki.
W tym przypadku kwestia użytego fontu była prosta. Zastosowaliśmy font przypisany do marki, czyli Proxima Nova. Kolorystyka typowo Anwimu, czyli granat i czerwień. Granat w przypadku większych przestrzeni, czerwień w ramach akcentów. Całość okraszona stonowanymi kolorami – jasna szarość i biel, tak aby odbiorca nie był zmęczony w odbiorze stroną, a całość była czytelna. 

Odnośnie czytelności ważna jest także zasada kontrastu. Przy tekście regularnym współczynnik kontrastu powinien wynosić minimum 4,5:1, w przypadku tekstu o wielkości 18 pt i wyboldowanym współczynnik kontrastu schodzi już do 3:1. Kontrast kolorów jest niezwykle ważnym parametrem przy projektowaniu. Tekst musi się wyróżniać i być czytelny. Nasz wzrok jest przyzwyczajony do układu: napisy czarne/ciemne, a tło białe/jasne. Nie bez przyczyny książki oparte są na tej zasadzie. Wszystko po to, aby nie męczyć wzroku i zachować skupienie oraz koncentrację. Oczywiście strony internetowe nie dysponują taką ilością treści co książki, dlatego możliwe jest użycie mocnego tła, ale takie decyzje zalecane są przy małej ilości tekstu i w ograniczonej ilości. 

Zadbaliśmy o odpowiedni współczynnik kontrastu. Tekst ciągły w kolorze czarnym jest na białym bądź jasno szarym tle. Podobnie podtytuły w kolorze granatu i czerwieni. Takie naprzemienne stosowanie białego tła z jasnoszarym, pozwala na subtelne oddzielenie poszczególnych modułów, dając wrażenie oddechu i przestrzeni. Na slajderach, które zaproponowaliśmy w projekcie dla Anwim, znajduje się mała ilość tekstu. Zwiększyliśmy rozmiar liter, aby zaakcentować tytuły podstron, przy okazji zwiększając czytelność. Dodaliśmy także przykładowe zdjęcia nadając stronie życia.
Audyt UX i SEO to wielostronicowy dokument, który tworzymy, aby w trakcie pracy zweryfikować nasze działania z oczekiwaniami Klienta. Rozpisujemy wszystkie podstrony, prezentując po kolei funkcjonalności, już obrazując poszczególne elementy projektu. Następnie spotykamy się z Klientem i analizujemy krok po kroku każdy szczegół projektu. Także poprzez program Adobe XD udostępniamy prototyp strony, który można przeklikać, przejść ze strony głównej do wszystkich podstron, najechać myszką na zmieniające się elementy, itd. Jest to sieć połączonych ze sobą elementów, która prezentuje się w następujący sposób:
Można się pogubić!

Gdy mamy już akceptację prace nabierają większego tempa. Następuje etap, gdzie nasz programista przejmuje stery. To moment, w którym działania twórcze artystycznej duszy spotykają się z oceną twardo stąpającego po ziemi programisty! Oj czasami odbywają się przy tym zawody przeciągania liny, ale kluczem do sukcesu jest zgrany zespół, który współpracuje ze sobą na każdym z etapów projektu, aby wyeliminować sytuacje pt. „tego nie da się zrobić”. :)

Strona zaczyna żyć. Wszystkie strony opieramy na naszym autorskim systemie. Każdy element, moduł jest przez nas robiony od zera i dobrany indywidualnie do projektu. Gdy strona jest postawiona, pozostaje jeszcze słynne Lorem ipsum zastąpić docelowymi treściami. Ten etap trochę trwa, nie jest może dość imponujący w efekcie, ale wbrew pozorom, wrzucenie treści naprawdę wiele zmienia w odbiorze projektu i przybliża nas do końcowego efektu. Do tego ładujemy zaakceptowane zdjęcia, uprzednio odpowiednio przygotowane.

A co kryje w sobie strona Anwim? Mnóstwo informacji i zakładek. Anwim S.A. to jedna z największych, niezależnych firm sektora paliwowego w Polsce i operator najdynamiczniej rozwijającej się sieci stacji paliw MOYA. Anwim prowadzi hurtową sprzedaż, a także dystrybucję paliw na terenie całego kraju oraz jest właścicielem ogólnopolskiej sieci stacji paliw MOYA. Na stronie znajdziemy jeszcze więcej informacji o firmie, o jej historii czy o misji i wartościach. Zadbaliśmy o wyeksponowanie działalności charytatywnej marki, a także sponsorowanie młodych talentów, takich jak Dominika Baćmaga, MOYA Racing Team, Jędrzej Żuralski czy Akademii Piłkarskiej Victoria i wiele innych. Na stronie zaprezentowaliśmy cały przekrój oferty Anwimu, tj.: paliwa, franczyza, oferta dla flot, import, sprzedaż hurtowa, transport, opony i serwis. W zakładkach znajdziemy także dużo przydatnych danych: raporty okresowe, raporty bieżące, obligacje, aktualności czy akcjonariusze. Oczywiście w przypadku tak dużej firmy nie mogło zabraknąć zakładki Biura Prasowego czy też Kariery i rozwoju, gdzie znajdziemy oferty pracy, stażu i praktyk. Tradycyjnie zakładka kontakt ze wszystkimi potrzebnymi danymi oraz formularzem kontaktu oraz linki do kanałów social media. Zresztą, sami zobaczcie.
W między czasie uczymy Klienta obsługi panelu administracyjnego, aby mógł powoli wprowadzać kolejne elementy na stronie. Nasz panel administracyjny jest bardzo prosty i łatwy do nauczenia. Czasami nagrywamy dla Klientów tutorial jak korzystać ze strony jako administrator, ale w dużej mierze zaprezentowanie pokrótce panelu jest wystarczające, gdyż najistotniejsze jest zrozumienie zasady jego działania i można bez problemu nanosić zmiany. Oczywiście, zawsze służymy pomocą.

Nadszedł czas na testy. W tym temacie jest pełna dowolność, każdy powinien testować. Testujemy całym Reequestowym zespołem, testuje i Klient. Każda uwaga i szczegół mają znaczenie. Sprawdzamy projekt witryny na różnych przeglądarkach, monitorach, urządzeniach. Powiększając stronę, minimalizując okno przeglądarki. Na początek, dobrze jest przeklikać stronę, tak jak robimy to zwykle, czyli intuicyjnie. Sprawdzamy każdą podstronę, funkcję, formularz, przycisk. Później klikamy wszędzie, gdzie się da. Trzeba wyjść spoza swoich przyzwyczajeń, poniekąd ze swojego punktu widzenia i zacząć podejmować decyzje, jak ktoś inny. A co by były, gdyby..? No właśnie, tym sposobem docieramy do kolejnych ukrytych na pierwszy rzut oka błędów. A błędy? One zawsze się znajdą. Jak wiemy, nie myli się ten, kto nic nie robi!
Gdy mamy już przetestowaną stronę na desktopie oraz na mobilce, zbliżamy się do ostatnich szlifów. Kończymy wrzucać ostatnie brakujące treści, pliki i inne drobiazgi. Uwierzcie, zawsze tak jest.

Możecie zobaczyć jak wstępny projekt podstrony "Kariera i rozwój" ewoluował. Jak widać, nie zmienił się drastycznie, a to dzięki dobrej komunikacji i dobrze przepracowanych etapów projektowania strony. 
Pozostało jeszcze zebrać wszystkie treści do tłumaczenia. Dobrze jest posegregować dane teksty, aby po otrzymaniu tłumaczeń, móc w efektywny sposób podmienić treści na anglojęzycznej wersji strony. Należy także pamiętać o komunikatach, które wyświetlają się korzystając ze strony. Każdy najmniejszy przycisk, zgoda, komunikat, stopka, tekst dotyczący ciasteczek, wyszukiwarka – wszystko musi być przetłumaczone. Trzeba być czujnym.

Tym sposobem przechodzimy do picia szampana, gdyż projekt strony został ukończony! To wielka radość móc widzieć jak wielomiesięczna praca przynosi namacalne efekty, a Klient jest zadowolony. W tym przypadku nie było inaczej! 
Rzecz jasna, proces powstawania tego projektu był zdecydowanie bardziej złożony i skomplikowany, niż przedstawiony Wam w tym artykule, ale ze stron internetowych należy korzystać, a nie o nich czytać, dlatego serdecznie zapraszamy Was do odwiedzenia strony internetowej www.anwim.pl i sprawdzenia na własnej skórze ogromu naszej pracy i końcowych efektów. Będzie nam i firmie Anwim bardzo miło. Koniecznie zajrzyjcie!

Zainteresował Cię ten projekt? Zadzwoń do nas!

Odwiedź nas
Przyjedź i poznaj nas osobiście
Wyślij e-mail
Napisz do nas, czego potrzebujesz
Zadzwoń
Skontaktuj się z nami bezpośrednio
Uprzejmie informujemy, że dane osobowe podane przez Państwa w niniejszej korespondencji będą przetwarzane i administrowane przez Reequest-Piotr Byliński z siedzibą w Łodzi przy ul. Wróblewskiego19/34 w celu przyjęcia, realizacji oraz ewidencjonowania niniejszego zapytania i nie będą udostępniane innym odbiorcom. Informujemy, że posiadają Państwo prawo dostępu do treści swoich danych oraz ich poprawiania. Podanie Państwa danych osobowych jest dobrowolne, jednak odmowa ich podania uniemożliwi przetworzenie treści zapytania.

Dział graficzny

Joanna Juszczak
Elżbieta Łuchniak
Karolina Kołodziejczyk

Dział 3D

Michał Głowacki
Dominik Janyszek

Dział IT

Andrzej Kirushyn