mohi.to — strona główna

Zieta Studio

Design i development nowej strony internetowej dla globalnie rozpoznawalnej marki home & decor, która łączy sztukę z bioniką, technologią i innowacją.

Zieta Studio

Zieta Studio to zespół architektów, projektantów, inżynierów i technologów, którzy wspólnie tworzą nietuzinkowe produkty.

Zieta to marka międzynarodowa, osadzona na pograniczu designu, wystroju wnętrz i sztuki. Tworzą zarówno meble użytkowe, akcesoria do wnętrz, jak i rzeźby, czy zamówienia customowe.

Strona Zieta Studio z nowoczesnymi lustrami i różowym lustrem wśród skał w jaskiniowym otoczeniu.

O marce

Dodatkowo w przestrzeni miejskiej można spotkać ich rzeźby plenerowe, a kolaboracje z artystami, limitowane kolekcje i ilość wariantów produktów robią ogromne wrażenie.

Wszystko to powstaje w unikalnej i autorskiej technologii założyciela marki – Oskara Zięty. Technologia FiDU, bo o niej mowa, to oryginalny i autorski sposób przekształcania blach w obiekty trójwymiarowe. Dzięki swojej wyjątkowości marka zyskała popularność w ekspresowym tempie, a skala ich działań jest ogólnoświatowa. Chiny, kraje Bliskiego Wschodu, czy USA – to tylko część rynków, na których można spotkać produkty Zieta Studio.

Imponujące jest również podejście Klienta do kwestii ekologii. W swoich codziennych działaniach Zieta zwraca dużą uwagę na to jaki wpływ mają i mogą one mieć dla planety. Warto zwrócić uwagę, że produkty Zieta Studio są jednomateriałowe. Wykonanie ich z jednego surowca nie jest przypadkowe – ułatwia to potencjalny recycling w przyszłości. Takich małych-wielkich rozwiązań ta marka stosuje całą masę. O części z nich opowiemy w dalszej części.

Nasza współpraca z Zieta Studio rozpoczęła się od poznania Klienta na targach Warsaw Home & Contract. Tam poznaliśmy się nieco lepiej, mieliśmy szansę bardziej poznać markę, jej filozofię oraz produkty. Porozmawialiśmy też szerzej o potrzebach Klienta wobec projektu.

Strona Zieta Studio z kolekcją luster oraz aranżacją wnętrza z czerwonym lustrem.

Wyzwanie marki

Klient zgłosił się do nas z konkretnym wyzwaniem – firma posiadała dwie strony internetowe. Jedna z nich spełniała funkcje wizerunkowe, druga zaś była sklepem. Obie witryny nie nadążały za produktem, który prezentowały, były zbyt wolne i potrzebowały wielu zmian.

Celem działania było zarówno wdrożenie nowych rozwiązań, odświeżenie designu, zoptymalizowanie witryny pod względem User Experience, a przede wszystkim stworzenie nowej, jednej strony internetowej, która będzie spełniała zarówno funkcje sklepu, jak i te wizerunkowe. Zaczęliśmy więc wszystko od zera.

Strona Zieta Studio prezentująca kolekcję luster Tafla i mebli w nowoczesnej aranżacji.

Nasze rozwiązanie

Rozpoczęliśmy pracę od warsztatu discovery, w którym wziął udział zespół projektowy oraz zespół po stronie Klienta. Dzięki temu mogliśmy szerzej omówić potrzeby względem strony, poznać problemy z jakimi pracownicy oraz userzy zmagali się na starych stronach, porozmawiać o oczekiwaniach. Po tym etapie przystąpiliśmy do działania.

Postawiliśmy na rozwiązanie, które polegało na stworzeniu zupełnie nowej witryny, idealnie stworzonej pod potrzeby zarówno Klienta, jak i Usera. Jedno miejsce, rozbudowany panel administracyjny i sporo innowacyjnych rozwiązań – wiedzieliśmy, że to zdecydowanie ułatwi pracę osobom, które zajmują się sklepem.

Całe zaplecze witryny zostało stworzone od początku przez nasz zespół deweloperski. Zbudowany został customowy panel administracyjny, dostosowany do potrzeb Klienta, zgodny z treściami na stronie, a przede wszystkim wygodny w użyciu. Wdrożona została dwustronna integracja z systemem ERP. Wybraliśmy rozwiązanie rozbudowane, zaawansowane i inteligentne – idealnie dopasowane do potrzeb Klienta. System odpowiada za synchronizację bazy produktów oraz stanów magazynowych. Powstała również integracja z bramką płatniczą Przelewy24.

W sklepie zaimplementowano zaawansowany silnik wyszukiwania, który wykorzystuje AI do analizy treści zapytań oraz oferuje rozbudowaną analitykę celem zapewnienia wysokiej jakości wyników.

Dodatkowe integracje w projekcie to:

  • integracja z GUS i Vies
  • integracja z Google Maps API
  • customowa integracja z Instagramem
  • wykorzystanie infrastruktury AWS oraz integracja z Cloudflare

W przypadku działań z zakresu front-end developmentu podobnie podeszliśmy do kwestii customizacji. Cała witryna dostosowana jest do unikalności marki, zespół projektantów zadbał też o to, aby odpowiednio zaprezentować produkty i wzmocnić doświadczenia użytkownika. Witryna utrzymana jest w minimalizmie i nowoczesnych trendach.

Kolaż zdjęć produktów i zrzutów ekranu ze strony internetowej Zięta Studio.

Design

