--- title: "Aplikacje webowe dla firm: portale, panele i narzędzia" description: "Projektujemy i programujemy aplikacje webowe dla firm: portale dla partnerów, panele klienta, konfiguratory i narzędzia, które zastępują arkusze i maile." url: https://fluostudio.pl/uslugi/product-design/aplikacje-webowe/ --- # Aplikacje webowe zamiast arkuszy i maili. Projektujemy i programujemy portale dla partnerów, panele klienta, konfiguratory i narzędzia dla działów. Zaczynamy od procesu, który dziś krąży w arkuszach i mailach, a kończymy na aplikacji, w której każdy widzi, co ma zrobić dalej. [Porozmawiajmy o Waszej aplikacji](https://fluostudio.pl/kontakt/) Jak arkusz zmienia się w aplikację? 01 / 04 Acer UK Portal dla partnerów [Zobacz projekt](https://fluostudio.pl/projekty/acer/) 01 Podejście ## Co robimy, aby aplikacja przyjęła się w firmie? Aplikacja, z której zespół po cichu wraca do arkusza, nic nie zmienia. Dlatego projektujemy ją razem z ludźmi, którzy będą w niej pracować. 1. ### Proces Zaczynamy od tego, jak praca idzie dziś: kto co wpisuje, komu przekazuje i gdzie sprawa czeka. Zarząd wie, jak proces ma wyglądać, a zespół wie, jak wygląda naprawdę, więc rozmawiamy z jednymi i drugimi. 2. ### Role Każdy widzi swoje: handlowiec swoich klientów, kierownik cały zespół, partner tylko własne zamówienia. Uprawnienia ustalamy na początku, bo dopisywane na końcu potrafią przewrócić pół projektu. 3. ### Najczęstsze zadanie To, co ktoś robi kilkadziesiąt razy dziennie, musi iść najszybciej. Rzadkie funkcje mogą poczekać piętro niżej. 4. ### Dane Sprawdzamy, skąd aplikacja weźmie dane i dokąd je odda: do programu magazynowego, CRM-u, sklepu. Dla [Design Optyk](https://fluostudio.pl/projekty/designoptyk/) napisaliśmy aplikację, która czyta stany z programu magazynowego w salonach i przekazuje je do sklepu. 5. ### Makieta Najpierw klikalna [makieta](https://fluostudio.pl/baza-wiedzy/slownik/makieta/) na prawdziwych danych z Waszego arkusza. Pokazujemy ją ludziom, którzy będą z aplikacji korzystać, zanim ktokolwiek napisze kod. 6. ### Stany Projektujemy też to, czego nie widać na prezentacji: pustą listę, brak uprawnień, błąd importu i sto wierszy zamiast pięciu. 7. ### Kod Programujemy sami albo oddajemy projekt Waszym programistom razem ze specyfikacją i [design systemem](https://fluostudio.pl/baza-wiedzy/slownik/design-system/). Przy wdrożeniu odpowiadamy na ich pytania. 8. ### Rozwój Pierwsza wersja ma to, bez czego proces nie ruszy. Dalej idziemy małymi, pewnymi krokami i dokładamy funkcje, gdy widać, jak ludzie z niej korzystają. Tak budujemy też [MVP](https://fluostudio.pl/uslugi/product-design/mvp/) nowych produktów. Naszym celem są aplikacje, po których wdrożeniu **nikt nie szuka ostatniej wersji arkusza.** 02 Co budujemy ## Jaką pracę ma przejąć Wasza aplikacja? Każda z tych aplikacji zdejmuje z ludzi inną robotę, więc każdą projektujemy trochę inaczej. Portal dla partnerów Partnerzy i dystrybutorzy sami biorą, czego potrzebują Co robimy Materiały marki, zdjęcia produktów, prezentacje i cenniki w jednym miejscu, z wyszukiwarką i pobieraniem wielu plików naraz. Zaczynamy od próśb, które dziś trafiają do Was mailem, i robimy z nich menu portalu. Co dostajecie - Podział materiałów i uprawnień - Wyszukiwarka i filtry - Pobieranie wielu plików naraz - Panel do dodawania materiałów Acer UK [Partner Marketing Hub: partnerzy sami pobierają materiały marki, które wcześniej ktoś wysyłał im ręcznie](https://fluostudio.pl/projekty/acer/) Panel klienta Zamówienia, dokumenty i oferty po zalogowaniu Co robimy Klient loguje się i sam sprawdza status zamówienia, pobiera dokument albo wraca do swojej oferty. Zaczynamy od pytań, z którymi klienci najczęściej do Was dzwonią, bo to one trafiają na pierwszy ekran panelu. Co dostajecie - Logowanie i role - Lista zamówień ze statusami - Dokumenty do pobrania - Powiadomienia o kolejnych krokach HomeKoncept [Serwis z panelem klienta (kupione projekty, kosztorysy, oferty i rabaty) i strefą partnera, zaprojektowany dla programistów klienta](https://fluostudio.pl/projekty/homekoncept/) Narzędzie dla działu Proces z arkuszy i maili w jednym miejscu Co robimy Zgłoszenia, reklamacje, zamówienia wewnętrzne, akceptacje. Narzędzie prowadzi każdego przez te same kroki, pokazuje, na kim sprawa czeka, i samo przypomina o terminach. Dla [Vee](https://fluostudio.pl/projekty/vee/) zaprojektowaliśmy i zaprogramowaliśmy aplikacje dla jej klientów i narzędzia dla jej zespołu. Jak arkusz zmienia się w aplikację Co dostajecie - Mapa ról i kroków - Tabele, formularze i statusy - Akceptacje i przypomnienia - Raporty i eksport danych Podobne realizacje - [Vee](https://fluostudio.pl/projekty/vee/) Konfigurator i kalkulator Klient sam składa produkt albo liczy spłatę Co robimy Klient wybiera wymiar, materiał albo wariant i od razu widzi wynik. Na końcu czeka koszyk albo zapytanie z pełną konfiguracją, więc handlowiec nie zaczyna rozmowy od zera. Dla serwisów Grupy BEST w Bułgarii i Rumunii zaprojektowaliśmy kalkulator spłaty. Co dostajecie - Kroki i logika wyborów - Podgląd albo wynik na żywo - Podpowiedzi przy opcjach - Zapytanie z gotową konfiguracją Biurokoncept [Konfigurator pCon na karcie produktu: klient sam składa biurko, a handlowiec dostaje zapytanie z gotową konfiguracją](https://fluostudio.pl/projekty/biurokoncept/) [Więcej o stronach z konfiguratorem](https://fluostudio.pl/uslugi/strony-www/strona-z-konfiguratorem/) Podobne realizacje - [Itodi](https://fluostudio.pl/projekty/itodi/) - [Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) Integracja systemów Dane same przechodzą z programu do programu Co robimy Gdy te same dane ktoś wpisuje ręcznie w dwóch miejscach, piszemy aplikację, która robi to za niego: czyta stany, zamówienia albo ceny z jednego systemu i przekazuje je do drugiego. Pilnuje też błędów i mówi, gdy coś się nie zgadza. Co dostajecie - Mapa danych i źródeł - Aplikacja, która łączy systemy - Powiadomienia o błędach - Historia przesłanych danych Design Optyk [Sklep zna stany salonów: sztuka sprzedana online czeka w salonie, a sześć z siedmiu salonów jest połączonych z magazynem sklepu](https://fluostudio.pl/projekty/designoptyk/) Automatyzacja z pomocą AI Powtarzalna robota przy setkach produktów Co robimy Opisy, kategorie i cechy setek produktów uzupełniamy z pomocą AI, a każdy wynik sprawdza człowiek. W sklepie [Design Optyk](https://fluostudio.pl/projekty/designoptyk/) opisaliśmy tak ponad 500 oprawek, a dziewięć filtrów ustalonych z klientem zaczęło naprawdę filtrować. Co dostajecie - Reguły i słowniki cech - Automat do opisu danych - Ręczne sprawdzenie wyników - Import do sklepu albo systemu Sytuacje, od których zaczynamy ## Z czym przychodzą do nas firmy [Wszystkie sytuacje](https://fluostudio.pl/wyzwania/) - [„Partnerzy co chwilę proszą mailem o logo, zdjęcia i prezentacje, a ktoś u nas wysyła je ręcznie.” Projektujemy portal, w którym partnerzy sami znajdują i pobierają materiały, z wyszukiwarką, filtrami i pobieraniem wielu plików naraz. Nowe pliki zespół dodaje w panelu. Portal dla partnerów Acer UK](https://fluostudio.pl/projekty/acer/) - [„Ważny proces działa u nas na arkuszach i mailach, a każdy dział prowadzi go po swojemu.” Rozpisujemy proces z osobami, które pracują w nim na co dzień, i dopiero potem projektujemy ekrany. Aplikacja prowadzi każdego przez te same kroki. Aplikacje webowe dla Vee](https://fluostudio.pl/projekty/vee/) - [„Klienci dzwonią, żeby sprawdzić status zamówienia albo dostać dokument, który mogliby pobrać sami.” Projektujemy panel klienta, w którym po zalogowaniu widać zamówienia, dokumenty i kolejne kroki. Zaczynamy od pytań, z którymi klienci dzwonią do Was najczęściej. Projekt serwisu HomeKoncept](https://fluostudio.pl/projekty/homekoncept/) 03 Od arkusza do aplikacji ## Jak arkusz reklamacji zamienia się w aplikację Weźmy reklamacje od dystrybutorów u producenta mebli. Dziś krążą w arkuszu i w mailach, a każdy dział prowadzi je trochę po swojemu. Najpierw rozpisujemy proces, potem projektujemy aplikację, która prowadzi każdego przez te same kroki. Etap projektu Arkusz Proces Aplikacja ### Najpierw arkusz, taki jak jest Zaczynamy od pliku, w którym proces działa dziś. Najwięcej mówią w nim kolory, komentarze i dopiski na marginesie, bo pokazują, czego ludziom brakuje. ### Potem proces Z rozmów z działami rozpisujemy kroki, role i miejsca, w których sprawa dziś stoi. Każdy krok dostaje właściciela, termin i warunek przejścia dalej. ### Na końcu aplikacja Te same zgłoszenia w jednym miejscu, ze statusami, terminami i przyciskiem następnego kroku. Spróbujcie zatwierdzić wymianę w zaznaczonym zgłoszeniu. W tym miesiącu **23** zgłoszeń Komoda K-80: rysa na froncie 1. „Kto to ma?” W arkuszu W kolumnie „Kto” stoi imię ze znakiem zapytania albo nic. W aplikacji Każde zgłoszenie ma właściciela i termin, a lista „Czeka na mnie” pokazuje, co jest do zrobienia dziś. 2. „Na jakim to jest etapie?” W arkuszu Status każdy wpisuje po swojemu: „czeka”, „w toku”, „ok?”. W aplikacji Statusy z jednej listy, w kolejności procesu. Zmienia je przycisk następnego kroku, więc na „ok?” nie ma już miejsca. 3. „Gdzie są zdjęcia?” W arkuszu W mailu od Ani, jeśli ktoś go jeszcze ma. W aplikacji Zdjęcia i dokumenty są przy zgłoszeniu. Dystrybutor dodaje je sam, w formularzu reklamacji. 4. „Kto to zmienił?” W arkuszu Plik krąży w mailach w kilku wersjach, a każda jest „final”. W aplikacji Jedna lista dla wszystkich, a przy każdym zgłoszeniu historia: kto, co i kiedy zmienił. 5. „Ile ich było w tym miesiącu?” W arkuszu Ktoś liczy ręcznie przed zebraniem. W aplikacji Licznik liczy się sam: zgłoszenia według statusu, produktu i dystrybutora. W praktyce Tak zaczęliśmy Partner Marketing Hub dla Acer UK. Każdą prośbę partnera o logo, zdjęcie produktu czy prezentację ktoś w Acer UK obsługiwał ręcznie. Na warsztatach zebraliśmy, z czym jest najwięcej pracy, a z tego powstały cztery działy portalu, wyszukiwarka i pobieranie wielu plików naraz. [Zobacz projekt Acer UK](https://fluostudio.pl/projekty/acer/) ![Partner Marketing Hub Acer UK na ośmiu ekranach telefonów: strona główna, produkty, materiały sprzedażowe i zdjęcia lifestyle](https://fluostudio.pl/media/projekty/acer/pelne-hub-telefony.webp) [Acer UK: Partner Marketing Hub, z którego partnerzy sami pobierają materiały marki](https://fluostudio.pl/projekty/acer/) 04 Proces ## Od warsztatu do aplikacji, w której się pracuje Pracujemy etapami, według harmonogramu, który ustalamy przed startem, i po każdym etapie pokazujemy, co powstało. Możecie zacząć od samego projektu i dołożyć programowanie później albo od razu wziąć całość. Przy mniejszych zleceniach łączymy część etapów. 1. ### Etap 1: Warsztaty i mapa procesu Spisujemy, kto bierze udział w procesie, co wpisuje, komu przekazuje i gdzie sprawa dziś czeka. Rozmawiamy z Wami, z zespołem, który pracuje w tym na co dzień, i z działem IT, który będzie aplikację utrzymywać. Co dostajecie - Mapa procesu i ról - Lista danych i systemów do połączenia 2. ### Etap 2: Widoki, role i uprawnienia Układamy, z jakich widoków składa się aplikacja, kto co widzi i zatwierdza, a co dzieje się samo. Tutaj zapadają decyzje, które najtrudniej zmienić później. Co dostajecie - Mapa widoków i uprawnień - Ścieżki najważniejszych zadań 3. ### Etap 3: Klikalna makieta Najważniejsze ścieżki na prawdziwych danych z Waszych arkuszy, jeszcze bez kolorów. Przechodzą ją osoby, które będą z aplikacji korzystać, i dopiero po ich uwagach zamykamy zakres pierwszej wersji. Co dostajecie - Klikalna makieta - Zakres pierwszej wersji 4. ### Etap 4: Interfejs i design system Kierunek pokazujemy na widoku, w którym ludzie spędzą najwięcej czasu, zwykle na liście z filtrami. Z powtarzalnych elementów powstaje biblioteka komponentów ze stanami, z której biorą kolejne funkcje. Co dostajecie - Widoki na komputer i telefon - Design system ze stanami 5. ### Etap 5: Programowanie i integracje Programujemy aplikację i łączymy ją z Waszymi systemami albo oddajemy projekt Waszym programistom razem ze specyfikacją i odpowiadamy na ich pytania. Przed startem przenosimy dane z arkuszy. Co dostajecie - Działająca aplikacja albo specyfikacja - Dane przeniesione z arkuszy 6. ### Etap 6: Wdrożenie i rozwój Uruchamiamy aplikację, uczymy zespół i nagrywamy instrukcje. Po starcie zbieramy uwagi i dokładamy kolejne funkcje, bo prawdziwa lista potrzeb powstaje dopiero wtedy, gdy ludzie zaczną z niej korzystać. Co dostajecie - Szkolenie i instrukcje wideo - Plan kolejnych wersji ![Tablet z kartą projektu domu w serwisie HomeKoncept, obok rysik.](https://fluostudio.pl/media/projekty/homekoncept/hk-serwis-tablet.webp) [HomeKoncept: serwis z wyszukiwarką, porównywarką, panelem klienta i strefą partnera](https://fluostudio.pl/projekty/homekoncept/) 05 Pytania ## Najczęstsze pytania Czym aplikacja webowa różni się od strony internetowej? Na stronie się czyta, a w aplikacji pracuje: loguje, wpisuje, zatwierdza i wraca do tego, co zostało do zrobienia. Aplikacja webowa działa w przeglądarce, więc nikt nie musi niczego instalować, a nowa wersja trafia do wszystkich naraz. Więcej piszemy w haśle [aplikacja webowa](https://fluostudio.pl/baza-wiedzy/slownik/aplikacja-webowa/). Od czego zacząć, jeśli proces działa dziś w arkuszu? Od tego arkusza. Pokazuje, jakie dane zbieracie, kto je uzupełnia i co ludzie dopisują na marginesie, bo czegoś im brakuje. Na tej podstawie rysujemy pierwszą makietę i od razu pokazujemy ją zespołowi. Czy aplikacja połączy się z naszymi systemami? Zwykle tak. Na starcie sprawdzamy, co Wasze systemy udostępniają i w jakim formacie. Dla [Design Optyk](https://fluostudio.pl/projekty/designoptyk/) aplikacja czyta stany z programu magazynowego w salonach, a zamówienia, ceny i nowe produkty idą do sklepu przez BaseLinker. Programujecie sami czy tylko projektujecie? Jedno i drugie. Dla [Vee](https://fluostudio.pl/projekty/vee/) zaprojektowaliśmy i zaprogramowaliśmy aplikacje webowe, wśród nich panel Vee Suite do potwierdzania wizyt w przychodniach. Serwis [HomeKoncept](https://fluostudio.pl/projekty/homekoncept/) zaprojektowaliśmy dla programistów klienta, z widokami na dwie szerokości ekranu i na telefon. Ile funkcji powinna mieć pierwsza wersja? Tyle, żeby proces ruszył bez arkusza. Resztę układamy w plan rozwoju i dokładamy, gdy widać, z czego ludzie naprawdę korzystają. Więcej piszemy przy [MVP](https://fluostudio.pl/uslugi/product-design/mvp/). Kto będzie dodawał treści i użytkowników? Wasz zespół, w panelu. Pokazujemy, jak to robić, i nagrywamy instrukcje. [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) dostał nagraną instrukcję, jak dodać produkt i podpiąć do niego konfigurator, bez programisty, a do panelu BEST TFI nagraliśmy cztery instrukcje wideo. Do rozbudowy aplikacji możemy wrócić razem w każdej chwili. Jak dbacie o bezpieczeństwo danych? Role i uprawnienia projektujemy od pierwszej makiety: kto widzi jakie dane, kto może je zmieniać i co zostaje w historii. Serwer, kopie zapasowe i sposób logowania ustalamy z Waszym działem IT, zanim zaczniemy programować. Czy aplikacja zadziała na telefonie? Tak, projektujemy widoki na komputer i telefon. Na telefonie na pierwszy plan wychodzi to, co ktoś robi w terenie albo w biegu, na przykład sprawdzenie statusu czy zatwierdzenie zgłoszenia.