Prace nad etapem projektowania UX rozpoczęliśmy od warsztatów, podczas których określiliśmy oczekiwania dotyczące interfejsu i zakres wymaganych funkcjonalności. Pozwoliło to nam na wypracowanie optymalnej mapy strony wraz z architekturą informacji. W kolejnym kroku zaprojektowaliśmy prototyp strony głównej, prezentujący układ i sposób wyświetlania elementów dla każdej z zaplanowanych sekcji. Po uzyskaniu akceptacji makiety, stworzyliśmy prototypy dla pozostałych podstron.

Makiety funkcjonalne UX umożliwiają szczegółowe przetestowanie funkcjonalności strony oraz sprawdzenie zgodności z wymaganiami juz na wczesnym etapie realizacji. Dzięki temu można dokonać odpowiednich korekt, a także zmian w założeniach bez kosztownych prac podczas dalszych, bardziej zaawansowanych etapów.

Po zrealizowaniu etapu projektowania UX strony oraz uzyskaniu akceptacji klienta, rozpoczęliśmy pracę nad przygotowaniem projektu graficznego.

Rozpoczęliśmy od dobrania odpowiednich kolorów i czcionek, pasujących do już istniejącej identyfikacji wizualnej firmy Mutiny. Następnie, na bazie wcześniej przygotowanych makiet UX, zaprojektowaliśmy stronę główną, charekteryzującą się ciemnym motywem, kontrastowymi przyciskami oraz niestandardowymi kształtami. Podstrony zostały zaprojektowane w skali szarości co jeszcze bardziej podkreśliło nieszablonowe działania naszego klienta. W celu utrzymania spójności oraz przygotowania bazy pod dalszy rozwój strony, stworzyliśmy design system, który definiuje wygląd wszystkich elementów interaktywnych (np. różnych wersji przycisków, kafelek i galerii) oraz określa ramy wizualne.