Strona produktowa dla rozwiązania technologicznego
Serwis produktowy miał pomóc odbiorcom zrozumieć rozwiązanie technologiczne i wybrać kolejny krok: zapoznać się z zastosowaniami, sprawdzić ofertę, obejrzeć materiały lub skontaktować się z firmą. Treści i multimedia zostały uporządkowane w zestaw powiązanych stron.
Prace objęły rozpoznanie potrzeb, projekt struktury i interfejsu, rozwój kolejnych podstron oraz wdrażanie i utrzymanie. Powtarzalne elementy ułatwiają publikowanie nowych treści bez projektowania każdej strony od początku.
- Dla kogo
- Osoby poznające rozwiązanie technologiczne, porównujące ofertę lub szukające kontaktu z firmą.
Ścieżki przez serwis
Odbiorca może trafić na serwis z różnymi pytaniami. Jedna osoba chce szybko poznać możliwości produktu, inna szuka szczegółów oferty, materiałów lub rozmowy z przedstawicielem. Struktura serwisu daje dostęp do każdej z tych ścieżek.
- Prezentacja
- Podstrony opisują zastosowania produktu i korzystają z materiałów wizualnych oraz wideo.
- Oferta i materiały
- Informacje o cenach i zasoby pomagają odbiorcy zapoznać się z dostępnymi możliwościami.
- Kontakt i spotkania
- Formularze kierują zapytanie do firmy, a osobna ścieżka pozwala rozpocząć umawianie spotkania.
Różne pytania, różne materiały
Zestawienie przedstawia trzy sposoby korzystania z serwisu produktowego.
- Zastosowania
- Opis produktu, obrazy i wideo pomagają poznać możliwości.
- Oferta i zasoby
- Materiały pomagają zapoznać się z ofertą.
- Kontakt
- Formularz i ścieżka spotkania służą dalszej rozmowie.
Treść, obraz i wideo
Ważne było połączenie tekstu, obrazów i wideo w czytelny układ działający na telefonie i większym ekranie. Oferta, zasoby oraz formularze kontaktowe mają swoje miejsce w nawigacji, dzięki czemu użytkownik może przejść od poznania produktu do kontaktu.
- Wydajność mediów
- Sposób ładowania obrazów i wideo uwzględnia ich miejsce na stronie, aby materiały niepotrzebnie nie opóźniały jej otwarcia.
- Responsywny interfejs
- Wspólne komponenty i reguły układu pozwalają dostosować strony do różnych szerokości ekranu.
Materiały na różnych ekranach
Ilustracja układu pokazuje, jak tekst i materiały wizualne mogą układać się na wąskim i szerokim ekranie.
- Tekst
- Opisuje zastosowania i ofertę.
- Obraz
- Uzupełnia informacje wizualne.
- Wideo
- Przedstawia produkt w ruchu.
- Szerokość ekranu
- Układ dostosowuje rozmieszczenie materiałów.
Przygotowanie i publikacja stron
Na początku ustalono, jakie informacje są potrzebne odbiorcom na kolejnych etapach poznawania produktu. Następnie powstały układy stron, elementy interfejsu i integracje kontaktowe. Podstrony rozwijano etapami, zachowując wspólne zasady prezentacji.
W procesie publikacji dostępne są środowiska podglądowe i stagingowe oraz oddzielna publikacja produkcyjna. Pozwala to sprawdzać zmiany przed udostępnieniem ich odbiorcom. W utrzymaniu znaczenie mają także aktualizacja materiałów, poprawność linków i działanie formularzy.
Zakres odpowiedzialności
Atomic Concept odpowiada za rozpoznanie potrzeb, projekt struktury, interfejsu i integracji oraz rozwój, wdrażanie i utrzymanie serwisu.
- Dalsza publikacja
- Konfiguracja treści i wspólne komponenty wspierają dodawanie kolejnych stron w spójnym układzie.
Droga zmian do publikacji
Etapy pokazują miejsca, w których można przygotować i sprawdzić zmiany przed udostępnieniem ich odbiorcom.
- Podgląd
- Przestrzeń do sprawdzania przygotowanych zmian.
- Staging
- Środowisko do kontroli przed publikacją.
- Produkcja
- Osobna publikacja dla odbiorców serwisu.
Podstawy techniczne serwisu
Serwis korzysta z Next.js w trybie eksportu statycznego i jest hostowany na Cloudflare Pages. Gotowe strony można dostarczać bez uruchamiania własnego serwera aplikacji dla każdego odwiedzającego.
Treści stron są oddzielone od komponentów React i MUI. Ten podział pozwala używać wspólnych układów przy różnych zestawach informacji. Formularze korzystają z integracji kontaktowych i zabezpieczenia Cloudflare Turnstile.
- Widoczność w wyszukiwarkach
- Metadane, adresy kanoniczne, mapa witryny i dane strukturalne pomagają wyszukiwarkom interpretować opublikowane strony.
- Kontrola zmian
- Podgląd i staging dają miejsce na sprawdzenie treści oraz działania interfejsu przed osobną publikacją produkcyjną.
Technologie i zastosowanie
- Next.js, React i TypeScript
- Statyczne strony i komponenty serwisu.
- MUI
- Wspólne elementy interfejsu i układy.
- Cloudflare Pages i Turnstile
- Hosting stron oraz ochrona formularzy.