INTERPLAST

Sklep z oknami i drzwiami PCV.

Kontekst

Strona internetowa wykonana dla Interplast sp. z o.o.  Firma z długoletnim stażem, specjalizująca się w wykonywaniu okien, drzwi, konstrukcji ogrodowych oraz innych konstrukcji PCV, stosująca różnorodne technologie konstrukcyjne.

Strona została wykonana w kolorystyce loga firmy. Biel i czerwień jako kolory dominujące.

Adres strony: http://okna-interplast.pl/

Specyfika projektu

Do zbudowania strony użyłem systemu Webwave. Tworzenie strony poprzedził audyt użyteczności oraz interaktywny prototyp, stworzony w programie Adobe XD. Łączna ilość podstron wyniosła 45. Strona jest responsywna w wersji mobilnej. 

Ważnym elementem stworzenia witryny, było opracowanie architektury informacji oraz stworzenie systemu produktowego, w którym zawierały się różnego rodzaju technologie stosowane przy stolarce okienno-drzwiowej.

Audyt użyteczności

Audyt użyteczności

Rozpocząłem prace od zrobienia audytu użyteczności strony. Poprzednia strona zrobiona była dawno temu i bardzo odczuwalny był ogromny dług technologiczny witryny.

Analiza interakcji od strony użytkownika pozwoliła szybko uszeregować pojawiające się  na stronie błędy projektowe. Zdefiniowałem produkt oraz grupę docelową do jakiej jest kierowany.

Do przetestowania interakcji zastosowałem narzędzie jakim są User Flows. Stworzyłem przykładowe ścieżki użytkowników i przechodząc je zapisywałem wszelkie błędy i niedogodności jakie można napotkać. Przy ocenie stosowałem skalę od 0 do 3 co pozwoliło nadać priorytety poszczególnym błędom. Pozwoliło mi to już na tym etapie wyeliminować ścieżki, którymi nie należało podążać w późniejszym etapie projektowania.

Zastosowanie tego narzędzia podkreśliło wszystkie negatywne efekty, ale pozwoliło także na znalezienie rekomendacji, jak można temu zaradzić. Udało się także znaleźć pozytywne elementy w konstrukcji strony, które posłużyły przy powstawaniu nowego wizerunku.

Stary widok strony.

Heurystyki

Bardzo pomocna okazała się analiza heurystyczna. Starałem się oceniać wszystkie elementy przez pryzmat 10 zasad Jakoba Nielsena, aby wywnioskować jak witryna powinna wyglądać, żeby zachowała czytelność dla użytkownika.

Przy tworzeniu postanowiłem nie odbiegać od przyjętych standardów i zachować jak największą spójność wizualną. Starałem się także zminimalizować wysiłek jaki musi zostać włożony, aby użytkować stronę. Najważniejszy okazał się klarowny system produktów oraz szybka możliwość kontaktu. Chciałem, aby końcowy rezultat był estetyczny i zachowywał umiar.

Architektura informacji - IA

Architektura informacji

Organizacja i strukturyzacja treści była dla mnie kluczowa aby użytkownik mógł znaleźć potrzebne informacje i wykonać zadania w efektywny sposób. Do opracowania architektury posłużyłem się programem MindMeister. Przy układaniu struktury produktów posłużyłem się metodą hierarchiczną.

Architektura informacji we wczesnym etapie.

Prototyp

Interaktywny prototyp

Budowę strony poprzedziłem przygotowaniem interaktywnego prototypu w programie Adobe XD. Mając dane uzyskane przy audycie i tworzeniu architektury informacji, mogłem skupić się na spójności wizualnej i czytelności, a także, co najważniejsze, przetestować interakcje i sposób poruszania się po stronie.

Interaktywny prototyp został przedstawiony klientowi co pomogło w określeniu wspólnej wizji efektu końcowego.

Wersja webowa i mobilna

Wersja webowa

Stronę wykonałem w całości w systemie CMS o nazwie Webwave. Główną platformą jest wersja webowa. W projekcie oszczędnie stosowałem animacje. Na stronie głównej, w sliderze użyłem efektu ruchu. Zaimplementowałem interaktywną mapę z adresem oraz formularz kontaktowy. Przy pracy w edytorze bardzo pomocny był eksport prototypu do programu Zeplin. Korzystanie z widoków prototypu z dokładnymi specyfikacjami bardzo przyśpieszyło pracę.

Strona posiada responsywność do wersji mobilnej. Zastosowałem tutaj tak zwany Adaptive Web Design (AWD), strona dostosowuje się do wybranej szerokości okna.

Wersja mobilna