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.

Industry

e-commerce

Scope of work

UX/UI design & web development dla e-commerce

zieta studio case study zieta studio case study

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.

zieta studio - case study zieta studio - case study

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.

case study - zieta studio case study - zieta studio

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.

 

zieta studio - mohi.to case study zieta studio - mohi.to case study

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.
zieta studio - case study by mohi.to zieta studio - case study by mohi.to

Wspólne 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. W proponowanych funkcjach postawiliśmy na inteligentne rozwiązania, które w jak największym stopniu ułatwią Klientowi pracę ze sklepem poprzez automatyzację. Więcej o projekcie opowiada Cezary Ołowski, który był jego głównym projektantem:

“Myślę, że to jeden z projektów, z których jestem najbardziej dumny. W Zieta Studio pracują bardzo utalentowani i otwarci na innowacje ludzie, pasjonujący się designem tak samo jak ja. Więc to był od samego początku tinderowy match. Wspólnie stworzyliśmy świetną i ponadczasową stronę, która nie tylko spełnia wszystkie założenia biznesowe, ale jest też po prostu niezwykle estetyczna.”

Tak wspomina naszą współpracę Bartłomiej Czerniak, Strateg/Analityk Biznesowy i Członek Zarządu Zieta Studio:

“Sukces tego projektu to niewątpliwie zasługa bardzo dobrej relacji z zespołem mohi.to, która od początku bazuje na zaufaniu i chęci wzajemnego zrozumienia. Mogliśmy dzięki temu oddać dużo swobody zespołowi w procesie kreacji, samemu skupiając się na przekazywaniu potrzeb, zamiast na ingerencji w efekty pracy. Zwinne i otwarte podejście mohi.to na wyzwania i zmiany, a także ich przemyślane analizy i szczere doradztwo, pozwoliły wypracować finalnie działający produkt przewyższający nasze pierwotne oczekiwania.   

Z radością patrzymy na dalszą współpracę i wprowadzanie kolejnych rozwiązań pozytywnie wpływających na doświadczanie marki Zieta przez wszystkich użytkowników strony.”

 

Team:

 

Paweł Dymek Headless Team Lead; technology lead, back-end development

Mateusz Tarasiuk Junior WordPress Developer; front-end development

Michał Wilk Senior Shopify Developer; front-end development

Cezary Ołowski UX Team Lead; UX/UI design

Grzegorz Teszbir Senior UX Designer; UX/UI design

Anna Dąbek UX/UI Designer; UI design

Lyubov Moc Content Editor; tests, content support

Marek Wierzbicki Project Manager

Planujesz nowy projekt?
Masz pytania?

Napisz do nas