--- title: "Product design: UX, aplikacje webowe i MVP" description: "Projektujemy produkty cyfrowe dla firm: rozmowy z użytkownikami, klikalne makiety, testy, interfejsy, MVP i aplikacje webowe, od celu po gotowy ekran." url: https://fluostudio.pl/uslugi/product-design/ --- # Product design dla aplikacji, portali i konfiguratorów. Pierwsze kliknięcie decyduje, czy będzie drugie. Projektujemy produkty cyfrowe średnich i dużych firm: od celu i ścieżek użytkowników, przez makietę i testy z ludźmi, po interfejs i design system. Gdy produkt jest nowy, wymyślamy mu też nazwę i znak. [Porozmawiajmy o Waszym produkcie](https://fluostudio.pl/kontakt/) Co projektujemy Podejście ## Co robimy, aby zaprojektować świetny produkt? Tak pracujemy przy każdym produkcie, od pierwszej makiety po sklep, portal dla partnerów i konfigurator. 1. ### Najpierw cel Zanim narysujemy pierwszy ekran, ustalamy, co produkt ma załatwić dla firmy, a co dla ludzi, którzy będą z niego korzystać. Do tych celów wracamy przy każdej decyzji. 2. ### Potrzeby i ryzyka Na [warsztatach](https://fluostudio.pl/baza-wiedzy/slownik/warsztat-strategiczny/), w rozmowach z użytkownikami i w przeglądzie konkurencji poznajemy prawdziwe potrzeby ludzi i ryzyka dla Waszego biznesu. Dopiero na tym budujemy projekt. 3. ### Najpierw makieta Układ ekranów i ścieżki sprawdzamy na klikalnej [makiecie](https://fluostudio.pl/baza-wiedzy/slownik/makieta/), zanim powstanie wygląd. Zmiana na makiecie to chwila, a w gotowym kodzie dużo więcej pracy. 4. ### Testy z ludźmi Prototyp dajemy do rąk ludziom, którzy będą z produktu korzystać, i poprawiamy to, na czym się zatrzymują. Każda runda testów daje lepszą wersję. 5. ### Całe ścieżki Projektujemy drogę od pierwszego wejścia po zamówienie albo zapytanie, razem z pustymi listami, błędami i komunikatami. Nic nie zostaje do dopowiedzenia. 6. ### Design system Z projektu powstaje [biblioteka komponentów i zasad](https://fluostudio.pl/baza-wiedzy/slownik/design-system/). Kolejne funkcje składacie z gotowych elementów, więc produkt rośnie bez projektowania od nowa i zostaje spójny. 7. ### Projekt, który da się zbudować Sami też programujemy, więc wiemy, co da się zbudować. Programiści dostają projekt z opisem zachowania każdego elementu i pliki gotowe do wdrożenia. 8. ### Rozwój po starcie Po wdrożeniu sprawdzamy, jak ludzie korzystają z produktu, i razem planujemy kolejne funkcje. Do projektu możecie wrócić w każdej chwili, a część pracy przejąć we własnym zespole. Naszym celem są produkty, których nie trzeba nikomu tłumaczyć: **każdy od razu wie, co kliknąć.** Co projektujemy ## Czego potrzebuje Wasz produkt? Zaczynamy tam, gdzie jest Wasz produkt: od pomysłu, od makiety albo od działającej aplikacji, która wymaga poprawek. UI/UX design Sklep, portal albo aplikacja, od ścieżek po ostatni ekran Co robimy Układamy ścieżki użytkowników i architekturę informacji, a potem projektujemy interfejs na komputer i telefon. Każdy ekran ma opisane stany i zachowanie, więc programiści nie muszą niczego zgadywać. Co dostajecie - Architektura informacji i ścieżki użytkowników - Projekt interfejsu na komputer i telefon - Design system z biblioteką komponentów - Specyfikacja i pliki dla programistów Overmax [Sklep z autami RC, od makiety po porównywarkę, która chowa identyczne parametry](https://fluostudio.pl/projekty/overmax/) [Więcej o UI/UX design](https://fluostudio.pl/uslugi/product-design/ui-ux-design/) Podobne realizacje - [Nowa Stomatologia](https://fluostudio.pl/projekty/nowa-stomatologia/) - [Design Optyk](https://fluostudio.pl/projekty/designoptyk/) - [Pokket](https://fluostudio.pl/projekty/pokket/) - [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) Aplikacja webowa Narzędzie, w którym klienci albo partnerzy pracują na co dzień Co robimy Projektujemy portale dla partnerów, panele i bazy wiedzy, czyli miejsca, do których ludzie wracają. Zaczynamy od tego, co użytkownik robi najczęściej, i to ma być najprostsze. Możemy zacząć od samego projektu albo od razu zbudować całość. Co dostajecie - Mapa procesów i ról użytkowników - Projekt widoków i mikrointerakcji - Design system gotowy na kolejne funkcje - Wsparcie przy wdrożeniu i rozwoju Acer UK [Portal, z którego partnerzy sami pobierają materiały marki, z wyszukiwarką i pobieraniem wielu plików naraz](https://fluostudio.pl/projekty/acer/) [Więcej o aplikacjach webowych](https://fluostudio.pl/uslugi/product-design/aplikacje-webowe/) Podobne realizacje - [Porta PRO · Strefa Architekta](https://fluostudio.pl/projekty/porta-pro/) - [Vee](https://fluostudio.pl/projekty/vee/) Identyfikacja produktu Nazwa, znak i charakter nowego produktu albo usługi Co robimy Gdy produkt potrzebuje własnej twarzy, projektujemy jego nazwę, znak, kolory i sposób mówienia. Potem wszystko, czego dotyka klient, czyli stronę, aplikację, opakowanie i materiały na premierę. Co dostajecie - Nazwa i znak produktu - Klucz wizualny i księga znaku - Strona albo aplikacja w nowym stylu - Opakowanie i materiały na premierę Vee [Głosowy host AI z imieniem i charakterem, trzy submarki i strona, na której słychać rozmowę](https://fluostudio.pl/projekty/vee/) [Więcej o brandingu](https://fluostudio.pl/uslugi/branding/) Podobne realizacje - [Itodi](https://fluostudio.pl/projekty/itodi/) - [Zippy Tail](https://fluostudio.pl/projekty/zippy-tail/) - [PetCuisine](https://fluostudio.pl/projekty/petcuisine/) - [WellB](https://fluostudio.pl/projekty/wellb/) Konfigurator produktu Klient sam składa produkt i od razu widzi wynik Co robimy Projektujemy konfigurator jak osobny produkt, z kolejnymi krokami, podpowiedziami i podglądem, który zmienia się razem z wyborem. Klient nie musi znać się na produkcie, żeby złożyć zamówienie albo zapytanie. Co dostajecie - Kroki i logika konfiguratora - Podgląd, który zmienia się z każdym wyborem - Ikony i podpowiedzi przy opcjach - Koszyk albo zapytanie z pełną konfiguracją Itodi [Meble na wymiar w kilku krokach: szerokość, wysokość, fronty, podstawa i kolor](https://fluostudio.pl/projekty/itodi/) [Więcej o stronach z konfiguratorem](https://fluostudio.pl/uslugi/strony-www/strona-z-konfiguratorem/) Podobne realizacje - [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) - [Hana Design](https://fluostudio.pl/projekty/hana-design/) MVP Pierwsza wersja produktu do sprawdzenia na prawdziwych użytkownikach Co robimy Razem wybieramy funkcje, bez których nie da się sprawdzić pomysłu, i projektujemy tylko je. Dokładamy analitykę, żeby po starcie było wiadomo, co rozwijać, a co odpuścić. [Więcej o MVP](https://fluostudio.pl/uslugi/product-design/mvp/) Co dostajecie - Zakres pierwszej wersji - Produkt gotowy do testów z użytkownikami - Analityka zachowań użytkowników - Plan kolejnych kroków Makieta i prototyp Klikalna wersja produktu, zanim powstanie wygląd i kod Co robimy Składamy klikalną makietę najważniejszych ścieżek i sprawdzamy ją z Wami i z użytkownikami. Przesuwamy, skreślamy i dopisujemy, zanim cokolwiek zostanie zaprojektowane na gotowo i zaprogramowane. [Więcej o makietowaniu](https://fluostudio.pl/uslugi/product-design/makietowanie/) Co dostajecie - Klikalna makieta - Scenariusze do testów z użytkownikami - Warianty kluczowych ekranów - Wersja do pokazania zarządowi albo inwestorom Podobne realizacje - [Overmax](https://fluostudio.pl/projekty/overmax/) - [Porta PRO](https://fluostudio.pl/projekty/porta-pro/) - [Mily Group](https://fluostudio.pl/projekty/mily-group/) Testy i audyt UX Sprawdzamy, gdzie ludzie się gubią, i mówimy, co poprawić Co robimy Oglądamy, jak ludzie korzystają z produktu albo prototypu, przeglądamy dane i porównujemy wersje. Każdy wniosek zamieniamy na konkretną zmianę i ustalamy, od której zacząć. [Więcej o testowaniu](https://fluostudio.pl/uslugi/product-design/testowanie/) Co dostajecie - Audyt użyteczności - Analiza danych o zachowaniach użytkowników - Raport z listą zmian według ważności - Plan wdrożenia poprawek Sytuacje, od których zaczynamy ## Z czym przychodzą do nas firmy [Wszystkie sytuacje](https://fluostudio.pl/wyzwania/) - [„Wypuszczamy nowy produkt cyfrowy i nie wiemy, jak ma wyglądać obok naszej marki.” Projektujemy go jako część rodziny: znak, kolory i ekrany z tych samych elementów co marka główna. Dzięki temu nowy produkt nie buduje rozpoznawalności od zera. Projekt dla Vee](https://fluostudio.pl/projekty/vee/) - [„Każdy projektant, z którym rozmawialiśmy, chciał od razu rysować ekrany, zanim zrozumiał nasz produkt.” Zaczynamy od rozmów z ekspertami i użytkownikami oraz od dokumentacji. Ekrany rysujemy dopiero wtedy, gdy wiemy, kto z czego korzysta i po co. Jak pracujemy ze złożonymi produktami](https://fluostudio.pl/wyzwania/zlozony-produkt/) - [„Dostaliśmy od agencji ładne ekrany, a nasi programiści zgadują, jak to ma działać.” Oddajemy projekt z rozpisanym ruchem i ze stanami, o których łatwo zapomnieć, jak brak danych albo błąd. Przy wdrożeniu odpowiadamy na pytania Waszych programistów. Projekt sklepu Overmax](https://fluostudio.pl/projekty/overmax/) ## Co dostajecie? ###### Produkt sprawdzony z użytkownikami i gotowy do wdrożenia, od sklepu i portalu po aplikację albo MVP. Zostają u Was pliki i design system, więc produkt może dalej rozwijać Wasz zespół, a do większych zmian możemy razem wrócić w każdej chwili. Co dokładnie dostajecie? ### Strategia produktu Cele, miary sukcesu i plan rozwoju. Ustalamy, co projektujemy, dla kogo i po co, żeby każdą kolejną decyzję było na czym oprzeć. ### Research i analiza Rozmowy z użytkownikami, przegląd konkurencji i sprawdzenie założeń biznesowych. Zanim narysujemy pierwszy ekran, wiemy, czego ludzie naprawdę potrzebują i gdzie są ryzyka. ### Architektura produktu Mapa widoków i funkcji oraz ścieżki najważniejszych zadań. Widać na niej, co jest w produkcie, co idzie razem i jak się między tym poruszać. ### Design system Biblioteka komponentów z zasadami i stanami. Kolejne funkcje składacie z gotowych elementów, więc produkt rośnie spójnie, a część pracy może przejąć Wasz zespół. ### Dokumentacja dla programistów Opis zachowania elementów, ruch, grafiki i pliki do wdrożenia. Programiści znajdą w niej odpowiedzi na większość pytań, a na resztę odpowiadamy przy wdrożeniu. ## Nasz proces Pracujemy etapami i według harmonogramu, więc zawsze wiecie, co robimy, dlaczego i kiedy. Po każdym etapie pokazujemy, co powstało. 01 / 05 ###### Warsztaty i research Zbieramy informacje o użytkownikach, rynku i konkurencji. Poznajemy Waszych klientów od podszewki, ich potrzeby i to, co dziś im przeszkadza, a do tego ryzyka dla Waszego biznesu. Na tym opiera się wszystko, co dzieje się dalej. 02 / 05 ###### Cel i zakres Na podstawie zebranych danych ustalamy, czego naprawdę potrzebują użytkownicy i jakie cele biznesowe ma spełnić produkt. Tu zapadają najważniejsze decyzje, więc podejmujemy je razem z Wami i na danych. 03 / 05 ###### Ścieżki i architektura Rozpisujemy ścieżki użytkowników, dobieramy funkcje, układamy architekturę informacji i treści. Każdą decyzję uzasadniamy, więc zawsze wiecie, skąd się wzięła. 04 / 05 ###### Prototyp i testy Produkt nabiera formy. Składamy prototyp, dajemy go do rąk Wam i użytkownikom i poprawiamy to, na czym się zatrzymują. Idziemy małymi, pewnymi krokami, aż wszystko działa tak, jak powinno. 05 / 05 ###### Wdrożenie Projekt trafia do programistów razem z opisem zachowania elementów i plikami do wdrożenia. Odpowiadamy na ich pytania i pilnujemy detali, a że wszystko sprawdziliśmy wcześniej, przy programowaniu zostają już tylko drobne poprawki. 01 / 05 ###### Warsztaty i research Zbieramy informacje o użytkownikach, rynku i konkurencji. Poznajemy Waszych klientów od podszewki, ich potrzeby i to, co dziś im przeszkadza, a do tego ryzyka dla Waszego biznesu. Na tym opiera się wszystko, co dzieje się dalej. 02 / 05 ###### Cel i zakres Na podstawie zebranych danych ustalamy, czego naprawdę potrzebują użytkownicy i jakie cele biznesowe ma spełnić produkt. Tu zapadają najważniejsze decyzje, więc podejmujemy je razem z Wami i na danych. 03 / 05 ###### Ścieżki i architektura Rozpisujemy ścieżki użytkowników, dobieramy funkcje, układamy architekturę informacji i treści. Każdą decyzję uzasadniamy, więc zawsze wiecie, skąd się wzięła. 04 / 05 ###### Prototyp i testy Produkt nabiera formy. Składamy prototyp, dajemy go do rąk Wam i użytkownikom i poprawiamy to, na czym się zatrzymują. Idziemy małymi, pewnymi krokami, aż wszystko działa tak, jak powinno. 05 / 05 ###### Wdrożenie Projekt trafia do programistów razem z opisem zachowania elementów i plikami do wdrożenia. Odpowiadamy na ich pytania i pilnujemy detali, a że wszystko sprawdziliśmy wcześniej, przy programowaniu zostają już tylko drobne poprawki. ## Porozmawiajmy o Twojej marce. Sprawdźmy, czego potrzebujesz i od czego warto zacząć. 30 MINUT · BEZ ZOBOWIĄZAŃ [Umów bezpłatną konsultację](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut) [Poproś o wycenę](https://fluostudio.pl/kontakt/) WOLISZ ZADZWONIĆ? [+48 726 220 596](tel:+48726220596) ## Inne usługi ###### Sprawdźcie, co jeszcze możemy dla Was zrobić Zobacz wszystkie 01 / 03 ###### [Projektowanie graficzne](https://fluostudio.pl/uslugi/projektowanie-graficzne/) [Prezentacje](https://fluostudio.pl/uslugi/projektowanie-graficzne/prezentacje/) [Ebooki](https://fluostudio.pl/uslugi/projektowanie-graficzne/ebooki/) [Materiały reklamowe](https://fluostudio.pl/uslugi/branding/materialy-reklamowe-i-wizerunkowe/) 02 / 03 ###### [Strony www](https://fluostudio.pl/uslugi/strony-www/) [Strona firmowa](https://fluostudio.pl/uslugi/strony-www/strona-firmowa/) [Landing page](https://fluostudio.pl/uslugi/strony-www/landing-page/) [Strona z konfiguratorem](https://fluostudio.pl/uslugi/strony-www/strona-z-konfiguratorem/) 03 / 03 ###### [Branding i rebranding](https://fluostudio.pl/uslugi/branding/) [Strategia brandingowa](https://fluostudio.pl/uslugi/branding/strategia-brandingowa/) [Klucz wizualny marki](https://fluostudio.pl/uslugi/branding/klucz-wizualny-marki/) [Brandbook](https://fluostudio.pl/uslugi/branding/brandbook/) ## Projekty z tą usługą Widok Duże kadry Siatka - [Overmax Projekt UX/UI sklepu Overmax: auta RC w filmowych ujęciach, dopracowana karta produktu, menu kategorii i test, który dobiera model.](https://fluostudio.pl/projekty/overmax/) - [Vee Zaprojektowaliśmy markę Vee z submarkami, stronę vee.ai, aplikacje webowe i materiały na targi, a dla myvee identyfikację i salon.](https://fluostudio.pl/projekty/vee/) - [Nowa Stomatologia Strona krakowskiej kliniki, która umawia na wizytę w dwóch kliknięciach, rozwijana przez cztery lata.](https://fluostudio.pl/projekty/nowa-stomatologia/) - [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.](https://fluostudio.pl/projekty/porta-drzwi/) - [Mily Group Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.](https://fluostudio.pl/projekty/mily-group/) - [Grupa Dawtona Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.](https://fluostudio.pl/projekty/dawtona/) - [Itodi Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.](https://fluostudio.pl/projekty/itodi/) - [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.](https://fluostudio.pl/projekty/designoptyk/) - [Fundacja MultiSport Identyfikacja z design systemem w Figmie, strona zgodna z WCAG i duet brand hero, który zachęca do ruchu.](https://fluostudio.pl/projekty/fundacja-multisport/) - [Zippy Tail Zbudowaliśmy markę Zippy Tail od zera: nazwę, strategię, etykiety ośmiu suplementów dla psów i kotów, paczkę i projekt sklepu.](https://fluostudio.pl/projekty/zippy-tail/) - [Intima Clinic Sześć marek medycznych w jednej grupie. Warsztaty, nazwy, identyfikacja, oznakowanie placówki, druki, animacje i strona intimaclinic.pl.](https://fluostudio.pl/projekty/intima-clinic/) - [PolTREG Rebranding spółki biotechnologicznej z GPW, strona poltreg.bio dla pacjentów, inwestorów i partnerów oraz stała obsługa.](https://fluostudio.pl/projekty/poltreg/) ## Z bloga [Wszystkie wpisy](https://fluostudio.pl/blog/) - [9 minut czytania Product Design – czyli co? Czym jest Product Design, jak przebiegają fazy Double Diamond od badań po prototyp i MVP oraz jakich narzędzi używa się na każdym etapie. Czytaj](https://fluostudio.pl/product-design-czyli-co/) - [8 minut czytania Dlaczego UX i branding muszą iść w parze? Dlaczego spójność UX i brandingu buduje zaufanie, cztery kroki ich łączenia, od systemu projektowego po wspólny zespół, oraz przykłady Netflixa i Slacka. Czytaj](https://fluostudio.pl/dlaczego-ux-i-branding-musza-isc-w-parze/) - [Ponad 15 minut czytania Jak projektować aplikację, która przetrwa upływ czasu? Co decyduje o długim życiu aplikacji: badanie potrzeb, design thinking, prototypy i testy, modułowa architektura, bezpieczeństwo i aktualizacje. Czytaj](https://fluostudio.pl/jak-projektowac-aplikacje-ktora-przetrwa-uplyw-czasu/) ## Ze słownika pojęć [Wszystkie hasła](https://fluostudio.pl/baza-wiedzy/slownik/) - [Product design](https://fluostudio.pl/baza-wiedzy/slownik/product-design/)