Jeśli chodzi zaś o design – tutaj mieliśmy duże pole do kreatywnej pracy! Na etapie warsztatów i początkowych rozmów dowiedzieliśmy się, że Zieta Studio cały swój proces produkcyjny tworzy w oparciu o podejście bottom-up.

Polega ono na wyjściu od materiału, którego charakterystyka i właściwości kształtują design produktu, który wpływa na proces technologiczny, a suma powyższych realizuje się w finalnej formie obiektu.

Zainspirowani tym podejściem postanowiliśmy poszukać jak moglibyśmy odwzorować je przy tworzeniu nowej strony. Idąc tropem, że tworzony przez nas cyfrowy produkt składa się z pikseli, które tworzą siatkę kształtującą całość, postanowiliśmy skupić się właśnie na niej.

W procesie projektowym w oparciu o proporcje viewportu widok podzielono na 16 kwadratów ułożonych horyzontalnie i 9 wertykalnie. Tym samym otrzymaliśmy siatkę o podstawowym module 120x120px, która została zgranulowana do 60x60px dla większej swobody projektowania. Ta wartość stała się podstawą wszelkich odstępów między elementami, marginesów czy rozmiarów komponentów. Jednym z wyzwań jakie napotkaliśmy podczas projektowania była także potrzeba połączenia tego unikalnego layoutu z możliwością jego edycji – finalnie udało się stworzyć odpowiednie rozwiązanie dzięki customowemu podejściu do projektu.

Dla większego porządku, wprowadzona została również perforacja, która wyznaczyła główne osie wraz z dominantami – na wzór reguły trójpodziału w fotografii. Tę inspirację zaczerpnęliśmy z produktów Zieta Studio z serii 3+. Najważniejsze treści, czy zdjęcia wymagające uwagi userów są ułożone na osiach tychże dominant.

Najbardziej unikatowe elementy, które można zauważyć w customowym designie strony to:

  • niesymetryczne rozmieszczenie elementów na siatce
  • różne rozmiary modułów projektowych
  • rozbudowany konfigurator produktów
  • dark mode, który pozwala na pobieranie mniejszej ilości energii przy użytkowaniu
Zrzuty ekranu ze strony Zięta Studio, przedstawiające proces zakupu i podsumowanie zamówienia.

Rezultaty

Dzięki wspólnym działaniom zespołów, mogliśmy oddać Klientowi sklep na miarę jego potrzeb. Powstała witryna, która odzwierciedla nie tylko charakter marki, ale i jej wartości.

W pełni customowe rozwiązania e-commerce’owe w technologii Laravel ułatwiły Klientowi obsługę sklepu. Serwer na którym postawiona została strona zasilany jest zieloną energią. Dodatkowo istnieje możliwość przełączenia całości na tryb ciemny, aby zużywać mniej energii.

W poprzednich witrynach sporym wyzwaniem była niedostatecznie dopracowana ścieżka użytkownika. Obecna jest o wiele bardziej rozwinięta, a produkty łatwiej konfigurowalne, co przekłada się na wyższą konwersję. Dodajmy, że obie wersje strony – desktop oraz mobile – są w pełni zoptymalizowane dla jak najwyższej konwersji oraz szybkości działania.

Warto zwrócić uwagę na nowe funkcje sklepu, takie jak:

  • wielowalutowość [PLN, EUR, USD],

  • wielojęzyczność,

  • rozbudowany proces mailingu, z w pełni zautomatyzowanym mechanizmem,

  • mechanizm przeliczania cen – indywidualne przeliczanie cen dla klienta B2B w zależności od typu nadawcy oraz kraju docelowego [to są między innymi architekci, biurowce, biura, galerie],

  • konfigurator produktów, który pozwala spersonalizować materiał, rozmiar i wymiary, a także inteligentny konfigurator po stronie administratora sklepu, który pozwala na prezentację i tworzenie wielu wariantów cenowych, produktowych i ofertowych.

Reasumując – skala działania Zieta Studio i nietypowość produktów marki wymagała od nas działania skrojonego na miarę. Dlatego nasz produkt jest w pełni customowy, dostosowany i funkcjonalny.

Bartłomiej Czerniak
Bartłomiej CzerniakBusiness Strategist / Analyst and Board Member of Zieta Studio
Opinia klienta

“Mogliśmy dać zespołowi dużą swobodę w procesie twórczym, koncentrując się na komunikowaniu potrzeb, a nie ingerowaniu w wyniki pracy. Zwinne i otwarte podejście mohi.to do wyzwań i zmian, a także ich przemyślana analiza i szczere porady zaowocowały ostatecznym produktem, który przekroczył nasze pierwotne oczekiwania.
 Z niecierpliwością czekamy na dalszą współpracę i wprowadzenie kolejnych rozwiązań, które pozytywnie wpłyną na doświadczenie marki Zieta dla wszystkich użytkowników witryny.”

Zespół

Ludzie, którzy to stworzyli

Paweł DymekHeadless Team LeadTechnology Lead, Back-end Development
Mateusz TarasiukWordPress DeveloperFront-end Development
Michał WilkSenior Shopify DeveloperFront-end Development
Cezary OłowskiUX Team LeadUX/UI Design
Grzegorz TeszbirSenior UX DesignerUX/UI Design
Anna DąbekUX/UI DesignerUI Design
Lyubov MocContent EditorTesty, Wsparcie Contentowe
Marek WierzbickiKey Account ManagerProject Management
Next case: OVVO Optics
OVVO Optics