Zdrowie zaczyna się od zaufania - strona internetowa marki suplementów diety Biaron

Śledź nas w mediach społecznościowych:

Biaron to marka suplementów diety wspierających zdrowy rozwój dzieci. Dotychczasowa strona internetowa, mimo spójności z identyfikacją wizualną marki, wymagała odświeżenia – została zaprojektowana w 2021 roku i nie odpowiadała już w pełni aktualnym potrzebom marki.

 

Firma PhytoPharm zwróciła się do nas z prośbą o zaprojektowanie i wdrożenie zupełnie nowej wersji serwisu.

Sprawdź online

Strona WWW z suplementami diety - na co należy zwrócić uwagę?

Projektując nową stronę internetową, położyliśmy nacisk na elementy, które z perspektywy użytkownika są kluczowe. Klienci chcą dobrze poznać produkt – a w przypadku suplementów diety jest to szczególnie istotne. Tego typu produkty wymagają czytelnej prezentacji informacji takich jak dawkowanie, skład czy ostrzeżenia. Odpowiednia forma i struktura prezentacji produktu ma więc ogromne znaczenie na stronach internetowych marek z tej kategorii.

 

Na co zwracaliśmy szczególną uwagę?

 

  • Lista dostępnych aptek. Klienci chcą wiedzieć, gdzie dany produkt mogą kupić. Dla marki Biaron opracowaliśmy czytelniejszą wersję sekcji „Gdzie kupić”, prezentującą listę aptek, w których dostępne są suplementy. To nie tylko praktyczna informacja, ale także ważny element budowania wiarygodności i zaufania do marki.
  • Odpowiedni dobór zdjęć i materiałów wideo. Kluczowe było dopasowanie zdjęć i filmów do odbiorców oraz kontekstu ich stosowania. Materiały wizualne na wszystkich podstronach wspierają komunikację korzyści i pokazują, w jaki sposób produkty pomagają w zdrowym rozwoju dzieci.
  • Strefa wiedzy. Stworzyliśmy rozbudowaną strefę wiedzy, która pełni podwójną rolę. Z jednej strony wspiera działania SEO, z drugiej stanowi realne źródło wartościowych informacji dla rodziców poszukujących rzetelnej wiedzy.

Co było kluczowe na stronie Biaron w trakcie prac?

  • Przejrzysta prezentacja dostępnych produktów

    Marka Biaron oferuje szeroką gamę produktów przeznaczonych dla dzieci w różnym wieku. Kluczowe było zaprojektowanie prezentacji w taki sposób, aby rodzice mogli szybko i bez wątpliwości znaleźć produkt odpowiedni dla swojego dziecka. Postawiliśmy na wygodne filtrowanie oraz czytelną prezentację najważniejszych cech produktów za pomocą ustandaryzowanych ikon.
  • Wygodne zarządzanie stroną

    Wprowadzanie zmian na poprzedniej stronie internetowej było trudne, a w niektórych przypadkach wręcz niemożliwe. Zastosowany przez nas CMS WordPress z edytorem blokowym Gutenberg umożliwia sprawne wprowadzanie aktualizacji bez konieczności posiadania wiedzy programistycznej.
  • Elementy wideo i animacje

    Aby strona była atrakcyjna dla odwiedzających, wdrożyliśmy elementy wideo, które często pełnią rolę tła. Uzupełniliśmy je o subtelne animacje - nieprzytłaczające użytkowników, ale nadające stronie lekkości i dynamiki.
  • Spójność z identyfikacją wizualną produktów

    Produkty marki Biaron posiadają rozpoznawalną i konsekwentnie budowaną identyfikację wizualną. Jednym z naszych celów było wyraźne nawiązanie do niej w projekcie graficznym strony internetowej. W projekcie strony internetowej nawiązaliśmy do niej poprzez zastosowanie spójnej palety kolorystycznej, charakterystycznej typografii oraz języka wizualnego opartego na ilustracjach i materiałach graficznych znanych z opakowań produktów.
  • Dostępność dla wszystkich użytkowników

    Projekt został przygotowany zgodnie z wytycznymi WCAG, dzięki czemu strona jest dostępna dla wszystkich użytkowników, w tym także dla osób z niepełnosprawnościami. Projekt został przygotowany zgodnie z wytycznymi WCAG. Strona oferuje m.in. tryb wysokiego kontrastu, możliwość powiększania rozmiaru czcionek, pełną obsługę za pomocą klawiatury oraz poprawnie zdefiniowane opisy alternatywne (alt) dla treści graficznych. Dodatkowo jej struktura jest przyjazna dla technologii asystujących, takich jak czytniki ekranu, z których korzystają osoby niewidome i niedowidzące.

