This project is from the previous edition of the WaysConf Awards 2022, which is why it is in Polish.

Landingi z modelami 3D dla unikalnej marki

CREATOR:
Purple Deer Software Studio

About

Dla Medical Logistics zaprojektowaliśmy i zbudowaliśmy trzy połączone wspólną nawigacją oraz wspólnymi akcentami stylistycznymi landingi. Każdy w nieco innym klimacie, każdy prezentujący inną z usług oferowanych przez firmę klienta. Strony miały wyglądać i pozostawać w pamięci odwiedzających, którzy mieli je pokochać lub znienawidzić, ale nigdy nie pozostać obojętnymi.

Client

Medical Logistics

Submited by

Purple Deer Software Studio

Realization period

Wrzesień 2021 - Luty 2022

Team

Product Owner + UX/UI Designer + 2 programistów

Technologies

Product Owner + UX/UI Designer + 2 programistów

Services

Case study

Medical Logistics to jedyna firma kurierska w Londynie zajmująca się wyłącznie dostarczaniem przesyłek medycznych. Wraz z innymi świadczonymi usługami medycznymi firma znacząco urosła stając się pretendentem do pierwszej ligi wśród brytyjskich firm kurierskich.

Alex, właściciel Medical Logistics zgłosił się do nas, żeby na nowo stworzyć wizerunek firmy w sieci, pokazać ogrom możliwości jaki daje współpraca z ML oraz wyróżnić się na tle konkurencji. Pokazać, że firma Alexa to już nie mała firemka, a liczący się na rynku usług medycznych i kurierskich gracz.

W ramach przeprowadzonej wcześniej przez nasz zespół fazy strategicznej wraz z Alexem podjęliśmy decyzję o zgrupowaniu informacji które chcieliśmy zaprezentować w trzy kategorie. Za prezentację każdej z nich odpowiadał oddzielny landing - korporacyjny, kurierski i medyczny.

Realizacja projektu z dużym budżetem i ogromnymi oczekiwaniami związanymi z tym jak unikalny i atrakcyjny wizualnie będzie końcowy produkt była jak dotychczas największym wyzwaniem naszego studia. Wyzwaniem złożonych z wielu mniejszych “wielkich wyzwań”. Problemów do których rozwiązania nie wystarczyło wpisać do Google prostego zapytania.

Większość z nich wynikała z podjętych założeń. Stawiamy na animowane modele 3D, robimy ich dużo, bo są one tym co odróżnia tą stronę od stron konkurencji i chcemy, aby każdy z landingów działał płynnie na niemal każdym sprzęcie. Ale zrobić coś co będzie efektowne i wydajne jednocześnie?

Animacje które potrafiły działać płynnie na starszych urządzeniach jedynie do czasu, gdy na stronie pojawiało się ich więcej niż jedna na raz, obiekty 3D których tekstury renderowały się cudownie na prostych modelach z tutoriali, ale już na dedykowanych, które zostały stworzone na potrzeby projektu nie rozchodziły się po całym modelu doprowadziły nas na przykład do rozwiązania w którym modele renderowane były do postaci wideo które z kolei musieliśmy przekonwertować w taki sposób, aby dobrane kodeki pozwalały na wyświetlanie ich poprawnie w każdej przeglądarce. Wszystko w imię płynności, wydajności, a przede wszystkim nie rezygnowania z 3D które mimo, że było sporym projektowym ryzykiem, to jednocześnie było dla nas środkiem przekazu który zwraca uwagę i się wyróżnia. Nikt z konkurencji nie zdecydował się na taką stylistykę. Dzięki 3D mogliśmy dokładniej wizualizować specyficzne usługi, podbić realistyczność i dać efekt usługi premium.

