UX/UI Design
Projektujemy UX/UI aplikacji webowych, mobilnych i systemów B2B - od analizy potrzeb użytkowników i pierwszych makiet po gotowy interfejs oraz design system w Figmie. Nie projektujemy ekranów w oderwaniu od produktu. Sprawdzamy ścieżki użytkowników, dane z analityki i ograniczenia technologiczne, żeby stworzyć rozwiązanie, które jest wygodne w użyciu i możliwe do sprawnego wdrożenia. Po uruchomieniu produktu możemy wrócić do heatmap, nagrań sesji, analityki i rozmów z użytkownikami. Dzięki temu kolejne zmiany wynikają z danych, a nie z przypuszczeń.
Firmy które nam zaufały
Podstawy
Czym jest UX/UI design i kiedy warto w niego zainwestować?
UX design odpowiada za to, jak działa produkt i jak użytkownik przechodzi przez kolejne etapy procesu. UI design to jego warstwa wizualna - układ, typografia, kolorystyka, komponenty i sposób prezentowania informacji. W praktyce projektowanie UX i UI najczęściej prowadzimy razem. Dobry wygląd nie naprawi źle zaprojektowanego procesu, a dobrze przemyślana ścieżka użytkownika może stracić skuteczność przez nieczytelny interfejs.
Projektowanie lub redesign UX/UI warto rozważyć między innymi wtedy, gdy użytkownicy:
- porzucają formularz lub proces zakupowy na konkretnym etapie,
- nie wiedzą, jaki powinien być kolejny krok,
- regularnie pytają obsługę o te same funkcje,
- mają problem ze znalezieniem ważnych informacji,
- wykonują prostą czynność w zbyt wielu krokach.
To również dobry moment na redesign, jeżeli rozwój produktu doprowadził do niespójnej nawigacji, wielu wyjątków i ekranów projektowanych niezależnie od siebie. Jeżeli nie wiadomo jeszcze, gdzie dokładnie leży problem, zaczynamy od audytu UX. Analizujemy kluczowe ścieżki użytkowników i wskazujemy problemy wraz z rekomendacjami oraz priorytetami zmian.
Zobacz projekty UX/UI design dla naszych klientów
Wynajem magazynu w minuty zamiast dni - automatyzacja umów i płatności
Klient: Balticon S.A.
Branża: Logistyka / LogTech
„Makiety strony i sklepu dostaliśmy na czas i w świetnej jakości - widać, że zespół dopracował każdy szczegół. Imponujące było też to, jak sprawnie szła praca.”
Krzysztof Kornas — CEO, High Culture sp. z o.o.
Opinia z Clutch (tłum. z angielskiego)
Przebieg
Jak pracujemy: od zrozumienia problemu do makiet, które da się zbudować
Zaczynamy od zrozumienia, kto i po co używa produktu - na podstawie tego, co już wiesz o użytkownikach, danych z analityki i rozmów z osobami z obsługi. Dopiero potem powstają szkice ścieżek, a na końcu warstwa wizualna. Odwrotna kolejność zdarza się często i kończy pięknymi ekranami, które trzeba przeprojektować przy pierwszym zderzeniu z realnymi danymi. Projektujemy w Figmie i przekazujemy makiety w postaci, którą da się zbudować: ze stanami błędów, pustymi widokami, wersjami dla długich tekstów i dla telefonu. Ekran wygląda dobrze na prezentacji, dopóki nie zobaczy nazwy produktu o długości stu znaków - te przypadki rozstrzygamy w projekcie, nie w kodzie.
Po Twojej stronie potrzebujemy dostępu do analityki lub nagrań sesji, jeśli istnieją, kontaktu z osobami obsługującymi klientów oraz decydenta, który zatwierdza kierunek. Po naszej stronie jest badanie, projekt, system komponentów i przekazanie do wdrożenia.
Czas realizacji zależy przede wszystkim od liczby procesów i unikalnych widoków, stopnia złożoności produktu oraz tego, czy istnieje już design system. Redesign jednej kluczowej ścieżki może być stosunkowo niewielkim projektem. Zaprojektowanie rozbudowanej platformy lub systemu B2B z panelem administracyjnym będzie wymagało znacznie większego zakresu prac.
Decyzje
Decyzje projektowe, które wpływają na koszt i rozwój produktu
Design system czy pojedyncze ekrany? System komponentów kosztuje więcej na starcie i zwraca się przy trzecim albo czwartym ekranie - bo od tego momentu projektowanie i kodowanie polega na składaniu, a nie na rysowaniu od nowa. Przy krótkim, zamkniętym projekcie bywa nadmiarem.
Ile badań UX potrzeba przed projektowaniem? Zakres badań powinien wynikać z ryzyka i skali projektu. Czasami wystarczy analiza danych, rozmowy z zespołem i kilka testów z użytkownikami. Przy większym produkcie lub decyzjach o wysokim koszcie błędu potrzebne mogą być bardziej rozbudowane badania jakościowe i ilościowe. Najważniejsze jest to, żeby kluczowe decyzje projektowe nie wynikały wyłącznie z przekonań zespołu.
Zgodność z tym, co użytkownicy znają. Nieoczywisty, autorski interfejs bywa nagradzany w konkursach i karany w konwersji. Odejście od utartego wzorca warto robić świadomie i w jednym miejscu, a nie wszędzie naraz.
Czego nie robić. Nie zatwierdzaj projektu wyłącznie na dużym ekranie, jeśli ruch jest mobilny. Nie projektuj pustych widoków na końcu - pierwszy kontakt użytkownika z produktem to zwykle właśnie pusty ekran. I nie traktuj dostępności jako etapu po projekcie: kontrast i kolejność nawigacji taniej rozstrzygnąć w makiecie niż poprawiać w kodzie.
Zakres
Projektowanie UX/UI, które kończy się wdrożeniem, a nie plikiem w Figmie
Proces może obejmować warsztaty, architekturę informacji, user flow, wireframe'y, prototypowanie oraz finalny UI design. Makiety high-fidelity projektujemy równolegle z biblioteką komponentów. Dzięki temu developerzy dostają spójny system elementów wraz ze stanami i zasadami działania, zamiast odtwarzać każdy ekran osobno na podstawie grafiki. Mamy tę przewagę, że projektujemy produkty, które sami później programujemy. Projektanci i developerzy mogą więc konsultować rozwiązania jeszcze przed etapem wdrożenia.
Tak powstał m.in. konfigurator garniturów online dla Signor Leone, nowa ścieżka wniosku o finansowanie dla Horyzont Capital oraz serwisy B2B i B2C CeeCam działające w ramach wspólnej architektury.
Technologie, których używamy
- Projektowanie
Projektujemy w Figmie - od researchu i makiet lo-fi po design system z tokenami, z których programiści biorą gotowe wartości.
- Wdrożenie projektu
Projekt wdrażamy w React z Tailwindem, a lżejsze serwisy - bezpośrednio w Webflow; projektant i programista pracują na tych samych tokenach.
Badania
Decyzje projektowe oparte na zachowaniu użytkowników
Rola projektanta nie kończy się z przekazaniem plików do developmentu Po wdrożeniu możemy analizować heatmapy, nagrania sesji, dane z analityki oraz informacje uzyskane bezpośrednio od użytkowników. Pozwala to sprawdzić, czy zaprojektowane rozwiązanie faktycznie działa tak, jak zakładaliśmy.
Badania prowadzimy także przed rozpoczęciem projektowania: wywiady, persony i mapowanie ścieżek pokazują, gdzie użytkownicy naprawdę gubią się w procesie. W Horyzont Capital to właśnie analiza porzuceń wniosku wskazała, które pola formularza wyciąć, a które przełożyć na później - efektem była prostsza ścieżka do finansowania i mniej porzuconych wniosków.
Projekt kończy się nie wtedy, gdy makieta ładnie wygląda, ale gdy działa w kodzie na prawdziwych danych: z długimi nazwami, pustymi stanami i błędami sieci. Dlatego projektujemy z myślą o wdrożeniu - komponenty w Figmie mają swoje odpowiedniki w bibliotece frontendowej, a stany brzegowe są rozrysowane, zanim zobaczy je deweloper.
Design system
Spójność, która przyspiesza każdy kolejny ekran
Design system budujemy metodą komponentową: tokeny kolorów i typografii, biblioteka komponentów w Figmie i jej lustrzane odbicie w kodzie. Pierwsze ekrany powstają wolniej, każdy kolejny - szybciej, a produkt przestaje rozjeżdżać się wizualnie między podstronami. Ten sam system trzyma spójność naszej własnej strony, którą właśnie oglądasz.
Dla zespołów klienta przygotowujemy dokumentację użycia: kiedy który wariant przycisku, jak pisać komunikaty błędów, jak podpinać nowe podstrony bez psucia całości. Redesign HR Hints w Webflow z CMS oddał stronę zespołowi marketingu - aktualizują ją bez udziału programisty.
Finanse / FinTech
Projektujemy i rozwijamy rozwiązania cyfrowe dla firm finansowych, ubezpieczeniowych, pożyczkowych i startupów FinTech.
Finanse / FinTech ↗
PRODUKTY
Powiedz nam, co chcesz zbudować — zajmiemy się resztą
Aplikacja treningowa Fit Paradise na iOS i Androida dopasowuje plan do postępów użytkownika, lojalnościowa SAO Life zmienia jednorazowy zakup w stałą relację z klubem SAO House, a HomeChefs sprzedaje domowe posiłki z dostawą przez Wolt. Piszemy natywnie w Swifcie i Kotlinie albo cross-platform w React Native i Flutterze — technologię dobieramy do produktu, nie odwrotnie.
Dwa nasze systemy rezerwacyjne działają w różnych branżach: BlueApart przyjmuje rezerwacje apartamentów, a chatbot domyka je poza godzinami pracy recepcji; Balticon wynajmuje kontenery magazynowe w minuty zamiast dni, bo umowy i płatności obsługuje automat. Booking engine łączymy z płatnościami, kalendarzami dostępności i automatyzacją obsługi gości.
HomeChefs sprzedaje domowe posiłki z dostawą przez Wolt i sprzedażą zgodną z przepisami, a Baza Cosmetics — kosmetyki premium na 9 rynkach europejskich na Shopify Plus. Marketplace to dwa produkty naraz: inny dla kupującego, inny dla sprzedawcy — projektujemy oba widoki, razem z modelem rozliczeń.
Wdrażamy headless CMS — najczęściej Strapi, na którym działa też nasz własny serwis z ponad 2500 artykułów. Redakcja dostaje panel dopasowany do swojej pracy: stronę Konsorcjum Migracyjnego zespół aktualizuje samodzielnie, a migracja SRDK Studio z WordPressa na Strapi zakończyła się stroną szybszą o 60%.
FAQ
Pytania, które słyszymy przed projektem
- To zależy głównie od zakresu i liczby unikalnych widoków. Przeprojektowanie kilku kluczowych ścieżek może zająć kilka tygodni, natomiast kompletny produkt z wieloma rolami użytkowników i panelem administracyjnym to zwykle praca liczona w miesiącach. Przed rozpoczęciem projektu ustalamy zakres i harmonogram prac.
- Koszt zależy przede wszystkim od liczby i złożoności widoków, liczby ścieżek użytkownika, zakresu badań oraz tego, czy projekt wymaga stworzenia design systemu. Inaczej wyceniamy przeprojektowanie jednej kluczowej ścieżki, a inaczej kompletną aplikację z panelem administracyjnym. Po poznaniu zakresu projektu przygotowujemy wycenę dopasowaną do tego, co faktycznie trzeba zaprojektować.
- Zaczynamy od poznania produktu, użytkowników i problemu, który chcemy rozwiązać. Następnie projektujemy ścieżki użytkownika i makiety lo-fi, a po zaakceptowaniu kierunku przechodzimy do widoków hi-fi i komponentów. Projektujemy również stany błędów, puste widoki, wersje mobilne i przypadki brzegowe, żeby decyzje nie musiały być podejmowane dopiero podczas programowania.
- Nie potrzebujemy gotowej, szczegółowej specyfikacji. Jeśli produkt już działa, przydają się dane z analityki, heatmapy lub nagrania sesji oraz możliwość rozmowy z osobami, które mają kontakt z użytkownikami. Potrzebujemy też po Twojej stronie osoby, która zna cele biznesowe produktu i może podejmować decyzje dotyczące kierunku projektu.
- Plik w Figmie z kompletem zaprojektowanych widoków, stanami błędów, pustymi widokami i wersjami mobilnymi. W zależności od zakresu przygotowujemy również bibliotekę komponentów lub pełny design system oraz opis zachowań, których nie da się pokazać na statycznym ekranie.
- Tak. Projekt możemy przekazać do wdrożenia Twojemu zespołowi developerskiemu. Makiety przygotowujemy z myślą o programistach: z komponentami, wariantami, stanami i opisem zachowania interfejsu. Możemy też przejąć cały proces - od projektu po wdrożenie.
- Tak. Audyt ma szczególnie dużo sensu wtedy, gdy produkt już działa, ale nie wiadomo dokładnie, dlaczego użytkownicy porzucają proces albo mają problem z wykonaniem konkretnej czynności. Wynikiem audytu jest lista problemów uporządkowana według ich znaczenia oraz rekomendacje, co poprawić punktowo, a co warto przeprojektować.
- Jeżeli są potrzebne - tak. Korzystamy m.in. z danych analitycznych, heatmap, nagrań sesji i wywiadów z użytkownikami. Zakres badań dobieramy do produktu i ryzyka decyzji: nie każdy projekt potrzebuje rozbudowanego researchu, ale projektowanie całkowicie bez danych oznacza opieranie decyzji głównie na założeniach.
- Nie zawsze. Przy kilku ekranach pełny design system może być niepotrzebnym kosztem. Przy produkcie, który będzie rozwijany przez kolejne miesiące lub lata, biblioteka komponentów szybko zaczyna oszczędzać czas projektantów i programistów oraz utrzymuje spójność kolejnych funkcji.
- Tak. Już na etapie projektu uwzględniamy m.in. kontrast, rozmiary elementów interaktywnych, kolejność nawigacji i widoczny stan skupienia. Takie decyzje znacznie łatwiej i taniej rozstrzygnąć w projekcie niż poprawiać po wdrożeniu.
Zbudujmy wspólnie produkty cyfrowe dla Twojej firmy
Powiązane artykuły
Interesuje cię projekt interfejsu twojego produktu?
Badania, prototypy i design systemy w Figmie - programiści dostają gotowe komponenty, a po wdrożeniu wracamy do danych z heatmap i sesji.
Napisz do nasPozostałe usługi
Web development
Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.
Dowiedz się więcejE-commerce
Projektujemy i wdrażamy sklepy internetowe oraz platformy e-commerce dopasowane do modelu sprzedaży i procesów firmy. Pracujemy zarówno z gotowymi rozwiązaniami, jak i z architekturą headless oraz dedykowanymi systemami sprzedażowymi. Budujemy e-commerce dla sprzedaży B2C i B2B, rozbudowanych katalogów produktów, wielu rynków oraz marketplace’ów. Integrujemy sklepy z ERP, WMS, CRM, PIM, płatnościami i logistyką, projektujemy konfiguratory produktów i niestandardowe procesy zakupowe. Dbamy również o wydajność, SEO techniczne i przygotowanie platformy na sezonowe wzrosty ruchu.
Dowiedz się więcejSEO / GEO
Pomagamy zwiększać widoczność stron w Google i w odpowiedziach generowanych przez AI. Łączymy techniczne SEO, optymalizację treści i pracę nad strukturą serwisu. Zaczynamy od audytu, a najważniejsze zalecenia przekładamy na konkretne wdrożenia w kodzie.
Dowiedz się więcej