Jak przebiegały prace nad projektem?

Etap 1 – Makiety (UX)

 

Projektując stronę internetową dla marki z branży suplementów diety, szczególną wagę przykładaliśmy do etapu makietowania. Po zebraniu kluczowych informacji podczas warsztatów rozpoczęliśmy prace nad architekturą informacji oraz strukturą treści.

Jednym z głównych wyzwań było zaprojektowanie intuicyjnego sposobu prezentacji szerokiego portfolio produktów. Analizowaliśmy, w jaki sposób rodzice poszukują suplementów dla swoich dzieci, jakie kryteria są dla nich kluczowe (wiek dziecka, skład, przeznaczenie) oraz na jakich etapach podejmują decyzję zakupową.

W efekcie powstała przejrzysta struktura produktowa oparta na rozbudowanym mega menu oraz systemie filtrowania produktów według wieku dziecka i kluczowych składników.

 

Etap 2 – Design

 

Produkty marki Biaron posiadają charakterystyczną i rozpoznawalną identyfikację wizualną. Projekt graficzny strony został zaprojektowany tak, aby stanowił naturalne przedłużenie opowieści marki.

Kluczowym elementem warstwy wizualnej stał się spójny system ikon, który komunikuje formę produktu (np. krople, spray, kapsułki twist-off) oraz czytelne oznaczenia wiekowe, wskazujące, dla jakiej grupy wiekowej przeznaczony jest dany suplement.

Dzięki temu użytkownicy mogą już na etapie listy produktów szybko zidentyfikować właściwy preparat, bez konieczności wchodzenia w szczegóły każdej podstrony. Te same elementy wizualne zostały konsekwentnie wykorzystane na dedykowanych kartach produktowych, wzmacniając spójność i czytelność całego systemu.

 

Etap 3 – Programowanie

 

Strona została zbudowana w oparciu o CMS WordPress, nasz autorski starter Berka oraz blokowy system budowania podstron. Dzięki temu zarządzanie i dalsza rozbudowa serwisu są proste i wygodne. Każdą podstronę można tworzyć, przeciągając poszczególne bloki i układając je w odpowiedniej kolejności — bez konieczności ingerencji programistycznej.

 

Etap 4 – Dodanie treści i uruchomienie strony

 

Po zakończeniu prac programistycznych strona została uzupełniona kompletem treści. Każdy produkt został szczegółowo opisany i zaprezentowany przy użyciu ikonografiki, zdjęć oraz merytorycznych tekstów. Dzięki temu użytkownicy otrzymują wszystkie potrzebne informacje w formie, która jest czytelna i łatwa do skanowania wzrokiem.

 

Etap 5 – Bezpłatne wsparcie techniczne i szkolenie

 

Po zakończeniu projektu nasi klienci otrzymują 3 miesiące bezpłatnego wsparcia technicznego. To czas na spokojne zapoznanie się z nową stroną i jej możliwościami. Dodatkowo zawsze przeprowadzamy szkolenie online, po którym klient może samodzielnie zarządzać stroną internetową. Wiemy, jak ważne jest pełne wsparcie na etapie wdrożenia i pierwszych miesięcy użytkowania.

Zakres prac

  • Makiety UX/UI
  • Projekt graficzny strony
  • Kodowanie serwisu
  • Dostosowanie do standardów WCAG
  • Dodanie treści
  • Animacje i efekty video
  • Wsparcie techniczne po uruchomieniu serwisu