Świeże spojrzenie na markę, czyli jak zaprojektowaliśmy nową stronę internetową realizując strategię endorsed brand. Case study Concordia design.

Klient

Concordia Design

Zakres prac

UX / UI
Makiety
Design system
Strona internetowa - design i wdrożenie
System CMS

Concordia design to centrum kreatywności z Poznania, które ostatnio szturmem zdobywa Wrocław. Jako agencja kreatywna od razu poczuliśmy z nimi miętę – rzec można, że już na pierwszym spotkaniu.

W efekcie we wrześniu 2019 roku rozpoczęliśmy pracę nad stroną internetową dla Concordia design. Miała ona uwzględniać również potrzeby nowej siedziby centrum, która powstawała wówczas we Wrocławiu.

Marka “od nowa”

Czego potrzebował Klient? Serwisu, który pomieści wszystkie obszary działania, pokaże je w jasny, przejrzysty sposób, a równocześnie zapewni użytkownikowi prostą nawigację oraz doprowadzi do obszaru, który go interesuje.

Wyzwaniem w projektowaniu strony było nie tylko stworzenie nowej struktury informacji. Sięgnęliśmy nieco dalej, a mianowicie do samego brandu. Chcieliśmy poukładać informacje o samej firmie i jej poszczególnych działach: jaką rolę odgrywają i jak zachowują się wobec marki głównej?

Wspólnie z klientem obraliśmy kierunek endorsed brand, czyli tworzenia silnych subbrandów (w przypadku Concordii mówimy tutaj o 6 działach firmy) wspomaganego przez główną markę. Kierunek ten pozwolił nam usystematyzować informacje oraz stworzyć nową, bardziej przyjazną dla użytkownika strukturę treści na stronie.

Makiety oraz podwójna nawigacja w menu

W kolejnym etapie wypracowaliśmy makiety, które pozwoliły nam zaplanować prezentację informacji na stronie, rozmieszczenie poszczególnych elementów oraz flow użytkownika. Co ważne, z uwagi na rozmiar strony, od samego początku skupiliśmy się bardzo mocno na tworzeniu masterów komponentów, które wykorzystywaliśmy na innych podstronach. Dzięki temu udało nam się zachować spójność w obrębie całego serwisu, a główne strony działów korespondują ze sobą.

Komponenty działów

Prawdziwym wyzwaniem było również zaprojektowanie menu, które równocześnie pomieści 6 działów o różnym stopniu rozbudowania oraz podstrony dedykowane dla brandu głównego – czyli wspólne na wszystkich działów. Unikaliśmy podwójnych zagnieżdżeń i tzw. “hamburgera” w menu (poza wersją mobilną). W efekcie zdecydowaliśmy się połączenie dwóch nawigacji, jednej skupionej na prezentacji działów i ich oferty oraz drugiej, zawierającej główne funkcjonalności tj. kontakt, wydarzenia, czy odnośniki do mediów społecznościowych – zostały one umieszczone w sidebarze.

Minimalizm
w połączeniu ze stylem Memphis

Niełatwym zadaniem okazało się również wypracowanie właściwego stylu strony. Takiego, który będzie współgrał z marką główną i pozwoli wprowadzić elementy charakterystyczne dla tematycznie różnych działów firmy. Zdecydowaliśmy się na zestawienie minimalistycznego stylu inspirowanego prostym czarno-białym logo Concordia design z kolorowym i pełnym wzorów stylem Memphis.

Główny styl strony bazował na czerni, bieli i szarościach. Dodatkowy, inspirowany stylem Memphis jest obecny w obrębie animacji, mikroanimacji oraz podstronach konkretnych działów. Dla każdego z nich wprowadziliśmy elementy brandingu bazujące na jednym, charakterystycznym atrybucie (nawiązującym do obszaru działania). Dzięki temu uzyskaliśmy połączenie profesjonalizmu oraz kreatywności, czyli w pełni oddaliśmy charakter marki.

Styl

Połączenie dwóch przeciwstawnych stylistyk doskonale zagrało w obrębie całej strony. Wyróżnia się ona pod kątem wizualnym: jest nowoczesna, przejrzysta i ciekawa.

Design system

Po określeniu głównego stylu strony stworzyliśmy podstawowego design systemu serwisu. Doskonale wiedzieliśmy, że w przypadku projektu o takiej skali jest to dla nas “must have”. Już na starcie przygotowaliśmy design system, który obejmował:

rozrysowanie gridów oraz wyznaczenie zasad pracy na nich,
zdefiniowanie wielkości i odległości,
kolory i podstawowe kształty,
przyciski,
podstawowe komponenty,
nawigacje i jej zachowanie.

Zastosowanie design systemu pozwoliło nam usprawnić pracę nad rozbudowanym serwisem, ale również wypracować lepsze rozwiązania pod kątem UX i skupić się na kluczowych funkcjonalnościach strony.

Funkcjonalność i elastyczność

Nowa strona Concordia design oparta jest na WordPressie, dzięki czemu posiada CMS umożliwiający szybkie wprowadzanie zmian w obrębi treści. Edycja jest prosta i intuicyjna. Taka formuła pozwoliła nam pozostawać elastycznym podczas pracy nad stroną oraz po jej zakończeniu, szczególnie, iż w przypadku równocześnie powstającej wrocławskiej siedziby Concordii staliśmy często wobec “nieznanego”.

Nowe przyniósł też czas epidemii koronawirusa, kiedy elementy dedykowane wydarzeniom stacjonarnym szukały swoich rozwiązań dla wydarzeń online, których wcześniej nie braliśmy pod uwagę. W ramach dalszej pracy i rozwijania strony uprościliśmy również sposób dodawania wydarzeń, tak, aby spełnić oczekiwania klienta.

Strona w liczbach

W efekcie naszej pracy udało nam się wypracować stronę o nowej, bardzo przejrzystej strukturze oraz nowoczesnym, ciekawym dizajnie. Współpraca z Concordia design, choć pełna wyzwań jest dla nas źródłem dużej satysfakcji. Mamy nadzieję, że docenią ją również użytkownicy.