TeaToGo

Projektowanie

Design w Figmie

Proces projektowania nowej strony TeaGo miał na celu stworzenie nowoczesnej, estetycznej i intuicyjnej witryny, która w pełni oddaje charakter marki. Skupiliśmy się na przejrzystym układzie, który ułatwia nawigację i podkreśla najważniejsze informacje o produktach. Kolorystyka oraz typografia zostały dobrane tak, aby wzmacniać wizerunek TeaToGo jako marki oferującej wysokiej jakości, naturalne herbaty. W rezultacie powstała spójna i atrakcyjna wizualnie strona, która angażuje użytkowników i zachęca do interakcji.

Rozwiązane problemy

Przestarzała strona

W dzisiejszym świecie strona internetowa to wizytówka firmy. Stara strona TEATOGO była przestarzała i brakowało jej profesjonalizmu, co negatywnie wpływało na wizerunek firmy. Na przykład nierówno rozmieszczone pola w formularzu kontaktowym sprawiały, że użytkownicy wahali się lub rezygnowali z jego wypełnienia.

• Zaimplementowano nowoczesny, responsywny design z przejrzystymi układami.

• Poprawiono użyteczność formularza, zapewniając spójne i estetyczne rozmieszczenie pól.

• Zaktualizowano typografię, schemat kolorów oraz elementy wizualne, dostosowując je do aktualnych trendów.

Źle przedstawione informacje

Stara strona zawierała masywne bloki tekstu, których użytkownicy raczej nie czytali, a na podstronie "Gdzie kupić" znajdowały się tylko ogólne frazy, takie jak "szukaj w dobrych sklepach". Postanowiłem podzielić informacje na kilka podstron i stworzyć sekcję wyróżniającą zalety produktów.

• Rozdzieliłem informacje na mniejsze, łatwiej przyswajalne sekcje rozmieszczone na kilku podstronach.

• Stworzyłem wyraźną i estetyczną sekcję poświęconą zaletom produktów, poprawiając czytelność.

• Wykorzystałem wypunktowania, nagłówki oraz ikony, aby ułatwić przeglądanie treści

Nieatrakcyjny, nieczytelny formularz kontaktowy

Kluczowym problemem był formularz kontaktowy, który był trudny w obsłudze. Wiele osób zamiast składać zamówienia online, decydowało się na kontakt telefoniczny, co zwiększało obciążenie zespołu. Formularz pozwalał na zamówienie tylko jednego produktu, co zmuszało użytkowników do dzwonienia, jeśli chcieli zamówić więcej. W dzisiejszych czasach większość ludzi unika rozmów telefonicznych, dlatego poprawa user experience była priorytetem.

• Przeprojektowałem formularz, aby był bardziej przyjazny dla użytkownika intuicyjny umożliwiając zamawianie wielu produktów.

• Dodałem jasne etykiety, rozwijane listy i walidację pól w celu poprawy użyteczności.

• Zoptymalizowałem formularz pod kątem urządzeń mobilnych, zapewniając jego dostępność na wszystkich platformach.

Brak targetowania grupy docelowej

Na starej stronie brakowało informacji skierowanych do firm, które są istotnym segmentem klientów. Dodałem dedykowaną podstronę opisującą rozwiązania dla biznesu oraz CTA przypominające o tych możliwościach.

• Dodano dedykowaną stronę "Rozwiązania dla biznesu" skierowaną do firm i hurtowników.

• Wprowadzono strategiczne CTA w całej witrynie, aby skierować klientów biznesowych do odpowiednich usług.

• Stworzono spersonalizowane treści koncentrujące się na korzyściach, jakie rozwiązania TEATOGO mogą przynieść firmom, poprawiając generowanie leadów.

Brak SEO

Poprzednia wersja strony nie była zoptymalizowana pod kątem SEO, co negatywnie wpływało na widoczność w wyszukiwarkach. Przebudowałem stronę przy użyciu Next.js, aby wykorzystać rendering po stronie serwera (SSR) dla lepszego SEO. Dodałem również mapę strony, plik robots.txt oraz zoptymalizowałem metatagi, w tym OpenGraph, aby poprawić widoczność w mediach społecznościowych.

• Zaimplementowano najlepsze praktyki SEO, w tym rendering po stronie serwera (SSR) w Next.js, co poprawiło szybkość ładowania strony i jej indeksowanie.

• Dodano mapę strony oraz plik robots.txt, aby zapewnić prawidłowe indeksowanie przez wyszukiwarki.

• Zoptymalizowano metatagi, w tym dane OpenGraph, aby poprawić udostępnianie strony w mediach społecznościowych.

Wybór technologii

Do realizacji projektu TeaToGo wybraliśmy nowoczesne i sprawdzone technologie, które zapewniają wydajność, skalowalność oraz łatwość w utrzymaniu strony. Strona została stworzona z użyciem Next.js i React.js, co pozwoliło na szybkie renderowanie stron oraz płynną interakcję użytkownika. Wykorzystanie TypeScript zagwarantowało większą niezawodność kodu i ułatwiło rozwój projektu. Dzięki Redux mogliśmy skutecznie zarządzać globalnym stanem aplikacji, co jest kluczowe dla sprawnej obsługi koszyka zakupowego i innych funkcji. Wybór tych technologii pozwolił stworzyć solidną i nowoczesną stronę, która spełnia wszystkie wymagania klienta.

Kluczowe wnioski

Projekt TeaToGo dostarczył cennych doświadczeń zarówno w zakresie projektowania, jak i technologii. Kluczową lekcją było zrozumienie, jak istotne jest dopasowanie designu do specyfiki marki oraz potrzeb użytkowników, aby strona była nie tylko estetyczna, ale i funkcjonalna. Z technicznego punktu widzenia, potwierdziliśmy, że wybór takich narzędzi jak Next.js czy Redux znacząco ułatwia budowę nowoczesnych i skalowalnych aplikacji. Zoptymalizowanie strony pod kątem SEO i doświadczenia użytkownika okazało się kluczowe dla sukcesu projektu, co przekłada się na wyższą konwersję oraz większą satysfakcję użytkowników.