To z kolei prowadziło do kolejnych wyzwań. Przykład? Alex przywiązany był do mapy Londynu stworzonej z czerwonych linii na starej stronie, ale płaska nieatrakcyjna mapa nie pasowała do nowej stylistyki, więc musieliśmy wymyślić lepszy sposób. Londyn + usługa kurierska + rozwożenie krwi = zróbmy ulice Londynu zalane krwią. Ale jak szybko wymodelować Londyn w 3D? Także tutaj pomógł dobór odpowiednich narzędzi i technik - znaleźliśmy ciekawą wtyczkę, która pozwalała na wyciągnięcie modeli z wybranego fragmentu z map Google.

Cały proces składał się z wielu godzin technicznego researchu pozwalającego na dobór odpowiednich technologii, ciągłych eksperymentów i zmian, stałej komunikacji zespołu deweloperskiego i projektowego, testowaniu wydajności kolejnych rozwiązań, licznych warsztatów, burz mózgów i poszukiwań idealnych konceptu. Wszystko po to aby efekt końcowy pozostawał w pamięci i wyróżniał się na tle konkurencji.

Założenie było tutaj proste - jeżeli czegoś nie da się zrobić, to zróbmy to inaczej, ale niech ta zmiana nie sprawia, że finalny produkt nie będzie tak dobry jak zakładaliśmy.

I nie jesteśmy tutaj gołosłowni, bo faktem jest, że po oddaniu finalnego produktu z końcem ubiegłego roku mieliśmy poczucie że jedna ze stron - landing kurierski - nie jest tak dobry jak to co zaproponowaliśmy Alexowi. Po świątecznej przerwie zespół zdecydował by poświęcić dodatkowy miesiąc na jego przebudowę i nie ma co ukrywać - była to dobra decyzja bo z kaczątka stał się on pięknym łabędziem i chyba najbardziej atrakcyjną wizualnie z wszystkich trzech stron.

Istotnym powodem sukcesu w tej realizacji było połączenie świetnej komunikacji którą udało nam się uzyskać wykorzystując Miro, Slacka i Google Meet z zastosowaniem wydajnych technologii i sprawdzonych narzędzi takich jak React, GSAP, Blender i SVGator.

Efekt prac były tutaj, a jakże by inaczej - trzy fantastycznie wyglądające i działające wydajnie na każdym niemal urządzeniu landingi. Landingi które już teraz właściwie promowane pozwoliły Alexowi budować nowe relacje biznesowe i pokazać markę Medical Logistics jako lidera branży, bez kompleksów inwestującego w dalszy rozwój swoich usług.

A czego nas to nauczyło? Przede wszystkim, że jako zespół jesteśmy w stanie podjąć się ambitnych, długoterminowych wyzwań i zrealizować pracę których efekty robią duże wrażenie, nie tylko na kliencie ale i osobach z naszej branży.

Oczywiście nie był to proces łatwy. Ogrom wyzwania w połączeniu podejściem gdzie każdy w zespole czuje się współodpowiedzialny za końcowy rezultat potrafił przytłaczać. Atmosfera w teamie potrafiła niekiedy stać się bardzo gęsta. Eksperymentalna natura projektu sprawiała, że drobne porażki były wpisane w naszą codzienność.

Wzajemnie się wspierając i ciesząc z trudem wypracowanymi postępami doprowadziliśmy ten produkt do stanu w którym mogliśmy z czystym sumieniem oddać go w ręce klienta ciesząc się z dobrze wykonanej pracy.

Był to jak dotychczas najbardziej skomplikowany projekt, ale efekt końcowy dał nam niesamowitą dawkę satysfakcji, a Alexowi pozwolił osiągnąć cele które stawiał sobie gdy podchodziliśmy do tej realizacji.

Why us?

Ten projekt realizowany był bez kompromisów po to aby robił niesamowite wrażenie i działał wydajnie zarówno na dużych ekranach jak i na urządzeniach mobilnych. Fakt, że tak jest to efekt godzin eksperymentów, prób, zmian i wspólnych, nierzadko bardzo nieszablonowych pomysłów.

September 19-20, 2024
Krakow + online
6th edition

Join us at WaysConf and be part of the digital revolution.
Buy your tickets now!

Buy tickets