Identyfikacja wizualna, strona firmowa, sklep internetowy.
UrboDomus to dwie firmy w jednym: pierwsza – związana z projektowaniem i wykańczaniem wnętrz najbardziej prestiżowych apartamentów w kraju; druga – sklep internetowy, będący zaopatrzeniem dla wytrawnych architektów i projektantów wnętrz.
Naszym zadaniem było stworzenie spójnego wizerunku obu profili działalności firmy, ze wszystkimi aspektami technicznymi: od projektów graficznych i UX, po wykonanie i wdrożenie nowoczesnego sklepu internetowego.
Część I: Sklep internetowy
Czas realizacji:
Około 3 miesięcy
Branża:
Budownictwo i wykańczanie wnętrz
Technologia:
Strategia, UX & UI design, Develop
Cel:
Uruchomienie nowej platformy e-commerce
Zakres działań:
Odkrywanie, strategia, User Experience, User Interface, wsparcie techniczne i merytoryczne
Firma i partnerzy:
UrboDomus Sp. z o.o. Sp. k., Strefa SEM
01 wyzwanie
Nowa platforma E-commerce
Celem projektu było stworzenie nowej wersji sklepu internetowego odpowiadającego najnowszym standardom w branży projektowej i wykańczania wnętrz, przy jedoczesnym zachowaniu spójności komunikacji wizualnej firmy.
02 proces
Dane historyczne i analiza
Istniejąca dotychczas platforma sprzedaży wymagała całkowitego przeprojektowania. Pogłębiona analiza zachowań użytkowników jak również dostosowanie założeń do aktualnych trendów w e-commerce zaowocowała wzorcowym projektem.
03 wynik
Uruchomienie i ciągłe udoskonalanie
Nawet najbardziej aktualna w chwili uruchomienia platforma sprzedażowa traci na świeżości – niezbędna jest ciągła praca nad rozwojem i bieżąca analiza ruchu na stronie. Celem jest utrzymanie najwyższych standardów: wygoda, szybkość, zaufanie.
Sytuacja początkowa
Istniejące rozwiązanie e-commerce
i jego nowa wersja
Pierwsza wersja sklepu obarczona była szeregiem wad, które wynikały z błędnych założeń początkowych i niedoszacowania możliwości rozwoju sklepu. Świat e-commerce, podobnie jak świat branży wykończeniowej, podlega bardzo szybkiej ewolucji – chcąc być na czasie i prezentować się jako nowoczesna firma podążająca (a może i wyznaczająca) za trendami, konieczne stało się zupełnie świeże spojrzenie na sklep i wykonanie go na nowo od podstaw.
Zebrane informacje w pogłębionych wywiadach jak również analiza dotychczasowych zachowań customer journey stanowiły bazę do rozpoczęcia prac projektowych.
Wspólna identyfikacja firmy
projektowej i sklepu
Z biegiem czasu skrystalizowała się również koncepcja wizualna firmy: duże kontrasty (antracytowa czerń i biel) oraz delikatny złoto-pomarańczowy akcent mający symbolizować element luksusu. Uboga kolorystyka firmy ma na celu uwypuklenie prezentowanych treści w postaci zdjęć wnętrz i zdjęć produktów.
Z biegiem czasu skrystalizowała się również koncepcja wizualna firmy: duże kontrasty (antracytowa czerń i biel) oraz delikatny złoto-pomarańczowy akcent mający symbolizować element luksusu.
Rozbudowa sklepu
Jak to się wszystko
zaczęło
Podstawą rozpoczęcia rozbudowy sklepu, jest opracowanie strategii jego rozwoju na najbliższe kilka lat. Wokół powyższych założeń dobieraliśmy środki przekazu i oddziaływania, stanowiące również system identyfikacji wizualnej firmy, z uwzględnieniem trendów danej branży.
Etap odkrywania
Zrozumieć klientów branży
wyposażenia wnętrz
Przy projektowaniu e-commerce, najważniejszym elementem jest klient końcowy, jego pragnienia, oczekiwania itp. W przypadku sklepu UrboDomus mamy do czynienia z klientem świadomym, o wyższej niż przeciętna znajomości rynku, z ukształtowanym gustem, podążającym za nowymi trendami. W takim przypadku duże znaczenie ma prestiż marki (producenta), status nowości czy odpowiednia prezentacja produktu.
Badania jakościowe
Google Analytics, kampanie AdWords,
ankiety, wywiady, dane z komunikatorów...
Przystąpiliśmy do szczegółowej analizy całych grup danych: od analizy firm konkurencyjnych, przez Google Analytics, CUX.io, wywiady, na ankietach oraz obserwacjach zachowań użytkowników kończąc. Zebrane dane pokazały najsłabsze i najmocniejsze obszary działalności sklepu, a także oczekiwania i życzenia klientów.
User interface
Doskonale skrojony
projekt graficzny
Główne założenia projektu graficznego to: zastosowanie wysokich kontrastów oraz unikanie wszelkich kolorów, aby maksymalnie wyeksponować rzeczywistą kolorystykę prezentowanych produktów – oczywiście poza ich specjalnym zastosowaniem w celu oznaczenia funkcyjnego.
Produkty w sklepie zostały podzielone na 4 działy oznaczone kolorami: czerwony oznaczający promocję – obniżoną cenę lub wyprzedaż; zielony oznaczający nowe towary, ale nie starsze niż 30 dni; żółto-złoty – oznaczający produkt używany lub ze zwrotu – tzw. outlet; kolorem niebieskim oznaczone są oryginalne produkty, które mogą mieć niekonwencjonalne zastosowanie, o których też będzie pisane na sklepowym bloku.
Zdecydowaliśmy się na użycie neutralnego, a jednocześnie dość charakterystycznego, o klasycznej geometrii, fontu Open Sans w kilku wariantach grubości. Dzięki takiemu zabiegowi, zachowaliśmy konsekwencję wszystkich początkowych założeń – to produkt jest najważniejszy, reszta jest jest tylko nieingerującą oprawą.
W przypadku rozbudowanych sklepów internetowych, wbrew powszechnym opiniom, najważniejsza jest strona kategorii produktów. To właśnie w tym miejscu podejmowane są decyzje, który produkt chcemy obejrzeć. Zdecydowaliśmy się na zastosowanie rozwiązania infinite scroll, które eliminuje paginację tak niechętnie ocenianie przez poszukujących inspiracji klientów. Kluczowe znaczenia ma tu mechanizm filtrowania produktów wg różnych opcji z zastosowaniem technologii Ajax prezentującego wyniki bez konieczności przeładowywania strony.
Wersja mobilna
Ergonomia i intuicja na pierwszym planie
Wersja mobilna sklepu jest nieco uproszczona w stosunku do wersji desktopowej aby zapewnić większą wydajność i wygodę obsługi. Nie oznacza to jednak, że sklep traci na swojej funkcjonalności.
Wynika to z preferencji zakupowych klientów, których przeciętna wartość koszyka jest zdecydowanie wyższa od przeciętnej na rynku e-commerce – kupowane towary są dokładniej oglądane i analizowane. Większość zakupów dokonywanych jest na urządzeniach tylu laptop lub desktop.
Implementacja
Wydajność, do której nikt nie ma wątpliwości
Jedną z najważniejszych obecnie kwestii dotyczących planowania zaplecza technicznego jest bezpieczeństwo, stabilność i prędkość działania aplikacji internetowych. Mówi się wręcz, że z każdą kolejną sekundą opóźnienia w ładowaniu aplikacji możemy tracić nawet połowę użytkowników.
Oprócz podwyższonych standardów bezpieczeństwa: szyfrowane hasła klientów, szyfrowane połączenie SSL, stały monitoring i nieustanny backup danych i wielostopniowa weryfikacja logowania na serwerze, zaproponowany hosting gwarantuje pełna ochronę przed złośliwym oprogramowaniem.
Zastosowanie wielopoziomowej pamięci podręcznej – od rozszerzenia REDIS utrzymującej większość najbardziej potrzebnych danych w pamięci RAM serwera, poprzez kompresję i minifikację kodu, leniwe ładowanie obrazków (lazy load) oraz inteligentncyh wieloplatformowych mechanizmów cache’ującyck każdą stronę, udało się uzyskać pożądaną wydajność, niezależnie od urządzenia końcowego.
Część II: Strona firmowa
Czas realizacji:
Około 1 miesiąc
Branża:
Budownictwo i wykańczanie wnętrz
Technologia:
UX & UI design, Develop
Cel:
Uruchomienie nowej strony prezentującej dokonania firmy
Zakres działań:
Odkrywanie, strategia, User Experience, User Interface,
Firma i partnerzy:
UrboDomus, Strefa SEM
01 wyzwanie
Nowa wizytówka firmy
Celem projektu było stworzenie nowej wersji strony internetowej, prezentującej dorobek firmy, z zachowaniem spójności wizualnej ze sklepem. Głównym wyzwaniem było stworzenie minimalistycznego środowiska, maksymalnie eksponującego treść.
02 proces
Jeden obraz zamiast setek słów
Bazując na wcześniejszych doświadczeniach jak również na podstawie wielu zebranych opinii, zdecydowaliśmy się na radykalny krok – usunięcie wszelkich opisów i tytułów przedstawianych projektów. Projekt ma mówić sam za siebie, interpretacja ma by pozostawiona odbiorcy.
03 wynik
Inspiracje, do których często wracasz
Odbiorcami strony są ludzie zawodowo zainteresowani architekturą wnętrz jak również pasjonaci szukający inspiracji. Przejrzysty i intuicyjny sposób nawigacji pozwala na wygodne i szybkie przeglądanie firmowego portfolio.
