Projektujemy sklepy, portale dla partnerów, konfiguratory i aplikacje dla średnich i dużych firm. Zaczynamy od tego, co ludzie mają u Was załatwić, a kończymy na plikach, w których programiści znajdą odpowiedź na każde „a co, jeśli…”.
01 / 05 Overmax Karta produktu na telefonie Zobacz projekt
01UX i UI
Piszemy je razem, z ukośnikiem, bo jedno bez drugiego nie działa. Najwygodniejsza ścieżka przegra z przyciskiem, którego nikt nie zauważył, a najładniejszy przycisk nie pomoże, jeśli prowadzi donikąd.
User experience, doświadczenie użytkownika
Wszystko, co człowiek przeżywa, korzystając z produktu. Czy szybko znajduje to, po co przyszedł, czy rozumie, co się stanie po kliknięciu, i czy dociera do celu bez telefonu do Waszego biura.
Odpowiada na pytania
Co z tego powstaje
User interface, interfejs użytkownika
Wszystko, co widać na ekranie i czego się dotyka: przyciski, pola, kolory, krój pisma, ikony, odstępy i ruch. Dobry interfejs od razu pokazuje, co jest najważniejsze, co da się kliknąć i czyj to produkt.
Odpowiada na pytania
Co z tego powstaje
02Od UX do UI
Weźmy kartę produktu w sklepie z lampami. Zanim ktoś kupi, zadaje sobie pięć pytań. UX ustala, gdzie i w jakiej kolejności znajdzie odpowiedzi, a UI nadaje im formę.
Zanim cokolwiek narysujemy, zbieramy pytania, które klient zadaje sobie przed zakupem, i układamy je w kolejności, w jakiej przychodzą mu do głowy.
Każde pytanie dostaje swoje miejsce na ekranie. Kolorów jeszcze nie ma i to celowo, bo na tym etapie rozmawiamy tylko o tym, czy da się tu kupić lampę.
Te same miejsca dostają kolory marki, krój pisma, zdjęcia i ruch. Najważniejszy przycisk widać z daleka, a reszta mu nie przeszkadza.
Oświetlenie nad stół
Lampa wisząca Kopuła
649 zł
Wysyłamy jutro
„Czy to ta lampa?”
UX ustala
Zdjęcie i nazwa na samej górze. Klient najpierw sprawdza, czy trafił we właściwe miejsce.
UI pokazuje
Duże zdjęcie na jasnym tle i nazwa w kroju marki. Kolejne zdjęcia przewija się palcem.
„Czy jest w moim kolorze?”
UX ustala
Kolory zaraz pod nazwą, bo od nich zależy, czy klient czyta dalej.
UI pokazuje
Próbki w kółkach, wybrana z obwódką. Klosz na zdjęciu zmienia kolor razem z wyborem.
„Czy zmieści się nad stołem?”
UX ustala
Wymiary, które klient sprawdza z miarką w ręku: średnica klosza i długość zwisu.
UI pokazuje
Mały rysunek z wymiarami, czytelny bez powiększania.
„Ile kosztuje i kiedy dojdzie?”
UX ustala
Cena i dostawa obok siebie, bo klient decyduje o jednym i drugim naraz.
UI pokazuje
Cena największym stopniem pisma, termin dostawy obok, z ikoną.
„Jak ją zamówić?”
UX ustala
Jeden główny przycisk w zasięgu kciuka. Pytanie do sklepu jako druga, cichsza opcja.
UI pokazuje
Przycisk w kolorze akcentu przy dolnej krawędzi. Po dotknięciu potwierdza, że lampa jest w koszyku.
W praktyce
Tak zaczęliśmy sklep Overmax. Większość klientów ogląda go na telefonie, a najważniejsza jest dla nich karta modelu, więc koncepcję zbudowaliśmy na mobilnej karcie X-Hooligana, a resztę sklepu dopiero na niej.
Zobacz projekt Overmax
03Podejście
Oczywisty dla klienta, który widzi go pierwszy raz, i dla programisty, który będzie go budował.
Słuchamy ludzi, którzy będą korzystać z produktu, i tych, którzy dziś odbierają ich telefony. Dział obsługi klienta wie o interfejsie więcej niż niejeden raport.
Rozpisujemy, skąd ludzie przychodzą, co chcą załatwić i w którym miejscu dziś rezygnują. Każdy ekran dostaje swoje miejsce w tej drodze.
Układamy treści i funkcje w kolejności, w jakiej ludzie podejmują decyzje. W sklepie Biurokoncept do oferty prowadzą trzy drogi: przez przestrzenie, produkty i usługi.
Najpierw szare prostokąty z prawdziwymi treściami. Na makiecie najtaniej przesunąć przycisk, dodać krok albo skreślić funkcję, której nikt nie potrzebuje.
Kiedy marka coś obiecuje, interfejs ma tej obietnicy dotrzymać. Kolory, krój pisma, ikony i ton komunikatów bierzemy z marki i sprawdzamy na ekranie. W ciemnym sklepie Overmax podstawowy niebieski okazał się za ciemny, więc sięgnęliśmy po jaśniejszy z linii samochodów.
Piszemy przyciski, komunikaty i podpowiedzi, czyli UX writing. „Wyślij zapytanie” mówi więcej niż „Dalej”, a dobry komunikat o błędzie podpowiada, jak go naprawić.
Kontrast, wielkość tekstu, obsługa z klawiatury i opisy dla czytników ekranu sprawdzamy w każdym projekcie. Z interfejsu korzystają też ludzie ze słabszym wzrokiem, w pełnym słońcu i w biegu.
Programiści dostają widoki na komputer i telefon, stany, ruch i bibliotekę komponentów. Przy wdrożeniu odpowiadamy na ich pytania, a gdy trzeba, programujemy sami.
04Co projektujemy
Każdy z tych interfejsów ma inną pracę do wykonania, więc każdy projektujemy trochę inaczej.
Co robimy
Projektujemy sklepy od karty produktu w górę: zdjęcia, warianty, filtry, porównania, koszyk i zamówienie. Uwzględniamy też to, co jest tylko u Was, na przykład produkty, których nie wolno sprzedawać w internecie.
Co dostajecie
Podobne realizacje
Co robimy
Projektujemy portale, z których partnerzy i sprzedawcy sami pobierają materiały, zdjęcia i prezentacje. Zaczynamy od próśb, które dziś trafiają do Was mailem, i robimy z nich menu.
Co dostajecie
Co robimy
Rozkładamy produkt na kroki, które klient rozumie bez katalogu w ręku, i pokazujemy wynik po każdym wyborze. Na końcu czeka koszyk albo zapytanie z pełną konfiguracją, więc handlowiec nie zaczyna rozmowy od zera.
Co dostajecie
Podobne realizacje
Co robimy
Architekt przychodzi po konkret: parametr, rysunek, plik do projektu. Układamy serwis według wymagań, od których zaczyna, i podajemy mu wszystko w kilku kliknięciach, w jego języku.
Co dostajecie
Co robimy
Panele klienta, narzędzia dla działów i aplikacje do codziennej pracy. Najpierw projektujemy to, co użytkownik robi najczęściej, bo to ma iść najszybciej. Rzadsze funkcje mogą poczekać piętro niżej.
Co dostajecie
Co robimy
Gdy firma ma kilka serwisów, w kilku krajach albo dla kilku spółek, projektujemy jeden system: wspólny szkielet, komponenty i zasady. Każdy serwis dostaje własny akcent, a kolejne powstają szybciej, bo nikt nie zaczyna od zera.
Co dostajecie
05Proces
Pracujemy etapami i według harmonogramu, który znacie przed startem. Po każdym etapie pokazujemy, co powstało, i mówimy, co dalej, więc zawsze wiecie, co robimy, dlaczego i kiedy. Przy mniejszych zleceniach łączymy część etapów, ale kolejność zostaje.
Poznajemy Waszych klientów od podszewki: kim są, co chcą załatwić i gdzie dziś się gubią. Rozmawiamy z Wami, z obsługą klienta i, kiedy się da, z samymi użytkownikami.
Co dostajecie
Układamy, co jest w produkcie, co idzie razem i jak się między tym poruszać. Tu zapadają najważniejsze decyzje, więc nie idziemy na skróty.
Co dostajecie
Klikalna makieta najważniejszych ścieżek, z prawdziwymi treściami i bez kolorów. Przechodzimy ją z Wami ekran po ekranie, aż wszystko stoi na swoim miejscu.
Co dostajecie
Kierunek pokazujemy na jednym, najważniejszym widoku, często na telefonie. Kiedy ten ekran działa, reszta ma się na czym oprzeć.
Co dostajecie
Projektujemy wszystkie widoki na komputer i telefon, razem ze stanami, o których łatwo zapomnieć: pusta lista, błąd, produkt niedostępny. Z powtarzalnych elementów powstaje biblioteka komponentów.
Co dostajecie
Oddajemy pliki z opisem zachowania elementów, ruchem i grafikami. Przy wdrożeniu odpowiadamy na pytania programistów i sprawdzamy, czy gotowy produkt wygląda jak projekt.
Co dostajecie
06Design system
Na prezentacji przycisk ma jeden wygląd. W gotowym produkcie musi wiedzieć, co zrobić, gdy ktoś na niego najedzie, wejdzie z klawiatury albo kliknie, a serwer akurat nie odpowie. Każdy taki stan projektujemy raz, w bibliotece komponentów, i każdy ekran bierze go z tego samego miejsca.
01Tak wygląda, zanim ktokolwiek go dotknie.
02Lekko się unosi, żeby było widać, że da się go kliknąć.
03Wyraźna obwódka dla osób, które poruszają się po stronie klawiaturą.
04Ugina się pod palcem, więc wiadomo, że kliknięcie doszło.
05Pokazuje, że coś się dzieje, i nie przyjmuje drugiego kliknięcia.
06Potwierdza, że się udało, a po chwili wraca do zwykłego stanu.
07Mówi, co poszło nie tak i co zrobić dalej.
08Wygląda na wyłączony i podpowiada, czego brakuje.
07Pytania
UX decyduje, co jest na ekranie, w jakiej kolejności i co się stanie po kliknięciu. UI decyduje, jak to wygląda i jak się zachowuje. Pierwsze zaczyna się od rozmów i makiety, drugie kończy na kolorach, krojach pisma i ruchu. Więcej piszemy na początku tej strony.
Tak. Zaczynamy wtedy od przejścia makiety razem z Wami, żeby zrozumieć decyzje, które już zapadły. Jeśli coś w ścieżce nas zaniepokoi, powiemy o tym, zanim zaczniemy rysować.
Tak, i często od tego zaczynamy. Sprawdzamy, co działa, a co przeszkadza, i poprawiamy etapami, żeby klienci mogli korzystać z produktu przez cały czas. Sklep Biurokoncept przenieśliśmy ze starej platformy razem z produktami, a każdy stary adres produktu prowadzi dziś na nowy.
W Figmie. Dostajecie plik z widokami, komponentami i stylami, w którym Wasz zespół może dalej pracować. Ikony i grafiki eksportujemy w formatach gotowych do wdrożenia.
Tak. Serwisy i sklepy na WordPressie i WooCommerce budujemy sami, jak Strefę Architekta Porta i sklep Biurokoncept. Możemy też oddać projekt Waszym programistom, jak przy sklepie Overmax, i odpowiadać na ich pytania przy wdrożeniu.
Kontrast, wielkość tekstu, kolejność przechodzenia klawiaturą i opisy dla czytników ekranu sprawdzamy w każdym projekcie. Gdy serwis musi spełniać WCAG, ustalamy poziom na starcie. Tak powstał best.com.pl, wdrożony zgodnie z WCAG 2.0.
Przed startem wiecie, jak będzie zorganizowana praca, w jakich etapach i co dostaniecie na koniec. Potem trzymamy się harmonogramu i po każdym etapie pokazujemy, co powstało. Jeśli coś wymaga Waszej decyzji, mówimy o tym od razu i podpowiadamy, co sami byśmy wybrali.
Plik w Figmie z widokami na komputer i telefon, bibliotekę komponentów ze stanami, klikalny prototyp, opis ruchu i zachowania elementów oraz grafiki do wdrożenia. Jeśli wdrażamy sami, także działający serwis i szkolenie z panelu. Wszystko zostaje u Was, więc część pracy może przejąć Wasz zespół, a do rozbudowy możemy razem wrócić w każdej chwili.
Itodi
Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.
Overmax
Projekt UX/UI sklepu Overmax: auta RC w filmowych ujęciach, dopracowana karta produktu, menu kategorii i test, który dobiera model.
Design Optyk
Rodzinna sieć salonów optycznych premium: identyfikacja bez złota, materiały do salonów i nowy sklep połączony z magazynami sześciu z siedmiu salonów.
Acer
Ponad 1200 zleceń dla pięciu rynków Acer, od banerów dla sieci handlowych po portal dla partnerów Acer UK.
Porta PRO
Projekt UI/UX i wdrożenie Strefy Architekta Porta: drzwi po parametrach, pliki BIM, baza wiedzy jak poradnik i przeniesione treści.
Biurokoncept
Zaprojektowaliśmy i zakodowaliśmy biurokoncept.pl: katalog ponad tysiąca mebli z konfiguratorem pCon i koszykiem zapytań.
Nowa Stomatologia
Strona krakowskiej kliniki, która umawia na wizytę w dwóch kliknięciach, rozwijana przez cztery lata.
Hana Design
Lifting logo, materiały dla architektów, strona z konfiguratorem produktów i oklejenie aut.
Novicare
Identyfikacja producenta i dystrybutora sprzętu ortopedycznego, submarka Novicare24, witryny, materiały i sklep internetowy.
Porta Drzwi
Design system dla istniejącego znaku: rama z logo, siatki, ikony, rysunki, katalog, porta.com.pl, social media i materiały dla sprzedaży producenta drzwi.
Mily Group
Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.
Grupa Dawtona
Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.
Czytaj
Czytaj
Czytaj
Napisz do nas!
Wypełnij formularz lub napisz na:
Wolisz zadzwonić?
"*" oznacza pola wymagane
Pliki cookie
Za Twoją zgodą korzystamy z Google Analytics i Microsoft Clarity, żeby widzieć, jak ludzie korzystają ze strony, oraz z Google Ads, żeby mierzyć skuteczność reklam. Bez zgody strona działa tak samo. Wybór zmienisz w każdej chwili w stopce, w „Ustawieniach cookie”. Szczegóły w polityce prywatności.
Plik fluo_zgoda zapamiętuje ten wybór na 12 miesięcy. Cloudflare Turnstile chroni formularze przed botami.
Plausible liczy wejścia bez plików cookie i bez danych osobowych, dlatego działa niezależnie od tego wyboru.
